/* ==========================================================================
   SC METALPET SA — foaie de stil
   --------------------------------------------------------------------------
   Paleta e derivată din logo, nu inventată:
     · bleumarinul mărcii  #000086  (eșantionat din wordmark)
     · oțelul periat       #828282  (eșantionat din marca grafică)
   Fiecare pereche text/fundal folosită aici a fost verificată pentru contrast
   WCAG 2.2 AA. Tabelul de rapoarte: docs/PALETA.md

   Ordinea fișierului:
     01 Tokens
     02 Reset
     03 Tipografie
     04 Primitive de așezare
     05 Antet
     06 Componente
     07 Subsol
     08 Mișcare
     09 Tipărire
   ========================================================================== */

/* == 01 Tokens ============================================================ */

:root {
  /* Marca: rampa de bleumarin */
  --brand-900: #00004d;
  --brand-800: #000068;
  --brand-700: #000086; /* logo, exact */
  --brand-600: #1b24a8;
  --brand-500: #3a44c4;
  --brand-400: #6670dc;
  --brand-300: #949bec;
  --brand-200: #c2c6f5;
  --brand-100: #e4e6fb;

  /* Oțel: rampa neutră */
  --steel-900: #16191b;
  --steel-850: #1e2225;
  --steel-800: #2a2f33;
  --steel-700: #3c4247;
  --steel-600: #5a6165;
  --steel-500: #828282; /* logo, exact */
  --steel-400: #a6a9a7;
  --steel-300: #c6c8c4;
  --steel-200: #dcded9;
  --steel-100: #eff0ec;

  /* Brunarea oțelului: fundalul secțiunilor de contrast */
  --bluing: #0c1230;
  --bluing-deep: #070b22;

  /* Roluri semantice */
  --paper: var(--steel-100);
  --ink: var(--steel-900);
  --muted: var(--steel-600);
  --accent: var(--brand-700);

  /* Două tipuri de linie, deliberat distincte: `hairline` e decorativă și
     scutită de pragul 3:1; `rule` poartă informație și îl trece. */
  --hairline: rgba(22, 25, 27, 0.14);
  --hairline-inverse: rgba(255, 255, 255, 0.16);
  --rule: var(--steel-500);

  /* Tipografie */
  --font-sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* Scală pe rația 1.25, ancorată la 16px */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* Ritm: grilă de 8px */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius: 3px;
  --shell: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Lățimea unui rând de text.

     Era 68ch, ales ca și cum 1ch ar fi un caracter. Nu e: `ch` e lățimea
     cifrei „0”, iar în această familie cifra e mai lată decât litera mică
     obișnuită. Măsurat pe text german randat, 68ch însemna **82 de caractere
     pe rând** — peste pragul la care ochiul mai nimerește începutul rândului
     următor. 58ch măsoară în jur de 70, adică în plaja de citit confortabil.

     Măsurat, nu presupus: 68 × 70 / 82 ≈ 58, verificat apoi pe pagină la
     ambele mărimi de text, 18px și 14px. */
  --measure: 58ch;

  --ease-technical: cubic-bezier(0.22, 0.7, 0.25, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --header-height: 72px;
}

/* == 02 Reset ============================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
p,
figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Pe suprafețe întunecate bleumarinul mărcii nu are contrast: focusul comută
   pe treapta deschisă a aceleiași rampe. */
.is-dark :focus-visible {
  outline-color: var(--brand-300);
}

::selection {
  background: var(--brand-700);
  color: var(--steel-100);
}

/* == 03 Tipografie ======================================================== */

h1,
h2,
h3,
h4 {
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, var(--text-5xl));
}

h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, var(--text-3xl));
}

h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.012em;
}

h4 {
  font-size: var(--text-lg);
  letter-spacing: -0.008em;
}

.lead {
  font-size: clamp(var(--text-base), 0.95rem + 0.4vw, var(--text-lg));
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}

.is-dark .lead {
  color: var(--steel-300);
}

.measure {
  max-width: var(--measure);
}

/* Toate cifrele tehnice trec prin mono, cu cifre tabulare: o coloană de
   toleranțe trebuie să se alinieze pe virgulă, nu aproximativ.

   Cifrele, nu tabelele. Pus pe tot tabelul, mono făcea ca cele două coloane
   de propoziții ale parcursului să se citească precum un listing de terminal;
   celulele cu cifre își poartă clasa `.mono` una câte una. */
.mono,
.spec-value,
.stat-value,
/* Tabelul panoului de administrare n-are stil propriu: trăia din regula pe
   `table` de mai sus. Rămâne unde era, ca restrângerea de acum să nu-i
   schimbe înfățișarea pe nesimțite. */
.admin__table {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Eticheta tehnică. Se folosește pentru categorii de date reale, nu ca
   ornament deasupra fiecărui titlu. */
.tech-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.is-dark .tech-label {
  color: var(--steel-400);
}

.prose p + p {
  margin-top: var(--space-2);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(0, 0, 134, 0.4);
  transition: text-decoration-color var(--dur-fast);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.is-dark .prose a {
  color: var(--brand-300);
  text-decoration-color: rgba(148, 155, 236, 0.45);
}

/* == 04 Primitive de așezare ============================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  /* Suprafața pe care stă secțiunea. Umbra de derulare a tabelelor își ia
     culoarea de acoperire de aici, ca un tabel mutat pe alt fond să nu mai
     desene două benzi deschise la capete. */
  --surface: var(--paper);
  padding-block: clamp(var(--space-5), 6vw, var(--space-7));
}

.section--tight {
  padding-block: clamp(var(--space-4), 4vw, var(--space-5));
}

.section--graphite {
  --surface: var(--steel-900);
  background: var(--steel-900);
  color: var(--steel-100);
}

.section--bluing {
  --surface: var(--bluing);
  background: var(--bluing);
  color: var(--steel-100);
}

.section--granite {
  --surface: var(--steel-200);
  background: var(--steel-200);
  color: var(--ink);
}

.section-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Titlul și subtitlul unei secțiuni, pe două coloane.

   Erau `1.1fr / 1fr`, aliniate la `end`: titlul cădea la baza rândului, iar
   subtitlul de trei rânduri începea deasupra lui. Cele două blocuri nu
   începeau pe nicio linie comună și nici nu se terminau pe una — se vedea pe
   „Ce putem prelucra”, unde titlul de un rând plutea sub un paragraf de trei.

   Acum: coloane egale și `baseline`, adică prima linie a subtitlului stă exact
   pe prima linie de scris a titlului. E singura aliniere care ține și când
   titlul trece pe două rânduri, fiindcă nu depinde de înălțimea niciunui bloc.
   Aceeași regulă pe toate cele 14 locuri unde apare perechea. */
@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: baseline;
  }
}

.stack > * + * {
  margin-top: var(--space-2);
}

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

@media (min-width: 60rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* == 05 Antet ============================================================= */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--brand-700);
  color: var(--steel-100);
  border-radius: var(--radius);
  transition: top var(--dur-fast);
}

.skip-link:focus {
  top: var(--space-1);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Alb, nu grafit: sigla are cuvântul bleumarin și pe grafit dispărea.
     Cerut de client pe 29 septembrie 2026. */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.brand__logo {
  height: 44px;
  width: auto;
}

/* Sigla vectorială are raportul 4,7:1, față de 2,9:1 la vechiul PNG: la
   aceeași înălțime, sloganul ieșea de 5 px. Pe lat e loc pentru mai mult; pe
   telefon, 44 px lasă loc butonului de meniu. */
@media (min-width: 64rem) {
  .brand__logo {
    height: 52px;
  }
}

/* Măsurat la 320px: sigla de 207px plus butonul de meniu împingeau pagina
   la 341px, cu derulare orizontală. La 34px sigla are 160px și încape. */
@media (max-width: 23.4rem) {
  .brand__logo {
    height: 34px;
  }
}

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
  }
}

.nav__link {
  position: relative;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--steel-700);
  padding-block: 0.5rem;
  transition: color var(--dur-fast);
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link[aria-current='page'] {
  color: var(--ink);
}

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-700);
}

/* Comutatorul de limbă.

   `<details>` e singurul meniu care se deschide fără JavaScript, deci panoul
   nu are nevoie de `hidden` și nici de un script ca să fie folosibil. Scriptul
   doar îl închide la clic în afară sau la Escape. */

.locale-switch {
  position: relative;
}

.locale-switch__current {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  cursor: pointer;
  color: var(--steel-600);
  transition: color var(--dur-fast);
  /* Triunghiul propriu al lui `<summary>`, scos: săgeata e desenată în SVG,
     ca să se poată roti. `list-style` pentru Firefox, pseudo-elementul pentru
     Safari și Chrome — amândouă sunt necesare. */
  list-style: none;
}

.locale-switch__current::-webkit-details-marker {
  display: none;
}

.locale-switch__current:hover {
  color: var(--ink);
}

.locale-switch__caret {
  width: 10px;
  height: 7px;
  transition: transform var(--dur-fast);
}

.locale-switch[open] .locale-switch__caret {
  transform: rotate(180deg);
}

.locale-switch__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 10.5rem;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(22, 25, 27, 0.1);
}

.locale-switch__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--steel-700);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.locale-switch__link:hover {
  color: var(--ink);
  background: var(--steel-100);
}

.locale-switch__link[aria-current='true'] {
  color: var(--brand-700);
}

/* Steagul are nevoie de un contur: banda albă a Union Jack-ului atinge
   marginea, iar pe fundalul alb al antetului dreptunghiul s-ar termina în
   gol. */
.flag {
  flex-shrink: 0;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(22, 25, 27, 0.18);
}

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

/* == 06 Componente ======================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    border-color var(--dur-fast);
}

.button--primary {
  background: var(--brand-700);
  color: #fff;
}

.button--primary:hover {
  background: var(--brand-800);
}

.button--secondary {
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.button--secondary:hover {
  border-color: var(--ink);
}

.is-dark .button--secondary {
  border-color: var(--hairline-inverse);
  color: var(--steel-100);
}

.is-dark .button--secondary:hover {
  border-color: var(--steel-100);
}

/* Pe antetul grafit niciun albastru din rampa marcii nu da simultan text
   lizibil si separare de 3:1 fata de fundal (verificat: brand-700 da 1,13:1
   fata de antet). Butonul se inverseaza: 15,4:1 la ambele. */
.button--onDark {
  background: var(--steel-100);
  color: var(--steel-900);
}

.button--onDark:hover {
  background: #fff;
}

/* Rând de specificație cu linie punctată, ca într-un tabel de cote.
   Punctele leagă eticheta de valoare fără să concureze cu ele. */
.spec-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.4375rem;
  font-size: var(--text-xs);
}

.spec-label {
  font-family: var(--font-mono);
  color: var(--muted);
}

.is-dark .spec-label {
  color: var(--steel-400);
}

.spec-leader {
  border-bottom: 1px dotted var(--hairline);
  transform: translateY(-0.24em);
}

.is-dark .spec-leader {
  border-bottom-color: var(--hairline-inverse);
}

.spec-value {
  font-size: var(--text-xs);
  color: var(--ink);
  white-space: nowrap;
}

.is-dark .spec-value {
  color: var(--steel-100);
}

/* Marcaj pentru o valoare care nu e încă validată de client. Vizibil, dar
   discret: publicul-țintă verifică, iar o cifră neconfirmată prezentată ca
   fermă descalifică furnizorul. */
.unverified {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.unverified::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.is-dark .unverified {
  color: var(--steel-400);
}

/* Cifrele-cheie */
.stat {
  padding-block: var(--space-2);
}

.stat-value {
  display: block;
  font-size: clamp(var(--text-2xl), 1.4rem + 1.6vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.is-dark .stat-value {
  color: var(--steel-100);
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.is-dark .stat-label {
  color: var(--steel-400);
}

/* Firul Ariadnei */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Separatorul era `--steel-400`: pe hârtie dă **2,07:1**, la 12px. Blocul de
   la secțiunea 28 calibrase deja varianta pe întuneric și trecuse pe lângă
   cea deschisă — ochiul se duce la ce e greu de citit pe fond închis, nu la
   ce e prea palid pe fond deschis. `--muted` dă 5,50:1. */
.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  color: var(--muted);
}

/* Măsurat la 390px: legăturile firimiturilor erau 51×14 și 59×14 — degetul
   cere 24×24 (WCAG 2.5.8), iar 14 pixeli înălțime sunt greu de nimerit chiar
   și fără normă. Cutia crește pe verticală; textul rămâne unde era. */
.breadcrumbs a {
  display: inline-block;
  padding-block: 0.3125rem;
}

.breadcrumbs a:hover {
  color: var(--ink);
}

/* == 07 Subsol ============================================================ */

.colophon {
  background: var(--steel-900);
  color: var(--steel-300);
  padding-block: var(--space-5) var(--space-3);
}

.colophon a:hover {
  color: var(--steel-100);
}

.colophon__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .colophon__grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

.colophon__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--steel-100);
  margin-bottom: var(--space-1);
}

.colophon__list li + li {
  /* Erau 7px între rânduri, dar spațiul stătea în afara țintei. Acum îl
     poartă legătura însăși: distanța dintre două texte rămâne aproape
     aceeași, iar suprafața de atins se dublează. */
  margin-top: 0;
}

/* Măsurat la 390px: legăturile subsolului aveau 15px înălțime la 7px
   distanță, deci un pas de 22px — sub 24×24 și prea strâns și pentru
   excepția de spațiere din WCAG 2.5.8. Cutia crește, textul stă pe loc. */
.colophon__list a,
.colophon__baseline a {
  display: inline-block;
  padding-block: 0.3125rem;
}

.colophon__list a {
  font-size: var(--text-sm);
}

.colophon__baseline {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--steel-400);
}

/* == 08 Mișcare =========================================================== */

/* Un singur moment orchestrat la încărcare, pe pagina de start. Restul
   mișcării răspunde acțiunii vizitatorului. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes draw-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

[data-reveal] {
  opacity: 0;
}

[data-reveal].is-revealed {
  animation: rise var(--dur-slow) var(--ease-technical) both;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
  }
}

/* == 09 Tipărire ========================================================== */

@media print {
  /* --- Tipar ---------------------------------------------------------------
     Un inginer de achiziții pune pagina de capabilități la dosarul de
     evaluare. Până acum, tipărită, ea ieșea în mare parte **goală**: șase
     secțiuni de pe pagina de start au fundal închis și text deschis, iar
     browserele nu tipăresc fundalurile. Textul alb pe hârtie albă nu e text.

     `!important` e necesar aici fiindcă 59 de reguli din foaie dau culori
     deschise, fiecare mai specifică decât un selector general. Pentru tipar,
     ele trebuie învinse toate deodată. */

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

  /* Ce nu are sens pe hârtie: navigația, comenzile, lucrurile de atins. */
  .masthead,
  .colophon,
  .skip-link,
  .menu-toggle,
  .mobile-nav,
  .visualizer__slider,
  .filters,
  .chip,
  /* Cuprinsul e o listă de sărituri în pagină. Pe hârtie nu sare nimeni:
     ar tipări șase fișe cu chenar care nu duc nicăieri. */
  .page-index,
  .button,
  .cta-band {
    display: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Scena procesului e de trei ori cât ecranul și stă lipită — pe hârtie ar
     produce pagini goale. Devine o secțiune obișnuită, de înălțimea ei. */
  .chain-scene {
    height: auto !important;
  }

  .chain-scene__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  .chain-scene__stage,
  .part__stage,
  .kinematics__stage,
  .roughness__stage,
  .stack__stage,
  .coverage__stage,
  .cutting__stage,
  .uncert__stage,
  .stock__stage {
    height: 60mm !important;
    border: 1px solid #999 !important;
  }

  .section {
    padding-block: 8mm;
  }

  /* Titlurile nu rămân singure la piciorul paginii, iar fișele nu se rup. */
  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .machine,
  .spec-row,
  .checklist__item,
  .decode__panel,
  .chain-detail__item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Pe hârtie, un link nu duce nicăieri dacă nu-și scrie adresa. Doar cele
     externe: adresele interne ar umple pagina fără să ajute. */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  /* Chenarele rămân, ca tabelele de cote să se citească. */
  .machine,
  .decode__panel,
  .panel {
    border: 1px solid #999 !important;
  }

  .spec-leader {
    border-bottom: 1px dotted #999 !important;
  }
}

/* == Utilitare ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* == 10 Antet de pagină ==================================================== */

.page-header {
  border-bottom: 1px solid var(--hairline);
}

.page-header .breadcrumbs {
  margin-bottom: var(--space-3);
}

.page-header__kicker {
  margin-bottom: var(--space-1);
}

.page-header__intro {
  margin-top: var(--space-2);
}

/* --- Antetul cu fotografie ----------------------------------------------
   Pe lat: textul în stânga, fotografia în dreapta, centrate pe verticală una
   față de alta. Pe îngust: fotografia imediat sub text, pe toată lățimea
   ecranului — o fotografie încadrată de margini de 20px pe un telefon de
   390px pierde tocmai detaliul pentru care a fost făcută. */
.page-header__layout {
  display: grid;
  gap: var(--space-3);
}

.page-header__figure {
  margin-top: var(--space-3);
}

.page-header--photo .page-header__photo {
  margin-inline: calc(var(--gutter) * -1);
}

@media (min-width: 40rem) {
  .page-header--photo .page-header__photo {
    margin-inline: 0;
  }
}

@media (min-width: 64rem) {
  .page-header--photo .page-header__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-5);
    align-items: center;
  }
}

/* == 11 Banda de anvelopă ================================================== */

/* Cifrele-cheie de capabilitate, în linie. Sunt primul lucru pe care îl caută
   un inginer de achiziții, deci stau sus și nu se ascund după derulare. */
.envelope-strip {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}

@media (min-width: 40rem) {
  .envelope-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.envelope-strip li {
  background: var(--paper);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

@media (min-width: 40rem) {
  .envelope-strip li {
    padding-left: var(--space-2);
  }
  .envelope-strip li:first-child {
    padding-left: 0;
  }
}

.envelope-strip .mono {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* == 12 Filtre ============================================================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filters__label {
  flex-shrink: 0;
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip,
.page-index__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  transition:
    border-color var(--dur-fast),
    color var(--dur-fast),
    background var(--dur-fast);
}

/* Pe telefon, cuprinsul de șase sărituri ocupa 318px — 38% din primul ecran,
   înainte ca pagina să fi spus ceva. Fișele se strâng, dar rămân peste pragul
   de atingere: 32px înălțime, nu 24 la limită. */
@media (max-width: 40rem) {
  .page-index__link {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs);
  }

  .page-index__list {
    gap: 0.375rem;
  }
}

.chip:hover,
.page-index__link:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Cuprinsul paginii.

   Măsurat: pagina de start are 10,5 ecrane, cea de calitate 7,2. Cine caută
   un singur lucru n-avea de unde să știe că el există pe pagină. Lista stă
   sub antet, nu plutește: o hartă se citește o dată, nu se urmărește. */
.page-index__label {
  margin-bottom: var(--space-2);
}

.page-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Textul unei săritori e un titlu de secțiune, nu o etichetă de filtru: pe
   telefon se rupe în două rânduri în loc să iasă din ecran. */
.page-index__link {
  white-space: normal;
}

.chip.is-active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

/* Ștergerea filtrelor nu e o alegere, e o ieșire: nu trebuie să arate ca
   celelalte fișe, altfel pare a șaptea categorie. */
/* Rupere de rând într-un container flex: fără ea, eticheta „Dotare” se
   lipește la capătul rândului de procese și pare încă o categorie. */
.filters__break {
  flex-basis: 100%;
  height: 0;
}

.chip--quiet {
  border-style: dashed;
  color: var(--muted);
}

.chip--quiet:hover {
  color: var(--ink);
}

/* Ce se scrie când nicio combinație nu dă niciun utilaj. */
.machine-list__none {
  max-width: var(--measure);
  margin-block: var(--space-3);
  color: var(--muted);
}

.filters__count {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-left: auto;
}

/* == 13 Fișa de utilaj ===================================================== */

.machine-list {
  border-top: 1px solid var(--hairline);
}

.machine {
  border-bottom: 1px solid var(--hairline);
}

.machine[hidden] {
  display: none;
}

.machine__head {
  display: grid;
  /* `minmax(0, 1fr)` și nu `1fr`: o coloană `1fr` păstrează `min-width: auto`
     și refuză să coboare sub cel mai lung cuvânt. Un nume german de utilaj
     scris într-un singur cuvânt scotea antetul fișei din ecran la 320px. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  text-align: left;
  transition: color var(--dur-fast);
}

@media (min-width: 60rem) {
  .machine__head {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto 1.5rem;
  }
}

.machine__head:hover .machine__name {
  color: var(--accent);
}

.machine__category {
  grid-row: 1;
}

.machine__name {
  /* Un cuvânt mai lat decât ecranul se rupe, în loc să împingă pagina. */
  overflow-wrap: break-word;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: color var(--dur-fast);
}

.machine__count {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.375rem;
}

.machine__summary {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* Comutatorul e un semn „+" desenat din două linii: se rotește în „×" la
   deschidere, fără să încarce o pictogramă. */
.machine__toggle {
  position: relative;
  width: 1rem;
  height: 1rem;
  justify-self: end;
}

.machine__toggle::before,
.machine__toggle::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--muted);
  transition: transform var(--dur-base) var(--ease-technical);
}

.machine__toggle::after {
  transform: rotate(90deg);
}

.machine__head[aria-expanded='true'] .machine__toggle::before {
  transform: rotate(135deg);
}

.machine__head[aria-expanded='true'] .machine__toggle::after {
  transform: rotate(45deg);
}

.machine__body {
  padding-bottom: var(--space-3);
}

.machine__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 60rem) {
  .machine__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* Fișa fără cifre confirmate: rezumatul și descrierea devin cele două
   coloane ale grilei. */
.machine__grid--text .machine__notes {
  display: contents;
}

.machine__grid--text .machine__summary-text {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
}

.machine__grid--text .machine__description {
  margin-top: 0;
}

.spec-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.spec-list .spec-row {
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}

.spec-list dt,
.spec-list dd {
  margin: 0;
}

/* Dezvăluirea în cascadă a rândurilor: e o acțiune a vizitatorului, nu o
   animație pasivă la derulare. */
.machine__head[aria-expanded='true'] ~ .machine__body .spec-row {
  animation: rise 280ms var(--ease-technical) both;
  animation-delay: calc(var(--row, 0) * 40ms);
}

.machine__summary-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
}

/* Descrierea utilajului, așa cum a trimis-o firma. E text curgător, nu
   specificație: primește lățimea de citit și tonul stins al notelor. */
.machine__description {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}


.machine-list__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

/* == 14 Întrebări deschise ================================================= */

.question-list {
  border-top: 1px solid var(--hairline);
}

.question {
  display: grid;
  gap: 0.25rem var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .question {
    grid-template-columns: 2rem 13rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.question__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

.question__model {
  font-weight: 600;
}

.question__text {
  max-width: var(--measure);
  color: var(--muted);
  line-height: 1.55;
}

/* == 15 Bandă de îndemn ==================================================== */

.cta-band {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.cta-band .button {
  margin-top: var(--space-1);
}

/* == 16 Lanțul de procese ================================================== */

.process-chain {
  border-top: 1px solid var(--hairline);
}

.process {
  border-bottom: 1px solid var(--hairline);
}

.process__link {
  display: grid;
  gap: 0.375rem var(--space-3);
  padding-block: var(--space-3);
  align-items: baseline;
  transition: color var(--dur-fast);
}

@media (min-width: 48rem) {
  .process__link {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  }
}

.process__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

.process__title {
  display: block;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.014em;
  transition: color var(--dur-fast);
}

.process__link:hover .process__title {
  color: var(--accent);
}

.process__intro {
  display: block;
  margin-top: 0.4375rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

.process__meta {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* Butonul de la capătul rândului: arată că rândul e o legătură. Clientul nu
   și-a dat seama că lista se poate deschide — titlul se colora doar la
   trecerea mausului, iar pe telefon nici atât. */
.process__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  align-self: center;
  margin-top: var(--space-1);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}

.process__arrow {
  width: 16px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-technical);
}

.process__link:hover .process__go {
  background: var(--accent);
  color: #fff;
}

.process__link:hover .process__arrow {
  transform: translateX(3px);
}

@media (min-width: 48rem) {
  .process__go {
    margin-top: 0;
  }

  /* Pe pagina Capabilități rândul are și numărul de utilaje: o coloană în
     plus, ca butonul să rămână ultimul, la dreapta. */
  .process__link:has(.process__meta) {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
  }
}

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

/* == 16b Fotografiile proprii ============================================= */

/* Toate cadrele alese au raportul aparatului, 3:2. Raportul e scris și aici,
   nu doar în atributele `width`/`height`: o casetă care își știe forma înainte
   de încărcare nu împinge textul de sub ea. Fundalul ține locul cât se
   descarcă imaginea, în tonul halei, nu un alb care clipește. */
.photo {
  margin: 0;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--steel-800);
}

/* == 17 Cifra de titlu ===================================================== */

.headline-figure {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: var(--space-2);
  border-block: 1px solid var(--hairline);
}

.headline-figure__value {
  font-size: clamp(var(--text-2xl), 1.4rem + 2vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sibling-list {
  border-top: 1px solid var(--hairline);
}

.sibling-list li {
  border-bottom: 1px solid var(--hairline);
}

.sibling-list a {
  display: block;
  padding-block: var(--space-2);
  transition: color var(--dur-fast);
}

.sibling-list a:hover {
  color: var(--accent);
}

.sibling-list__title {
  font-size: var(--text-lg);
  font-weight: 500;
}

/* == 18 Materiale ========================================================== */

.material-grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: var(--space-2);
}

@media (min-width: 40rem) {
  .material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.material {
  background: var(--paper);
  padding: var(--space-2);
}

.section--granite .material {
  background: var(--steel-200);
}

.material__name {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.material__grades {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.material__grades li {
  font-size: var(--text-xs);
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
}

/* Ce înseamnă grupa la prelucrare.

   E textul pentru care un inginer deschide pagina, deci se citește ca text,
   nu ca notă de subsol: mărime normală, rând aerisit, lățime de citit. Linia
   de deasupra îl desparte de eticheta mărcilor — altfel cele două blocuri par
   una și aceeași listă. */
.material__machining {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Nota de proveniență stă sub explicație și rămâne vizibil mai stinsă: una
   spune cum se comportă materialul, cealaltă cât de sigură e lista. */
.material__note {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted);
}

/* == 19 Calitate =========================================================== */

/* Fraza care leagă cele șapte fișe stă sub ele, despărțită de o linie:
   e o concluzie, nu o a opta fișă. */
.quality-note {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--hairline);
}

.quality-grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

@media (min-width: 40rem) {
  .quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .quality-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.quality {
  background: var(--paper);
  padding: var(--space-2);
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.quality__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

.quality__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.quality__body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.cert-list {
  border-top: 1px solid var(--hairline);
}

.cert {
  display: grid;
  gap: 0.375rem var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .cert {
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

.cert__standard {
  font-weight: 500;
}

.cert__body {
  color: var(--muted);
  line-height: 1.55;
}

.cert__status {
  font-size: var(--text-xs);
}

/* == 20 Industrii ========================================================== */

.industry-list {
  border-top: 1px solid var(--hairline);
}

.industry {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.industry__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Ce fel de reper aduce ramura. De la 52rem stă în dreapta numelui, ca lista
   să rămână scanabilă pe verticală; mai jos, sub el. */
.industry__text {
  display: grid;
  gap: 0.25rem var(--space-3);
}

@media (min-width: 52rem) {
  .industry__text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    align-items: baseline;
  }
}

.industry__parts {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

.industry__name {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.industry-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* == 21 Despre ============================================================= */

.timeline {
  border-top: 1px solid var(--hairline);
}

.milestone {
  display: grid;
  gap: 0.375rem var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 48rem) {
  .milestone {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.milestone__year {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.milestone__body {
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: var(--measure);
}

.value__title {
  font-size: var(--text-xl);
  font-weight: 600;
}

.value__body {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

.fact-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.fact {
  display: grid;
  gap: 0.375rem var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 48rem) {
  .fact {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.fact dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* == 22 Formularul de ofertă =============================================== */

.rfq-layout {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .rfq-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.rfq__group {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-2);
}

.rfq__group legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

.rfq__row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .rfq__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Capcana pentru roboți: scoasă din flux fără display:none, ca un robot care
   verifică vizibilitatea calculată să nu o sară. */
.rfq__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  display: grid;
  gap: 0.375rem;
}

.field--narrow {
  max-width: 16rem;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  /* 14px pe un rând de 1,64 dădeau 23px înălțime — cu un pixel sub pragul
     de atingere. Eticheta e ținta care pune cursorul în câmp. */
  line-height: 1.75;
}

.field__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--text-base);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.field__input:hover {
  border-color: var(--steel-500);
}

.field__input:focus {
  border-color: var(--brand-700);
  /* Conturul nu se scoate, ci se face transparent. În modul de contrast
     ridicat din Windows umbrele sunt ignorate, iar un `outline: 0` ar lăsa
     câmpul focalizat fără niciun semn; un contur transparent e forțat vizibil
     de sistem și devine acolo singurul indicator. */
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--brand-100);
}

.field__input--area {
  min-height: auto;
  resize: vertical;
  line-height: 1.6;
}

.field__input[aria-invalid="true"] {
  border-color: #a3242b;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}

.field__error {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #a3242b;
}

.field__file {
  font-size: var(--text-sm);
  padding: 0.5rem 0;
}

.file-list {
  display: grid;
  gap: 0.25rem;
}

.file-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding-block: 0.25rem;
  border-bottom: 1px dotted var(--hairline);
  color: var(--muted);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.55;
  cursor: pointer;
}

.check input {
  /* Erau 18×18. Caseta de bifat e ținta care dă consimțământul; sub degete,
     18 pixeli sunt puțini, iar pragul din WCAG 2.5.8 e 24. */
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
  accent-color: var(--brand-700);
}

.rfq__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

.rfq__note {
  font-size: var(--text-xs);
  color: var(--muted);
  max-width: 44ch;
}

.rfq__failure {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid #a3242b;
  background: #fdf2f2;
  font-size: var(--text-sm);
  color: #7d1c22;
}

.rfq__aside {
  display: grid;
  gap: var(--space-3);
}

.panel {
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.panel__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* Rândul de sub caseta persoanei de contact: spune la ce răspunde omul.
   Mai mic și mai palid decât datele lui — se citește după ele, nu înaintea. */
.panel__note {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

.steps {
  display: grid;
  gap: 0.625rem;
}

.step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.625rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.step__index {
  font-size: var(--text-xs);
  color: var(--accent);
}

/* Cei patru pași de la desen la serie.

   Numerele stau într-o coloană proprie, legate de o linie verticală: pașii se
   citesc în ordine, iar linia o arată fără s-o scrie. E același gest ca axa
   dintr-un desen tehnic — reperul față de care se citește restul. */
.onboarding {
  display: grid;
  gap: 0;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.onboarding__step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.onboarding__step:last-child {
  padding-bottom: 0;
}

/* Linia care leagă pașii. Pe ultimul se oprește: un fir care iese din ultimul
   pas ar promite unul care nu vine. */
.onboarding__index {
  position: relative;
  font-size: var(--text-xs);
  color: var(--accent);
  text-align: right;
  padding-right: var(--space-1);
}

.onboarding__step:not(:last-child) .onboarding__index::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: -1px;
  bottom: calc(-1 * var(--space-3));
  border-right: 1px solid var(--hairline);
}

.onboarding__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.onboarding__body {
  margin-top: 0.375rem;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* „Dacă piesa e așa” → „merge pe acolo”.

   Două coloane de la 52rem în sus, fiindcă perechea se citește dintr-o
   privire doar când stau alături; mai jos se despachetează pe verticală, cu
   termenul deasupra lămuririi lui. Linia dintre perechi ține locul unui
   chenar de tabel: separă fără să încarce. */
.routing {
  margin: var(--space-3) 0 0;
}

.routing__pair {
  display: grid;
  gap: 0.25rem var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline);
}

.routing__pair:last-child {
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 52rem) {
  .routing__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }
}

.routing__when {
  font-weight: 600;
  line-height: 1.4;
}

.routing__then {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Cele două moduri de lucru în cinci axe, plus ce alegi și ce nu rezolvă.

   Patru blocuri egale: primele două sunt perechea care se compară, iar
   următoarele două trag concluzia. Pe două coloane de la 52rem, ca perechea
   să stea alături — o comparație pusă una sub alta nu mai e o comparație. */
.modes {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Când blocurile urmează după nota unui tabel, 24px nu ajung: măsurat, e
   exact distanța dintre introducere și tabel, așa că explicațiile se citeau
   ca o continuare a notei. Aici începe altă mișcare a secțiunii — de la ce
   scrie în tabel la ce înseamnă — și are nevoie de o respirație în plus. */
.figures__note + .modes,
.prose-table__note + .modes {
  margin-top: var(--space-5);
}

@media (min-width: 52rem) {
  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }
}

.modes__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--hairline);
}

.modes__body {
  max-width: var(--measure);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Cele patru blocuri despre indicele de capabilitate.

   Două coloane de la 52rem. Numărul stă deasupra titlului, mic și în culoarea
   de accent: blocurile se citesc în ordine, dar nu sunt pași — sunt fețe ale
   aceleiași întrebări, deci nu poartă linia care leagă pașii de pe „Despre”. */
.capability {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 52rem) {
  .capability {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-4);
  }
}

.capability__index {
  display: block;
  font-size: var(--text-2xs);
  color: var(--accent);
}

.capability__title {
  margin-top: 0.25rem;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.capability__body {
  max-width: var(--measure);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Tabelul de propoziții.

   Aici chiar e un tabel — trei coloane de date, cu antet — deci se scrie ca
   tabel, nu ca listă stilizată: cititorul de ecran anunță singur coloana la
   fiecare celulă. Sub 52rem, un tabel de trei coloane cu propoziții întregi nu
   încape; se derulează lateral în cutia lui, nu strânge pagina după el. */
.prose-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;

  /* Umbra care spune că tabelul continuă.

     Măsurat: la un ecran de 768px cutia are 692px, iar tabelul 704 — se
     derulează cu 12px, prea puțin ca ochiul să observe și exact cât să taie
     marginea ultimei coloane. Nimic nu-i spunea cititorului că mai e ceva
     acolo.

     Două perechi de degradeuri: cele pe hârtie se derulează cu conținutul
     (`local`) și acoperă umbrele când ai ajuns la capăt; umbrele stau lipite
     Acoperirea ține hârtie plină pe primii 60% și abia apoi se stinge: pus la
     zero, degradeul era deja pe jumătate transparent acolo unde se termină
     umbra, și rămânea o urmă murdară la marginea din stânga. Văzut colorând
     temporar umbrele, nu citind regula.

     de marginile cutiei (`scroll`). Fără JavaScript. Culoarea de acoperire
     vine din jetonul `--surface`, pe care îl pune fiecare secțiune: pe
     granit, acoperirea cu hârtie desena două benzi deschise la capete. */
  background-image:
    linear-gradient(to right, var(--surface) 60%, transparent),
    linear-gradient(to left, var(--surface) 60%, transparent),
    linear-gradient(to right, rgba(22, 25, 27, 0.13), transparent),
    linear-gradient(to left, rgba(22, 25, 27, 0.13), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.prose-table {
  /* Măsurat la un ecran de 1280: fără limită, tabelul ajunge la 1224px, iar
     coloana de propoziții la 537px — 77 de semne pe rând, peste pragul pe
     care restul site-ului îl ține la 70 prin `--measure`. La 60rem, coloana
     măsoară 397px, adică în jur de 56. */
  max-width: 60rem;
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}

.prose-table th,
.prose-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

/* Antetul poartă tipografia de etichetă tehnică, dar NU clasa `.tech-label`:
   aceea e `display: inline-block`, ceea ce anulează `table-cell` și face cele
   trei titluri să curgă unul sub altul, în afara coloanelor lor. */
.prose-table thead th,
.figures thead th {
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose-table__key {
  /* Se strânge după conținutul ei, nu după o cifră fixă.

     9rem erau croiți pentru „Spannungsarmglühen”, cheia cea mai lungă din
     parcursul reperului. Tabelele de mai târziu au chei de două semne — H7,
     2.1, +0,3 — iar coloana rămânea largă de 144px pentru un text de 19.
     Măsurat: cu `width: 1%` coloana ajunge la 70px acolo unde cheile sunt
     scurte și rămâne 179 acolo unde chiar e nevoie. */
  width: 1%;
  white-space: nowrap;
  /* …dar nu mai strâns decât atât: la 70px, capul „PASSUNG” rămânea la 16px
     de „ABMASSE BEI Ø50”, iar cele două etichete în majuscule mono se citeau
     ca una singură. La 6rem, golul dintre ele e 42px. */
  min-width: 6rem;
  font-weight: 600;
}

.prose-table__what,
.prose-table__aside {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.prose-table__aside {
  color: var(--muted);
}

.prose-table__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Deriva cotei cu temperatura, ca tabel.

   Tot un tabel adevărat, dar altfel decât parcursul reperului: acolo
   celulele sunt propoziții și au nevoie de 44rem ca să nu se rupă în
   coloane de câte un cuvânt; aici sunt un nume de material și două cifre
   scurte. Fără lățime minimă, încape și pe telefon fără derulare. */
.figures {
  /* Măsurat: fără limită, tabelul se întinde pe toată lățimea machetei —
     1169px la un ecran de 1280, cu 800px de gol între numele materialului
     și cifra lui. Un tabel se citește pe rânduri, iar rândul trebuie să
     încapă într-o privire. */
  max-width: 40rem;
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  text-align: left;
}

.figures th,
.figures td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
}

.figures tbody tr:last-child th,
.figures tbody tr:last-child td {
  border-bottom: 0;
}

/* Unitatea nu trece prin `text-transform`: „µm” majusculat dă „MM”, fiindcă
   majuscula lui µ e Μ grecesc. Aceeași capcană pentru orice simbol grecesc
   dintr-un cap de coloană. */
.figures__unit {
  display: block;
  margin-top: 0.25rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

.figures__label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* Cifrele nu se rup niciodată de unitatea lor: „11,5” pe un rând și „µm”
   pe următorul se citește ca două lucruri, nu ca o valoare. */
.figures__num {
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--muted);
}

/* Coloana pentru care există tabelul. Fiecare tabel și-o alege singur:
   deriva la temperatură, respectiv clasa de toleranță pe care o poartă
   majoritatea desenelor. */
.figures__num--lead {
  font-weight: 600;
  color: var(--accent);
}

.figures__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Desenul randamentului: aceeași bucată de bară, tăiată în două feluri.

   Convențiile sunt ale celorlalte desene de pe site — contur subțire, cotă
   cu vârfuri și linii de extensie, etichete în mono. Ce se adaugă aici e o
   singură idee: bucata care devine piesă se desenează plină, iar tăietura,
   accentuată. Ochiul numără benzile fără să citească nicio cifră. */
.yield-draw {
  margin: var(--space-3) 0 0;
}

.yield-draw__svg {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
}

/* Conturul ferestrei de bară: o singură linie peste tot, ca la un desen. */
.yield-draw__bar {
  fill: none;
  stroke: var(--steel-600);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.yield-draw__part {
  fill: var(--steel-300);
}

/* Materialul plătit care nu ajunge în nicio piesă. */
.yield-draw__loss {
  fill: var(--accent);
}

/* Bucata de bară rămasă în fereastră merge mai departe: nu e nici piesă, nici
   pierdere. Umplută, se citea ca a treia piesă pe rândul de 200 mm — golul e
   adevărul: acolo bara continuă, dar încă nu s-a tăiat nimic. */
.yield-draw__rest {
  fill: none;
}

.yield-draw__label,
.yield-draw__dimText {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--muted);
}

.yield-draw__dim line {
  stroke: var(--muted);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.yield-draw__dim path {
  fill: var(--muted);
}

.yield-draw__dim .yield-draw__ext {
  opacity: 0.45;
}

.yield-draw__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Textul dintr-un SVG se micșorează odată cu viewBox-ul. Măsurat la 390px:
   desenul se desenează la 335 din 760 de unități, adică 0,44 — iar eticheta de
   13 unități ajungea la 5,8 pixeli pe ecran, de necitit. La lățimi mici
   literele cresc în unități, ca să rămână de aceeași mărime pe sticlă. */
@media (max-width: 40rem) {
  .yield-draw__label,
  .yield-draw__dimText {
    font-size: 26px;
  }
}

.contact-card {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.contact-card a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.legal-body {
  display: grid;
  gap: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
}

.prose h2:first-child {
  margin-top: 0;
}

/* == 23 Banner de dezvoltare =============================================== */

.dev-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 0.625rem var(--space-2);
  background: #4a1d1d;
  color: #ffd9d9;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Cele două bannere de dezvoltare stau amândouă lipite de baza ferestrei.
   Cel cu lucrurile de confirmat urcă deasupra celuilalt, ca să se vadă
   amândouă — altfel al doilea l-ar acoperi pe primul fără să se observe.
   Culoarea e alta fiindcă înseamnă altceva: roșu = ceva lipsește din cod,
   chihlimbar = ceva așteaptă un răspuns de la client. */
.dev-banner--confirm {
  bottom: 2.75rem;
  background: #3d3218;
  color: #f3e2b8;
}

.dev-banner--confirm code {
  color: inherit;
  opacity: 0.75;
}

/* == 24 Vizualizatorul de anvelopă ========================================= */

.visualizer {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 64rem) {
  .visualizer {
    grid-template-columns: 15rem minmax(0, 1fr) 19rem;
    gap: var(--space-4);
  }
}

.visualizer__controls {
  display: grid;
  gap: var(--space-2);
}

/* Cifra introdusă e o cotă: mono, mare, aliniată ca într-un tabel. */
.visualizer__number {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.visualizer__slider {
  width: 100%;
  margin-top: 0.5rem;
  accent-color: var(--brand-700);
}

.visualizer__processes {
  border: 0;
  margin: 0;
  padding: 0;
}

.visualizer__processes legend {
  padding: 0;
  margin-bottom: 0.5rem;
}

.visualizer__process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.visualizer__process-grid .chip {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  padding-inline: 0.5rem;
}

/* --- Desenul --- */

.visualizer__stage {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.is-dark .visualizer__stage {
  background: var(--steel-850);
  border-color: var(--hairline-inverse);
}

.visualizer__drawing {
  width: 100%;
  height: auto;
  display: block;
  color: var(--steel-600);
}

.vz-part {
  fill: var(--steel-300);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition:
    x 220ms var(--ease-technical),
    y 220ms var(--ease-technical),
    width 220ms var(--ease-technical),
    height 220ms var(--ease-technical);
}

.is-dark .vz-part {
  fill: var(--steel-700);
  stroke: var(--steel-100);
}

.vz-envelope {
  fill: none;
  stroke: var(--brand-700);
  stroke-width: 1.2;
  stroke-dasharray: 7 5;
  opacity: 0.75;
  transition:
    x 220ms var(--ease-technical),
    y 220ms var(--ease-technical),
    width 220ms var(--ease-technical),
    height 220ms var(--ease-technical);
}

.is-dark .vz-envelope {
  stroke: var(--brand-300);
}

.vz-axis {
  stroke: var(--steel-500);
  stroke-width: 1;
  stroke-dasharray: 18 4 3 4;
}

.vz-dim-line {
  stroke: var(--brand-700);
  stroke-width: 1;
}

.vz-arrow {
  fill: var(--brand-700);
}

.vz-dim-text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--brand-700);
}

.is-dark .vz-dim-line,
.is-dark .vz-arrow {
  stroke: var(--brand-300);
  fill: var(--brand-300);
}

.is-dark .vz-dim-text {
  fill: var(--brand-300);
}

.visualizer__caption {
  padding: 0.5rem var(--space-2) 0.625rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--muted);
}

.is-dark .visualizer__caption {
  border-top-color: var(--hairline-inverse);
  color: var(--steel-400);
}

/* --- Rezultatele --- */

.visualizer__results {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.visualizer__verdict {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* Verdictul nu se colorează în verde/roșu: pe un site tehnic, o piesă care nu
   intră nu e o eroare, e o conversație. Diferența o face bara din stânga. */
.visualizer__verdict[data-state] {
  padding-left: 0.75rem;
  border-left: 3px solid var(--steel-400);
}

.visualizer__verdict[data-state='fits'] {
  border-left-color: var(--brand-700);
}

.visualizer__verdict[data-state='near-limit'],
.visualizer__verdict[data-state='fits-to-confirm'] {
  border-left-color: var(--steel-500);
}

.visualizer__verdict[data-state='out-of-envelope'],
.visualizer__verdict[data-state='beyond-public-cap'] {
  border-left-color: var(--steel-600);
}

.is-dark .visualizer__verdict[data-state='fits'] {
  border-left-color: var(--brand-300);
}

.visualizer__explain {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.is-dark .visualizer__explain {
  color: var(--steel-300);
}

.visualizer__count {
  margin-top: 0.25rem;
}

.visualizer__machines {
  display: grid;
  gap: 0.625rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.625rem;
}

.is-dark .visualizer__machines {
  border-top-color: var(--hairline-inverse);
}

.vz-machine {
  display: grid;
  gap: 0.3125rem;
}

.vz-machine.is-entering {
  animation: rise 260ms var(--ease-technical) both;
}

.vz-machine--empty {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.vz-machine__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.vz-machine__name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.vz-machine__track {
  display: block;
  height: 3px;
  background: var(--steel-300);
  border-radius: 2px;
  overflow: hidden;
}

.is-dark .vz-machine__track {
  background: var(--steel-700);
}

.vz-machine__fill {
  display: block;
  height: 100%;
  background: var(--brand-700);
  transition: width 260ms var(--ease-technical);
}

.is-dark .vz-machine__fill {
  background: var(--brand-300);
}

.vz-machine[data-state='near'] .vz-machine__fill {
  background: var(--steel-500);
}

.vz-machine__meta {
  font-size: var(--text-2xs);
  color: var(--muted);
  line-height: 1.4;
}

.is-dark .vz-machine__meta {
  color: var(--steel-400);
}

.visualizer__cta {
  margin-top: 0.5rem;
  justify-self: start;
}

.is-dark .visualizer__cta {
  background: var(--steel-100);
  color: var(--steel-900);
}

.visualizer__noscript {
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .vz-part,
  .vz-envelope,
  .vz-machine__fill {
    transition: none;
  }
}

/* == 25 Hero =============================================================== */

.hero {
  background: var(--steel-900);
  color: var(--steel-100);
  padding-block: clamp(var(--space-5), 7vw, var(--space-7)) 0;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding-bottom: clamp(var(--space-4), 5vw, var(--space-6));
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-5);
  }
}

.hero__title {
  margin-top: var(--space-2);
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero__subhead {
  margin-top: var(--space-2);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

/* --- Clipul -------------------------------------------------------------
   Pe îngust clipul e un cadru separat, deasupra textului, fără voal: sub un
   voal de 86%, pe toată lățimea telefonului, abia se mai vedea. Pe lat
   (64rem+) devine fundal, iar textul stă pe voal.

   Contrastul pe lat se ține pe voal, nu pe ce trece prin cadru. Calculat pe
   cel mai rău caz — pixel alb în clip: la 86% grafit, kickerul
   (`--steel-400`) are 4,89:1, subtitlul 6,87:1. Sub 84% kickerul coboară sub
   4,5:1. */

.hero {
  position: relative;
  isolation: isolate;
}

.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Doar o trecere spre grafit la marginea de jos, ca rama să nu fie tăiată. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--steel-900) 0%, transparent 22%);
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .hero__media {
    aspect-ratio: 16 / 9;
  }
}

/* Butonul de pauză stă pe clip, în colțul din dreapta jos. Pe îngust clipul
   ocupă toată lățimea secțiunii, deci înălțimea lui e lățimea × raport. */
.hero__toggle {
  position: absolute;
  top: calc(75vw - 2.75rem - var(--space-2));
  right: var(--gutter);
  padding: 0.375rem 0.75rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--steel-100);
  background: color-mix(in srgb, var(--steel-900) 70%, transparent);
  border: 1px solid var(--steel-600);
  min-height: 2.75rem;
  cursor: pointer;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .hero__toggle {
    top: calc(56.25vw - 2.75rem - var(--space-2));
  }
}

.hero__toggle:hover {
  border-color: var(--steel-400);
}

@media (max-width: 63.99rem) {
  /* Clipul începe direct sub antet; spațiul de sus trece la text. */
  .hero {
    padding-top: 0;
  }

  .hero__inner {
    padding-top: var(--space-3);
  }
}

@media (min-width: 64rem) {
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
  }

  .hero__media::after {
    background:
      linear-gradient(to top, color-mix(in srgb, var(--steel-900) 92%, transparent) 0%, transparent 45%),
      linear-gradient(to right, color-mix(in srgb, var(--steel-900) 88%, transparent) 0%, color-mix(in srgb, var(--steel-900) 86%, transparent) 50%, color-mix(in srgb, var(--steel-900) 45%, transparent) 100%);
  }

  .hero__inner {
    position: relative;
  }

  .hero__toggle {
    top: auto;
    right: var(--gutter);
    bottom: var(--space-3);
  }
}

/* Pe laptopurile cu 768px înălțime, hero-ul avea 705px sub un antet de 72:
   etichetele cifrelor cădeau sub marginea ecranului. Pe ecranele joase se
   strânge spațiul de deasupra textului, nu textul. */
@media (min-width: 64rem) and (max-height: 50rem) {
  .hero {
    padding-top: var(--space-4);
  }

  .hero__inner {
    padding-bottom: var(--space-4);
  }
}

/* --- Banda cifrelor --- */

.hero__band {
  background: var(--steel-900);
  border-top: 1px solid var(--hairline-inverse);
}

/* --- Cifrele-cheie --- */

.stats {
  display: grid;
  gap: 1px;
  background: var(--hairline-inverse);
}

/* Patru cifre: două pe rând de la 40rem (2 + 2, niciun rând ciunt), toate
   patru pe un rând de la 64rem. Erau cinci, până la scoaterea lui „1998”
   (23 septembrie 2026); regula de atunci lăsa ultima cifră să ocupe golul
   unui rând de trei. */
@media (min-width: 40rem) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stats .stat {
  background: var(--steel-900);
  padding: var(--space-2) var(--space-2) var(--space-3) 0;
}

/* Cifra care începe un rând se aliniază la marginea textului de deasupra:
   pe două coloane sunt prima și a treia, pe patru doar prima. */
@media (min-width: 40rem) {
  .stats .stat {
    padding-left: var(--space-2);
  }
  .stats .stat:nth-child(odd) {
    padding-left: 0;
  }
}

@media (min-width: 64rem) {
  .stats .stat:nth-child(odd) {
    padding-left: var(--space-2);
  }
  .stats .stat:first-child {
    padding-left: 0;
  }
}

.stats .stat-value {
  color: var(--steel-100);
}

.stats .stat-label {
  color: var(--steel-400);
  font-size: var(--text-xs);
  line-height: 1.45;
  max-width: 22ch;
}

/* == 26 Blocuri de pagină de start ========================================= */

.home-split {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 60rem) {
  .home-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.section-more {
  margin-top: var(--space-3);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-list li {
  font-size: var(--text-sm);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.tag-list__muted {
  color: var(--muted);
  border-style: dashed;
}

.quality-grid--dark .quality {
  background: var(--bluing);
}

.is-dark .quality-grid {
  background: var(--hairline-inverse);
  border-color: var(--hairline-inverse);
}

.is-dark .quality__title {
  color: var(--steel-100);
}

.is-dark .quality__body {
  color: var(--steel-300);
}

.cta-band__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--steel-400);
}

/* Notele comune ale listei de utilaje: o singură dată, mic, sub listă. */
.visualizer__footnotes {
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
}

.is-dark .visualizer__footnotes {
  color: var(--steel-400);
}

.vz-machine__figure {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

.is-dark .vz-machine__figure {
  color: var(--steel-400);
}

/* == 27 Lanțul de proces =================================================== */

.chain {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 64rem) {
  .chain {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* Desenul rămâne pe ecran cât timp se parcurg pașii: aceeași piesă,
   prelucrată {
  margin: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-2));
}

/* --- Pașii {
  display: grid;
  gap: var(--space-4);
}

/* == 28 Navigația de telefon =============================================== */

/* Sub 1024px navigația principală se ascunde. Butonul acesta o înlocuiește —
   altfel un vizitator de pe telefon nu ar avea niciun link în antet. */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-sm);
  transition: background var(--dur-fast);
}

.menu-toggle:hover {
  background: rgba(22, 25, 27, 0.06);
}

@media (min-width: 64rem) {
  .menu-toggle {
    display: none;
  }
}

/* Trei linii care devin un „×" la deschidere. Desenate din pseudo-elemente,
   fără pictogramă de încărcat. */
.menu-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-technical),
    top var(--dur-fast);
}

.menu-toggle__bars::before {
  top: 0;
}

.menu-toggle__bars::after {
  top: calc(100% - 1.5px);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--hairline);
  background: #fff;
  /* Panoul poate depăși ecranul pe telefoanele mici, în peisaj. */
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  animation: mobile-nav-in var(--dur-base) var(--ease-technical);
}

@media (min-width: 64rem) {
  .mobile-nav {
    display: none;
  }
}

@keyframes mobile-nav-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-nav__inner {
  padding-block: var(--space-2) var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.mobile-nav__list {
  display: grid;
}

.mobile-nav__link {
  display: block;
  /* Ținta de atingere: un deget are nevoie de cel puțin 44px. */
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-lg);
  color: var(--steel-700);
  transition: color var(--dur-fast);
}

.mobile-nav__link:hover {
  color: var(--ink);
}

.mobile-nav__link[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}

.mobile-nav__cta {
  justify-self: start;
  margin-top: var(--space-1);
}

/* Eticheta stă deasupra comutatorului, nu lângă el. Pe rând, cu
   `align-items: center`, meniul deschis face rândul de trei ori mai înalt și
   duce eticheta la mijlocul lui, plutind lângă nimic — se vede în captura de
   la 390px. Pe coloană, deschis sau închis, arată la fel. */
.mobile-nav__locales {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

/* În panoul de telefon meniul se deschide în jos, împingând ce e sub el:
   panoul derulează deja pe verticală, iar un strat plutitor în interiorul unui
   container care derulează se taie la marginea lui. */
.mobile-nav__locales .locale-switch__list {
  position: static;
  margin-top: 6px;
  min-width: 0;
}

.mobile-nav__locales .locale-switch__link {
  min-height: 3rem;
}

.mobile-nav__locales .locale-switch__link[aria-current='true'] {
  background: var(--steel-100);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    animation: none;
  }
}

/* Cursorul de anvelopă: o bandă de 16px e imposibil de prins cu degetul. */
.visualizer__slider {
  height: 2.75rem;
  padding-block: 1.125rem;
  cursor: pointer;
}

/* Indicele cardului de calitate pe fundal închis: `--muted` e gândit pentru
   hârtie și dă doar 2,91:1 pe brunare. Pe întuneric urcă o treaptă. */
.is-dark .quality__index {
  color: var(--steel-400);
}

/* Firul Ariadnei pe antet întunecat. `--muted` e calibrat pentru hârtie și dă
   2,80:1 pe grafit — sub pragul AA. Aceeași corecție ca la indicele cardului
   de calitate: pe întuneric, o treaptă mai deschis. */
.is-dark .breadcrumbs,
.is-dark .breadcrumbs li:not(:last-child)::after {
  color: var(--steel-400);
}

.is-dark .breadcrumbs a:hover {
  color: var(--steel-100);
}

/* == 29 Text de mărime constantă în desene ================================= */

/* Problema: textul dintr-un SVG se scalează odată cu viewBox-ul. Desenul
   lanțului de proces are viewBox 900 și se randează pe ~620px, deci o etichetă
   declarată la 13px ajunge la 9px pe ecran — sub pragul de lizibilitate. Pe
   telefon devine și mai mic.

   Mărirea valorii declarate nu rezolvă: ar fi corectă la o singură lățime.

   Soluția: un script pune pe fiecare desen `--svg-scale` = lățime randată /
   lățime viewBox, iar mărimea se împarte la ea. Rezultatul e o cotă care are
   aceeași mărime pe ecran la orice lățime, exact ca pe un desen de execuție
   tipărit, unde cifra nu se micșorează odată cu piesa. */

[data-fit-text] text {
  font-size: calc(13px / var(--svg-scale, 1));
}

[data-fit-text] .vz-dim-text {
  font-size: calc(13px / var(--svg-scale, 1));
  font-weight: 500;
}

/* Etichetele secundare rămân la aceeași mărime ca celelalte: diferența de
   12 față de 13 px nu purta nicio informație {
  font-size: calc(13px / var(--svg-scale, 1));
}

/* Pe ecrane mici cota urcă la 14px: acolo desenul e mai mic, iar cifra e
   singurul lucru care poartă informația. */
@media (max-width: 40rem) {
  [data-fit-text] text {
    font-size: calc(14px / var(--svg-scale, 1));
  }
  [data-fit-text] .vz-dim-text {
    font-size: calc(14px / var(--svg-scale, 1));
  }
}

.colophon__address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* == 30 Stări interactive ================================================== */

/* Trei stări lipseau din foaie, deși codul le producea deja:
   apăsat, dezactivat și în lucru. Lipsa lor nu se vede pe un desktop cu
   mouse — se vede pe telefonul de la târg, unde nu există „hover”, iar
   apăsarea e singurul răspuns pe care îl primește degetul. */

/* --- Apăsat --------------------------------------------------------------
   Deplasare de un pixel, fără tranziție: apăsarea trebuie să pară instantanee.
   O tranziție aici ar întârzia exact răspunsul pe care îl confirmă. */
.button:active:not(:disabled),
.chip:active,
.menu-toggle:active {
  transform: translateY(1px);
  transition-duration: 0s;
}

.button--primary:active:not(:disabled) {
  background: var(--brand-900, var(--brand-800));
}

.button--onDark:active:not(:disabled) {
  background: var(--steel-300);
}

/* Legăturile de text nu se mișcă — mutarea unui rând dintr-un paragraf la
   atingere se citește ca un defect de randare, nu ca un răspuns. */
.prose a:active,
.colophon a:active,
.nav__link:active,
.mobile-nav__link:active {
  opacity: 0.7;
}

/* --- Dezactivat ----------------------------------------------------------
   Butonul de trimitere e dezactivat cât ține cererea. Până acum se schimba
   doar textul, deci un buton care nu mai răspunde arăta identic cu unul care
   răspunde: singura diferență era că nu se întâmpla nimic. */
.button:disabled,
.button[aria-disabled='true'] {
  cursor: not-allowed;
  /* 0,7 și nu mai puțin: butonul dezactivat din acest site e întotdeauna
     butonul în lucru, iar el poartă textul „se trimite”. La 0,55 albul pe
     bleumarin scade la 4,29:1 — sub prag exact pe mesajul care trebuie citit.
     La 0,7 raportul e 7,14:1 și butonul rămâne vizibil stins. */
  opacity: 0.7;
}

/* Fără această regulă, un buton dezactivat s-ar lumina la trecerea mausului
   și ar promite o acțiune pe care nu o mai poate face. */
.button:disabled:hover,
.button--primary:disabled:hover,
.button--secondary:disabled:hover,
.button--onDark:disabled:hover {
  background: inherit;
  border-color: inherit;
}

.button--primary:disabled,
.button--primary:disabled:hover {
  background: var(--brand-700);
}

.button--onDark:disabled,
.button--onDark:disabled:hover {
  background: var(--steel-100);
}

.field__input:disabled {
  cursor: not-allowed;
  background: var(--steel-100);
  opacity: 0.7;
}

/* --- În lucru ------------------------------------------------------------
   `aria-busy` spune cititorului de ecran ce spune inelul care se rotește
   ochiului liber. Ambele sunt necesare; niciunul nu îl înlocuiește pe celălalt. */
.button[aria-busy='true']::before {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.7s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Cine a cerut mai puțină mișcare primește tot un indiciu vizual — inelul
   incomplet rămâne vizibil, doar că nu se mai rotește. */
@media (prefers-reduced-motion: reduce) {
  .button[aria-busy='true']::before {
    animation: none;
  }
}

/* --- Ținta de atins ------------------------------------------------------
   Butoanele, comutatorul de limbă și cel de meniu au toate 44px. Chipsurile
   de filtrare aveau 36px — destul pentru un maus, puțin pentru un deget.
   Se ridică doar unde arătătorul e imprecis: pe desktop densitatea rândului
   de filtre rămâne cea desenată. */
@media (pointer: coarse) {
  .chip {
    min-height: 2.75rem;
    padding-inline: 1rem;
  }
}

/* == 31 Aliniere optică ==================================================== */

/* Fontul lasă un gol înaintea primei glife, proporțional cu mărimea literei.
   La titlul de 68px golul e de câțiva pixeli, la textul de 18px de sub el
   aproape niciunul — deci titlul, deși are aceeași margine matematică, pare
   retras față de tot ce urmează. Pe o pagină unde restul se aliniază la pixel,
   tocmai cel mai mare element de pe ecran e cel care iese din rând.

   Constanta e proprie fontului. Măsurat în browser, pe „P” la 68px și pe
   corpul de 18px de sub el: titlul începe la 5px, textul la 2px — retras cu
   3px. Corecția trebuie să dea exact -3px la 68px: -0,058 × 68 + 1 = -2,9.

   (IBM Plex Sans, probat și respins la It. 103, cerea -0,0735: acolo titlul
   pornea de la 6px. Cifra nu e universală, e a fontului.)

   Corecția scade flancul propriu al titlului (în em, deci scade odată cu el)
   și adaugă înapoi pixelul textului obișnuit, ca cele două coloane de cerneală
   să înceapă din același loc. O valoare fixă în em ar corecta prea mult pe
   telefon, unde titlul e mai mic. */
.hero__title,
.page-header__title,
.section-head {
  margin-left: calc(-0.058em + 1px);
}

/* Titlurile din interiorul unei casete — panouri, fișe de material — NU se
   corectează: ele se aliniază la marginea cutiei lor, nu la coloana de text.
   Formula de mai sus se auto-anulează oricum la corpuri mici (la 16px dă
   +0,07px), dar selectorul rămâne explicit ca intenția să se vadă. */
.panel__title,
.material__name {
  margin-left: 0;
}

/* == 32 Citirea simulării ================================================== */

/* Din canvasul de design aprobat: deasupra desenului stă o citire scurtă, ca
   pe afișajul unei mașini-unelte — ce operație se execută acum și din ce
   semifabricat iese piesa. Faza se schimbă odată cu pasul. */
.chain__readout {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xs);
  line-height: 1.7;
  color: var(--steel-400);
  text-align: right;
}

.chain__phase {
  color: var(--brand-300);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Pe telefon nu e loc pentru o coloană la dreapta: citirea trece la stânga,
   sub titlu, unde se citește în ordinea firească. */
@media (max-width: 48rem) {
  .chain__readout {
    text-align: left;
  }
}

/* == 33 Cinematica în cinci axe ============================================ */

.kinematics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .kinematics {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.kinematics__stage {
  position: relative;
  height: clamp(260px, 32vw, 380px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.kinematics__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.kinematics__controls {
  display: grid;
  gap: var(--space-2);
}

.kinematics__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.kinematics__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.kinematics__readout dd {
  margin: 0;
}

.kinematics__face,
.kinematics__reach {
  color: var(--brand-700);
  font-size: var(--text-sm);
}

.kinematics__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.kinematics__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 60rem) {
  .kinematics__explain {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.kinematics__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.kinematics__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 34 Scena procesului (lipită de ecran) ================================= */

/* Structura vine din canvasul de design aprobat: secțiunea e de peste trei ori
   mai înaltă decât ecranul, iar conținutul ei stă lipit cât se derulează prin
   ea. Înălțimea în plus nu e decor — ea E parcursul tăieturii. Fără ea nu ar
   exista derulare din care să iasă un progres. */
.chain-scene {
  position: relative;
  height: 340vh;
  background: var(--bluing);
  color: var(--steel-100);
}

.chain-scene__sticky {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

.chain-scene__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  justify-content: space-between;
  padding-top: var(--space-4);
}

.chain-scene__title {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* Pânza primește tot spațiul rămas între antet și carduri. `min-height: 0` e
   obligatoriu: fără el, un copil flexibil refuză să se micșoreze sub
   dimensiunea conținutului și pânza ar împinge cardurile în afara ecranului. */
.chain-scene__stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chain-scene__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Mențiunea că desenul e schematic. Stă sub pânză, pe fundalul de brunare,
   deci are nevoie de un gri deschis: --muted e pentru hârtie. */
.chain-scene__note {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  color: var(--steel-400);
}

.chain-scene__foot {
  padding-bottom: var(--space-3);
}

/* Cele șase fișe de pas.

   Istoria regulii, în trei pași. Întâi erau o grilă de la orice lățime: scena
   e lipită, de înălțimea ecranului și cu `overflow: hidden`, deci ce nu încape
   nu se derulează, dispare — la 390px patru fișe din șase erau tăiate. Apoi
   au devenit o bandă care se derulează lateral, ca să nu se mai piardă
   niciuna. Clientul a cerut să dispară derularea laterală de pe telefon (It.
   105), și are dreptate: e o amânare, nu o soluție — arăți că mai e ceva
   acolo, dar tot trebuie descoperit.

   Forma a treia, sub 60rem: **șase segmente numerotate, egale, pe un singur
   rând.** Titlul și nota ies din fișă, dar nu de pe pagină — sunt aceleași
   chei de text care apar imediat sub scenă, în lista celor șase operații, și
   titlul pasului curent se vede oricum în citirea de deasupra pânzei. Nu se
   pierde nimic; se scoate doar o repetare care nu încăpea.

   La 350px disponibili, un segment are ~58px lățime și 44 înălțime — peste
   pragul de atingere. Grila întreagă, cu titluri, revine de la 60rem. */
.chain-cards {
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overscroll-behavior-x: contain;
  background: var(--hairline-inverse);
  border: 1px solid var(--hairline-inverse);
}

.chain-cards > .chain-card {
  flex: 0 0 min(58vw, 14rem);
}

/* Sub 60rem fișele sunt o grilă, nu o bandă care se derulează lateral.

   Trei straturi de istorie, fiindcă a treia decizie o contrazice pe a doua și
   merită spus de ce. (1) Grilă la orice lățime: scena lipită taie ce nu
   încape, deci patru fișe din șase dispăreau la 390px. (2) Bandă orizontală,
   ca să nu se mai piardă niciuna. (3) Clientul a cerut să nu mai existe
   derulare laterală pe telefon (It. 105) — și are dreptate: banda arată că mai
   e ceva acolo, dar tot trebuie descoperit cu degetul.

   Ce face grila posibilă acum e că **scena nu mai e lipită sub 48rem** —
   regula există de mult, mai jos în fișier. Acolo secțiunea redevine
   obișnuită, nimic nu se mai taie, iar șase fișe pe două coloane încap pe
   înălțime fără să deranjeze pe nimeni.

   Un defect vechi, găsit cu ocazia asta: regula de sub 48rem punea deja
   `grid-template-columns: repeat(2, …)` — dar `.chain-cards` era `display:
   flex`, iar pe un container flex proprietatea aia **nu face nimic**. Intenția
   era scrisă de multe iterații și nu se aplicase niciodată. */
@media (max-width: 59.99rem) {
  .chain-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chain-cards > .chain-card {
    flex: initial;
  }

  /* Nota tehnică a fișei rămâne pe pagină, dar nu aici: se repetă cuvânt cu
     cuvânt în lista celor șase operații, imediat sub scenă, unde are lățime să
     se citească. La 170px pe fișă ar fi cinci rânduri de text mărunt, de două
     ori pe același ecran. Titlul rămâne — el e ce lipsea. */
  .chain-card__note {
    display: none;
  }
}

@media (min-width: 60rem) {
  .chain-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    overflow-x: visible;
  }

  .chain-cards > .chain-card {
    flex: initial;
  }
}

.chain-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--bluing);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.chain-card:hover,
.chain-card.is-active {
  background: var(--bluing-deep);
}

.chain-card.is-active .chain-card__title {
  color: var(--brand-300);
}

.chain-card__index {
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.chain-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--dur-fast);
}

.chain-card__note {
  font-size: var(--text-2xs);
  line-height: 1.5;
  opacity: 0.75;
}

/* Pe ecran mic scena lipită devine o cușcă: șase carduri plus desenul nu încap
   în înălțimea unui telefon. Acolo secțiunea redevine obișnuită, iar desenul
   arată piesa finită.

   `.has-js` în selector nu e podoabă, e necesar. Înălțimea și lipirea se dau
   prin `.has-js .chain-scene` — două clase, specificitate 0,2,0. Regulile de
   aici erau scrise pe o singură clasă, 0,1,0, iar o interogare de mediu **nu
   adaugă specificitate**. Deci pierdeau, iar secțiunea rămânea lipită și pe
   telefon: măsurat, `height` 2.869px și `position: sticky` la 390px, exact
   acolo unde regula spunea „auto” și „static”.

   Se vedea în hală, nu în cod: din cele șase fișe de pas intrau **patru** în
   cutia lipită, iar ultimul rând era tăiat de `overflow: hidden` cu 16px.
   Clientul a semnalat „se văd doar 4 numere din 6”. Cu banda orizontală de
   dinainte defectul era mascat - toate șase erau pe un rând. Grila l-a scos
   la lumină; nu l-a produs. */
/* A patra formă, și cea care ține: scena e din nou lipită pe telefon, dar
   cutia ei nu mai e umplută cu o pânză de înălțime fixă. Pânza ia ce rămâne
   (`flex: 1`, `min-height: 0`), fișele stau pe trei coloane în loc de două -
   două rânduri, nu trei - iar totul încape prin construcție, nu din noroc.

   De ce înapoi la lipire: fără ea, parcursul e chiar înălțimea secțiunii, iar
   o secțiune care încape pe un ecran înseamnă 800px de derulare pentru tot
   lanțul - o singură fluturare de deget, și piesa e gata. Măsurat pe desktop,
   parcursul e de peste trei ori mai lung. Lipită, scena are din nou 300svh de
   parcurs și aceeași cadență ca pe ecranul mare.

   `svh` și nu `vh`: pe telefon `100vh` e ecranul CU barele ascunse, deci mai
   înalt decât ce se vede cât barele sunt afișate - exact cazul în care ultimul
   rând de fișe ar fi tăiat iar. Rândul cu `vh` rămâne pentru browserele care
   nu știu `svh`. */
/* Pânza nu primește înălțime proprie pe telefon: regula de bază îi dă deja
   `flex: 1` și `min-height: 0`, adică „ia ce rămâne și strânge-te dacă nu e
   loc". Înainte avea `46vh` fix, fiindcă scena nu era lipită. Cu lipirea
   întoarsă, o înălțime fixă ar fi împins ultimul rând de fișe afară pe
   ecranele scunde - măsurat la 320×480: trei fișe tăiate, 26px. Așa, pe un
   ecran scund se micșorează desenul, nu dispar fișele. */
@media (max-width: 48rem) {
  .chain-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Sub 22rem lățime (un iPhone SE în picioare are 320px) rândul al doilea de
   fișe ieșea din cutia lipită cu 24px — măsurat, nu presupus. Titlul și
   citirea de deasupra pânzei se string, și încape. */
@media (max-width: 22.5rem) {
  .chain-scene__head {
    padding-top: var(--space-2);
  }

  .chain-scene__title {
    font-size: 1.25rem;
  }

  /* Mențiunea că desenul e schematic NU se ascunde ca să încapă restul: e
     exact felul de rând care se scoate ușor și lipsește greu. Se string
     marginile ei, nu se scoate ea. */
  .chain-scene__note {
    margin-bottom: 0.25rem;
  }

  .chain-scene__foot {
    padding-bottom: var(--space-2);
  }
}

/* --- Explicațiile de sub scenă ------------------------------------------- */

.chain-detail__intro {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

/* Cele șase operații: coloane explicite, nu `auto-fit`.

   `auto-fit` cu minim 260px dădea patru coloane pe un ecran de 1440 — adică
   4 + 2, cu ultimul rând pe jumătate gol. Șase e 3×2 și 2×3; orice număr de
   coloane care nu împarte exact pe șase lasă un rând ciunt, iar un rând ciunt
   pe pagina unui furnizor de precizie se vede înaintea oricărei cote.

   De aceea pragurile sunt scrise, nu calculate: 1 · 2 · 3, fiecare împărțind
   exact pe șase. La 64rem, o coloană are 320px — peste minimul de 260 pe care
   îl cerea regula dinainte. */
.chain-detail {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .chain-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .chain-detail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chain-detail__item {
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-inverse);
}

.chain-detail__photo {
  margin-bottom: var(--space-2);
}

.chain-detail__title {
  margin-top: 0.25rem;
  font-size: var(--text-lg);
  font-weight: 600;
}

.chain-detail__body {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.chain-detail__note {
  margin-top: var(--space-1);
  font-size: var(--text-2xs);
  opacity: 0.75;
}

.chain-detail__machines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
}

/* == 35 Rugozitatea Ra ===================================================== */

.roughness {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .roughness {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.roughness__stage {
  position: relative;
  height: clamp(240px, 30vw, 340px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.roughness__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.roughness__controls {
  display: grid;
  gap: var(--space-2);
}

.roughness__grades {
  margin: 0;
  padding: 0;
  border: 0;
}

.roughness__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

/* Chipul activ își are deja stilul lui în `.chip.is-active` — fundal bleumarin,
   text alb. O regulă proprie aici ar veni mai târziu în cascadă și ar suprascrie
   tocmai albul, lăsând text bleumarin pe fundal bleumarin: un buton gol.

   Punctul marchează treapta pentru care există o cifră în fișa unui utilaj.
   Urmează culoarea textului, ca să rămână vizibil și pe chipul activ. */
.roughness__mark {
  margin-left: 0.25rem;
  color: currentColor;
  font-weight: 700;
}

.roughness__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.roughness__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.roughness__readout dd {
  margin: 0;
  color: var(--brand-700);
  font-size: var(--text-sm);
}

.roughness__definition {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.roughness__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.roughness__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.roughness__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.roughness__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

.roughness__source {
  font-size: var(--text-2xs);
  color: var(--muted);
}

/* == 36 Lanțul de cote ===================================================== */

.stack {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .stack {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.stack__stage {
  position: relative;
  height: clamp(240px, 28vw, 320px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.stack__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stack__controls {
  display: grid;
  gap: var(--space-2);
}

.stack__tolerances {
  margin: 0;
  padding: 0;
  border: 0;
}

.stack__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

.stack__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.stack__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.stack__readout dd {
  margin: 0;
  font-size: var(--text-sm);
}

/* Cifra care nu poate fi depășită se citește în cerneala obișnuită; cea
   statistică în culoarea mărcii — aceleași două culori ca barele din desen,
   ca ochiul să le lege fără legendă. */
.stack__worst {
  color: var(--ink);
}

.stack__rss {
  color: var(--brand-700);
}

.stack__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.stack__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stack__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.stack__subhead {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 37 Decodorul de denumiri ============================================== */

.decode {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .decode {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }
}

.decode__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

/* Fără script, toate fișele stau una sub alta și se citesc ca o listă.
   Clasa `is-enhanced` e pusă de script abia după ce preia comanda — până
   atunci nimic nu se ascunde. */
.decode__panels {
  display: grid;
  gap: var(--space-2);
}

.decode.is-enhanced .decode__panel {
  display: none;
}

.decode.is-enhanced .decode__panel.is-active {
  display: block;
}

.decode__panel {
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
}

.decode__grade {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.decode__meta {
  margin: var(--space-1) 0 0;
}

.decode__reading {
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.decode__parts {
  margin: 0;
}

.decode__none {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.decode__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.decode__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.decode__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.decode__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 38 Adâncimea parcului ================================================= */

.coverage {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .coverage {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Înălțimea crește cu numărul de utilaje: barele rămân lizibile și când
   parcul se mărește, fără să fie nevoie de o altă valoare aici. */
.coverage__stage {
  position: relative;
  height: clamp(320px, 42vw, 460px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.coverage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.coverage__controls {
  display: grid;
  gap: var(--space-2);
}

.coverage__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.coverage__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.coverage__readout dd {
  margin: 0;
  font-size: var(--text-sm);
}

.coverage__count {
  color: var(--brand-700);
}

.coverage__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-2xs);
  line-height: 1.8;
  color: var(--muted);
}

.coverage__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.coverage__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.coverage__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 39 Lista de verificare a cumpărătorului =============================== */

.checklist {
  display: grid;
  gap: 1px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

/* Capul de coloane. Sub 52rem rândul se despachetează pe verticală, deci un
   cap de tabel n-ar mai corespunde la nimic: apare odată cu coloanele. */
.checklist__head {
  display: none;
  background: var(--paper);
  color: var(--muted);
}

@media (min-width: 52rem) {
  .checklist__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 0.25rem 1rem;
    padding: var(--space-1) var(--space-2);
  }

}

.checklist__item {
  background: var(--paper);
}

/* Rândul întreg e legătura, nu doar un cuvânt din el: ținta de atins e un
   rând de 64px, nu trei cuvinte subliniate. */
.checklist__link {
  display: grid;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: var(--space-2);
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast);
}

@media (min-width: 52rem) {
  .checklist__link {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  }
}

@media (min-width: 52rem) {
  /* Coloanele trebuie să fie ale listei, nu ale fiecărui rând.

     Fiecare rând avea grila lui, iar a treia coloană — cifra — are altă
     lățime pe fiecare: de la 58px la zero. Asta le împingea pe celelalte
     două, iar a doua coloană începea în alt loc pe fiecare rând. Măsurat:
     24px de la primul la ultimul. Pe o pagină care arată unui inginer de
     achiziții că firma lucrează precis, o coloană care șerpuiește se vede.

     `subgrid` face rândurile să împrumute coloanele listei. Unde nu e
     acceptat, declarația se ignoră și rămâne așezarea de dinainte. */
  @supports (grid-template-columns: subgrid) {
    .checklist {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    }

    .checklist__item,
    .checklist__head {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
    }

    .checklist__link {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
}

.checklist__link:hover {
  background: var(--steel-100);
}

.checklist__check {
  font-weight: 600;
}

.checklist__answer {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

.checklist__figure {
  font-size: var(--text-xs);
  color: var(--brand-700);
  white-space: nowrap;
}

.checklist__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.checklist__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.checklist__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.checklist__subhead {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 40 Piesa finită ======================================================= */

.part {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .part {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
}

.part__stage {
  position: relative;
  height: clamp(260px, 32vw, 380px);
  border: 1px solid var(--hairline-inverse);
  border-radius: var(--radius);
  background: var(--bluing-deep);
  overflow: hidden;
}

.part__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.part__controls {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.part__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

/* Chipsurile stau pe fundal închis: cele de pe hârtie ar fi invizibile aici.
   Varianta activă se inversează, ca butonul principal de pe antet. */
.chip--onDark {
  gap: 0.5rem;
  border-color: var(--hairline-inverse);
  color: var(--steel-200);
}

.chip--onDark:hover {
  border-color: var(--steel-200);
  color: var(--steel-100);
}

.chip--onDark.is-active {
  background: var(--steel-100);
  border-color: var(--steel-100);
  color: var(--steel-900);
}

.part__readout {
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline-inverse);
}

.part__readout dd {
  margin: 0.25rem 0 0;
}

.part__feature {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--steel-200);
}

.part__note {
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--steel-400);
}

.part__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-inverse);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.part__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.part__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 41 Corecturi pentru ecran îngust ====================================== */

/* Legăturile din subsol aveau 15–19px înălțime: destul pentru un maus, prea
   puțin pentru un deget. Se lărgesc doar unde arătătorul e imprecis, ca
   subsolul de pe desktop să rămână la densitatea desenată. */
@media (pointer: coarse) {
  .colophon__list a {
    display: inline-block;
    padding-block: 0.625rem;
  }
}

/* Eticheta anvelopei, mutată din desen sub el: ca text HTML se rupe pe rânduri
   și rămâne întreagă pe orice lățime.

   Culoarea era `--steel-400`: pe alb dă **2,37:1**, la 11px. WCAG 2.2 AA cere
   4,5:1 pentru text normal, iar blueprint-ul o listează ca risc. Eticheta
   spune ce anvelopă se vede pe desen — nu e decor. `--muted` dă 6,30:1. */
.visualizer__envelope {
  margin-top: 0.25rem;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--muted);
}

/* == 42 Pragul navigației, măsurat ========================================= */

/* Prima verificare la 1024px a arătat că navigația de desktop apărea înainte
   să încapă: antetul cerea 1266px, iar pagina derula lateral pe orice laptop
   între 1024 și 1280. Pragul era ales din obișnuință, nu din măsurătoare.

   Subtitlul siglei ocupa 187px și era ascuns sub 1280, ca navigația să încapă
   de la 68rem. Clientul l-a scos cu totul (It. 100), deci cei 187px sunt acum
   liberi pe orice lățime, iar pragul de 68rem de mai jos rămâne valabil cu
   marjă în plus — nu mai are nimic de ascuns ca să-l atingă. */

/* Navigația principală: nu de la 64rem, ci de la lățimea la care intră. */
@media (min-width: 64rem) and (max-width: 67.99rem) {
  .nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* Un element de grilă are implicit `min-width: auto`, deci refuză să se
   micșoreze sub lățimea conținutului său. Cu o valoare de specificație pe care
   scrie `nowrap`, coloana ajungea la 536px într-un ecran de 360 și pagina
   derula lateral. Ambele capete ale lanțului se taie aici. */
.decode__picker,
.decode__panels {
  min-width: 0;
}

/* Rândul de cotă are trei coloane — etichetă, linie punctată, valoare — și
   nu se poate micșora sub ele. Cu o etichetă germană lungă, la 320px rândul
   ieșea din ecran cu 26px. Pe lățime mică rândul se așază pe două linii:
   linia punctată nu mai are ce lega, deci dispare. */
@media (max-width: 40rem) {
  .spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }

  .spec-leader {
    display: none;
  }

  .spec-value {
    white-space: normal;
    text-align: left;
  }
}

/* Rând a cărui valoare e o propoziție, nu o cotă: pe fișa de capabilitate,
   secțiunea de calitate. Cu `nowrap`, la 768px propoziția ducea pagina la
   1062px. Se așază ca pe telefon, la orice lățime. */
.spec-row--prose {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
}

.spec-row--prose .spec-leader {
  display: none;
}

.spec-row--prose .spec-value {
  white-space: normal;
  line-height: 1.6;
}

/* == 43 Viteza de așchiere ================================================= */

.cutting {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .cutting {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.cutting__stage {
  position: relative;
  height: clamp(240px, 30vw, 340px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.cutting__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cutting__controls {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.cutting__readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.cutting__readout dd {
  margin: 0;
}

.cutting__count {
  color: var(--brand-700);
  font-size: var(--text-sm);
}

.cutting__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-2xs);
  line-height: 1.8;
  color: var(--muted);
}

.cutting__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.cutting__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cutting__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.cutting__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 44 Incertitudinea măsurării =========================================== */

.uncert {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .uncert {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.uncert__stage {
  position: relative;
  height: clamp(220px, 26vw, 300px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.uncert__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.uncert__controls {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.uncert__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.uncert__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.uncert__readout dd {
  margin: 0;
  font-size: var(--text-sm);
}

.uncert__accept {
  color: var(--brand-700);
}

.uncert__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.uncert__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.uncert__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.uncert__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 45 Semifabricatul pe ferăstrău ======================================== */

.stock {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .stock {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.stock__stage {
  position: relative;
  height: clamp(240px, 28vw, 320px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.stock__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stock__controls {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.stock__shapes {
  margin: 0;
  padding: 0;
  border: 0;
}

.stock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

.stock__pair {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.stock__readout {
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.stock__readout dd {
  margin: 0.25rem 0 0;
}

.stock__result {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--brand-700);
}

/* Când nu intră pe niciunul, răspunsul nu se colorează ca o reușită. */
.stock__result.is-none {
  color: var(--muted);
}

.stock__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.stock__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stock__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.stock__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 46 Atributul `hidden` bate orice display ============================== */

/* Browserul dă `[hidden] { display: none }`, dar regula lui are cea mai mică
   specificitate: orice `display` scris de noi o învinge. Așa s-a întâmplat cu
   `.field`, care e `display: grid` — câmpul rămânea pe ecran deși scriptul îl
   marcase ascuns.

   `!important` e justificat aici — al doilea și ultimul loc din foaie, după
   blocul de mișcare redusă:
   `hidden` înseamnă ascuns, fără excepții. Un element pe care îl marcăm ascuns
   și care totuși se vede e o minciună spusă deopotrivă ochiului și cititorului
   de ecran, fiindcă `hidden` îl scoate și din arborele de accesibilitate. */
[hidden] {
  display: none !important;
}

/* Avertisment de exploatare în panou: cererile intră, dar notificarea nu
   pleacă. Se colorează ca o atenționare, nu ca o eroare — sistemul
   funcționează, doar că tăcut. */
.admin__alert {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  border-left: 3px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.admin__alert code {
  padding: 0.1em 0.3em;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Creditele foto de pe pagina legală. */
.credits {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.credits__item + .credits__item {
  margin-top: 0.375rem;
}

/* Marcajul care spune că fotografia nu e din hala METALPET. Nu e o notă de
   subsol: stă lipită de creditul ei, fiindcă asta e informația care împiedică
   o citire greșită. */
.credits__stock {
  margin-left: 0.375rem;
  padding: 0.1em 0.4em;
  border-radius: var(--radius);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.credits__empty {
  color: var(--muted);
}

/* == 47 Clase care au înlocuit stilurile din marcaj ======================== */

/* Cele cinci atribute `style=` din vederi erau singurul motiv pentru care
   politica de securitate trebuia să accepte `'unsafe-inline'` la stiluri.
   Mutate aici, `style-src` a putut fi strâns la `'self'`. Stilurile puse din
   JavaScript prin CSSOM nu sunt atinse de această restricție. */

.not-found__title {
  margin-top: var(--space-2);
}

.not-found__body {
  margin-top: var(--space-3);
}

.not-found__action {
  margin-top: var(--space-4);
}

.colophon__logo {
  height: 38px;
  width: auto;
}

.colophon__blurb {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* == 48 Butonul de meniu apare abia cu script ============================== */

/* Butonul se vedea mereu, dar fără JavaScript nu deschidea nimic: pe telefon,
   antetul avea un singur link — sigla — plus un buton mut. Acum panoul vine
   deschis din server, iar butonul apare doar după ce scriptul poate să-l
   plieze. Un buton care promite un meniu trebuie să aibă un meniu. */
.menu-toggle {
  display: none;
}

.has-menu-toggle .menu-toggle {
  display: flex;
}

/* Peste pragul navigației complete, butonul dispare oricum. */
@media (min-width: 68rem) {
  .has-menu-toggle .menu-toggle {
    display: none;
  }
}

/* Fără script, panoul e o listă obișnuită sub siglă — nu un panou suprapus. */
.mobile-nav {
  position: static;
}

.has-menu-toggle .mobile-nav {
  position: relative;
}

@media (min-width: 68rem) {
  .mobile-nav {
    display: none;
  }
}

/* == 49 Scena procesului fără script ====================================== */

/* Scena e înaltă fiindcă înălțimea ei ESTE parcursul tăieturii. Fără script,
   pânza rămâne goală, iar cele 3,4 ecrane devin 1871px de nimic — cardurile și
   explicațiile se văd, dar drumul până la ele e pustiu.

   Așa că înălțimea se dă doar când există cine să o folosească. Restul —
   titlul, citirea, cele șase carduri, explicațiile de dedesubt — rămâne
   neschimbat în ambele cazuri. */
.chain-scene {
  height: auto;
}

.has-js .chain-scene {
  height: 340vh;
}

.chain-scene__sticky {
  position: static;
  height: auto;
}

.has-js .chain-scene__sticky {
  position: sticky;
  height: calc(100vh - var(--header-height));
}

/* Pe telefon, lipirea se anulează — și anularea stă AICI, imediat sub regulile
   pe care le anulează, nu la trei mii de rânduri distanță.

   De ce contează locul: cele două reguli de mai sus au specificitate 0,2,0
   (`.has-js` plus clasa). Anularea era scrisă mai sus în fișier, pe o singură
   clasă, iar o interogare de mediu **nu adaugă specificitate** — deci pierdea
   de două ori: și la specificitate, și la ordine. Rezultatul: secțiunea rămânea
   lipită pe telefon, cu `overflow: hidden`, iar din cele șase fișe de pas
   intrau **patru**. Ultimul rând era tăiat cu 16px.

   Măsurat la 390px, nu dedus: `height` 2.869px și `position: sticky` acolo unde
   regula spunea „auto” și „static”. Semnalat de client: „se văd doar 4 numere
   din 6”.

   Scena lipită are sens doar unde ecranul e mai înalt decât desenul plus cele
   șase fișe. Sub 48rem nu e, deci secțiunea redevine obișnuită și nimic nu se
   mai taie. */
/* Pe telefon scena rămâne lipită — altfel parcursul ar fi chiar înălțimea
   secțiunii, adică un ecran, și tot lanțul s-ar consuma într-o fluturare de
   deget. Ce se schimbă e unitatea: `svh` e ecranul CU barele browserului
   afișate, deci cutia nu mai promite înălțime pe care telefonul o ia înapoi
   când apar barele. Rândul cu `vh` rămâne pentru cine nu știe `svh`.

   Regula stă AICI, nu lângă aranjarea de la § 34, pentru același motiv scris
   mai sus: `.has-js .chain-scene` are specificitate 0,2,0 în ambele locuri, o
   interogare de mediu nu adaugă nimic, deci decide ordinea din fișier. Scrisă
   la § 34, pierdea în fața regulii de deasupra — și scena avea pe telefon
   înălțimea de desktop, 340vh, nu cea cerută. */
@media (max-width: 48rem) {
  .has-js .chain-scene {
    height: 300vh;
    height: 300svh;
  }

  .has-js .chain-scene__sticky {
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));
  }
}

/* O pânză goală cu chenar nu spune nimic; fără script nu se afișează deloc. */
.chain-scene__stage {
  display: none;
}

.has-js .chain-scene__stage {
  display: block;
}

/* == 50 Demonstrațiile interactive fără script ============================ */

/* Fiecare demonstrație are trei părți care există numai prin JavaScript:
   pânza pe care se desenează, comenzile care o schimbă și citirea rezultatului.
   Fără script, ele devin o cutie goală cu chenar și niște cursoare care nu se
   mișcă — exact greșeala butonului de meniu, repetată de opt ori.

   Explicațiile rămân: ele poartă informația. Schema e un ajutor de înțelegere,
   nu purtătorul ei — acum și în fapt, nu doar în comentariu. */
html:not(.has-js) .part__stage,
html:not(.has-js) .kinematics__stage,
html:not(.has-js) .roughness__stage,
html:not(.has-js) .cutting__stage,
html:not(.has-js) .stock__stage,
html:not(.has-js) .uncert__stage,
html:not(.has-js) .stack__stage,
html:not(.has-js) .coverage__stage,
html:not(.has-js) .visualizer__stage,
html:not(.has-js) .part__controls,
html:not(.has-js) .kinematics__controls,
html:not(.has-js) .roughness__controls,
html:not(.has-js) .cutting__controls,
html:not(.has-js) .stock__controls,
html:not(.has-js) .uncert__controls,
html:not(.has-js) .stack__controls,
html:not(.has-js) .coverage__controls,
html:not(.has-js) .visualizer__controls,
html:not(.has-js) .decode__picker {
  display: none;
}

/* Mesajul din `<noscript>` ia locul lor: spune ce lipsește și unde sunt
   cifrele, în loc să lase o secțiune care începe cu „mutați cursorul”. */
.noscript-note {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  border-left: 3px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* == 51 Fișa de capabilitate ============================================== */

/* Pagina e gândită întâi pentru hârtie: un inginer de achiziții o tipărește și
   o pune la dosarul de furnizor. De aceea blocurile nu se rup între pagini și
   îndrumarea de tipar dispare la tipar — acolo cititorul a tipărit deja. */

/* `.profile` stă pe același element cu `.shell`, care se centrează singur.
   Un `max-width` aici ar îngusta containerul și ar împinge tot conținutul
   spre mijloc — titlul paginii rămânea la stânga, fișa aluneca la dreapta.
   Lățimea de citire se pune pe blocuri, nu pe container. */
.profile__block > .spec-list,
.profile__hint,
.profile__inline,
.profile__note {
  /* Era 62rem, adică în jur de 130 de caractere pe rând — prea lat pentru
     propoziții pe care cineva chiar le citește, chiar și pe o fișă densă. */
  max-width: var(--measure);
}

.profile__block {
  margin-block-start: var(--space-6);
  break-inside: avoid;
  page-break-inside: avoid;
}

.profile__block:first-of-type {
  margin-block-start: var(--space-4);
}

.profile__hint {
  margin-block-end: var(--space-5);
  padding: var(--space-3);
  border-left: 3px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.profile__facts {
  display: grid;
  gap: var(--space-3);
}

.profile__fact dd {
  margin: 0;
  color: var(--ink);
}

.profile__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

/* Aceleași 24 de pixeli ca în subsol: legăturile aveau 17px înălțime. */
/* `.profile__inline a` NU intră aici: acolo legătura stă la capătul unei
   propoziții, iar 2.5.8 are excepție pentru ținte din text curgător. Padding
   pe ea ar umfla rândul fără să câștige nimic. */
.profile__list a {
  display: inline-block;
  padding-block: 0.25rem;
}

.profile__inline {
  margin: 0;
  line-height: 1.7;
}

.profile__note,
.profile__issued {
  margin-block-start: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

.profile__issued {
  margin-block-start: var(--space-2);
  /* Adresa paginii e un singur „cuvânt” de 50 de semne: la 320px împingea
     pagina la 339px (EN) și 381px (DE). */
  overflow-wrap: anywhere;
}

/* Cuvintele compuse germane mai late decât coloana la 320px: titlul
   „Datenschutzerklärung” (331px) și capul de tabel „Werkstoffausnutzung”
   (330px), care lățeau pagina, iar tabelul trăgea după el și fotografia.
   Despărțirea în silabe vine după `lang` din `<html>`; `anywhere` rupe doar
   unde browserul nu are dicționar, și coboară lățimea minimă a cuvântului,
   ca grila și tabelul să nu mai crească după el. */
.page-header__title,
.figures thead th {
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .profile__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .profile__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ce are rost pe ecran, dar nu pe hârtie. */
@media print {
  .screen-only {
    display: none !important;
  }

  .profile__block {
    margin-block-start: 8mm;
  }

  /* Tabelul cu parcursul unui reper.

     Pe ecran are `min-width: 44rem` și se derulează lateral în cutia lui.
     Pe hârtie nu există derulare: 44rem înseamnă 704px, iar lățimea
     tipăribilă a unei pagini A4 cu margini obișnuite e sub atât — tabelul
     ar ieși din pagină și s-ar tăia exact coloana care spune ce lasă fiecare
     operație mai departe. Fără lățime minimă, se strânge singur. */
  .prose-table {
    min-width: 0 !important;
    font-size: 9pt;
  }

  .prose-table-wrap {
    overflow: visible !important;
    /* Umbra spune „mai e conținut dacă derulezi”. Pe hârtie nu derulează
       nimeni, deci ar fi doar o dungă gri la marginea tabelului. */
    background-image: none !important;
  }

  /* Un rând de tabel sau un bloc explicativ tăiat de saltul de pagină se
     citește de două ori și se înțelege o dată. */
  .prose-table tr,
  .figures tr,
  .yield-draw,
  .capability__item,
  .modes__item,
  .onboarding__step,
  .routing__pair,
  .material {
    break-inside: avoid;
  }
}

/* == 52 Întrebări tehnice ================================================== */

/* Aceeași așezare ca titlul de secțiune: întrebarea într-o coloană, răspunsul
   în cealaltă, aliniate pe prima linie de scris. Cine caută o cifră scanează
   coloana din stânga; cine citește, citește coloana din dreapta. */

.faq-group + .faq-group {
  margin-top: var(--space-6);
}

.faq-group__heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.faq-group__index {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

.faq-list {
  margin: 0;
}

.faq-item {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 60rem) {
  .faq-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-5);
    align-items: baseline;
  }
}

.faq-item__q {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
}

/* `dd` vine cu o margine implicită de 40px din browser. Fără zeroul ăsta,
   răspunsul ar fi retras față de întrebare pe telefon, unde cele două stau
   una sub alta. */
.faq-item__a {
  margin: 0;
}

.faq-item__a p {
  margin: 0;
  max-width: var(--measure);
  line-height: 1.65;
}

.faq-item__a p + p {
  margin-top: var(--space-2);
}

/* == 53 Tabelele pe telefon =============================================== */

/* Sub 48rem tabelul NU se mai derulează lateral — se desface în fișe.

   Cum era: `.prose-table` are `min-width: 44rem` (704px), iar cutia din jur
   `overflow-x: auto`. La 390px asta însemna 704px de tabel într-o fereastră de
   350 — jumătate din conținut era în afara ecranului, la capătul unei derulări
   pe care trebuie s-o descoperi. Măsurat cu o sondă care raportează fiecare
   element ce iese din viewport: celulele ieșeau cu până la 334px, pe trei
   pagini de capabilitate.

   Derularea laterală e o amânare, nu o soluție: pe un ecran de telefon un
   tabel de trei coloane nu încape, oricâte umbre i-am pune la margini. Aici
   rândul devine fișă — cheia e titlul ei, iar fiecare valoare își poartă
   numele coloanei, adus din `data-eticheta`. Antetul rămâne în pagină pentru
   cititorul de ecran, doar ascuns vizual: structura de tabel nu se pierde.

   Pragul e 48rem, nu 30: la 768px tabelul de 704px încă intra, dar la fix,
   iar ultima coloană se lipea de margine. */

@media (max-width: 47.99rem) {
  .prose-table-wrap {
    overflow-x: visible;
    /* Nu mai e nimic de derulat, deci nici umbrele care anunță derularea. */
    background-image: none;
  }

  .prose-table {
    min-width: 0;
    max-width: none;
  }

  .prose-table,
  .prose-table tbody,
  .prose-table tr,
  .prose-table thead th,
  .prose-table tbody th,
  .prose-table td {
    display: block;
    width: auto;
  }

  /* Antetul nu se șterge: rămâne citibil de un cititor de ecran, care altfel
     ar pierde legătura dintre celulă și coloana ei. */
  .prose-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .prose-table tr {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--hairline);
  }

  .prose-table tr:last-child {
    border-bottom: 0;
  }

  .prose-table tbody th,
  .prose-table td {
    padding: 0;
    border-bottom: 0;
  }

  .prose-table tbody th {
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .prose-table__key {
    margin-bottom: var(--space-1);
  }

  /* Numele coloanei, adus lângă valoarea lui. Fără el, „±0,008 / -0,025” e o
     pereche de numere fără subiect. */
  .prose-table td[data-eticheta]::before {
    content: attr(data-eticheta);
    display: block;
    margin-top: var(--space-2);
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* == 54 Paginile de detaliu (material, ramură) ============================ */

.detail-block + .detail-block {
  margin-top: var(--space-5);
}

/* Titlul într-o coloană, textul în cealaltă, aliniate pe prima linie de scris
   — aceeași așezare ca titlurile de secțiune din restul site-ului (It. 101).
   Într-o singură coloană, textul rămâne limitat la `--measure` și lasă
   jumătate de ecran gol pe un monitor lat; pe două, pagina e citibilă și
   plină, fără să crească lungimea rândului. */
@media (min-width: 60rem) {
  .detail-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-5);
    align-items: baseline;
  }

  .detail-block > .section-head {
    margin-bottom: 0;
  }
}

/* Numele grupei din pagina-mamă e acum un link. Nu primește culoare proprie:
   ar rupe grila de cartonașe într-un tablou de albastru. Se poartă ca titlu și
   se subliniază abia la trecerea cursorului. */
.material__name a {
  color: inherit;
  text-decoration: none;
}

.material__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.material-detail__uses {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
  max-width: var(--measure);
}

.material-detail__uses li {
  position: relative;
  padding-left: 1.25rem;
}

/* Semnul de listă e desenat, nu un glonț tipografic: la mărimea corpului de
   text un punct plin e prea greu, iar o liniuță se confundă cu cratima din
   text. Un segment scurt, la culoarea regulilor, se citește ca marcaj. */
.material-detail__uses li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.625rem;
  height: 1px;
  background: var(--rule);
}

/* Lista de etichete devine listă de legături pe paginile de ramură: de acolo
   cititorul pleacă la material și la proces. Chenarul rămâne al etichetei;
   se schimbă doar la trecerea cursorului, ca să se vadă că e apăsabilă. */
.tag-list--links a {
  color: inherit;
  text-decoration: none;
}

.tag-list--links li:hover {
  border-color: var(--brand-700);
}

.detail-block__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Numele ramurii din listă e acum o legătură; se poartă ca titlu, se
   subliniază abia la trecerea cursorului - aceeași regulă ca la materiale. */
.industry__name a {
  color: inherit;
  text-decoration: none;
}

.industry__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* == 55 Certificări ======================================================= */

/* Datele unei certificări confirmate. Azi nu se vede: nu e niciuna publicabilă.
   Există fiindcă ziua în care apare prima nu trebuie să ceară și cod nou. */
.cert__details {
  display: grid;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
}

@media (min-width: 40rem) {
  .cert__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Datele certificării pe toată lățimea rândului, sub standard și descriere.
   Lăsate în grila de trei coloane a `.cert`, cădeau în coloana de 9rem și se
   suprapuneau peste descriere. */
@media (min-width: 48rem) {
  .cert__details {
    grid-column: 1 / -1;
  }
}

.cert__details dt {
  margin: 0;
}

.cert__details dd {
  margin: 0;
  font-size: var(--text-sm);
}

.cert-empty {
  margin-bottom: var(--space-3);
  color: var(--muted);
}

/* Documentele care însoțesc lotul: titlu și explicație, una sub alta. Erau în
   grila `.cert`, care are o coloană de 9rem pentru numărul standardului — iar
   documentele n-au standard, deci textul rămânea strâns în restul. */
.doc-list {
  margin: var(--space-2) 0 0;
  border-top: 1px solid var(--hairline);
}

.doc-list__item {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.doc-list dt {
  margin: 0;
  font-weight: 600;
}

.doc-list dd {
  margin: 0.25rem 0 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* == 56 Lista de utilaje ================================================== */

.machine-sheet__hint {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Rezumatul parcului. Nu `.figures`: aceea e regulă de TABEL, iar pe o listă
   de definiții dădea valoarea mai mică decât eticheta. */
.machine-sheet__summary {
  display: grid;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 40rem) {
  .machine-sheet__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.machine-sheet__summary dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.machine-sheet__summary dd {
  margin: 0.25rem 0 0;
  font-size: var(--text-xl);
  line-height: 1.1;
}

/* `.section-head` e `display: grid`, deci un al doilea copil cade pe rândul
   următor. Aici numărul trebuie să stea lângă titlu, pe linia lui. */
.machine-sheet__heading {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.machine-sheet__group + .machine-sheet__group {
  margin-top: var(--space-6);
}

.machine-sheet__count {
  margin-left: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
}

.machine-sheet__item {
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.machine-sheet__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
}

.machine-sheet__qty {
  margin-left: 0.375rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
}

/* Specificațiile pe două coloane de la tabletă în sus. Pe telefon, una - la
   350px două coloane ar da 170px pe valoare, iar „HSK-A63 / BT40” s-ar rupe pe
   trei rânduri. */
.machine-sheet__specs {
  display: grid;
  gap: var(--space-1) var(--space-4);
}

@media (min-width: 40rem) {
  .machine-sheet__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .machine-sheet__specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* La tipar, un utilaj nu se rupe între două pagini: cine citește o listă de
   specificații pe hârtie o citește pe rânduri, iar un rând tăiat la mijloc îl
   trimite înapoi. Grupul de proces începe pe pagină nouă. */
@media print {
  .machine-sheet__group {
    break-before: page;
  }

  .machine-sheet__group:first-of-type {
    break-before: auto;
  }

  .machine-sheet__item {
    break-inside: avoid;
  }

  .machine-sheet__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* == 57 Meniul pe două niveluri =========================================== */

/* Al doilea nivel se deschide fără JavaScript: `:hover` pentru maus,
   `:focus-within` pentru tastatură. Panoul e în pagină din server - nu e
   `hidden`, doar nu e desenat până nu e cerut. Pe ecran tactil nu există nici
   hover, nici focalizare înaintea atingerii, iar acolo linkul principal duce la
   pagina secțiunii, care listează aceleași pagini. Meniul e un scurtcircuit pe
   desktop, nu singurul drum. */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
}

/* Linkul principal devine rând cu săgeată. `inline-flex`, nu `flex`: regula
   veche îi dă `position: relative` și un subliniat desenat din `::after`, care
   se întinde pe toată lățimea elementului. */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.nav__caret {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--dur-fast);
}

.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret {
  transform: rotate(180deg);
}

.nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(var(--space-2) * -1);
  z-index: 60;
  min-width: 14rem;
  /* Spațiul dintre link și panou ar rupe trecerea cursorului: mausul ar ieși
     din element și panoul s-ar închide sub deget. Se face din `padding-top`,
     deci rămâne în interiorul zonei care ține panoul deschis. */
  padding-top: 0.5rem;
}

.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  display: block;
}

.nav__sub {
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(22, 25, 27, 0.1);
}

.nav__sublink {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  /* Nu doar `min-height`: „Rectificare și electroeroziune cu fir” trece pe două
     rânduri, iar fără spațiu propriu textul atinge marginile. */
  padding-block: 0.4375rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--steel-700);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.nav__sublink:hover {
  color: var(--ink);
  background: var(--steel-100);
}

.nav__sublink[aria-current='page'] {
  color: var(--brand-700);
}

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

/* --- Al doilea nivel în panoul de telefon -------------------------------- */

/* Nimic pliat: toate paginile vizibile, una sub alta. Un acordeon ar cere
   JavaScript ca să se deschidă și ar ascunde din server exact ce caută
   vizitatorul. Panoul derulează pe verticală, care nu deranjează pe nimeni. */
.mobile-nav__sub {
  margin: 0;
  padding: 0 0 var(--space-1) var(--space-2);
  list-style: none;
  border-bottom: 1px solid var(--hairline);
}

.mobile-nav__sublink {
  display: flex;
  align-items: center;
  /* 44px, ca orice țintă de atingere. */
  min-height: 2.75rem;
  font-size: var(--text-sm);
  color: var(--steel-600);
  transition: color var(--dur-fast);
}

.mobile-nav__sublink:hover,
.mobile-nav__sublink[aria-current='page'] {
  color: var(--ink);
}

/* Rândul principal nu-și mai poartă linia de despărțire când are sub-listă:
   linia o pune sub-lista, sub ultimul ei rând. Două linii lipite arată ca o
   greșeală. */
.mobile-nav__list li:has(.mobile-nav__sub) > .mobile-nav__link {
  border-bottom: 0;
}

/* Intrarea adăugată unei secțiuni fără să-i fie sub-pagină. „Întrebări
   tehnice” nu e al șaselea proces: linia o spune, fără să scrie nimic. */
.nav__item--added {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--hairline);
}

.mobile-nav__sub .nav__item--added {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}