/* Hallmark · genre: editorial · macrostructure: Marquee Hero (preserved) · theme: custom
 * vibe: "hârtie caldă de laborator, două teste colorate"
 * paper-band: light (default, dark la comutare) · display-style: weighty-sans · accent-hue: neutral-graphite
 * accent: home grafit oklch(30% 0.022 45) · full oklch(58% 0.170 45) · pre-op oklch(50% 0.150 245)
 * polish: HP3 Cursor-spotlight (nivel de pagină, în .ambient fix · fallback reduced-motion)
 * enrichment: E-icons — sprite SVG inline (elice de ADN + profil de expresie), currentColor
 * nav: N5 Floating pill (+ theme toggle) · footer: Ft5 Statement
 * tokens: tokens.css · zero culori inline · light-dark() peste color-scheme
 */

/* ── reset & root ─────────────────────────────────────────── */

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  /* 100%, nu 16px: valoarea fixa anula marimea de font aleasa in browser, iar
   * toti tokenii de text sunt in rem, deci se raportau la ea. Cine isi mareste
   * fontul din setari nu vedea nicio diferenta pe site. Implicit tot 16px. */
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  position: relative;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  /* fără background aici: html pictează hârtia, iar .ambient (z-index: -2)
   * trebuie să stea deasupra ei, nu dedesubt */
  font-feature-settings: "ss01", "cv11";
  font-variant-ligatures: contextual;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* tabular-numbers utility */
.tnum { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* skip link */
.skip {
  position: absolute;
  top: -40px;
  left: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  z-index: 100;
}
.skip:focus { top: var(--space-md); }

/* ── ambient blooms (atmospheric backdrop) ───────────────── */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

/* Fara neclaritate de tip `filter`. Blocul asta e un cerc de 60vmax — ~1520px
 * reali la dpr 3 — iar o gaussiana de 90px peste el costa ~830ms de rasterizare
 * de fiecare data cand pagina se recompune. Masurat pe iPhone: oprind doar
 * proprietatea `filter`, blocajele dispar complet, de la 827ms la zero.
 *
 * Neclaritatea era oricum redundanta: continutul e un `radial-gradient` care
 * se stinge deja lin. Aceeasi moliciune vine din opririle gradientului, fara
 * niciun filtru. `will-change` a plecat odata cu ea: promova un strat care nu
 * se mai anima, iar peste filtru chiar dubla costul (1760ms in test). */
.bloom {
  position: absolute;
  border-radius: 50%;
  opacity: var(--bloom-opacity);
}

.bloom--1 {
  top: -10vmax;
  left: -8vmax;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(
    closest-side,
    color-mix(in oklch, var(--color-bloom-1) 50%, transparent) 0%,
    color-mix(in oklch, var(--color-bloom-1) 34%, transparent) 38%,
    color-mix(in oklch, var(--color-bloom-1) 13%, transparent) 68%,
    transparent 100%
  );
}

.bloom--2 {
  bottom: -20vmax;
  right: -15vmax;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(
    closest-side,
    color-mix(in oklch, var(--color-bloom-2) 38%, transparent) 0%,
    color-mix(in oklch, var(--color-bloom-2) 26%, transparent) 38%,
    color-mix(in oklch, var(--color-bloom-2) 10%, transparent) 68%,
    transparent 100%
  );
}

.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 200px 200px;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}

/* ── nav · N5 floating pill ──────────────────────────────── */

.nav {
  position: sticky;
  top: var(--space-md);
  z-index: 40;
  padding: 0 var(--page-gutter);
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  position: relative;   /* reper pentru linkurile ancorate la centru */
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background: color-mix(in oklch, var(--color-paper) var(--glass-paper-up), transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-accent) 32%, var(--color-rule-strong));
  box-shadow:
    0 12px 32px -10px var(--color-shadow),
    0 0 0 1px color-mix(in oklch, var(--color-accent) 12%, transparent),
    0 0 60px -8px color-mix(in oklch, var(--color-accent) 28%, transparent);
  border-radius: var(--radius-pill);
  /* max-width poate cere mai puțin decât încape: min-width câștigă mereu
   * în fața lui, deci pastila se strânge exact până unde mai încap butoanele */
  min-width: min-content;
  transition: max-width var(--dur-slow) var(--ease-out);
  will-change: max-width;
}

/* Singurul lucru care se schimbă la scroll: lățimea. Cât de jos poate
 * coborî nu decide numărul de aici, ci `min-width: min-content`, care
 * câștigă mereu în fața lui max-width: bara se strânge exact până unde mai
 * încap numele, linkurile și butoanele. 69rem e ținta, nu o promisiune. */
.nav[data-state="scrolled"] .nav__inner { max-width: 69rem; }.nav__links a {
  transition:
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.nav__links {
  transition:
    gap var(--dur-base) var(--ease-out),
    font-size var(--dur-base) var(--ease-out);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.035em;
  color: var(--color-ink);
  white-space: nowrap;
  line-height: 1;
}

.nav__links {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.nav__links a {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}

.nav__links a[aria-current="page"] { color: var(--color-ink); }
@media (hover: hover) {
  .nav__links a:hover { color: var(--color-ink); }
}
.nav__links a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.nav__test {
  font-weight: 600;
}
.nav__test--full { color: var(--color-full-text); }
.nav__test--preop { color: var(--color-preop-text); }
/* specificitate peste `.nav__links a:hover` (0,2,1), care altfel duce
 * testele la cerneală la hover — cazul aria-current era deja tratat asa,
 * hover-ul fusese uitat */
.nav__links a.nav__test--full[aria-current="page"] {
  color: var(--color-full-text);
}
@media (hover: hover) {
  .nav__links a.nav__test--full:hover {
    color: var(--color-full-text);
  }
}
.nav__links a.nav__test--preop[aria-current="page"] {
  color: var(--color-preop-text);
}
@media (hover: hover) {
  .nav__links a.nav__test--preop:hover {
    color: var(--color-preop-text);
  }
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav__contact {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .nav__contact:hover {
    transform: translateY(-1px);
    background: var(--color-paper-3);
    border-color: var(--color-ink-3);
  }
}
.nav__contact:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .nav__cta:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink));
  }
}
.nav__cta:active { transform: translateY(0); }
.nav__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}


/* ── hero · Marquee Hero + HP3 cursor spotlight ──────────── */

.hero {
  position: relative;
  isolation: isolate;
  /* Podeaua de 34rem e buna pe ecrane obisnuite, dar pe o fereastra scunda
   * (jumatate de ecran, de exemplu) cere mai mult decat exista, si atunci
   * nimic din ce urmeaza nu mai incape. `min` o tine sub inaltimea ferestrei. */
  min-height: min(clamp(34rem, 84dvh, 52rem), 88dvh);
  padding: var(--space-3xl) var(--page-gutter) var(--space-4xl);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-xl);
  overflow: clip;
  text-align: center;
  place-items: center;
}

/* Spotul urmărește cursorul pe toată pagina, nu doar în hero.
 * Stă în .ambient (fixed, inset 0), deci coordonatele sunt cele din viewport
 * și nu mai există muchie acolo unde se termină o secțiune. */
.spot {
  position: absolute;
  inset: 0;
  background: var(--spot-imagine);
}

/* marca stă în fundal, ruptă de flux: nu împinge nimic, nu se numără în grilă */
.mark--bg {
  position: absolute;
  z-index: 0;
  width: clamp(9rem, 15vw, 16rem);
  height: clamp(9rem, 15vw, 16rem);
  max-width: none;
  opacity: 0.13;
  pointer-events: none;
  /* UA taie path-urile la viewBox; elicea rotită iese din cutie */
  overflow: visible;
}

.mark--bg--right { right: 4%; top: 14%;  transform: rotate(16deg); }
.mark--bg--left  { left:  4%; top: 18%;  transform: rotate(-19deg); }

/* Al doilea marcaj al fiecarui slide. Motivul nu e decorativ: sectiunile de
 * caz au ajuns la 1300-1500px, iar un singur filigran, asezat la 15% din
 * inaltime, ramane in afara ecranului cat citesti — fundalul pare gol. Al
 * doilea sta jos, in coltul opus, cu alta glifa, deci in orice moment al
 * derularii se vede cel putin unul.
 *
 * `top: auto` e obligatoriu: `.mark--bg` nu-l pune, dar regulile de mai jos,
 * pe sectiuni, pot muta marcajele, si fara el ancorarea de jos s-ar pierde. */
.mark--bg--jos-dreapta { right: 7%; bottom: 9%;  top: auto; }
.mark--bg--jos-stanga  { left:  7%; bottom: 11%; top: auto; }

/* în afara eroilor e doar un filigran: mic, întreg, jos în pagină */
.why--slide .mark--bg,
.format .mark--bg,
.rsvp--slide .mark--bg {
  width: clamp(9rem, 15vw, 16rem);
  height: clamp(9rem, 15vw, 16rem);
  opacity: 0.09;
  top: auto;
  bottom: 12%;
}

.why--slide .mark--bg--right,
.format .mark--bg--right,
.rsvp--slide .mark--bg--right { right: 6%; transform: rotate(24deg); }

.why--slide .mark--bg--left,
.format .mark--bg--left,
.rsvp--slide .mark--bg--left { left: 6%; transform: rotate(-26deg); }

/* Al doilea marcaj e mai mic decat primul, ca sa nu se citeasca drept geaman.
 * Selectorul repeta familiile de sectiuni pentru ca regulile lor de latime au
 * aceeasi specificitate; ca sa castige, trebuie sa vina dupa ele. */
.hero .mark--bg--secund,
.why .mark--bg--secund,
.format .mark--bg--secund,
.rsvp .mark--bg--secund,
.faq .mark--bg--secund {
  width: clamp(6rem, 9vw, 10rem);
  height: clamp(6rem, 9vw, 10rem);
}

/* pe eroii de slide e mai discretă, ca titlul să rămână erou */
.hero--slide .mark--bg { opacity: 0.11; width: clamp(9rem, 14vw, 15rem); height: clamp(9rem, 14vw, 15rem); }

/* conținutul stă peste ea */
.hero__copy, .hero__rail, .hero__meta { position: relative; z-index: 1; }

.hero__rail {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink-3);
  text-transform: uppercase;
}

.hero__copy {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  max-width: 40rem;
}

.hero__display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.2vw + 0.6rem, 4.35rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Titlurile au două sau trei rânduri, după pagină. Rezervăm trei și
   * centrăm în ele, ca tot ce urmează — lede, butoane, fișa de sub ele —
   * să stea la aceeași înălțime pe toate cele trei pagini. */
  justify-content: center;
  min-height: 3.15em;              /* 3 × 1.05, interlinia de mai sus */
  text-align: center;
  max-width: 16ch;
  overflow-wrap: anywhere;
  min-width: 0;
}

.hero__lede {
  margin: 0;
  max-width: 38ch;
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: 1.45;
  /* Instrument Sans e mai ingust decat Inter: randul se reaseaza si lasa
     "noua." singur pe ultimul rand. `pretty` cere motorului sa evite orfanii. */
  text-wrap: pretty;
  /* la fel ca titlul: trei rânduri rezervate, textul centrat în ele */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 4.35em;              /* 3 × 1.45 */
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* aceeași lățime pentru toate butoanele din primul slide, ca perechea să
 * ocupe același loc indiferent de text — „Vezi testele" lângă
 * „Descarcă formularele" */
.hero__cta .cta {
  min-width: 14rem;
  justify-content: center;
}

/* Pe slide-urile celor doua teste, eticheta de sus e singurul loc unde scrie
 * clasa Bethesda inainte de titlu. In griul comun trecea neobservata, desi e
 * exact informatia dupa care omul isi da seama daca slide-ul il priveste.
 * Primeste culoarea testului, ca banda din scala si ca numele din navbar. */
.hero--full .hero__rail,
.hero--preop .hero__rail {
  color: var(--color-accent-text);
}

.hero--slide {
  min-height: clamp(28rem, 86dvh, 50rem);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.hero__line {
  display: block;
}

.hero__line em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: -0.02em;
  color: var(--color-accent-text);
  font-feature-settings: normal;
  padding-right: 0.06em;
}


.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 52rem;
  margin-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.hero__meta-cell {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  min-width: 0;
}

/* despărțitoare doar între celule, nu la capete */
.hero__meta-cell + .hero__meta-cell {
  border-left: var(--rule-hair) solid var(--color-rule);
}

.hero__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.hero__value {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 540;
  letter-spacing: -0.01em;
  /* spatiul din Instrument Sans e mai ingust decat in Inter, iar tracking-ul
     negativ il strange si mai mult: separatorul " · " ajunge lipit de cuvinte. */
  word-spacing: 0.14em;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* ── Hallmark · componenta „index de cazuri" ───────────────────────
 * macrostructure: Marquee Hero (pastrata) · theme: custom, existent
 * genre: editorial · motion: tint + arrow-advance (2 primitive)
 *
 * Un index tiparit, nu un rand de carduri: intrebarea e titlul randului,
 * testul sta in dreapta pe aceeasi linie, raspunsul dedesubt. Nicio cutie,
 * niciun fundal, doar fire orizontale, ca in cuprinsul unei carti.
 *
 * Gruparea nu are nevoie de chenar. Doua semne o spun:
 *   1. III si IV poarta acelasi nume de test in dreapta, in aceeasi culoare;
 *   2. firul dintre ele e retras, incepe dupa marginea din stanga, in timp ce
 *      firul dintre IV si V/VI taie tot randul. Asa se despart capitolele de
 *      subcapitole intr-un index tiparit, si se citeste fara sa fie explicat.
 */
.index-cazuri {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 60rem;
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-hair) solid var(--color-rule);
  text-align: left;
}

.rand {
  position: relative;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* Al doilea rand al aceluiasi test: firul de deasupra lui se retrage. Nu se
 * poate „scurta" o margine existenta, deci firul plin de deasupra e acoperit
 * cu culoarea hartiei si desenat din nou, mai scurt. */
.rand--continua::before {
  content: "";
  position: absolute;
  inset: calc(var(--rule-hair) * -1) 0 auto 0;
  height: var(--rule-hair);
  background: var(--color-paper);
}

.rand--continua::after {
  content: "";
  position: absolute;
  inset: calc(var(--rule-hair) * -1) 0 auto var(--retragere, 11rem);
  height: var(--rule-hair);
  background: var(--color-rule);
}

.rand__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-lg);
  row-gap: var(--space-2xs);
  padding: var(--space-md) var(--space-md);
  margin-inline: calc(var(--space-md) * -1);
  color: var(--color-accent-text);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}

.rand--full  { --color-accent-text: var(--color-full-text); }
.rand--preop { --color-accent-text: var(--color-preop-text); }

.rand__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  transition: color var(--dur-base) var(--ease-out);
}

.rand__test {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
  color: inherit;
}

.rand__test-text { border-bottom: 1px solid currentColor; }

.rand__arrow {
  width: 1em;
  height: 1em;
  transition: transform var(--dur-base) var(--ease-out);
}

.rand__a {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 62ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.5;
  text-wrap: pretty;
}

/* La hover randul se coloreaza in culoarea testului lui, dar cu masura:
 * o urma de accent in fundal, firul de jos care se intareste, intrebarea si
 * numele testului aprinse. Firul retras dintre III si IV e desenat de
 * pseudo-elementele lui `.rand`, deci ramane deasupra fundalului si nu-l
 * acopera nimic. */
@media (hover: hover) {
  .rand:hover .rand__link {
    background: color-mix(in oklab, var(--color-accent-text) 7%, transparent);
  }

  .rand:hover {
    border-bottom-color: color-mix(in oklab, var(--color-accent-text) 40%, var(--color-rule));
  }

  .rand:hover .rand__q { color: var(--color-accent-text); }

  /* sageata coboara, fiindca linkul duce la un slide de mai jos in pagina */
  .rand:hover .rand__arrow { transform: translateY(3px); }
}

.rand__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .rand__link,
  .rand__q,
  .rand__arrow { transition: none; }
}

/* Primul ecran trebuie sa incapa intreg: titlu si cele trei intrebari.
 *
 * Aveam un prag fix la 820px inaltime, si tocmai de aceea nu mergea: un
 * MacBook de 14 tolii are 830, deci cadea in afara pragului si ii lipseau 13
 * pixeli. Inaltimile nu vin in trepte, asa ca nici masurile n-au voie sa vina.
 *
 * Acum fiecare masura care ocupa inaltime urmareste continuu ecranul, cu
 * `dvh`: marginea de sus a hero-ului, titlul, distanta pana la index si
 * padding-ul randurilor. Pe ecran inalt raman valorile de dinainte, fiindca
 * `clamp` si `min` le tin acolo; pe unul scund se string singure, cat trebuie.
 * Titlul cedeaza primul: trei randuri la 70px sunt un sfert din tot ce se vede.
 */
@media (min-width: 48rem) {
  .hero {
    padding-top: clamp(var(--space-sm), 3.2dvh, var(--space-3xl));
  }

  .hero__display {
    font-size: min(clamp(2.25rem, 5.2vw + 0.6rem, 4.35rem), 7.7dvh);
  }

  .index-cazuri {
    margin-top: clamp(var(--space-2xs), 1.4dvh, var(--space-lg));
  }

  .rand__link {
    padding-block: clamp(var(--space-2xs), 1.35dvh, var(--space-md));
  }
}

/* Pe telefon numele testului coboara sub raspuns: pe aceeasi linie ar strivi
 * intrebarea in doua-trei cuvinte pe rand. Firul retras se scurteaza si el. */
/* Pe telefon indexul tiparit nu mai are sens: firele orizontale cer latime ca
 * sa se citeasca drept coloane, iar la 390px devin trei benzi lipite una de
 * alta. Aici forma potrivita e cea pe care site-ul o are deja peste tot —
 * cardul. Acelasi desen ca la `.route`: suprafata, margine subtire, colt
 * rotunjit, muchie colorata sus. Asa se vede din prima ca sunt trei lucruri
 * separate si ca fiecare se poate apasa, fara sa fie nevoie de hover. */
@media (max-width: 48rem) {
  .index-cazuri {
    display: grid;
    gap: var(--space-md);
    max-width: 34rem;
    border-top: 0;
  }

  /* firele si retragerea dintre III si IV sunt conventii de index tiparit:
   * intre carduri n-au ce spune */
  .rand { border-bottom: 0; }
  .rand--continua::before,
  .rand--continua::after { content: none; }

  .rand__link {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xs);
    margin: 0;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    background: var(--color-paper-2);
    border: var(--rule-hair) solid var(--color-rule);
    border-top: var(--rule-bold) solid var(--color-accent-text);
    border-radius: var(--radius-md);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .rand__link:active { transform: translateY(1px); }

  .rand__q { font-size: var(--text-lg); }

  .rand__a { order: 2; font-size: var(--text-sm); }

  .rand__test {
    order: 3;
    justify-self: start;
    margin-top: var(--space-2xs);
  }
}


/* valorile scurte, de tip cod, rămân pe cifre tabulare */
.hero__value.tnum {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── shared · section heads ──────────────────────────────── */

.section-head {
  max-width: var(--max-width);
  margin: 0 auto var(--space-2xl);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: var(--space-xs);
}

.section-eyebrow .num {
  color: var(--color-accent-text);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
}

.section-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
  max-width: 22ch;
  overflow-wrap: anywhere;
  min-width: 0;
}

.section-note {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

/* ── format band ─────────────────────────────────────────── */

.format {
  position: relative;
  padding: var(--space-3xl) var(--page-gutter) var(--space-3xl);
  border-block: var(--rule-hair) solid var(--color-rule);
  /* fără fundal propriu: altfel spotul de sub el se vede altfel decât pe restul paginii */
  background: transparent;
}

.format .section-head {
  margin-bottom: var(--space-2xl);
}

.format__schedule {
  list-style: none;
  margin: 0 auto var(--space-2xl);
  padding: 0;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
}

.format__row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(8rem, 16rem) 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  align-items: baseline;
}

.format__row:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

a.format__row {
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
a.format__row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.format__time {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.format__time small {
  font-size: 0.55em;
  color: var(--color-ink-3);
  margin-left: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.format__note {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ── shared cta ──────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  cursor: pointer;
  border: var(--rule-hair) solid transparent;
  letter-spacing: -0.01em;
}

.cta--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow:
    0 0 0 0 color-mix(in oklch, var(--color-accent) 0%, transparent),
    0 6px 28px -8px color-mix(in oklch, var(--color-accent) 50%, transparent);
}
@media (hover: hover) {
  .cta--primary:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink));
    box-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-accent) 18%, transparent),
      0 10px 36px -8px color-mix(in oklch, var(--color-accent) 65%, transparent);
  }
}
.cta--primary:active { transform: translateY(0); }
.cta--primary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
/* dezactivat = fără culoare de accent, nu accent palid */
.cta--primary[disabled] {
  background: var(--color-paper-4);
  color: var(--color-ink-3);
  box-shadow: none;
  pointer-events: none;
}
.cta--primary[data-state="loading"] { background: var(--color-paper-3); color: var(--color-ink-2); }
.cta--primary[data-state="success"] {
  background: var(--color-success);
  color: var(--color-paper);
}

.cta--lg { padding: var(--space-md) var(--space-xl); font-size: var(--text-md); }.nav__cta-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}@media (hover: hover) {
  .nav__cta:hover .nav__cta-arrow {
    transform: translateX(3px);
  }
}

/* ── why · pitch ─────────────────────────────────────────── */

.why {
  position: relative;
  padding: var(--space-4xl) var(--page-gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.why__body {
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-ink-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.why__lead {
  font-size: var(--text-xl);
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.why__body em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}

.why__signoff {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--space-md);
}

.why__signoff a {
  color: var(--color-accent-text);
  border-bottom: 1px dotted currentColor;
}
@media (hover: hover) {
  .why__signoff a:hover {
    color: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink));
  }
}

/* nota clientului de la finalul textelor: nu e o fraza din poveste, ci
 * conditia in care se citesc toate. Mai mica si mai stinsa decat corpul. */
.why__nota {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-3);
}

.why--slide,
.format--slide,
.faq--slide {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why--slide {
  align-items: center;
  text-align: center;
}

.why--slide .section-head {
  margin-inline: auto;
  justify-items: center;
  width: min(100%, 40rem);
}

.why--slide .section-h {
  max-width: none;
}

.why--slide .section-note {
  margin-inline: auto;
}

.why--slide .why__body {
  margin-inline: auto;
  width: min(100%, 40rem);
}

/* eyebrow-ul stătea sticky ÎN interiorul .section-head, deci se lipea peste
 * propriul h2 în timp ce acesta urca. Fără sticky: se poartă ca la restul slide-urilor. */

.why--slide .why__body p {
  color: inherit;
}

.why--slide .why__w {
  /* 23% era prea stins: textul necitit nu se putea urmari deloc, deci ochiul
   * n-avea unde sa mearga inainte. La 42% se citeste, dar se vede clar ca inca
   * n-a fost parcurs. */
  color: color-mix(in oklab, var(--color-ink) 42%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}

.why--slide .why__w.is-read {
  color: var(--color-ink);
}

.why--slide .why__w.is-active {
  color: var(--color-ink);
}

.format--spec .format__row {
  grid-template-columns: minmax(10rem, 16rem) 1fr;
}

.format--spec .format__time {
  font-size: var(--text-lg);
  white-space: normal;
  line-height: 1.2;
}

.format--spec .format__note {
  font-size: var(--text-md);
  color: var(--color-ink);
}

.format__note a {
  color: var(--color-accent-text);
  border-bottom: 1px dotted currentColor;
}
@media (hover: hover) {
  .format__note a:hover {
    color: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink));
  }
}

/* ── programme grid ──────────────────────────────────────── */

.program {
  padding: var(--space-3xl) var(--page-gutter) var(--space-4xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.card {
  position: relative;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklch, var(--color-paper-2) 92%, transparent);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
  min-height: 14rem;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--color-rule-strong);
    background: var(--color-paper-3);
  }
}

/* ── rsvp ────────────────────────────────────────────────── */

.rsvp {
  padding: var(--space-3xl) var(--page-gutter);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.rsvp__inner {
  max-width: 56rem;
  margin: 0 auto;
}

.rsvp__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  margin: var(--space-xs) 0 var(--space-md);
  max-width: 18ch;
  overflow-wrap: anywhere;
  min-width: 0;
}

.rsvp__lead {
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  margin: 0 0 var(--space-2xl);
  line-height: var(--leading-body);
}

.rsvp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  max-width: 36rem;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.contact__field input,
.contact__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font: inherit;
  /* după shorthand, altfel `font: inherit` l-ar șterge: iOS face zoom
   * automat la focus dacă textul din câmp e sub 16px */
  font-size: max(1rem, var(--text-base));
  transition: border-color var(--dur-fast) var(--ease-out);
}

.contact__field textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: var(--leading-body);
}

@media (hover: hover) {
  .contact__field input:hover,
  .contact__field textarea:hover {
    border-color: var(--color-paper-4);
  }
}

.contact__field input:focus-visible,
.contact__field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.contact .cta {
  align-self: flex-start;
}

/* Pe telefon formularul ocupă toată lățimea, iar butonul rămânea agățat în
 * colțul din stânga, sub o coloană de câmpuri late. Centrat, închide
 * formularul în loc să atârne de el. */
@media (max-width: 48rem) {
  .contact .cta { align-self: center; }
  .contact .rsvp__help { text-align: center; }
}

.rsvp__help {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ── faq ─────────────────────────────────────────────────── */

.faq {
  padding: var(--space-3xl) var(--page-gutter) var(--space-4xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.faq--slide {
  align-items: stretch;
}

.faq--slide .section-head,
.faq--slide .faq__list {
  width: min(100%, var(--max-width));
  margin-inline: auto;
}

.faq__list {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 36rem;
  min-width: 0;
  box-sizing: border-box;
}

.faq__item {
  border-top: var(--rule-hair) solid var(--color-rule);
  width: 100%;
  min-width: 0;
}
.faq__item:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg) 0;
  min-height: 4.75rem;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary > span:first-child {
  flex: 1;
  min-width: 0;
}

@media (hover: hover) {
  .faq__item summary:hover { color: var(--color-accent-text); }
}
.faq__item summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.faq__chev {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--color-ink-3);
  transition: transform var(--dur-slow) var(--ease-in-out);
  font-weight: 400;
  flex: 0 0 auto;
  line-height: 1;
}

.faq__item.is-open .faq__chev,
.faq__item[open] .faq__chev {
  transform: rotate(45deg);
  color: var(--color-accent-text);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  min-width: 0;
  transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}

html.faq-ready .faq__item.is-open .faq__panel,
html:not(.faq-ready) .faq__item[open] .faq__panel {
  grid-template-rows: 1fr;
}

.faq__a {
  overflow: hidden;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

.faq__a-inner {
  padding: 0 0 var(--space-lg);
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 4.5rem;
  box-sizing: border-box;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

.faq__a p { margin: 0; }
.faq__a a { color: var(--color-accent-text); border-bottom: 1px dotted currentColor; }
@media (hover: hover) {
  .faq__a a:hover { color: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
}

/* ── footer · Ft5 statement ──────────────────────────────── */

.footer {
  /* footer, nu secțiune: aerul de 6rem sus îl făcea să pară încă un slide */
  padding: var(--space-xl) var(--page-gutter) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  /* un ton mai jos decât hârtia paginii, ca subsolul să se desprindă de
   * ultimul slide fără să aibă nevoie de o linie groasă. paper-3 e treapta
   * dinspre umbră în temă deschisă și cea dinspre lumină în temă închisă:
   * în ambele, footerul iese din planul conținutului. */
  background: var(--color-paper-3);
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}




.footer__links a {
  color: var(--color-ink-3);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
@media (hover: hover) {
  .footer__links a:hover { color: var(--color-ink); }
}
.footer__links a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-width);
  display: flex;
  align-items: stretch;
  gap: 0;
}

.flow__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.flow__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* centrat la orice latime: pe telefon era centrat, pe desktop stanga,
   * deci acelasi component arata ca doua componente diferite. */
  align-items: center;
  text-align: center;
}

/* Glifele din sprite se coloreaza prin `--mark-*`, nu prin `color`: variabilele
 * alea sunt puse de `.page--full .mark` / `.page--preop .mark`. Fara clasa
 * `mark` pe svg, iconita cadea pe paleta implicita si ramanea gri inchisa pe
 * o pagina albastra. Latimea ramane aici, culoarea vine de la pagina. */
.flow__icon {
  width: 3rem;
  height: 3rem;
}

.flow__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.flow__p {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.flow__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 2.5rem;
  padding-top: 0.85rem;
  color: var(--color-accent-text);
  font-family: var(--font-mono);
}

/* Sursa unei cifre sta langa cifra, nu la subsolul paginii: si cititorul, si
 * motoarele o leaga de afirmatie doar cand e alaturi de ea. */
.rand__sursa {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.4;
}

.cite {
  margin: var(--space-lg) auto 0;
  max-width: var(--max-width);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.45;
}


.rsvp--slide {
  min-height: 100dvh;
  display: grid;
  align-content: center;
}

/* ── upload modal · două sloturi ──────────────────────────── */
.modal {
  width: min(34rem, calc(100vw - 2 * var(--page-gutter)));
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  overflow: visible;
}

.modal::backdrop {
  background: color-mix(in oklab, var(--color-paper) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.modal__card {
  position: relative;
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% -20%,
      color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 60%),
    var(--color-paper-2);
  box-shadow: 0 30px 80px -30px var(--color-shadow-deep);
}

.modal__h {
  margin: var(--space-xs) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 640;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.modal__lead {
  max-width: var(--measure);
  margin: 0 0 var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.slots {
  display: grid;
  gap: var(--space-sm);
}

.slot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background    var(--dur-fast) var(--ease-out);
}

/* `:has(:focus-visible)`, nu `:focus-within`: pe telefon, atingerea butonului
 * de descarcare lasa focusul in rand, iar `:focus-within` tinea chenarul aprins
 * dupa ce degetul plecase — arata ca un hover blocat. `:focus-visible` apare
 * doar cand browserul considera ca omul chiar are nevoie de reper vizual
 * (tastatura), nu la clic sau atingere. Campurile de text il primesc oricum si
 * la clic, deci randurile de incarcare isi pastreaza evidentierea. */
.slot:has(:focus-visible),
.slot:focus-visible {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-3);
}
@media (hover: hover) {
  .slot:hover {
    border-color: var(--color-rule-strong);
    background: var(--color-paper-3);
  }
}

.slot:has(:focus-visible),
.slot:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }

.slot[data-state="filled"] {
  border-color: color-mix(in oklab, var(--color-success) 55%, var(--color-rule));
}

.slot__num {
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.slot[data-state="filled"] .slot__num { color: var(--color-success); }

.slot__body { display: grid; gap: 2px; min-width: 0; }

.slot__h {
  font-size: var(--text-base);
  font-weight: 560;
}

.slot__meta {
  overflow: hidden;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot[data-state="filled"] .slot__meta { color: var(--color-ink-2); }

.slot__action {
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modal__help {
  min-height: 1.4em;
  margin: var(--space-md) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ── contact · formular + date, două coloane ──────────────── */
.contact-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-lg);
}

.contact-cols .contact { max-width: none; }

.info {
  padding-left: var(--space-xl);
  border-left: var(--rule-hair) solid var(--color-rule);
}

.info__h {
  margin: 0 0 var(--space-lg);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.info__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
}

.info__row {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* adresa și programul primesc rândul întreg */
.info__row--wide { grid-column: 1 / -1; }

.info__k {
  margin: 0;
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.info__v {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
}

.info__v a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .info__v a:hover {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
  }
}



/* ── tranziție între pagini · oprită, cu motiv ─────────────
 * `@view-transition { navigation: auto }` a stat aici si a fost cauza unui
 * flash alb la schimbarea paginii: nedeterminist, in ambele teme, si pe
 * desktop, si pe telefon, dar niciodata la reload.
 *
 * Gasit prin bisect pe deploy-uri, fiindca nu se reproduce pe Chromium
 * headless — zece navigari de toate tipurile, filmate cadru cu cadru, zero
 * cadre luminoase. Cinci puncte din istoric au avut flash, inclusiv unul
 * dinaintea intregii serii de modificari; singura varianta fara flash a fost
 * cea in care linia asta lipseste.
 *
 * Fara ea, navigarea foloseste pastrarea imaginii de catre browser: pagina
 * veche ramane pe ecran pana cand cea noua e gata de vopsit. Nu se vede nicio
 * trecere, dar nici nu clipeste nimic.
 *
 * Daca se reia vreodata, de acolo as porni: `::view-transition-old(root)` si
 * `-new(root)` sa primeasca `background-color: var(--color-paper)`, ca un
 * instantaneu intarziat sa arate hartia, nu panza goala a browserului. Regulile
 * de mai jos raman scrise si nu fac nimic cat timp linia de sus lipseste. */


::view-transition-old(root) {
  animation: page-out 120ms var(--ease-in) both;
}

::view-transition-new(root) {
  animation: page-in 140ms var(--ease-out) both;
}

/* bara rămâne pe loc, nu clipește odată cu pagina */

/* ── buton de temă · în navbar ────────────────────────────── */
.nav__theme {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .nav__theme:hover {
    color: var(--color-ink);
    border-color: var(--color-accent);
    background: color-mix(in oklch, var(--color-accent) 10%, transparent);
  }
}

.nav__theme:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 2px;
}

.nav__theme:active { color: var(--color-accent); }

.nav__theme-icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* pictograma arată acțiunea, nu starea: pe hârtie oferi noaptea, în noapte oferi hârtia */
.nav__theme-icon--sun { display: none; }

:root[data-theme="dark"] .nav__theme-icon--sun  { display: block; }
:root[data-theme="dark"] .nav__theme-icon--moon { display: none; }

/* ── marca · elicea de ADN în cerc ─────────────────────────── */
/* Sprite ascuns fără display:none — <use> rămâne referențiabil oriunde. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mark {
  display: inline-block;
  flex: none;
  color: var(--color-accent);
}

.nav .mark--nav {
  /* elicea are linii mai fine decât avea fluturele, deci are nevoie de
   * ceva mai mult loc ca să nu se citească spălăcit lângă titlul gros */
  width: 2.2rem;
  height: 2.2rem;
}

/* pe paginile de test marca din navbar poartă culoarea testului; acasă rămâne gri */


/* ── scara Bethesda · o axă, nu șase pastile ──────────────── */
.scale {
  width: min(100%, 38rem);
  margin: var(--space-xl) auto 0;
}

.scale__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  position: relative;
  padding: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-ink);
  text-align: center;
}

.scale__steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rule-hair);
  background: var(--color-rule-strong);
  transform-origin: left center;
}

.scale__steps li {
  position: relative;
}

/* reperele cad sub axă, ca pe o riglă */
.scale__steps li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-sm) - 4px);
  width: var(--rule-hair);
  height: 5px;
  background: var(--color-rule-strong);
}

.scale__bands {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.scale__band {
  margin: 0;
  padding-top: var(--space-sm);
  color: var(--color-ink-3);
}

/* intervalele care chiar au un test poartă bara colorată */
.scale__band--full,
.scale__band--preop { position: relative; }

/* ── desenele din secțiunile de caz ────────────────────────────────
 * Un singur desen per secțiune, care spune exact ce spune textul de lângă
 * el: nu ilustrație decorativă, ci aceeași informație în altă formă.
 * Toate trei sunt construite din ce exista deja — rigla Bethesda, glifa de
 * tiroidă din sprite, tokenii de culoare. Niciun fișier nou, nicio poză.
 */
.desen {
  margin: 0;
  padding: 0;
  max-width: 38rem;
  /* sectiunile astea isi centreaza textul; un desen cu legenda se citeste de
   * la marginea din stanga, ca textul de langa el */
  text-align: left;
}

/* Secțiunile de caz cu desen sunt singurele compuse la stânga, nu centrat, și
 * asta e o decizie, nu o scăpare: un desen lateral lângă un titlu centrat n-are
 * la ce să se alinieze și plutește. Aici totul pornește de pe aceeași margine.
 *
 * Cheia compoziției e rândul al doilea: textul și desenul stau pe același rând
 * de grilă și poartă amândouă același fir subțire deasupra, deci încep vizibil
 * de pe aceeași linie. Fără firul ăla, desenul pare aruncat în pagină. */
.why--cu-desen .section-head,
.why--cu-desen .why__body {
  margin-inline: 0;
  max-width: none;
  text-align: left;
}

.why--cu-desen .why__body { max-width: 62ch; }

/* Desenele traiesc doar in asezarea pe doua coloane. Sub 64rem n-au unde sa
 * incapa: o rigla de sase clase sau o grila de o suta de siluete puse pe toata
 * latimea devin un obiect cat ecranul, care nu se mai vede intreg. Se ascund,
 * iar sectiunea redevine ce e tot site-ul pe telefon si pe tableta — text
 * centrat. Filigranele raman, ele nu costa latime. */
@media (max-width: 64rem) {
  .desen { display: none; }

  .why--cu-desen .section-head,
  .why--cu-desen .why__body {
    margin-inline: auto;
    max-width: 60ch;
    text-align: center;
  }
}


@media (min-width: 64rem) {
  .why--cu-desen {
    display: grid;
    grid-template-columns: minmax(0, 62ch) minmax(0, 1fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .why--cu-desen .section-head { grid-column: 1; grid-row: 1; }

  .why--cu-desen .why__body,
  .why--cu-desen .desen {
    grid-row: 2;
    padding-top: var(--space-lg);
    border-top: var(--rule-hair) solid var(--color-rule);
  }

  .why--cu-desen .why__body { grid-column: 1; }

  /* in coloana laterala desenele au loc mai mult decat in fluxul textului */
  .why--cu-desen .glanda { width: min(100%, 19rem); }
  .why--cu-desen .oameni { width: min(100%, 24rem, calc((100dvh - 21rem) * 0.72)); }

  /* Rigla nu se lipeste: ea *este* lungimea povestii. Se intinde pe tot randul,
   * iar scara ii ia inaltimea libera, cu nota asezata la baza. */
  .why--cu-desen .desen--rigla {
    position: static;
    align-self: stretch;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .why--cu-desen .desen {
    grid-column: 2;
    /* Desenul insoteste cititul: ramane langa text cat tine povestea, in loc
     * sa stea sus intr-o coloana goala pe trei sferturi. `top` il opreste sub
     * bara plutitoare. */
    position: sticky;
    top: clamp(6.5rem, 14vh, 9rem);
    max-width: none;
    /* desenul umple coloana lui, ca firul de deasupra sa aiba de ce sa se
     * lege pana la marginea dreapta a textului de sus */
    width: 100%;
  }
}

.desen__nota {
  margin-top: var(--space-md);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

/* ── rigla Bethesda, verticala ─────────────────────────────────────
 * Aceeasi scara ca pe prima pagina, intoarsa pe verticala, si nu ca sa umple
 * coloana: asa directia de citire devine directia scalei. Cobori prin poveste,
 * cobori prin clase, iar clasa despre care e sectiunea sta in dreptul
 * paragrafului care o explica.
 *
 * Benzile colorate sunt chiar marginea din stanga a etichetelor, groasa si in
 * culoarea testului — acelasi semn ca la varianta orizontala, unde stau
 * deasupra. Firul subtire de la primele doua clase spune ce se vede si acolo:
 * la I si II nu se testeaza.
 */
.scala-v {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(6, minmax(3rem, 1fr));
  column-gap: var(--space-md);
  height: 100%;
  min-height: 20rem;
}

.scala-v__pasi {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scala-v__pas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1;
  /* celelalte clase se retrag, ca sa nu concureze cu cea despre care e vorba */
  color: var(--color-ink-3);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* Clasa despre care e sectiunea: plina, mai mare, cu eticheta ei pe fundal
 * colorat. Restul scarii e context; asta e subiectul. */
.scala-v__pas.is-aici {
  color: var(--color-accent-text);
  font-size: var(--text-2xl);
  font-weight: 700;
  opacity: 1;
}

.scala-v__pas.is-aici::before {
  content: "aici";
  padding: 0.35em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.scala-v__banda {
  grid-column: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: var(--space-md);
  /* mai groasa decat `--rule-bold`: e axa unui desen, nu marginea unui card */
  border-left: 3px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* clasele fara indicatie de testare: fir subtire, nu banda */
.scala-v__banda--inad,
.scala-v__banda--benign {
  border-left-width: 2px;
  border-left-color: var(--color-rule-strong);
}

.scala-v__banda--inad   { grid-row: 1; }
.scala-v__banda--benign { grid-row: 2; }

.scala-v__banda--full   { grid-row: 3 / span 2; color: var(--color-full-text); }

/* Clasa curenta se marcheaza cu pastila si cu marimea cifrei, atat. Un
 * dreptunghi colorat in spate arata a camp selectat dintr-un formular, nu a
 * reper pe o scara. */
.scala-v__banda--preop  { grid-row: 5 / span 2; color: var(--color-preop-text); }

/* ── 96 din 100, cu oameni ─────────────────────────────────────────
 * Cifra din textul clientului, desenata cu siluete, nu cu cercuri: se vede
 * ca e vorba de oameni, nu de puncte pe o grila. Zece pe zece, ca ochiul sa
 * poata numara cele patru ramase goale fara sa i se spuna cate sunt.
 *
 * Umplerea urmeaza cititul. Fiecare silueta isi stie indicele (`--i`, scris
 * in markup) si se aprinde cand dezvaluirea sectiunii trece de el. Nu e o
 * animatie proprie, cu durata: merge inainte si inapoi cu rotita, ca textul.
 */
.oameni {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--space-2xs);
  /* A treia limita e ecranul, nu coloana: grila e mai inalta decat lata (10
   * randuri de siluete 12x16), iar cat sta lipita langa text trebuie sa incapa
   * intreaga, cu titlu si nota cu tot. Restul figurii cere cam 21rem, iar
   * inaltimea grilei e ~1.35 x latimea ei — de aici factorul. */
  width: min(100%, 24rem, calc((100dvh - 21rem) * 0.72));
}

.om {
  display: block;
  /* accentul plin, nu varianta de text: aceea e coborata pentru contrast pe
   * litere mici, iar aici e o suprafata, nu un cuvant. Portocaliul iese viu. */
  color: var(--color-accent);
  /* Cate siluete sunt pline la un moment dat: dezvaluirea, inmultita cu 96
   * plus lungimea rampei, minus indicele siluetei, impartit la rampa. Rampa
   * e de 12 siluete, deci trecerea se vede una cate una, nu ca o estompare a
   * intregii grile.
   *
   * `96 + 12` in loc de `96` e miezul: la dezvaluire completa, ultima silueta
   * trebuie sa fi terminat de umplut, nu sa fie abia la inceputul rampei ei.
   * Cu 96 curat, umplerea se oprea pe la a 86-a si restul ramaneau palide. */
  opacity: clamp(0.14, calc((var(--reveal, 1) * 108 - var(--i)) / 12), 1);
}

.om svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 16;
}

/* Ultimele patru nu se umplu niciodata: ele sunt riscul ramas. Important e ca
 * nu se deosebesc cu nimic *inainte* ca umplerea sa ajunga la ele — aceeasi
 * culoare, aceeasi opacitate ca oricare silueta neumpluta. Altfel povestea se
 * spune inainte de vreme: vedeai patru siluete gri in coltul din dreapta jos
 * si stiai finalul de la primul cadru. */
.om--gol {
  opacity: 0.14;
}

.cifra {
  display: grid;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  max-width: 24rem;
}

.cifra__cadru {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.cifra__nr {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}

.cifra__rost {
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .om { opacity: 1; }
  .om--gol { opacity: 0.14; }
}

/* ── cat de mare e operatia ─────────────────────────────────────────
 * O singura glanda, taiata pe linia de mijloc. Ce ramane e plin, ce se scoate
 * e fantoma, iar linia punctata e chiar decizia despre care e vorba.
 *
 * Semantica e intoarsa fata de prima incercare, si asta e miezul: pacientul nu
 * se gandeste la cat se taie, ci la cat ii ramane. „Colorat = ce se scoate" era
 * corect anatomic si fix invers ca miza.
 */
.glanda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) 0;
  width: min(100%, 17rem);
}

.glanda__desen {
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.glanda__desen svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* toata glanda, stinsa: conturul a ceea ce exista acum */
.glanda__tot {
  --mark-core: transparent;
  --mark-wing: var(--color-ink-3);
  opacity: 0.22;
}

/* partea care ramane, plina */
.glanda__ramas {
  --mark-core: transparent;
  --mark-wing: var(--color-accent);
  clip-path: inset(0 50% 0 0);
}

/* linia de mijloc: decizia in sine */
.glanda__taietura {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 0;
  border-left: var(--rule-hair) dashed var(--color-ink-3);
  opacity: 0.55;
}

.glanda__eticheta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.glanda__eticheta--ramas {
  justify-self: center;
  color: var(--color-accent-text);
}

.glanda__eticheta--scos {
  justify-self: center;
  color: var(--color-ink-3);
}

.legenda {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  max-width: 26rem;
}

.legenda__rand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}

.legenda__semn {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.3em;
  border-radius: 3px;
}

.legenda__rand--parte .legenda__semn { background: var(--color-accent); }

.legenda__rand--tot .legenda__semn {
  background: none;
  box-shadow: inset 0 0 0 var(--rule-bold) var(--color-rule-strong);
  opacity: 0.6;
}

.legenda__text {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.legenda__text strong {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
}

@media (max-width: 34rem) {
  .oameni { gap: 3px; }
}

.scale__band--full::before,
.scale__band--preop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--rule-bold);
  background: currentColor;
  transform-origin: left center;
}

.scale__band--full {
  grid-column: 3 / span 2;
  color: var(--color-full-text);
}

.scale__band--preop {
  grid-column: 5 / span 2;
  color: var(--color-preop-text);
}


/* ── marca · portocaliu doar la full, albastru doar la pre-op ─── */
/* implicit rămâne rampa gri din tokens.css: navbar și homepage */

/* Slide-ul poartă accentul testului lui, nu pe cel al paginii: pe
 * homepage accentul e grafit, așa că butonul „Detalii pre-op" ieșea
 * maro pe un slide albastru. Mutăm toată familia de accent, nu doar
 * rampa mărcii, ca butoane, eyebrow și filigrane să fie în aceeași
 * culoare. */
.hero--full {
  --color-accent:      var(--color-full);
  --color-accent-text: var(--color-full-text);
  --color-accent-ink:  var(--color-full-ink);
}

.hero--preop {
  --color-accent:      var(--color-preop);
  --color-accent-text: var(--color-preop-text);
  --color-accent-ink:  var(--color-preop-ink);
}

.hero--full .mark,
.page--full .mark {
  --mark-core: oklch(60% 0.215 40);
  --mark-mid:  oklch(66% 0.200 47);
  --mark-wing: oklch(72% 0.180 57);
  --mark-pale: oklch(80% 0.105 45);
}

.hero--preop .mark,
.page--preop .mark {
  --mark-core: oklch(52% 0.155 245);
  --mark-mid:  oklch(60% 0.145 238);
  --mark-wing: oklch(68% 0.130 230);
  --mark-pale: oklch(82% 0.075 220);
}

/* ── tabel comparativ · valorile stau centrate sub coloana lor ─── */
.compare__table {
  width: min(100%, 46rem);
  margin: var(--space-xl) auto 0;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.compare__table caption {
  margin-bottom: var(--space-md);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.compare__table thead th {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.compare__table thead th:first-child,
.compare__table tbody th { text-align: left; }

/* cele două coloane de test: capul și valorile pe aceeași axă */
.compare__table thead th:not(:first-child),
.compare__table tbody td {
  width: 22%;
  text-align: center;
}

.compare__table tbody th {
  padding: var(--space-md);
  font-weight: 560;
  color: var(--color-ink);
}

.compare__table tbody td {
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.compare__table tbody tr + tr th,
.compare__table tbody tr + tr td {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.compare__table .is-yes--full  { color: var(--color-full-text); }
.compare__table .is-yes--preop { color: var(--color-preop-text); }

/* Secțiunile care găzduiesc marca de fundal o taie la margine și îi sunt
 * reper de poziționare. .faq--slide lipsea din listă, așa că filigranul ei
 * se poziționa față de pagină și ajungea să se vadă în mijlocul altui
 * slide, în culoarea acelei secțiuni. */
.why--slide,
.faq--slide,
.format--slide,
.rsvp--slide,
.format {
  position: relative;
  /* clip, nu hidden: „hidden" ar face din secțiune un container de scroll
   * și ar rupe eyebrow-ul sticky din interior */
  overflow: clip;
}

/* ── pași · aceeași familie ca .flow: card → săgeată → card ──── */
.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-width);
  display: flex;
  align-items: stretch;
  gap: 0;
}

.steps__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.steps__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* centrat la orice latime: pe telefon era centrat, pe desktop stanga,
   * deci acelasi component arata ca doua componente diferite. */
  align-items: center;
  text-align: center;
}

.steps__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.steps__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.steps__p {
  margin: 0;
  max-width: 30ch;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.steps__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 3rem;
  /* săgeata trebuie să se vadă lângă numerele mari, nu să dispară */
  padding-top: 0.35rem;
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: 1.75rem;
  line-height: 1;
}

.steps__item:last-child .steps__arrow { display: none; }

/* specificitate peste `.compare__table thead th`, altfel capetele rămân cenușii */
.compare__table thead th.mark-full,
.mark-full  { color: var(--color-full-text); }

.compare__table thead th.mark-preop,
.mark-preop { color: var(--color-preop-text); }

/* FAQ: aceeași măsură ca restul slide-urilor, ca să citească centrat */
.faq--slide .faq__list,
.faq__list { width: min(100%, 52rem); margin-inline: auto; }

/* întrebări: capul de secțiune centrat, ca la celelalte slide-uri */
.faq--slide .section-head {
  justify-items: center;
  text-align: center;
}

/* buton secundar: contur vizibil, altfel nu se citește ca buton */
.cta--ghost {
  background: color-mix(in oklch, var(--color-paper-2) 70%, transparent);
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

@media (hover: hover) {
  .cta--ghost:hover {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 10%, var(--color-paper-2));
    transform: translateY(-1px);
  }
}

.cta--ghost:active { transform: translateY(0); }

.cta--ghost:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 2px;
}

/* ── meniu mobil ─────────────────────────────────────────── */
.nav__menu {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  /* fără contur: butonul stă deja singur în capătul barei, iar cercul
   * adăuga o a doua margine lângă marginea barei */
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

/* linia hamburgerului suportă puțin mai multă greutate acum, ca semnul să
 * nu pară slăbit după ce a pierdut cercul */
.nav__menu svg { width: 1.4rem; height: 1.4rem; stroke-width: 2; }
.nav__menu:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }

.sheet {
  width: min(26rem, calc(100vw - 2 * var(--space-md)));
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
}

.sheet::backdrop {
  background: color-mix(in oklch, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sheet__card {
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  box-shadow: 0 30px 80px -30px var(--color-shadow-deep);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.sheet__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sheet__close {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
}

.sheet__close svg { width: 1.25rem; height: 1.25rem; }
.sheet__close:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }

.sheet__links {
  display: grid;
  padding: var(--space-xs) 0;
}

.sheet__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-md);
  text-decoration: none;
}

.sheet__link:last-child { border-bottom: none; }
.sheet__link--full  { color: var(--color-full-text); font-weight: 600; }
.sheet__link--preop { color: var(--color-preop-text); font-weight: 600; }
.sheet__link:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: -2px; }

.sheet__actions { padding-top: var(--space-md); }

.sheet__cta {
  width: 100%;
  justify-content: center;
  min-height: 3rem;
}

/* ── telefon · săgeata care spune că logo-ul urcă la homepage ── */
.nav__brand-back { display: none; }

/* ── reguli pierdute la o rescriere anterioară, puse la loc ── */
.nav__brand-suffix {
  display: inline;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* marca din foaie nu e în .nav, deci își cere singură dimensiunea */
.sheet__brand .mark--nav {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
}

.sheet__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  white-space: nowrap;
}

/* ── numele: marca e link, sufixul e doar text ────────────── */
.nav__lead {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.nav__brandline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.nav__brand-link {
  color: var(--color-ink);
  text-decoration: none;
}

.nav__brand-link:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* sufixul spune pe ce test ești; nu e destinație, deci nu e link */
.nav__brand-suffix {
  color: var(--color-accent-text);
  cursor: default;
  user-select: none;
}

/* ── rândul de temă din foaie (regulă pierdută, pusă la loc) ── */
.sheet__theme {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-2xs);
  border: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-md);
  cursor: pointer;
}

/* Rândul arăta ca o etichetă cu o pictogramă rătăcită la capăt: nimic nu
 * spunea că se apasă. Partea din dreapta devine o pastilă cu contur, cu
 * pictograma și cu tema în care se va comuta — adică arată ce face. */
.sheet__theme-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.sheet__theme:focus-visible .sheet__theme-pill {
  border-color: var(--color-accent);
  color: var(--color-ink);
}
@media (hover: hover) {
  .sheet__theme:hover .sheet__theme-pill {
    border-color: var(--color-accent);
    color: var(--color-ink);
  }
}

/* cuvântul spune unde ajungi, nu unde ești */
.sheet__theme-state::after { content: "Întunecată"; }
:root[data-theme="dark"] .sheet__theme-state::after { content: "Deschisă"; }

.sheet__theme-icons { display: inline-flex; color: inherit; }
.sheet__theme-icons svg { width: 1.15rem; height: 1.15rem; }
.sheet__theme:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: -2px; }

/* ── foaie · iconița „Acasă" și marcajul paginii curente ──── */


.sheet__link[aria-current="page"] {
  color: var(--color-accent-text);
  font-weight: 600;
}

.sheet__link[aria-current="page"]::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-left: auto;
  border-radius: 50%;
  background: currentColor;
}

/* ── tranziția între pagini · fără fereastra de „flash" ───── */
/* Vechea pagină rămâne opacă dedesubt, noua intră peste ea.
 * Dacă amândouă se estompează, la mijloc ambele sunt semi-transparente
 * și se vede fundalul paginii — exact clipirea de pe telefon. */
::view-transition-old(root) {
  animation: none;
  opacity: 1;
  z-index: 0;
}

/* 440ms era calibrat cand navigarea costa ~300ms de retea: animatia acoperea
 * asteptarea. Cu service worker-ul, pagina noua e gata in ~117ms, deci
 * animatia a devenit ea singura intarziere — imaginea veche era tinuta pe
 * ecran dupa ce pagina noua era deja randata. 140ms, cat sa se vada trecerea
 * fara sa se astepte dupa ea. */
::view-transition-new(root) {
  animation: page-in 140ms var(--ease-out) both;
  z-index: 1;
}

::view-transition-group(root) { animation-duration: 140ms; }

/* La schimbarea temei geometria nu se schimbă, deci grupul n-are ce anima.
 * Lăsată pornită, animația lui se termina la 440ms în timp ce ștergerea
 * mai avea de mers — exact acolo se simțea o schimbare de ritm. */
:root[data-theme-anim]::view-transition-group(root) { animation: none; }

/* fără blur: pe ecran 3x costă un cadru întreg și se vede ca o clipire */
/* doar opacitate: textul rămâne exact pe loc, se schimbă doar conținutul */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}@media (max-width: 74rem) {
  .nav__inner {
    grid-template-columns: auto 1fr auto;
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  }
  .nav__links {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
  }
  .nav__links a:not(.nav__test):not(.nav__keep) { display: none; }
  .nav__cta { font-size: var(--text-xs); padding: var(--space-2xs) var(--space-md); }
  .nav__contact { font-size: var(--text-xs); padding: var(--space-2xs) var(--space-sm); }

  .hero {
    min-height: clamp(30rem, 76dvh, 44rem);
    padding: var(--space-2xl) var(--page-gutter);
    gap: var(--space-lg);
  }

  .hero__display { letter-spacing: -0.035em; }

  .hero__meta {
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-md);
  }

  .section-h { font-size: var(--text-3xl); }

  .format__row {
    grid-template-columns: minmax(5rem, 7rem) 1fr;
    grid-template-areas: "time label" "time note";
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-md) 0;
  }
  .format__time { grid-area: time; font-size: var(--text-xl); align-self: start; padding-top: 4px; }
  .format__note { grid-area: note; }

  .format--spec .format__row {
    grid-template-columns: 1fr;
    grid-template-areas: "time" "note";
  }
  .format--spec .format__time { padding-top: 0; }
  .rsvp__h { font-size: var(--text-3xl); }

  .faq__item summary { font-size: var(--text-lg); padding: var(--space-md) 0; min-height: 4.25rem; }

  .compare__table th,
  .compare__table td { padding: var(--space-sm) var(--space-md); }

  .flow { flex-direction: column; }
  .flow__item { flex-direction: column; }
  .flow__arrow {
    width: 100%;
    height: 1.75rem;
    padding-top: 0;
    align-items: center;
    font-size: 0;
  }
  .flow__arrow::before {
    content: "↓";
    font-size: var(--text-lg);
  }

  .routes { grid-template-columns: minmax(0, 1fr); }}
@media (max-width: 48rem) {
  .nav {
    top: var(--space-xs);
    padding-inline: var(--space-sm);
  }

  .nav__inner {
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
  }

  .nav__brand { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
  .nav .mark--nav { width: 2.3rem; height: 2.3rem; }

  /* pe telefon bara ține doar marca și două butoane; restul intră în foaie */
  .nav__links,
  .nav__contact,
  .nav__cta { display: none; }

  .nav__theme { width: 2.75rem; height: 2.75rem; }
  .nav__menu { display: inline-grid; }}
@media (max-width: 22rem) {
  .nav__cta-arrow { display: none; }
  .nav__test { padding-inline: var(--space-2xs); }}
@media (max-width: 48rem) {
  .footer__links { gap: var(--space-2xs) var(--space-md); }

  .footer__links a,
  .info__v a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }}
@media (max-width: 48rem) {
  .why--slide,
  .format--slide,
  .faq--slide,
  .rsvp--slide {
    min-height: 0;
  }

  .hero--slide { min-height: clamp(24rem, 62dvh, 34rem); }

  .why,
  .format,
  .faq,
  .rsvp {
    padding-block: var(--space-2xl);
  }

  .hero {
    min-height: clamp(26rem, 72dvh, 38rem);
    padding-block: var(--space-2xl) var(--space-2xl);
  }

  .section-head { margin-bottom: var(--space-xl); }

  /* capetele de tabel nu mai trebuie să se rupă pe trei rânduri */
  .compare__table thead th { letter-spacing: 0.04em; padding-inline: var(--space-xs); }
  .compare__table tbody th { padding-inline: 0; }
  .compare__table tbody td { padding-inline: var(--space-xs); }}
@media (max-width: 48rem) {
  .section-head {
    justify-items: center;
    text-align: center;
  }

  .section-note,
  .why__lead { margin-inline: auto; }

  .steps__p,
  .flow__p { margin-inline: auto; }

  .hero__meta-cell { text-align: center; }

  /* o coloană: două blocuri de text alăturate nu mai au lățime de citit */


  .info,
  .info__row { text-align: center; }


  .rsvp__inner { text-align: center; }
  .rsvp__lead { margin-inline: auto; }
  .contact__field { text-align: left; }}
@media (max-width: 56rem) {  /* 896px: marca lunga de pe paginile de test intra peste linkuri de la 880px in jos */
  /* flex, nu grilă: linkurile ascunse lăsau o coloană fantomă de 288px */
  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav__links { display: none; }
  .nav__menu { display: inline-grid; }
  .nav__theme { display: none; }
  .sheet__theme { display: flex; }
  .nav__actions { gap: var(--space-2xs); }

  /* Numele intreg nu mai poate fi centrat absolut: scos din flux, el creste
   * peste marca si peste butoane in loc sa cedeze. Sta in randul barei, ia
   * spatiul ramas si se strange singur. */
  .nav__lead { flex: 1; min-width: 0; }

  .nav__brandline {
    /* scade odata cu ecranul, ca sa nu se ajunga la taiere decat la extrem */
    font-size: clamp(0.9375rem, 4vw, var(--text-lg));
    min-width: 0;
    /* Centrat prin margini automate, nu prin scoatere din flux: asa numele
     * imparte golul ramas intre marca si butoane, dar cedeaza loc cand nu mai
     * incape. Centrarea absoluta de dinainte il lasa sa creasca peste ele. */
    margin-inline: auto;
  }

  /* Taierea sta pe link, nu pe linie: linia e flex, iar `text-overflow` cere
   * o cutie cu text inline. Linkul, fiind element de flex, e deja bloc. */
  .nav__brand-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* sufixul e scurt si spune pe ce test esti: nu el trebuie sa cedeze */
  .nav__brand-suffix { flex: none; }

  /* `min-content` tine pastila peste latimea ecranului: numele are acum 22 de
   * litere, iar min-content le cere pe toate, deci bara iesea in dreapta cu
   * butonul de meniu cu tot. Pe telefon pastila trebuie sa cedeze — numele
   * are deja unde sa se stranga (font + taiere). */
  .nav__inner { min-width: 0; }}

/* Sub 22rem numele intreg si sufixul nu mai incap impreuna fara ca numele sa
 * fie taiat. Sufixul cedeaza: pe ce test esti scrie oricum in titlul paginii
 * si in primul rand al continutului, pe cand numele taiat nu se mai citeste.
 * Pragul e 22rem, nu 26: la 390px — cel mai raspandit ecran de telefon —
 * amandoua incap, si acolo sufixul e informatie, nu inghesuiala. */
@media (max-width: 22rem) {
  .nav__brand-suffix { display: none; }
}
@media (max-width: 60rem) {
  .mark--bg { opacity: 0.07; }}
@media (max-width: 40rem) {
  .hero__meta {
    grid-template-columns: minmax(0, 1fr);
    max-width: 24rem;
  }
  .hero__meta-cell {
    padding: var(--space-md) 0;
  }
  .hero__meta-cell + .hero__meta-cell {
    border-left: none;
    border-top: var(--rule-hair) solid var(--color-rule);
  }}
@media (max-width: 40rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .cta { justify-content: center; }
  .rsvp__actions { flex-direction: column; align-items: stretch; }
  .rsvp__actions .cta { justify-content: center; }}
@media (max-width: 30rem) {
  .modal__card { padding: var(--space-lg); }
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .cta { width: 100%; justify-content: center; }}
@media (prefers-reduced-motion: reduce) {
  .modal[open] .modal__card { animation: none; }}
@media (max-width: 60rem) {
  .contact-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .info {
    padding-left: 0;
    padding-top: var(--space-lg);
    border-left: none;
    border-top: var(--rule-hair) solid var(--color-rule);
  }}
@media (max-width: 34rem) {
  .info__list { grid-template-columns: minmax(0, 1fr); }}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__theme-icon--sun  { display: block; }
  :root:not([data-theme="light"]) .nav__theme-icon--moon { display: none; }}
@media (max-width: 30rem) {
  .scale__steps { font-size: var(--text-lg); }
  .scale__bands { font-size: 0.6875rem; letter-spacing: 0.04em; }}
@media (max-width: 60rem) {
  .steps { flex-direction: column; gap: var(--space-lg); }
  .steps__item { flex-direction: column; }
  .steps__arrow {
    width: 100%;
    height: 1.75rem;
    padding-top: 0;
    align-items: center;
    font-size: 0;
  }
  .steps__arrow::before { content: "↓"; font-size: 1.75rem; }}
@media (max-width: 56rem) {
  .page--full .nav__brand-back,
  .page--preop .nav__brand-back {
    display: inline-block;
    margin-right: -2px;
    color: var(--color-ink-3);
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1;
  }}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }}
@media (max-width: 48rem) {
  /* Pe telefon fișa rămâne o listă, nu un teanc de cutii. "Zidul" nu venea
   * din fire, ci din faptul că toate cele șapte rânduri arătau la fel:
   * eticheta-kicker de mai jos le desparte, deci chenarul nu mai are ce
   * comunica. Ritmul îl dă spațiul dintre rânduri. */
  .format--spec .format__schedule {
    gap: 0;
    margin-bottom: var(--space-md);
  }

  .format--spec .format__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-lg) 0;
    border: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
    border-radius: 0;
    background: none;
  }

  .format--spec .format__row:last-child {
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }

  /* eticheta devine kicker, în accentul paginii */
  .format--spec .format__time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-accent-text);
    padding-top: 0;
  }

  .format--spec .format__note {
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--color-ink);
  }

  /* filigranul ieșea din secțiune și se vedea tăiat pe jumătate */
  .why--slide .mark--bg,
  .format .mark--bg,
  .rsvp--slide .mark--bg {
    width: min(52vw, 15rem);
    height: min(52vw, 15rem);
  }

  /* aici fișele sunt opace, deci filigranul rămânea vizibil doar prin
   * fantele dintre ele — arăta ca o formă ruptă, nu ca o textură */
  .format--spec .mark--bg { display: none; }}


/* ── navbar · conținutul se schimbă cu o trecere lină ─────── */
/* înainte era `animation: none`, deci „full"/„pre-op" apăreau brusc */


/* ── dialoguri · deschidere ȘI închidere animate ──────────── */
/* `dialog` sare din `display: none`; cu allow-discrete + @starting-style
 * putem anima ambele sensuri, inclusiv fundalul cu blur — altfel
 * dispariția lui într-un singur cadru se vede ca o clipire. */
.sheet,
.modal {
  opacity: 0;
  translate: 0 10px;
  /* Fara tranzitie pe dialog: animatia o conduce JS, prin API-ul de animatii.
   * Tranzitiile CSS depindeau de @starting-style si de un reflow fortat, care
   * in Safari nu se comporta la fel; API-ul e solid acolo din 2020 si da
   * aceleasi cadre in orice browser. Starile de mai jos raman, ca punct de
   * plecare si de sosire. */
}

.sheet[open],
.modal[open] {
  opacity: 1;
  translate: 0 0;
}

/* Starea de pornire, pusa din JS inainte ca dialogul sa fie vizibil.
 * @starting-style face acelasi lucru, dar lipseste in Safari sub 17.5 —
 * acolo dialogul aparea instant. Il pastram pentru browserele care il au. */
.sheet[data-opening],
.modal[data-opening] {
  opacity: 0;
  translate: 0 10px;
  transition: none;
}

@starting-style {
  .sheet[open],
  .modal[open] {
    opacity: 0;
    translate: 0 10px;
  }
}

.sheet::backdrop,
.modal::backdrop {
  opacity: 0;
  /* acelasi motiv ca la dialog: fara display/overlay, JS controleaza durata */
  transition: opacity var(--dur-sheet) var(--ease-out);
}

.sheet[open]::backdrop,
.modal[open]::backdrop { opacity: 1; }

.sheet[data-opening]::backdrop,
.modal[data-opening]::backdrop {
  opacity: 0;
  transition: none;
}

@starting-style {
  .sheet[open]::backdrop,
  .modal[open]::backdrop { opacity: 0; }
}

/* când plecăm spre altă pagină închidem instant: foaia nu trebuie
 * să apară pe jumătate stinsă în poza tranziției */
.sheet[data-instant],
.sheet[data-instant]::backdrop { transition: none; }@media (prefers-reduced-motion: reduce) {
  .sheet, .modal,
  .sheet::backdrop, .modal::backdrop { transition: none; }}

/* ── desktop · linie sub opțiunea din navbar la hover ─────── */
.nav__links a {
  position: relative;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: -2px;
  height: 2px;
  border-radius: var(--radius-pill);
  /* Culoarea linkului, nu a paginii. Cu --color-accent-text, bara lua accentul
   * paginii pe care te aflai: pe pre-op ieșea albastră și sub "full", care e
   * portocaliu. currentColor o leagă de textul de deasupra ei. */
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav__links a:hover::after { transform: scaleX(1); }
}

/* pagina curentă e marcată doar prin linie, de când chipul colorat a dispărut */
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }@media (min-width: 48.0625rem) {
  /* Linkurile stau la mijlocul barei, dar în așezare, nu deasupra ei.
   *
   * Au fost o vreme ancorate cu `position: absolute; left: 50%`, ca să nu se
   * sprijine pe lățimea numelui. Numai că ce e scos din așezare nu intră în
   * `min-content`, deci bara se putea strânge până când numele urca peste
   * linkuri: între ~900px și ~1150px se vedea „pre-op" de două ori, o dată ca
   * sufix al mărcii și o dată ca link al paginii curente, suprapuse și
   * decalate. Comentariul de atunci promitea că jumătatea stângă încape
   * numele întreg, dar nimic nu impunea asta — 69rem era un număr potrivit
   * din ochi pentru numele de atunci, iar numele s-a lungit.
   *
   * Acum coloanele laterale sunt egale (`1fr` fiecare), deci coloana din
   * mijloc cade exact pe mijlocul barei — pe toate paginile în același loc,
   * oricât de lung ar fi numele. Iar fiindcă linkurile sunt în așezare, intră
   * în lățimea minimă a barei, care câștigă în fața lui max-width: când
   * spațiul chiar se termină, coloanele nu mai pot rămâne egale și mijlocul
   * alunecă spre dreapta, dar nimic nu se suprapune și nu apare scroll.
   *
   * `min-width` revine la `auto`: regula de bază îl pune pe 0 pentru
   * trunchierea de pe telefon, iar aici asta ar lăsa coloana numelui să scadă
   * sub conținut, cu numele — care e `nowrap` — ieșind peste linkuri. */
  .nav__inner  { grid-template-columns: 1fr auto 1fr; }
  .nav__lead   { width: auto; min-width: auto; grid-column: 1; justify-self: start; }
  .nav__actions { grid-column: 3; justify-self: end; }
  .nav__links  { grid-column: 2; }

  .nav__links a::after { bottom: -3px; }}
@media (max-width: 48rem) {
  .nav__links a::after { display: none; }}


/* ── schimbarea temei · cerc care se deschide din buton ───── */
/* În timpul acestei tranziții oprim animațiile de navigare între pagini:
 * altfel s-ar suprapune peste tăierea circulară. */
:root[data-theme-anim]::view-transition-old(root),
:root[data-theme-anim]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* noua temă e desenată deasupra și dezvăluită de cerc */
:root[data-theme-anim]::view-transition-old(root) { z-index: 0; }

:root[data-theme-anim]::view-transition-new(root) {
  z-index: 1;
  /* Ritmul nu vine dintr-o curbă aleasă din ochi, ci calculat: --theme-ease
   * e o funcție linear() construită în JS din geometria ecranului, astfel
   * încât SUPRAFAȚA dezvăluită să crească uniform. Cu rază constantă,
   * ultimele cadre descopereau sub 0,1% din ecran fiecare — asta se vedea
   * ca o frânare urmată de o închidere bruscă în colț. */
  animation: theme-wipe 430ms var(--theme-ease, linear) both;
}

/* Cerc, nu dreptunghi: colțurile se vedeau. Faptul că un cerc ajunge în
 * colțul apropiat înaintea celui depărtat nu se mai simte, fiindcă ritmul
 * (--theme-ease) e calculat din geometrie astfel încât suprafața
 * dezvăluită să crească uniform, nu raza. */
@keyframes theme-wipe {
  from { clip-path: circle(0% at var(--theme-x, 50%) var(--theme-y, 50%)); }
  to   { clip-path: circle(var(--theme-r, 150%) at var(--theme-x, 50%) var(--theme-y, 50%)); }
}


/* ── tabel comparativ · matrice, nu listă de „da/nu" ─────── */
.compare__table {
  border-collapse: separate;
  border-spacing: 0;
}

/* fiecare test are banda lui: ochiul urmărește coloana, nu rândul */
.compare__table thead th:nth-child(2),
.compare__table tbody td:nth-child(2) {
  background: color-mix(in oklab, var(--color-full) 6%, transparent);
}

.compare__table thead th:nth-child(3),
.compare__table tbody td:nth-child(3) {
  background: color-mix(in oklab, var(--color-preop) 6%, transparent);
}

.compare__table thead th:nth-child(2) { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.compare__table thead th:nth-child(3) { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.compare__table tbody tr:last-child td:nth-child(2),
.compare__table tbody tr:last-child td:nth-child(3) { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* capul coloanei poartă culoarea testului, cu o linie sub el */
.compare__table thead th:not(:first-child) {
  padding-bottom: var(--space-sm);
  border-bottom: none;
  box-shadow: inset 0 -2px 0 0 currentColor;
}

.compare__table thead th:first-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* valorile: semn întâi, cuvântul după — se citește dintr-o privire */
.compare__table tbody td {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.compare__table .is-yes::before,
.compare__table .is-no::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  margin-top: -2px;
}

.compare__table .is-yes::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.compare__table .is-no {
  color: var(--color-ink-3);
  opacity: 0.75;
}

.compare__table .is-no::before {
  width: 0.7rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* rândul urmărit la trecerea cursorului */
@media (hover: hover) {
  .compare__table tbody tr:hover th,
  .compare__table tbody tr:hover td {
    background-color: color-mix(in oklab, var(--color-ink) 4%, transparent);
  }
}

@media (hover: hover) {
  .compare__table tbody tr:hover td:nth-child(2) {
    background-color: color-mix(in oklab, var(--color-full) 12%, transparent);
  }
}

@media (hover: hover) {
  .compare__table tbody tr:hover td:nth-child(3) {
    background-color: color-mix(in oklab, var(--color-preop) 12%, transparent);
  }
}

.compare__table tbody th,
.compare__table tbody td { transition: background-color var(--dur-fast) var(--ease-out); }

/* ── titlurile slide-urilor · testul poartă culoarea lui ──── */
/* aceeași logică din bară: numele rămâne cerneală, testul primește accentul */
.hero__suffix { color: var(--color-accent-text); }

/* slide-urile de test își setează și tonul pentru text, nu doar accentul */
.hero--full  { --color-accent-text: var(--color-full-text); }
.hero--preop { --color-accent-text: var(--color-preop-text); }

/* benzile stau lângă criterii, nu la capătul rândului */
.compare__table { width: min(100%, 38rem); }

.compare__table thead th:not(:first-child),
.compare__table tbody td { width: 27%; }

/* ── matricea · semn plin / inel gol, cuvintele rămân pentru cititoarele de ecran ── */
.compare__table tbody td {
  font-size: 0;          /* „da"/„nu" rămân în DOM pentru accesibilitate */
  line-height: 0;
}

.compare__table tbody td::before {
  margin: 0 auto;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.compare__table .is-yes::before {
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 14%, transparent);
}

.compare__table .is-no::before {
  width: 0.75rem;
  height: 0.75rem;
  background: transparent;
  border: 2px solid color-mix(in oklab, var(--color-ink-3) 45%, transparent);
}@media (max-width: 56rem) {
  .sheet {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    translate: 0 0;
  }

  .sheet__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-lg) var(--page-gutter) calc(var(--space-lg) + env(safe-area-inset-bottom));
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .sheet__head { padding-top: var(--space-2xs); }

  /* linkurile ocupă spațiul liber, butonul rămâne jos */
  .sheet__links {
    flex: 1;
    align-content: start;
    padding-top: var(--space-md);
  }

  .sheet__link { min-height: 3.5rem; font-size: var(--text-lg); }

  .sheet__actions { padding-top: 0; }

  /* pe tot ecranul intră de jos, nu se ridică din centru */
  .sheet { translate: 0 12px; }
  .sheet[open] { translate: 0 0; }}


/* ── footer · marcă, frază, legături, meta ────────────────── */
.footer__inner {
  display: grid;
  gap: var(--space-lg);
}

.footer__top {
  display: grid;
  gap: var(--space-sm);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  width: max-content;
  color: var(--color-ink);
  text-decoration: none;
}

.footer__brand:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.footer__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* fraza nu mai e titlu de 44px: e o linie de context */
.footer__statement {
  margin: 0;
  max-width: 52ch;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
  padding: var(--space-lg) 0;
  border-block: var(--rule-hair) solid var(--color-rule);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer__meta {
  margin: 0;
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}@media (min-width: 48.0625rem) {
  /* pe lat: marca și fraza la stânga, legăturile la dreapta */
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-3xl);
  }

  .footer__nav { grid-column: 2; grid-row: 1; }

  .footer__links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-sm) var(--space-2xl);
    padding: 0;
    border: none;
  }

  .footer__meta { grid-column: 1 / -1; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }}
@media (max-width: 48rem) {
  /* pe telefon totul pe centru, legăturile în două coloane atingibile */
  .footer { padding-block: var(--space-lg) var(--space-md); }

  .footer__inner { justify-items: center; text-align: center; gap: var(--space-sm); }
  .footer__top { justify-items: center; gap: var(--space-2xs); }
  .footer__statement { max-width: 34ch; }

  /* 2,75rem = 44px, minimul pentru un deget; 3rem era aer în plus × 3 rânduri */
  .footer__links a { min-height: 2.75rem; }

  /* sigla ANPC e desenată pentru desktop: pe telefon ocupa cât un bloc întreg */
  /* regula cu place-self e scrisă mai jos în fișier, iar media query-ul nu
   * adaugă specificitate — deci o depășim cu un selector mai specific */
  .footer .footer__anpc { place-self: start center; justify-content: center; }
  .footer .footer__anpc img { width: 12.5rem; }

  .footer__legal { text-align: center; }
  .footer__legal-links { justify-content: center; }}

/* marca din footer nu e în .nav, deci își cere singură dimensiunea */
.footer__brand .mark {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
}

.footer__brand { max-width: 100%; }
.footer__meta { max-width: 100%; overflow-wrap: anywhere; }
/* ── slide-ul de contact să încapă într-un ecran ──────────── */
/* Era 895px într-un viewport de 779px, deci ancora arăta mereu
 * o secțiune tăiată jos. Strângem doar spațiile, nu conținutul. */
@media (min-width: 48.0625rem) {
  .rsvp--slide { padding-block: var(--space-2xl); }
  .rsvp--slide .rsvp__inner { gap: var(--space-md); }
  .rsvp--slide .rsvp__h { margin-bottom: var(--space-2xs); }
  .rsvp--slide .contact-cols { margin-top: var(--space-md); }
  .rsvp--slide .info__list { gap: var(--space-2xs) var(--space-lg); }
  .rsvp--slide .info__row { padding: var(--space-2xs) 0; }
}

/* ── scara Bethesda · urmează starea de citire, în ambele sensuri ── */
/* Tranziție, nu animație: o animație pornește mereu de la zero, deci se
 * bloca la fiecare recalculare. Tranziția interpolează din valoarea
 * curentă, deci merge înainte la citire și înapoi la scroll în sus. */
@media (prefers-reduced-motion: no-preference) {
  .scale:not(.scale--reper),
  /* `.desen--umplere` isi face singur dezvaluirea, umpland siluetele; o masca
   * peste ea ar fi al doilea efect care mananca primul.
   *
   * `.desen--rigla` iese si ea de aici, si nu din cochetarie: `:not()` are
   * specificitatea argumentului, deci selectorul asta valoreaza doua clase si
   * batea regula riglei, scrisa cu o singura clasa. Rigla primea masca
   * orizontala, adica se dezvaluia de la stanga la dreapta desi e verticala. */
  .desen:not(.desen--umplere):not(.desen--rigla) {
    /* La mask-size 260% și stop transparent la 78%, marginea stângă a scării
     * cădea la 61,5% din gradient — adică în zona de estompare, nu în cea
     * transparentă: „I" și „II" se vedeau deja la reveal 0. Cu 300% / 66%,
     * la reveal 0 marginea cade la 66,7% (ascuns complet), iar la reveal 1
     * marginea dreaptă cade la 33,3% (negru plin, complet vizibil). */
    -webkit-mask-image: linear-gradient(90deg, #000 0 40%, rgba(0, 0, 0, 0) 66%);
            mask-image: linear-gradient(90deg, #000 0 40%, rgba(0, 0, 0, 0) 66%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    /* poziția vine direct din scroll (JS scrie --reveal, 0 → 1).
     * Fără transition și fără animation: se mișcă exact cât miști rotița. */
    -webkit-mask-position: calc((1 - var(--reveal, 0)) * 100%) 0;
            mask-position: calc((1 - var(--reveal, 0)) * 100%) 0;
  }

  /* Rigla e verticala, deci si dezvaluirea ei coboara: aceeasi valoare
   * `--reveal`, doar ca pe cealalta axa. Textul se citeste in jos, scara se
   * umple in jos. */
  .desen--rigla {
    /* Doua marimi lucreaza impreuna aici, si nu se pot alege separat.
     *
     * Fereastra vizibila e inaltimea riglei impartita la `mask-size`, iar
     * marginea neagra parcurge `(size - 100%)` din inaltime cat timp `--reveal`
     * merge de la 0 la 1. Deci `size` da direct viteza marginii fata de cea a
     * cititului: 300% inseamna de doua ori mai repede, 220% inseamna 1,2x.
     *
     * 205% o aduce la 1,05x, adica aproape cat coboara ochiul prin text. Pretul
     * e ca banda de estompare trebuie sa incapa in ce ramane: la marimea S, ea
     * nu poate depasi 100*(S-2)/S din masca, altfel fie se vede o dunga la
     * inceput, fie coada ramane palida la final. Aici 2,2% din masca, adica
     * 4,5% din inaltimea riglei — margine taioasa, cum a fost ceruta. */
    -webkit-mask-image: linear-gradient(180deg, #000 0 48.9%, rgba(0, 0, 0, 0) 51.1%);
            mask-image: linear-gradient(180deg, #000 0 48.9%, rgba(0, 0, 0, 0) 51.1%);
    -webkit-mask-size: 100% 205%;
            mask-size: 100% 205%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 calc((1 - var(--reveal, 0)) * 100%);
            mask-position: 0 calc((1 - var(--reveal, 0)) * 100%);
  }
}

/* ── rândurile de descărcare · aceeași familie ca sloturile ── */
.slot--file {
  text-decoration: none;
  color: inherit;
}

.slot--file:focus-visible .slot__action { color: var(--color-accent-text); }
@media (hover: hover) {
  .slot--file:hover .slot__action { color: var(--color-accent-text); }
}

.slot--file .slot__action::after {
  content: "";
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.4em;
  vertical-align: -2px;
  background: currentColor;
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}

/* ── filigranele nu mai stau toate în același colț ─────────── */
/* Șase așezări care se rotesc pe secțiuni: altă parte, altă rotație,
 * altă mărime, altă opacitate. Poziția lor nu mai pare pusă cu rigla. */
/* Filigranele ies parțial din secțiune (valori negative) și sunt tăiate la
 * margine. Așezate complet înăuntru, cădeau exact sub carduri și sub fișă:
 * măsurat, 39%, 71% și 33% din desen stăteau peste text. Ieșind din cadru,
 * masa lor rămâne în afara coloanei de conținut, iar peste text trece doar
 * o parte. */
main > section:nth-of-type(6n + 1) .mark--bg {
  inset: 5% 5% auto auto;
  transform: rotate(13deg) scale(1.00);
  opacity: 0.20;
}

main > section:nth-of-type(6n + 2) .mark--bg {
  inset: auto auto 5% 5%;
  transform: rotate(-24deg) scale(1.00);
  opacity: 0.18;
}

main > section:nth-of-type(6n + 3) .mark--bg {
  inset: auto 5% 5% auto;
  transform: rotate(32deg) scale(0.88);
  opacity: 0.21;
}

main > section:nth-of-type(6n + 4) .mark--bg {
  inset: auto 5% 6% auto;
  transform: rotate(-8deg) scale(1.00);
  opacity: 0.17;
}

main > section:nth-of-type(6n + 5) .mark--bg {
  inset: auto 5% 6% auto;
  transform: rotate(-18deg) scale(1.00);
  opacity: 0.19;
}

main > section:nth-of-type(6n + 6) .mark--bg {
  inset: auto auto 6% 5%;
  transform: rotate(26deg) scale(0.95);
  opacity: 0.20;
}

/* Al doilea marcaj al fiecarei sectiuni. Regulile de mai sus fixeaza `inset`
 * pentru orice `.mark--bg`, deci fara ciclul asta al doilea ateriza exact peste
 * primul si se vedea ca o singura pata dubla. Fiecare pas il aseaza in jumatatea
 * opusa primului si la alta inaltime, ca perechea sa se citeasca imprastiat,
 * nu simetric. Specificitatea o intrece pe cea a regulilor de mai sus. */
main > section:nth-of-type(6n + 1) .mark--bg--secund {
  inset: auto auto 6% 6%;
  transform: rotate(-21deg) scale(0.62);
  opacity: 0.15;
}

main > section:nth-of-type(6n + 2) .mark--bg--secund {
  inset: 6% 6% auto auto;
  transform: rotate(34deg) scale(0.70);
  opacity: 0.14;
}

main > section:nth-of-type(6n + 3) .mark--bg--secund {
  inset: 6% auto auto 6%;
  transform: rotate(-13deg) scale(0.66);
  opacity: 0.16;
}

main > section:nth-of-type(6n + 4) .mark--bg--secund {
  inset: 6% auto auto 6%;
  transform: rotate(19deg) scale(0.58);
  opacity: 0.13;
}

main > section:nth-of-type(6n + 5) .mark--bg--secund {
  inset: 6% auto auto 6%;
  transform: rotate(-29deg) scale(0.72);
  opacity: 0.15;
}

main > section:nth-of-type(6n + 6) .mark--bg--secund {
  inset: 6% 6% auto auto;
  transform: rotate(24deg) scale(0.64);
  opacity: 0.15;
}

/* Sectiunile de caz sunt inalte (1300-1500px) si isi tin titlul sus de tot,
 * deci un marcaj in coltul de sus cade fix peste el. Aici colturile de sus sunt
 * interzise: primul marcaj sta la jumatate, unde e doar corp de text, al doilea
 * jos. Restul site-ului are titlul centrat, deci acolo colturile sunt tocmai
 * locul liber. */
/* In sectiunile de caz e ocupat aproape tot: titlul si textul tin coloana din
 * stanga, desenul pe cea din dreapta, iar rigla se intinde pe toata inaltimea.
 * Singurul culoar liber e banda dintre cele doua coloane. Marcajele stau acolo,
 * mai mici decat in rest — mai discrete, dar nu peste nimic. */
main > section.why--cu-desen .mark--bg {
  inset: 26% auto auto 50%;
  width: clamp(7rem, 11vw, 10rem);
  height: clamp(7rem, 11vw, 10rem);
}

main > section.why--cu-desen .mark--bg--secund {
  inset: auto auto 12% 53%;
  width: clamp(5rem, 7vw, 7rem);
  height: clamp(5rem, 7vw, 7rem);
}

/* Fișa de specificații ocupă aproape toată lățimea, deci acolo filigranul
 * nu are unde să stea „lângă" text: îl scoatem mai mult în afară și îl
 * facem mai mic. Aceeași specificitate ca regulile de mai sus, dar scris
 * după ele, deci câștigă. */
main > section.format--spec .mark--bg {
  inset: auto 4% 5% auto;
  transform: rotate(-14deg) scale(0.82);
  opacity: 0.17;
}

/* Al doilea marcaj al fisei pleaca in coltul opus, la fel de mult in afara:
 * regula de deasupra ii prindea si pe el, si cadeau unul peste altul. */
main > section.format--spec .mark--bg--secund {
  inset: 7% auto auto 3%;
  transform: rotate(22deg) scale(0.58);
  opacity: 0.14;
}

/* Paginile gri (Despre, Pacienți, Medici) încep cu .why--slide: `max-width:
 * 80rem` și `margin: auto` îngustează cutia, deci `right: -6%` e față de
 * 1280px, nu față de viewport — elicea cade ~180px mai înăuntru decât pe
 * home/full/pre-op. Scoatem plafonul pe prima secțiune; conținutul rămâne
 * îngust (section-head, why__body). `top` e 6% din înălțimea tipică a
 * eroului, nu din 100dvh a slide-ului, altfel helixul coboară. */
main > .why--slide:nth-of-type(1) {
  max-width: none;
  width: 100%;
}
main > .why--slide:nth-of-type(1) .mark--bg {
  width: clamp(9rem, 15vw, 16rem);
  height: clamp(9rem, 15vw, 16rem);
  /* 6% din înălțimea eroului (~871px), nu din 100dvh a slide-ului */
  top: 3.25rem;
  right: 4%;
  bottom: auto;
  left: auto;
  transform: rotate(13deg);
}

/* Regula de deasupra prinde si al doilea marcaj al primei sectiuni de pe
 * paginile gri, deci si acolo cadeau unul peste altul. Al doilea coboara in
 * stanga jos, cat sa se vada ca sunt doua obiecte, nu unul dublat. */
main > .why--slide:nth-of-type(1) .mark--bg--secund {
  width: clamp(6rem, 9vw, 10rem);
  height: clamp(6rem, 9vw, 10rem);
  top: auto;
  right: auto;
  bottom: 8%;
  left: 3%;
  transform: rotate(-22deg) scale(0.82);
  opacity: 0.15;
}

/* pe telefon rămân mai mici și mai discrete, oriunde ar cădea */
/* Sub 75rem titlurile ocupa aproape toata latimea si urca spre coltul de sus,
 * unde stau marcajele. Nu le mutam, le facem mai mici: asa raman in colt si
 * termina deasupra primului rand de titlu. */
@media (max-width: 75rem) {
  main > section .mark--bg {
    width: clamp(7rem, 12vw, 12rem);
    height: clamp(7rem, 12vw, 12rem);
  }

  main > section .mark--bg--secund {
    width: clamp(5rem, 8vw, 8rem);
    height: clamp(5rem, 8vw, 8rem);
  }

  /* prima sectiune a paginilor gri isi are regula ei de latime, cu
   * specificitate mai mare; fara asta ramanea singura mare */
  main > .why--slide:nth-of-type(1) .mark--bg {
    width: clamp(7rem, 12vw, 12rem);
    height: clamp(7rem, 12vw, 12rem);
  }

  main > .why--slide:nth-of-type(1) .mark--bg--secund {
    width: clamp(5rem, 8vw, 8rem);
    height: clamp(5rem, 8vw, 8rem);
  }
}

@media (max-width: 48rem) {
  /* pe telefon desenele dispar, deci filigranele raman singurul strat vizual:
   * mai discrete decat pe desktop, dar tot vizibile */
  main > section .mark--bg { opacity: 0.13; }
  main > section .mark--bg--secund { opacity: 0.10; }
}


/* ── navbar · sclipire care traversează logotipul ──────────────
 * O bandă de lumină merge o dată din stânga în dreapta, apoi
 * așteaptă. Ca să treacă neîntrerupt peste nume ȘI peste
 * sufixul colorat, poziția benzii e ținută într-o singură
 * variabilă animată pe părinte (--sheen-p, în spațiul liniei);
 * fiecare copil scade propriul offset (--sheen-x), deci banda e
 * continuă deși sunt două elemente cu culori diferite.
 * --sheen-w și --sheen-x sunt măsurate în JS după încărcarea
 * fonturilor; valorile de aici sunt doar un fallback rezonabil.
 */
@property --sheen-p {
  syntax: "<length>";
  inherits: true;
  initial-value: -9999px;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .nav__brandline {
      --sheen-w: 8.5rem;
      --sheen-band: calc(var(--sheen-w) * 0.45);
      animation: sheen 4.5s linear infinite;
    }

    @keyframes sheen {
      0%   { --sheen-p: calc(-1 * var(--sheen-band)); }
      26%  { --sheen-p: var(--sheen-w); }
      100% { --sheen-p: var(--sheen-w); }
    }

    .nav__brand-link,
    .nav__brand-suffix {
      --sheen-x: 0px;
      /* stratul de jos ține culoarea normală, cel de sus e banda:
       * o pantă până la nuanța sigură, apoi un miez mai luminos */
      --sheen-core: var(--sheen-hi);
      background-image:
        linear-gradient(100deg,
          transparent 0%,
          var(--sheen-hi) 26%,
          var(--sheen-core) 42% 58%,
          var(--sheen-hi) 74%,
          transparent 100%),
        linear-gradient(var(--sheen-base) 0 100%);
      background-size: var(--sheen-band) 100%, 100% 100%;
      background-position: calc(var(--sheen-p) - var(--sheen-x)) 0, 0 0;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
    }

    /* Vârful urcă până la --color-ink-3 (5,15:1 pe hârtie, cât mai sus
     * putem merge rămânând AA). */
    .nav__brand-link {
      --sheen-base: var(--color-ink);
      --sheen-hi: var(--color-ink-3);
    }

    /* Pe paginile cu accent viu, vârful împrumută și nuanța: sclipire
     * portocalie pe full, albastră pe pre-op. */
    .page--full .nav__brand-link,
    .page--preop .nav__brand-link {
      --sheen-hi: color-mix(in oklab, var(--color-ink-3) 55%, var(--color-accent-text));
    }

    /* Acasă accentul e grafit, deci un amestec cu el ar coborî luminozitatea
     * în loc s-o urce, iar banda ink → ink-3 se vedea abia-abia: două tonuri
     * de gri la două procente distanță. Împrumutăm atunci croma celor două
     * teste, nu luminozitatea lor: vârful stă la aceeași înălțime ca ink-3
     * (deci contrastul rămâne), dar trece prin cald. Același truc ca la sufix,
     * unde banda schimbă nuanța, nu lumina. */
    .nav__brand-link {
      --sheen-hi: color-mix(in oklab, var(--color-ink-3) 62%, var(--color-full-text));
    }

    /* Sufixul e deja la 4,67:1; orice deschidere l-ar coborî sub AA.
     * Deci banda nu-i schimbă luminozitatea, ci doar croma și nuanța:
     * contrastul rămâne (4,94:1), dar sclipirea se vede. */
    .nav__brand-suffix {
      --sheen-base: var(--color-accent-text);
      --sheen-hi: var(--color-accent-text);
    }

    @supports (color: oklch(from red l c h)) {
      .nav__brand-suffix {
        --sheen-hi: oklch(from var(--color-accent-text) l calc(c * 1.3) calc(h - 24));
      }

      /* Miezul e singurul loc care iese din pragul AA de 4,5:1 — stă la
       * 3,4:1, peste pragul de 3:1, pe o fâșie îngustă și în mișcare, iar
       * textul revine la contrastul plin imediat ce banda trece. E prețul
       * pentru ca lumina să se vadă cu adevărat. */
      .nav__brand-link,
      .nav__brand-suffix {
        --sheen-core: oklch(from var(--color-accent-text)
                            var(--sheen-core-l) calc(c * 0.9) h);
      }
    }

    /* cine cere contrast maxim primește doar banda sigură, fără miez */
    @media (prefers-contrast: more) {
      .nav__brand-link,
      .nav__brand-suffix { --sheen-core: var(--sheen-hi); }
    }
  }
}


/* Dialogul primește focusul la deschidere ca să nu-l primească primul link
 * din el (pe telefon apărea un chenar albastru peste titlu). Focusul e
 * doar un punct de plecare pentru tastatură, deci nu are ce inel să arate. */
.sheet:focus,
.sheet:focus-visible,
.modal:focus,
.modal:focus-visible { outline: none; }

/* ── pagini legale ────────────────────────────────────────
 * Mock-uri structurale. Marcajul de draft e vizibil intentionat,
 * ca sa nu ajunga in productie confundate cu text final. */
.legal__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--page-gutter);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.legal__back {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
@media (hover: hover) {
  .legal__back:hover { color: var(--color-ink); }
}

.legal__flag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-error);
}

.legal {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}

.legal__h {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-xl);
  text-wrap: balance;
}

.legal__block { margin-bottom: var(--space-xl); }

.legal__block h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
}

.legal__block p,
.legal__block li {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.legal__block p { margin: 0 0 var(--space-sm); }
.legal__block ul { margin: 0 0 var(--space-sm); padding-left: 1.2em; }
.legal__block li { margin-bottom: var(--space-2xs); }

/* sectiune care ridica o problema juridica reala, nu doar text de umplut */
.legal__block--flag {
  padding: var(--space-md) var(--space-lg);
  border-left: var(--rule-bold) solid var(--color-accent);
  background: var(--color-paper-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal__block code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--color-paper-3);
  border-radius: var(--radius-sm);
}

.legal__updated {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* ── footer: bloc legal + ANPC ────────────────────────────── */
.footer__legal { margin-top: 0; }

.footer__ident,
.footer__note {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-ink-3);
  max-width: 68ch;
}

.footer__anpc {
  margin-top: 0;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.footer__anpc a { display: block; flex: none; }
.footer__anpc img {
  display: block;
  width: 12.5rem;
  height: auto;
  border-radius: var(--radius-xs);
}

/* linkurile legale sunt o linie proprie, nu grila pe doua coloane a navigatiei */
.footer__legal-links {
  list-style: none;
  margin: 0 0 var(--space-xs);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

.footer__legal-links a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
@media (hover: hover) {
  .footer__legal-links a:hover { color: var(--color-ink); }
}

/* Tabelul e proiectat ca matrice de puncte: `font-size: 0` ascunde "da"/"nu"
 * (raman pentru cititoarele de ecran) si ::before deseneaza cercul. Randurile
 * clinice aduse din documentul clientului au insa valori textuale, care trebuie
 * scoase din acel regim — altfel meostenesc uppercase, nowrap si spatierea de
 * eticheta, iar o fraza intreaga devine ilizibila. */
.compare__table td.is-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  /* centrat, ca celulele cu text să stea pe aceeași axă cu punctele din
   * rândurile de mai sus; aliniate la stânga, cele două coloane păreau
   * două liste lipite, nu un tabel */
  text-align: center;
  color: var(--color-ink-2);
  text-wrap: balance;
}

/* randurile cu text au nevoie de mai multa latime decat matricea de puncte */
.compare__table:has(.is-text) { width: min(100%, 54rem); }
.compare__table:has(.is-text) thead th:not(:first-child),
.compare__table:has(.is-text) tbody td { width: 30%; }

/* ── cele două rezultate ale testului ─────────────────────── */
/* Erau despartite doar de kicker, iar kickerul negativ era cenusiu:
 * din doua informatii la fel de importante, una se citea ca nota de subsol.
 * "Negativ" inseamna benign, deci vestea buna — primeste verdele de succes,
 * nu cenusiul. Doar cardurile de rezultat, nu si cele de produs (full/pre-op),
 * care isi pastreaza culoarea testului. */
/* ── efectul de citire · starea inițială ──────────────────── */
/* Cuvintele devin gri abia după ce scriptul le împachetează în .why__w, iar
 * scriptul e `defer`: până atunci textul se vede la culoare plină, apoi se
 * stinge. Se citea ca un lag. Blocul pornește direct în gri, marcat din
 * <head> înainte de prima vopsire. Fără JS nu se aplică nimic, deci textul
 * rămâne lizibil. */
[data-js] .why--slide .why__body {
  color: color-mix(in oklab, var(--color-ink) 23%, transparent);
}

/* Hallmark · component: route-card · genre: editorial · theme: proiectul (tokens.css)
 * states: default · hover · focus-visible · active
 * (disabled / loading / error / success nu se aplică: e navigație statică)
 * pre-emit critique: P4 H5 E5 S5 R5 V4
 *
 * Cardurile de rutare sunt o componentă singură pe tot site-ul
 * (rezultatul testului: negativ / pozitiv). Aici e o destinație, nu o stare.
 * Toată suprafața e link, nu doar titlul: ținta de atingere devine cardul
 * întreg, iar afordanța nu mai depinde de a nimeri exact pe text. */

.routes {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.route {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-xl);
  color: inherit;
  text-align: left;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  /* firul de sus se îngroașă la hover: mișcarea vine din desen, nu din umbră */
  border-top: var(--rule-bold) solid var(--color-rule-strong);
  transition:
    border-top-color var(--dur-base) var(--ease-out),
    background        var(--dur-base) var(--ease-out),
    transform         var(--dur-fast) var(--ease-out);
}

.route__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  transition: color var(--dur-base) var(--ease-out);
}

.route__h {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-wrap: balance;
  /* titlurile lungi nu au voie să depășească pe ecrane înguste */
  overflow-wrap: anywhere;
  min-width: 0;
}

.route__p {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  max-width: 46ch;
  text-wrap: pretty;
}

.route__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.route__arrow {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--dur-base) var(--ease-out);
}

/* ── stări ────────────────────────────────────────────────── */
@media (hover: hover) {
  .route:hover {
    background: var(--color-paper-3);
    border-top-color: var(--color-accent);
  }
}
@media (hover: hover) {
  .route:hover .route__kicker { color: var(--color-accent-text); }
}
@media (hover: hover) {
  .route:hover .route__arrow { transform: translateX(4px); }
}

/* Cardurile care duc la cele doua teste imprumuta accentul testului, nu pe cel
 * al paginii: pe medici si pe despre accentul e grafit, deci fara asta muchia
 * de sus si eticheta ar ramane gri la hover. Restul componentei — fundal,
 * margine, sageata, focus — vine neatinsa de la `.route`. */
.route--full {
  --color-accent:      var(--color-full);
  --color-accent-text: var(--color-full-text);
}

.route--preop {
  --color-accent:      var(--color-preop);
  --color-accent-text: var(--color-preop-text);
}

/* muchia de sus poarta culoarea testului si in repaus, ca perechea sa se
 * distinga la scanare, nu doar la hover */
.route--full,
.route--preop {
  border-top-color: var(--color-accent);
}

/* Cardurile care nu duc nicaieri: aceeasi componenta, fara starile de link.
 * Sunt doua rezultate posibile, nu doua destinatii, deci nu se ridica la hover
 * si n-au sageata — dar arata identic cu restul, cum trebuie. */
.route--static {
  cursor: default;
}

.route--neg {
  --color-accent:      var(--color-success);
  --color-accent-text: var(--color-success);
}

/* `--pos` nu-si redefineste accentul: e chiar accentul paginii — portocaliu pe
 * full, albastru pe pre-op. O redefinire `--color-accent: var(--color-accent)`
 * se refera la ea insasi, deci valoarea devine invalida si cade pe mostenire. */
.route--neg,
.route--pos {
  border-top-color: var(--color-accent);
}

/* Numele oficiale ale categoriilor Bethesda, sub eticheta: precizare pentru
 * medic, deci mai jos in ierarhie decat titlul. */
.route__meta {
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.route:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.route:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .route,
  .route__arrow { transition: none; }
  .route:active { transform: none; }
}

@media (max-width: 48rem) {
  .routes { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .route { padding: var(--space-lg); }
}

/* ── footer · compactare ──────────────────────────────────── */
/* Era 595px pe desktop și 1029px pe telefon — peste un ecran întreg doar
 * footer. Cauzele: cinci benzi stivuite cu 2.5rem între ele, padding-top de
 * 6rem și unsprezece linkuri, dintre care cinci erau ancore de pe homepage,
 * accesibile oricum din bară. Lista e tăiată la șase destinații reale, iar
 * benzile trec pe coloane în loc să se stivuiască. */
.footer {
  padding-block: var(--space-2xl) var(--space-lg);
}

.footer__inner { gap: var(--space-lg); }

@media (min-width: 48.0625rem) {
  /* Coloanele erau in fractiuni (1.4fr / 1fr): coloana 1 masura 709px pentru
   * un text de 450, coloana 2 masura 507px pentru linkuri de 147. Peste 600px
   * morti pe orizontala. Acum ultimele doua coloane se string la continut,
   * iar marca ia restul — golul din mijloc dispare. */
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--space-2xl);
    align-items: start;
  }
  .footer__top    { grid-column: 1; grid-row: 1; }
  .footer__nav    { grid-column: 2; grid-row: 1; }
  .footer__anpc   {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
  }
  .footer__legal  { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .footer__bottom { grid-column: 1 / -1; grid-row: 3; }

  .footer__links {
    /* `display` era `grid` dintr-o regula de mai sus, deci `flex-direction` si
     * `flex-wrap` de aici nu se aplicau deloc — din toata regula ramanea `gap`,
     * care suprascria si golul dintre coloane. Ieseau doua coloane lipite: 4px
     * intre „Despre noi" si „Pacienti", 36px pe randurile cu etichete scurte.
     * Comentariul de mai jos spune ca aici se voia o singura coloana. */
    display: flex;
    flex-direction: column;
    /* fara nowrap, coloana umple inaltimea randului de grila si trece in
     * coloana urmatoare, deci lista se rupe in doua */
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    padding: 0;
    border-block: 0;
    align-items: flex-end;
  }
}

.footer__meta {
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ── 1 · linkul de încheiere · sublinierea se trage la hover ── */
/* Punctată în repaus, plină la hover, desenată din stânga. Cresc doar
 * transform și opacity, deci nu declanșează reflow. */
.why__signoff a {
  position: relative;
  border-bottom: 1px dotted currentColor;
}
.why__signoff a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.why__signoff a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .why__signoff a:hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .why__signoff a::after { transition: none; }
}

/* ── 2 · filigranul nu mai trece peste carduri ─────────────── */
/* .mark--bg e position:absolute, deci se pictează peste elementele
 * nepoziționate, oricât de mic ar fi z-index-ul. Cardurile primesc propriul
 * plan și o suprafață opacă — restul secțiunii îl folosea deja pe primul. */
.routes {
  position: relative;
  z-index: 1;
}

/* ── 3 · rezultatul se citește de la distanță ──────────────── */
/* Eticheta era text mic monospațiat colorat: se pierdea în card. Devine
 * pastilă plină — "negativ" și "pozitiv" sunt informația pentru care există
 * slide-ul, nu o notă deasupra titlului. */
/* Fusesera pastile pline. Supracorectasem: imi spusesesi ca textul colorat e
 * prea discret, iar raspunsul meu a fost fundal viu — adica exact vocabularul
 * de badge generic. Greutatea vine acum din scara si dintr-o linie proprie,
 * nu dintr-un dreptunghi colorat. Culoarea ramane si pe muchia cardului. */
.route--neg .route__kicker,
.route--pos .route__kicker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  align-self: start;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
}

.route--neg .route__kicker::before,
.route--pos .route__kicker::before {
  content: "";
  width: 2.25rem;
  height: var(--rule-bold);
  background: currentColor;
  border-radius: var(--radius-pill);
}

/* Eticheta si liniuta ei poarta culoarea rezultatului tot timpul, nu doar la
 * hover: verde pentru negativ, accentul testului pentru pozitiv. Asta face
 * diferenta vizibila de la distanta, ceea ce e chiar rostul slide-ului. */
.route--neg .route__kicker,
.route--pos .route__kicker {
  color: var(--color-accent-text);
}

/* ── 4 · lista din footer pe telefon ──────────────────────── */
/* Rândurile ieșeau de ~65px pentru un text de 12px: șase linkuri ocupau
 * 194px. Grilă strânsă, două coloane. */
@media (max-width: 48rem) {
  /* Linkurile pastreaza min-height 48px — tinta de atingere minima, nu se
   * atinge. Ce se poate reduce: trei coloane in loc de doua taie un rand
   * intreg (48px), plus umplutura de sus a footerului. */
  .footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-sm);
    /* legăturile au deja 2,75rem înălțime fiecare, cât să fie atinse cu
     * degetul; padding-ul de deasupra adăuga încă 1,5rem degeaba */
    padding: 0;
    justify-items: center;
  }
  .footer { padding-block: var(--space-lg) var(--space-md); }
  .footer__inner { gap: var(--space-sm); }
}

/* ── bara · pagina curentă și separator ───────────────────── */
/* Marcajul era doar `color: ink`, adică identic cu hover: nu se putea
 * distinge pe ce pagină ești. Acum poartă accentul plus o linie proprie. */
.nav__links a[aria-current="page"],
.nav__brand-link[aria-current="page"] {
  color: var(--color-accent-text);
}

.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* marca duce acasă — trebuie să arate clicabilă, nu doar să fie */
.nav__brand-link {
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .nav__brand-link:hover { color: var(--color-accent-text); }
}

/* desparte produsele de restul paginilor */
.nav__sep {
  width: var(--rule-hair);
  height: 1.1em;
  background: var(--color-rule-strong);
  margin-inline: var(--space-2xs);
  /* containerul e align-items: normal, deci un element cu inaltime proprie se
   * lipeste de sus. Linkurile au 4px umplutura sus/jos, deci sunt mai inalte,
   * iar centrul lor cadea cu 7px mai jos decat al separatorului. */
  align-self: center;
}

@media (max-width: 48rem) {
  .nav__sep { display: none; }
}

/* ── rail de secțiuni ─────────────────────────────────────── */
/* Fiecare pagină e o secvență de slide-uri de un ecran, deci un rail
 * vertical se potrivește 1:1 cu structura și nu fură lățime. Construit din
 * JS pe baza secțiunilor care există, ca să nu dublez markup în șase fișiere.
 * Ascuns sub 48rem: pe telefon ar intra peste conținut. */
.rail {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.75rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs);
  margin: 0;
  list-style: none;
}

@media (min-width: 48.0625rem) {
  .rail { display: flex; }
}

.rail__item { display: flex; justify-content: flex-end; }

.rail__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px;
  color: var(--color-ink-3);
  text-decoration: none;
}

.rail__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  translate: 6px 0;
  transition:
    opacity var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out);
}

/* Pe index, despre, medici si pacienti accentul e grafit neutru prin design
 * — doar full si pre-op au culoare. Deci starea activa nu se poate baza doar
 * pe nuanta: punctele inactive sunt goale, cel activ e plin si mai mare.
 * Diferenta se vede la fel si pe paginile fara accent cromatic. */
.rail__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    scale var(--dur-base) var(--ease-out);
}

/* eticheta apare la hover pe tot rail-ul: pe index sunt zece puncte,
 * iar fără nume nu poți ști unde sari */
.rail__link:focus-visible .rail__label {
  opacity: 1;
  translate: 0 0;
}
@media (hover: hover) {
  .rail:hover .rail__label {
    opacity: 1;
    translate: 0 0;
  }
}

@media (hover: hover) {
  .rail__link:hover .rail__dot {
    box-shadow: inset 0 0 0 1.5px var(--color-ink-2);
  }
}

.rail__link[aria-current="true"] .rail__dot {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
  scale: 1.4;
}
.rail__link[aria-current="true"] .rail__label {
  color: var(--color-accent-text);
}

.rail__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  .rail__label, .rail__dot { transition: none; }
}

/* eticheta secțiunii în care tocmai ai intrat: apare singură, apoi se stinge.
 * Ține 1.8s, cât să observi rail-ul fără să rămână zgomot permanent pe ecran.
 * Ieșirea e mai lentă decât intrarea, ca stingerea să nu pară o clipire. */
.rail__link.is-cue .rail__label {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out);
}

.rail__link:not(.is-cue) .rail__label {
  transition:
    opacity var(--dur-slow) var(--ease-in),
    translate var(--dur-slow) var(--ease-in);
}

/* hover-ul pe rail rămâne stăpân: arată toate numele deodată */
@media (hover: hover) {
  .rail:hover .rail__label {
    transition:
      opacity var(--dur-base) var(--ease-out),
      translate var(--dur-base) var(--ease-out);
  }
}

/* ── filigranul stă sub conținut, o singură dată ──────────── */
/* Un element `position: absolute` se pictează peste tot ce e nepoziționat,
 * indiferent cât de mic îi e z-index-ul — de-aia `z-index: 0` nu-l ținea
 * dedesubt. Îl reparasem local la carduri; cauza era însă comună,
 * iar câmpurile din formular au dat peste ea din nou: filigranul le colora
 * la 7% opacitate, deși au fundal opac.
 *
 * z-index negativ îl duce sub conținutul din flux, dar deasupra fundalului
 * secțiunii — cu condiția ca secțiunea să fie context de stivuire. Doar
 * `position: relative` nu e de ajuns, de aceea `isolation: isolate`.
 * Dialogurile și bara stau în afara secțiunilor, deci izolarea nu le atinge. */
.hero,
.why,
.format,
.rsvp--slide,
.faq--slide { isolation: isolate; }

.mark--bg { z-index: -1; }


/* bara de jos: documentele legale si copyright-ul pe acelasi rand, nu doua
 * blocuri suprapuse */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.footer__bottom .footer__meta {
  padding-top: 0;
  border-top: 0;
  margin: 0;
}
.footer__bottom .footer__legal-links { margin: 0; }

/* Cardurile de produs poarta culoarea testului, nu accentul paginii:
 * pe despre si medici accentul e grafit, deci "full" si "pre-op" ieseau
 * amandoua gri, desi peste tot altundeva au identitate cromatica. */
/* .why__body primea centrarea doar de la .why--slide. Pus într-o secțiune
 * .format--slide — cum e "De ce" de pe despre — rămânea aliniat la stânga și
 * lat cât secțiunea, în timp ce titlul de deasupra sta centrat: două alinieri
 * în același slide. Se centrează acum singur, indiferent de gazdă. */
.why__body {
  margin-inline: auto;
  text-align: center;
}

/* ── voalul de deasupra barei ─────────────────────────────── */
/* Bara e sticky la 16px, deci între marginea de sus a ecranului și pastilă
 * rămânea o fâșie prin care trecea textul paginii. Un voal fix acoperă fâșia
 * și se stinge sub pastilă: o bandă cu muchie tăiată ar arăta ca o dungă
 * lipită peste conținut. Culoarea vine din hârtia paginii, deci se schimbă
 * odată cu tema și cu accentul fiecărei pagini de test. */
.nav::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  /* Voalul se opreste la baza pastilei. Inainte continua 4rem mai jos cu
   * hartie aproape opaca, iar banda alba aia batea orice umbra pusa peste ea. */
  /* Pastila se termina pe la 68px; restul e zona in care textul se mananca.
   * Coada lunga face diferenta: pe 84px textul doar disparea sub muchie, pe
   * 160px se dizolva treptat, adica se vede cum e inghitit. */
  height: calc(var(--space-md) * 2 + 3.25rem + 4.75rem);
  /* Nu culoare plina: --color-paper e 249, iar pagina in dreptul barei e ~230,
   * asa ca voalul iesea mai luminos decat fundalul si citea ca banda alba.
   * Neclaritatea preia luminozitatea locala si ascunde textul fara sa
   * introduca o suprafata mai deschisa decat cea de sub ea. */
  background: color-mix(in oklab, var(--color-paper) 62%, transparent);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 44%,
    oklch(0% 0 0 / 0.82) 60%,
    oklch(0% 0 0 / 0.45) 78%,
    oklch(0% 0 0 / 0.16) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}



/* pastila capata volum fata de coada: fara umbra, marginea de jos se pierde
 * exact acolo unde voalul e inca aproape opac */
.nav__inner {
  /* Tokenul general de umbra e prea discret in tema deschisa (alfa 0.16) si se
   * pierde peste voalul deschis de dedesubt, care citeste ca o aura alba.
   * Umbra barei e intunecata in ambele teme, doar intensitatea difera. */
  /* umbra pastilei, nu o banda pe toata latimea: urmeaza colturile rotunjite.
   * Intensitatea vine din --nav-lift, mai jos. */
}

:root[data-theme="dark"] .nav__inner,
:root:not([data-theme="light"]) .nav__inner {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.45),
    0 12px 30px -12px oklch(0% 0 0 / 0.70);
}

@media (max-width: 48rem) {
  /* Pe telefon randurile stau mult mai aproape unele de altele, deci aceeasi
   * coada care pe desktop stinge doua randuri inghite aici un bloc intreg.
   * 28px sub pastila in loc de 66px, si neclaritate mai mica. */
  .nav::before {
    height: calc(var(--space-md) * 2 + 2.75rem + 1.75rem);
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 58%,
      oklch(0% 0 0 / 0.55) 78%,
      oklch(0% 0 0 / 0.18) 92%,
      transparent 100%
    );
  }
}


/* Voalul si umbra urmeaza scroll-ul continuu, prin --nav-lift (0..1) scris
 * din JS. Varianta cu prag si tranzitie clipea: la 24px totul aparea dintr-o
 * data. Aici nu exista moment de comutare — la 10px scroll umbra e la 10%. */
.nav { --nav-lift: 0; }

.nav::before { opacity: var(--nav-lift); }

.nav__inner {
  box-shadow:
    0 3px 8px oklch(0% 0 0 / calc(0.18 * var(--nav-lift))),
    0 16px 34px -8px oklch(0% 0 0 / calc(0.46 * var(--nav-lift)));
}

/* fara JS ramane starea de sus: fara voal, fara umbra — adica exact cum
 * arata pagina inainte de a derula */


/* ── modalul de documente · rânduri, nu cutii ─────────────── */
/* Fiecare fișier stătea într-un chenar rotunjit, în interiorul cardului
 * modalului: cutii în cutie, aceeași construcție scoasă din fișa testului.
 * Cu două rânduri identice, chenarul nu comunica nicio ierarhie — doar
 * repeta forma părintelui. Rămân firele dintre rânduri. */
.slots {
  gap: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.slot {
  padding: var(--space-md) var(--space-2xs);
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
  background: none;
  transition: background var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .slot:hover { background: var(--color-paper-3); }
}

.slot:has(:focus-visible),
.slot:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* "Alege" e o acțiune, nu o etichetă: primește formă de buton, ca omul să
 * știe unde apasă. Textul devine "Schimbă" din JS după ce fișierul e ales. */
.slot__action {
  padding: 0.35rem 0.85rem;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color        var(--dur-fast) var(--ease-out),
    background   var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .slot:hover .slot__action {
    border-color: var(--color-accent);
    background: var(--color-paper-2);
  }
}

/* fara chenar colorat, starea "ales" o poarta numarul si eticheta */
.slot[data-state="filled"] .slot__action {
  color: var(--color-ink-2);
  border-color: var(--color-rule);
}

.slot[data-state="filled"] .slot__num::after {
  content: " ✓";
  color: var(--color-success);
}


/* Regula veche colora chenarul randului completat. Fara chenar, ea coloreaza
 * firul de despartire — un fir verde intre doua randuri nu spune nimic, iar
 * bifa de langa numar spune deja tot. */
.slot[data-state="filled"] { border-bottom-color: var(--color-rule); }

/* ── rail · secțiunile necitite poartă accentul, stins ─────── */
/* Erau gri neutru pe orice pagină: pe full sau pre-op, unde totul în jur are
 * culoare, rail-ul arăta ca un element străin lipit peste pagină. Acum
 * punctele si etichetele inactive sunt accentul amestecat cu neutrul, deci
 * pe paginile de platforma, unde accentul e grafit, raman practic la fel. */
.rail__dot {
  box-shadow: inset 0 0 0 1.5px
    color-mix(in oklab, var(--color-accent) 72%, var(--color-rule-strong));
}

.rail__label {
  color: color-mix(in oklab, var(--color-accent-text) 68%, var(--color-ink-3));
}

@media (hover: hover) {
  .rail__link:hover .rail__dot {
    box-shadow: inset 0 0 0 1.5px
      color-mix(in oklab, var(--color-accent) 100%, var(--color-ink-2));
  }
}

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

/* ── bara, mai lată pe telefon ────────────────────────────── */
/* Ramane pastila rotunjita si plutitoare — se schimba doar gutterul, care
 * lua 24px exact acolo unde numele intreg avea nevoie de ei. */
@media (max-width: 56rem) {
  .nav { padding-inline: var(--space-2xs); }
  .nav__inner { padding-inline: var(--space-md) var(--space-2xs); }
}

/* Cat timp dialogul se inchide manual (browsere fara allow-discrete), starea
 * `closing` reproduce ce ar face CSS-ul singur: opacitatea si deplasarea merg
 * spre valorile de repaus, iar `open` inca e pus. */
/* Iesirea e mai rapida decat intrarea: 320ms la deschidere se citeste ca
 * eleganta, aceiasi 320ms la inchidere se citesc ca intarziere, fiindca omul
 * a decis deja si asteapta. 180ms si ease-in, care pleaca repede. */
.sheet[data-closing],
.modal[data-closing] {
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 180ms var(--ease-in),
    translate 180ms var(--ease-in);
}

.sheet[data-closing]::backdrop,
.modal[data-closing]::backdrop {
  transition: opacity 180ms var(--ease-in);
}

.sheet[data-closing]::backdrop,
.modal[data-closing]::backdrop { opacity: 0; }

/* ── tap pe telefon · fara dreptunghiul gri ───────────────── */
/* Safari deseneaza implicit rgba(0,0,0,0.18) peste orice element tapabil,
 * iar pe pastile si carduri iese un dreptunghi drept peste colturi rotunjite:
 * o clipire gri la fiecare atingere. Il stingem si punem in loc o apasare
 * proprie, care urmeaza forma elementului. */
a, button, summary, label, [role="button"], .slot, .route {
  -webkit-tap-highlight-color: transparent;
}

/* Feedback la atingere doar unde nu exista deja o stare :active. Scade
 * putin si se ridica imediat — nu inlocuieste hover-ul, care pe telefon
 * ramane blocat dupa tap. */
@media (hover: none) {
  .cta:active,
  .nav__cta:active,
  .route:active,
  .slot:active,
  .footer__links a:active,
  .footer__legal-links a:active {
    scale: 0.985;
  }

  .cta, .nav__cta, .route, .slot,
  .footer__links a, .footer__legal-links a {
    transition: scale var(--dur-fast) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta:active, .nav__cta:active, .route:active, .slot:active { scale: 1; }
}

/* ── fundalul dialogurilor pe telefon ─────────────────────── */
/* backdrop-filter pe un strat cat tot ecranul, cu opacitatea animata, obliga
 * compozitorul sa refaca neclaritatea intregii pagini la fiecare cadru. Pe
 * desktop trece neobservat; pe iOS e unul dintre cele mai scumpe lucruri pe
 * care le poti cere, si se simte exact ca o intarziere la deschidere.
 *
 * Pe dispozitivele cu atingere folosim o suprafata mai opaca in loc de
 * neclaritate: acelasi rol — separa dialogul de pagina — fara costul GPU. */
@media (hover: none) {
  .sheet::backdrop,
  .modal::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in oklab, var(--color-paper) 92%, transparent);
  }
}

/* ── atingerea nu mai asteapta un al doilea tap ───────────── */
/* Fara `touch-action`, Safari pe iOS asteapta dupa fiecare atingere ca sa
 * vada daca urmeaza un dublu-tap pentru zoom, si abia apoi trimite `click`:
 * ~300ms in care nu se intampla nimic. Prima atingere de pe pagina scapa,
 * fiindca detectia se armeaza dupa ea — de aici "prima data instant, apoi
 * apas si astept in gol".
 *
 * `manipulation` pastreaza derularea si pinch-to-zoom, dar spune explicit ca
 * aici nu exista dublu-tap de asteptat. Chrome pe desktop nu e afectat: acolo
 * intarzierea nici nu exista. */
a,
button,
summary,
label,
input,
select,
textarea,
[role="button"],
.slot,
.route,
.rail__link,
.nav__theme,
.nav__menu {
  touch-action: manipulation;
}

/* ── raspuns vizual imediat la apasare ────────────────────── */
/* Butonul de meniu nu are stare apasata proprie: singurul semn ca a fost atins
 * era conturul de focus, iar acela soseste odata cu `click` — pe iOS, sensibil
 * mai tarziu decat degetul. Marcajul se pune din JS la `pointerdown`, deci in
 * acelasi cadru cu atingerea. Fara tranzitie: vrem sa fie instantaneu. */
.e-apasat {
  scale: 0.94;
  opacity: 0.7;
  transition: none;
}

/* ── 404 ──────────────────────────────────────────────────
 * Aceeasi coaja minima ca paginile legale (bara + subsol), fara navigatia
 * mare: cine ajunge aici a gresit adresa, are nevoie de iesiri, nu de meniu.
 * Blocul e centrat pe verticala peste inaltimea vizibila, ca sa nu arate
 * ca o pagina care s-a incarcat pe jumatate. */
.nf {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-3xl) var(--page-gutter);
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nf__code {
  margin: 0 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-ink-3);
}

.nf__h {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.nf__lead {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

/* Adresa ceruta se scrie din JS. Fara JS randul nu are ce arata, deci
 * dispare cu totul in loc sa lase un chenar gol. */
.nf__addr { display: none; }
[data-js] .nf__addr { display: block; }

.nf__url {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  overflow-wrap: anywhere;
}

.nf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.nf__more {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: var(--space-md) 0 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.nf__more a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
@media (hover: hover) {
  .nf__more a:hover { color: var(--color-ink); }
}

/* bara paginilor legale isi striga marcajul de draft in rosu; aici acelasi
 * rand e doar o eticheta de stare, deci ton neutru. */
.legal__flag--calm { color: var(--color-ink-3); }


/* ── hero-ul umple ecranul pe monitoare mari ──────────────── */
/* Plafonul din `clamp` — 52rem la `.hero`, 50rem la `.hero--slide` — a fost
 * pus ca hero-ul să nu crească la nesfârșit pe ecrane înalte. Pe monitoare
 * mari efectul era invers: toate celelalte secțiuni umpleau ecranul, iar
 * hero-ul se oprea la 81% din el. Rămânea o fâșie goală, iar titlul secțiunii
 * următoare ieșea de sub margine — pagina părea tăiată la jumătate.
 *
 * Pragurile sunt „nu e telefon" (48.0625rem, același prag pe care îl folosește
 * și bara) și „ecranul are înălțime de dat" (40rem). Peste ele, plafonul nu-și
 * mai are rostul: ecranul e destul de mare cât o pagină întreagă să fie exact
 * atât. Sub ele rămâne cum era, fiindcă pe telefon conținutul e oricum mai
 * înalt decât ecranul și `clamp` chiar ajută.
 *
 * Înălțimea trebuie ceruta separat de lățime: un telefon întors pe orizontală
 * e lat, dar are 390px pe verticală — acolo un hero de un ecran ar fi înghesuit,
 * si `min-height: 40rem` il tine deoparte. */
@media (min-width: 48.0625rem) and (min-height: 40rem) {
  .hero,
  .hero--slide {
    min-height: 100dvh;
  }
}


/* ── ritmul paginilor · una din două, sub un voal ──────────── */
/* Fiecare secțiune umple un ecran, deci derularea e o succesiune de pagini.
 * Când toate au aceeași hârtie, trecerea nu se vede. A doua nuanță dă marginea.
 * (Secțiunea de contact avea un degrade propriu spre aceeași idee; l-am scos,
 * ca nuanța să vină dintr-un singur loc.)
 *
 * VOAL, nu culoare plină. Spotul care urmărește cursorul stă mai jos, în
 * `.ambient` la `z-index: -2`, iar o culoare opacă îl acoperea — chiar așa
 * scrie și la `.format`, care de aceea n-are fundal propriu. Am încercat între
 * timp ca banda să-și deseneze propriul spot: se vedeau două lumini, fiindcă
 * `transform` de pe strat anula `background-attachment: fixed`, iar apoi
 * stratul se oprea la marginea secțiunii, tăiat de `overflow: clip`. Voalul
 * lasă lumina de dedesubt să treacă și nu duplică nimic.
 *
 * UMBRA duce voalul până la marginile ecranului: secțiunile sunt containere de
 * conținut, cu `max-width`, deci un fundal pus pe ele se oprește la cutie.
 * Umbrele, spre deosebire de straturi, nu sunt tăiate de `overflow: clip` —
 * pe care secțiunile îl au ca să țină filigranele în cutie, fiecare ieșind
 * 115–166px lateral. `clip-path` taie sus și jos, ca umbra să nu dea peste
 * vecine, dar lasă lateralul liber; și nu aduce scroll orizontal, spre
 * deosebire de `width: 100vw`, care ar fi numărat și bara de derulare.
 * Aceeași valoare la fundal și la umbră, ca marginile să arate ca mijlocul.
 *
 * SELECTORUL e îngust, fiecare restrângere pentru o dungă văzută la măsurare:
 * `section` și nu `*` (sub `main` stau și titluri răzlețe, vopsite ca dungi de
 * 26px), `nth-of-type` și nu `nth-child` (un `<h1>` între secțiuni dădea
 * paritatea peste cap), și fără `page--legal` (acolo secțiunile sunt blocuri
 * de text de 96px, nu ecrane). */
body:not(.page--legal) main > section:nth-of-type(even) {
  background: var(--film-banda);
  box-shadow: 0 0 0 100vmax var(--film-banda);
  clip-path: inset(0 -100vmax);
}


/* ── verificarea formularului de contact ──────────────────── */
/* Eroarea sta sub camp, nu intr-o bula: bula dispare la primul click si vine
 * in limba browserului, nu in a paginii. */
.contact__eroare {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-eroare);
}

.contact__eroare:empty { display: none; }

/* Campul gresit se marcheaza si altfel decat prin culoare: cine nu distinge
 * rosul are nevoie de un al doilea semn, iar grosimea marginii il da. */
.contact__field [aria-invalid="true"] {
  border-color: var(--color-eroare);
  border-width: var(--rule-bold);
}


/* ── sloturile modalului, pe ecrane înguste ───────────────── */
/* Sub 768px, acțiunea devine o pastilă cu `white-space: nowrap`, deci nu se
 * strânge. Titlul, în schimb, poate fi un cuvânt de neîmpărțit —
 * „Consimțământul" are 14 litere — iar coloana lui are `min-width: 0`, deci se
 * strânge sub lățimea cuvântului. Rezultatul: textul iese din coloană și trece
 * pe sub pastilă. Măsurat între 320 și 360px, până la 46px de suprapunere.
 *
 * Nu rupem cuvântul cu `overflow-wrap`: „Consimțămân-tul" arată mai rău decât
 * problema. Pastila coboară pe rândul ei, sub text, aliniată cu el. */
@media (max-width: 26rem) {
  .slot {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-xs);
  }

  .slot__action {
    grid-column: 2;
    justify-self: start;
  }
}