/* ==========================================================================
   24converter.com

   Direction: warm product-page. Contrast comes from WEIGHT, not from serif
   stroke modulation — one grotesque (Archivo) used at 400 and 800, on a sand
   page with cream rounded cards and very soft warm shadows.

   Signature device, carried over from the previous direction and restyled:
   the equivalence mark — a hairline with a circled "=" sitting on it, now
   centred inside the card, echoing the reference's rule / swatch / label stack.

   Logical properties throughout (padding-inline, text-align: start) so an RTL
   locale needs no stylesheet changes. Nothing is sized to a fixed text length.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --sand:       #EBE3D3;   /* page */
  --sand-deep:  #E1D6C1;   /* tinted blocks inside cards */
  --cream:      #F6F1E7;   /* cards */
  --cream-lift: #FBF8F1;   /* raised surfaces */
  --cocoa:      #5A4632;   /* headlines, buttons  — 7.0:1 on sand */
  --cocoa-soft: #6F6355;   /* body                — 4.6:1 on sand */
  --tan:        #B99C74;   /* rules, rings — decorative, never text */
  --swap-dim:   #B3B3B3;   /* jumatatea din spate a semnului de intoarcere */

  --rule:       rgba(90, 70, 50, .22);
  --rule-soft:  rgba(90, 70, 50, .12);

  --body-font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fs-display: clamp(2.4rem, 6.4vw, 4.6rem);
  --fs-h2:      clamp(1.7rem, 3.8vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-figure:  clamp(2.1rem, 5.2vw, 3.3rem);
  --fs-label:   .75rem;

  --r-card: 28px;
  --r-sm:   16px;
  --r-pill: 999px;

  --shadow-card: 0 26px 60px -32px rgba(90, 70, 50, .38);
  --shadow-soft: 0 14px 34px -20px rgba(90, 70, 50, .30);

  --gutter: clamp(1rem, 4vw, 2.75rem);
  --shell:  1180px;
  --section-space: clamp(3.75rem, 8vw, 7rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--cocoa);
  font-family: var(--body-font);
  font-size: clamp(.95rem, .3vw + .9rem, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--gutter);
  z-index: 50; background: var(--cocoa); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { inset-block-start: .75rem; }

/* ---------- shared type ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

/* No .script rule any more: the hero went from eyebrow-chip + headline + lead
   to the reference's own two-part stack, headline then subtitle. A tracked-caps
   capsule above an h1 is the house style of every generated landing page. */

.display {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .98;
  text-wrap: balance;
}

.heading {
  font-weight: 800;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--cocoa);
  text-wrap: balance;
}

.lead { color: var(--cocoa-soft); max-width: 52ch; }

.section { padding-block: var(--section-space); }

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-block-size: 3.25rem;
  padding-inline: clamp(1.75rem, 3vw, 2.5rem);
  padding-block: .5rem;
  background: var(--cocoa); color: var(--cream);
  border: 1px solid var(--cocoa);
  border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.btn--ghost { background: transparent; color: var(--cocoa); border-color: var(--rule); }
.btn--ghost:hover { background: var(--cream); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.dot {
  inline-size: 2.4rem; block-size: 2.4rem;
  display: inline-grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; cursor: pointer; text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.dot svg { inline-size: .85rem; block-size: .85rem; }
.dot:hover { background: var(--cocoa); border-color: var(--cocoa); color: var(--cream); }

/* ==========================================================================
   Signature: the equivalence mark
   In the reference this is a rule, a small circle and a bold caps label,
   stacked and centred. Here the circle carries the "=" and does the swapping.
   ========================================================================== */
.eq { display: flex; align-items: center; }
.eq__rule { flex: 1 1 auto; block-size: 1px; background: var(--rule); }

.eq__mark {
  flex: 0 0 auto;
  position: relative;
  inline-size: 3rem; block-size: 3rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--cream-lift);
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.eq__mark:hover { border-color: var(--tan); transform: scale(1.06); }

/* Litera ramane pe semnele care nu sunt butoane: paginile fara drum de
   intoarcere si cartonasele de pe prima pagina. */
.eq__glyph {
  grid-area: 1 / 1;
  font-weight: 700;
  font-size: 1.15rem; line-height: 1;
}

/* Butonul de intoarcere: sagetile si egalul in acelasi desen, amandoua mereu
   pe ecran. Sub mouse nu se roteste si nu dispare nimic -- isi schimba doar
   culorile intre ele, deci se vede ca sunt doua lucruri, nu unul care pleaca
   si altul care vine. */
.eq__art {
  grid-area: 1 / 1;
  inline-size: 100%; block-size: 100%;
  display: block;
}
.eq__art-arrows { color: var(--swap-dim); transition: color .3s var(--ease); }
.eq__art-equals { color: var(--cocoa); transition: color .3s var(--ease); }
.eq__mark:hover .eq__art-arrows,
.eq__mark:focus-visible .eq__art-arrows { color: var(--cocoa); }
.eq__mark:hover .eq__art-equals,
.eq__mark:focus-visible .eq__art-equals { color: var(--swap-dim); }

.eq--sm .eq__mark {
  inline-size: 2rem; block-size: 2rem;
  background: transparent; cursor: default;
}
.eq--sm .eq__mark:hover { transform: none; border-color: var(--rule); }
.eq--sm .eq__glyph { font-size: .85rem; }

/* ==========================================================================
   Top bar — a cream capsule floating on the sand page
   ========================================================================== */
/* `clip`, nu `hidden`: `hidden` ar face din cadru un container de derulare si
   ar strica pozitionarea lipita; `clip` doar taie, si numai pe orizontala.
   Petele din fundal sunt limitate mai jos la latimea paginii; asta e plasa de
   siguranta pentru orice podoaba viitoare care ar da sa iasa in afara. */
.frame {
  padding-inline: var(--gutter);
  padding-block-start: var(--gutter);
  overflow-x: clip;
}
.frame__inner { max-width: var(--shell); margin-inline: auto; }

.topbar {
  background: var(--cream);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
  padding-inline: clamp(1.25rem, 3vw, 2.25rem);
  padding-block: .9rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.wordmark { text-decoration: none; text-align: center; display: block; }
.wordmark__line { display: flex; align-items: baseline; justify-content: center; gap: .12em;
  /* Marca este un nume propriu: in araba si urdu directia RTL ii inversa
     cele doua parti si se citea "converter24". Nu se reordoneaza niciodata. */
  direction: ltr; }
.wordmark--start { text-align: start; }
.wordmark--start .wordmark__line { justify-content: flex-start; }
[dir="rtl"] .wordmark--start .wordmark__line { justify-content: flex-end; }
.wordmark__num { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.wordmark__script {
  font-family: var(--body-font);
  font-size: 1.4rem; font-weight: 400; line-height: 1;
  letter-spacing: -.01em; color: var(--cocoa-soft);
}
.wordmark__sub {
  display: block;
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cocoa-soft); margin-block-start: .15rem;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.75rem); }
.nav--end { justify-content: flex-end; }
.nav__link {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: .4rem .2rem;
  color: var(--cocoa-soft);
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--cocoa); }
.nav__link[aria-current="page"] { color: var(--cocoa); font-weight: 700; }

.lang { position: relative; }
.lang__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .85rem; border: 1px solid var(--rule); border-radius: var(--r-pill);
  transition: border-color .3s var(--ease);
}
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle::after {
  content: ""; inline-size: .38rem; block-size: .38rem;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang[open] .lang__toggle { border-color: var(--cocoa); }
.lang__list {
  position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0;
  z-index: 30; min-inline-size: 10rem;
  background: var(--cream-lift); border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  padding: .4rem;
}
.lang__item {
  display: block; text-decoration: none; padding: .55rem .8rem;
  border-radius: 10px;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.lang__item:hover { background: var(--sand); }

/* Exponentul, marit pana se citeste. La 2em glifa ajunge cat o majuscula --
   9,3 px langa 9,4 -- adica de la „se vede ca e ceva acolo" la „se vede daca
   e 2 sau 3", care era tot rostul.
   Marind caracterul i se mareste si inaltarea pe care i-o da fontul, si atunci
   pluteste deasupra randului; `vertical-align` il aduce inapoi pe linia
   majusculelor. `line-height: 0` il tine sa nu inalte randul: masurat, randul
   ramane 38 px, cat vecinii lui. */
.pow { font-size: 2em; vertical-align: -.14em; line-height: 0; }
.lang__item[aria-current="true"] { color: var(--cocoa); font-weight: 700; }

/* The tools menu reuses the language dropdown, but it sits on the left of the
   bar, so it opens from that edge instead. */
/* Panoul de unelte se deschide de la marginea din stanga, nu din dreapta ca
   lista de limbi. Si e mai lat decat era: de cand unitatile si fusele isi
   poarta numele intregi pe al doilea rand, 12rem rupea pana si prima linie
   („CONVERT GMT TO / UTC"), ceea ce e mai rau decat problema pe care o
   rezolvam. `min()` il tine sa nu depaseasca ecranul pe tablete. */
.tools .lang__list {
  inset-inline-start: 0; inset-inline-end: auto;
  min-inline-size: min(23rem, 86vw);
}

/* The language list grows with every locale added, so it is capped and made
   to scroll rather than running off the bottom of the window. */
.lang__list {
  max-block-size: min(60vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 700px) {
  .lang:not(.tools) .lang__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
    gap: 0 .25rem;
    min-inline-size: 19rem;
  }
}

.nav--drawer {
  display: none;
  grid-column: 1 / -1;
  flex-direction: column; align-items: flex-start;
  gap: .25rem; padding-block-start: .9rem; margin-block-start: .75rem;
  border-block-start: 1px solid var(--rule-soft);
}

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.menu-toggle span { display: block; inline-size: 1.35rem; block-size: 2px; border-radius: 2px; background: var(--cocoa); }
.menu-toggle span + span { margin-block-start: .3rem; }

/* ==========================================================================
   Hero — centred, the way the reference stacks headline over product card
   ========================================================================== */
.hero {
  position: relative;
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
  overflow: visible;
}

.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

.hero__text { display: flex; flex-direction: column; align-items: center; }
.hero__title { font-size: var(--fs-display); margin-block-end: 1.1rem; max-inline-size: 16ch; }
.hero__lead { margin-block-end: 2rem; max-inline-size: 46ch; }

/* A doua treapta a titlului: numele intregi, sub prescurtari -- acelasi text,
   cuvant cu cuvant, cu al doilea rand al etichetei din meniu, ca sa regaseasca
   omul pe pagina randul pe care a dat clic.

   Fara majuscule si in culoarea textului de corp, la vreo treime din corpul
   numelui. Daca ar pastra majusculele (le mosteneste de la `.display`, deci
   trebuie oprite anume), pagina ar ajunge cu trei randuri de majuscule unul
   sub altul -- nume, lamurire, „FREE / ONLINE / SECURE" -- iar lamurirea ar
   concura cu numele in loc sa-l insoteasca.

   `letter-spacing` se scrie explicit fiindca `.display` pune o valoare
   negativa; aici e `normal`, nu o valoare mica pozitiva, fiindca in araba si
   urdu orice raritura rupe legatura dintre litere. */
.hero__sub {
  display: block;
  margin-block-start: .55rem;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--cocoa-soft);
}

/* Un rand gol nu lasa gol sub el -- la fel ca treapta a doua din meniu. */
.hero__sub:empty { display: none; }

/* „gratuit, online" sta sub numele uneltei, nu langa el: mai mic, majuscule
   rarite, culoarea secundara -- acelasi registru cu eticheta „DESPRE ACEASTA
   UNEALTA" si cu subtitlul siglei. Mentiunea insoteste numele, nu concureaza
   cu el. `letter-spacing` se scrie explicit fiindca `.display` pune o valoare
   negativa, iar majusculele le mosteneste tot de acolo. */
/* Trei afirmatii, fiecare cu bifa ei. Bifa vine din foaia de stil, nu din
   textul tradus: e un semn, nu un cuvant, iar tinand-o aici se schimba
   dintr-un loc, nu din douazeci si una de fisiere de limba.

   `flex-wrap` conteaza: in germana sau rusa cele trei cuvinte sunt lungi, iar
   pe un ecran ingust trebuie sa poata trece pe randul urmator in loc sa iasa
   din pagina. */
.hero__claim {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  white-space: nowrap;
}
.hero__claim::before {
  content: "\2713";             /* ✓ */
  font-weight: 800;
  /* Culoarea cuvantului de langa ea. `--tan` e, dupa chiar nota din aceasta
     foaie, pentru linii si inele -- niciodata pentru text; la corpul acesta,
     pe nisip, bifa ar iesi spalacita. */
  color: inherit;
  letter-spacing: normal;
}

.hero__free {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.4rem;
  margin-block-start: .9rem;
  font-size: clamp(.8rem, 1.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--cocoa-soft);
}

/* Spatierea literelor se opreste unde strica. In araba si urdu literele se
   leaga intre ele -- rarite, cuvantul se destrama si nu mai e un cuvant. In
   alfabetele indiene si in cele est-asiatice nu aduce nimic. */
:lang(ar) .hero__free, :lang(ur) .hero__free,
:lang(hi) .hero__free, :lang(mr) .hero__free, :lang(bn) .hero__free,
:lang(ta) .hero__free, :lang(te) .hero__free,
:lang(ja) .hero__free, :lang(zh) .hero__free, :lang(ko) .hero__free {
  letter-spacing: normal;
}

.hero__foot {
  position: relative; z-index: 2;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  max-width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 1.1rem;
}
.hero__count { font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
.hero__count-label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cocoa-soft);
}
.hero__foot-rule { flex: 1 1 auto; block-size: 1px; background: var(--rule); }

/* the soft warm halo the reference puts behind its product card */
.stroke { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.stroke--blush { background: #DCCDB2; inline-size: min(34rem, 100%); block-size: 18rem; opacity: .55; inset-block-start: 22%; inset-inline: 0; margin-inline: auto; }
/* Centrata cu `inset-inline: 0` si margini automate, nu cu o deplasare de
   jumatate de latime: aceea se face intr-o singura directie, iar in araba
   si urdu impingea pata cu o latime intreaga in partea gresita. O lumina
   din fundal n-are sens de citire. */
.stroke--sage { background: #D6CBB6; inline-size: min(22rem, 100%); block-size: 12rem; opacity: .4; inset-block-end: 4%; inset-inline-end: 4%; }

/* hairline instruments, kept very quiet in this direction */
.ornament { position: absolute; z-index: 1; color: var(--tan); opacity: .28; pointer-events: none; }
.ornament--scale { inline-size: clamp(6rem, 10vw, 9rem); inset-block-start: 6%; inset-inline-end: 4%; }
.ornament--scale-2 { inline-size: clamp(5rem, 8vw, 7.5rem); inset-block-end: 8%; inset-inline-start: 3%; }

/* ==========================================================================
   Converter card — the "product" of this page
   ========================================================================== */
.card {
  position: relative; z-index: 2;
  inline-size: min(100%, 34rem);
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: start;
}

.card__tabs {
  display: flex; gap: .4rem;
  background: var(--sand-deep);
  border-radius: var(--r-pill);
  padding: .3rem;
  margin-block-end: clamp(1.5rem, 3vw, 2rem);
}
.tab {
  flex: 1 1 0;
  background: none; border: 0; cursor: pointer;
  padding: .6rem .5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cocoa-soft);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.tab:hover { color: var(--cocoa); }
.tab[aria-selected="true"] {
  background: var(--cream-lift); color: var(--cocoa);
  box-shadow: var(--shadow-soft);
}

.card__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-block-end: clamp(.75rem, 2vw, 1.1rem);
}
.card__note {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cocoa-soft);
}

.pair__side { display: flex; flex-direction: column; gap: .35rem; }

.figure {
  font-size: var(--fs-figure);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.figure--input {
  inline-size: 100%;
  background: transparent; border: 0;
  padding: 0; margin: 0;
  border-block-end: 2px solid var(--rule-soft);
  transition: border-color .3s var(--ease);
}
.figure--input:hover { border-block-end-color: var(--rule); }
.figure--input:focus { outline: none; border-block-end-color: var(--cocoa); }

.figure--out { display: block; color: var(--cocoa); animation: resultIn .28s var(--ease); }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.unit { position: relative; display: inline-flex; align-items: center; max-inline-size: 100%; }
.unit select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; cursor: pointer;
  /* Creste cat randul pe care sta. Fara asta se opreste unde se termina
     textul, iar restul randului -- inclusiv locul in care e desenata sageata
     -- arata ca face parte din control fara sa raspunda la clic. */
  flex: 1 1 auto;
  padding: .3rem 1.6rem .3rem 0;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cocoa-soft);
  max-inline-size: 100%; text-overflow: ellipsis;
  transition: color .3s var(--ease);
}
.unit select:hover { color: var(--cocoa); }
.unit__caret {
  position: absolute; inset-inline-end: .5rem; pointer-events: none;
  inline-size: .36rem; block-size: .36rem;
  border-inline-end: 1.5px solid var(--cocoa-soft); border-block-end: 1.5px solid var(--cocoa-soft);
  transform: translateY(-2px) rotate(45deg);
}
.unit--big select {
  font-size: var(--fs-figure); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; text-transform: none; color: var(--cocoa);
  padding-inline-end: 2.2rem;
}
.unit--big .unit__caret { inline-size: .6rem; block-size: .6rem; }

/* a rule, not a third container: same decision as .domain__plate */
.card__ratio {
  margin-block-start: clamp(1rem, 2.5vw, 1.4rem);
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--rule-soft);
  font-size: .875rem; font-weight: 600; color: var(--cocoa);
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* „12:00 GMT = 04:00 PST" ajungea in araba si in urdu „GMT = 04:00 PST
     12:00": numarul de la inceput e neutru pentru algoritmul bidirectional,
     iar intr-un rand de la dreapta la stanga sare la capatul celalalt. Randul
     n-are niciun cuvant in el, doar cifre si simboluri, deci isi poarta
     propria directie -- exact ca .unit-tool__formula de dedesubt. */
  direction: ltr;
  unicode-bidi: isolate;
}

.drop {
  margin-block-start: clamp(1.25rem, 3vw, 1.65rem);
  border: 2px dashed var(--rule-soft);
  border-radius: var(--r-sm);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.drop__line { font-size: .9375rem; color: var(--cocoa-soft); max-inline-size: 34ch; }
/* Fila „Fisiere" de pe prima pagina nu primeste fisiere: ea trimite catre
   unealta care face perechea aleasa, iar un fisier nu poate trece dintr-o
   pagina in alta. Chenarul intrerupt ar fi o invitatie la ceva imposibil. */
.drop--pick { border-style: solid; }

.drop__note {
  font-size: .8125rem; line-height: 1.55;
  color: var(--cocoa-soft); max-inline-size: 38ch;
}
[hidden] { display: none !important; }

/* ==========================================================================
   Domains — three cream cards, centred content
   ========================================================================== */
.section__head {
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
  max-inline-size: 60ch;
  text-align: center;
}
.section__head .eyebrow { margin-block-end: .9rem; }
.section__head .lead { margin-block-start: 1rem; margin-inline: auto; }

.domains__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.domain {
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.domain:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

/* flat, not a second card: the reference puts its subject straight onto the
   card surface. Depth here would be one container too many. */
.domain__plate {
  padding-block: .25rem 1.25rem;
  min-block-size: 8.5rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  position: relative; overflow: hidden;
  border-block-end: 1px solid var(--rule-soft);
}
.domain__specimen {
  display: flex; align-items: center; gap: .75rem;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 800; letter-spacing: -.01em;
  text-transform: uppercase;
}
.domain__specimen .eq { flex: 1 1 auto; }

/* Cele doua liste din capul cartonasului. Poarta marimea si greutatea pe care
   o aveau numele scrise fix acolo, ca schimbarea sa nu se vada ca o piesa de
   formular lipita peste o compozitie. */
.domain__unit { flex: 0 0 auto; }
.domain__unit select {
  font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  color: inherit; text-transform: none;
  padding-inline: 0 1.1rem;
}
.domain__unit .unit__caret { inset-inline-end: .1rem; }

/* A doua lista a perechii isi poarta sageata pe latura dinspre egal, nu pe cea
   din afara: asa cele doua sageti incadreaza semnul, in loc sa cada amandoua
   in aceeasi parte si sa lase perechea stramba.
   Se muta si locul pastrat pentru ea in umplutura listei -- altfel sageata ar
   cadea peste text. Proprietatile sunt logice, deci in araba si urdu, unde
   perechea se intoarce cu totul, „inspre egal" ramane tot inspre egal. */
.domain__specimen--pick .domain__unit:last-child select { padding-inline: 1.1rem 0; }
.domain__specimen--pick .domain__unit:last-child .unit__caret {
  inset-inline-start: .1rem;
  inset-inline-end: auto;
}

/* Numele intreg, sub prescurtare -- acelasi tipar ca in meniu si ca in titlu:
   prescurtarea isi pastreaza corpul, numele sta dedesubt mai mic si fara
   majuscule. „ac" si „kn" nu spun nimic cuiva care nu le stie deja.

   Cutia poate sa se stranga (`flex: 0 1 auto`) si numele se rupe in doua
   randuri: altfel „gallon per minute (US)", cel mai lung nume din site, ar fi
   impins randul in afara placii. */
.domain__specimen--pick .domain__unit {
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 38%;
  /* `.unit` e un rand (`inline-flex`); aici devine o coloana, altfel numele
     s-ar aseza LANGA prescurtare, nu sub ea. */
  flex-direction: column;
  align-items: start;
}
.domain__specimen--pick .domain__unit:last-child { align-items: end; text-align: end; }

/* Sageata nu mai e centrata pe un rand, ci trebuie pusa pe inaltimea
   prescurtarii: in coloana, pozitia ei statica ar cadea la capatul de sus. */
.domain__specimen--pick .unit__caret {
  inset-block-start: .62em;
  transform: translateY(-70%) rotate(45deg);
}

/* Semnul „=" se aliniaza cu prescurtarile, nu cu mijlocul coloanei: altfel ar
   coborî sub ele cand numele are doua randuri. */
.domain__specimen--pick .eq { align-self: start; margin-block-start: .55em; }

.domain__name {
  display: block;
  margin-block-start: .25rem;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--cocoa-soft);
  overflow-wrap: break-word;
}

/* Randul gol nu lasa gol sub el -- la fel ca celelalte doua trepte. */
.domain__name:empty { display: none; }

.motif { color: rgba(90, 70, 50, .25); block-size: 2.5rem; inline-size: 100%; }
.motif--ruler {
  background:
    linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 11px) 0 0 / 100% .5rem no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 55px) 0 0 / 100% 1rem no-repeat;
}

/* grows so the actions sit on one line across the row even when a title wraps */
.domain__body {
  padding-block-start: 1.35rem; text-align: center;
  flex: 1 1 auto; display: flex; flex-direction: column;
}
.domain__title {
  font-size: var(--fs-h3); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.005em;
  color: var(--cocoa); line-height: 1.2;
}
.domain__text { margin-block: .7rem 1.2rem; color: var(--cocoa-soft); font-size: .9375rem; }
.domain__action {
  margin-block-start: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  text-decoration: none;
}
.domain__action span {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.domain__action--soon { color: var(--cocoa-soft); }
.domain__action--soon .dot { opacity: .45; }

/* ==========================================================================
   The standard — text beside a cream card
   ========================================================================== */
.standard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.standard__text { text-align: start; }
.standard__text .eyebrow { margin-block-end: .9rem; }
.standard__text p { margin-block-start: 1.1rem; color: var(--cocoa-soft); max-inline-size: 46ch; }

.panel {
  position: relative;
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.panel__defs { margin-block-start: 1.35rem; }
.def {
  display: grid; gap: .2rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--rule-soft);
}
.def__term { font-size: 1.05rem; font-weight: 800; letter-spacing: -.005em; }
.def__desc { font-size: .875rem; color: var(--cocoa-soft); font-variant-numeric: tabular-nums; }

/* the reference's swatch label: rule, circle, bold caps name */
.plate {
  margin-block-start: 1.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-align: center; color: var(--cocoa);
}
.plate::before {
  content: ""; display: block;
  inline-size: .6rem; block-size: .6rem; border-radius: 50%;
  border: 1px solid var(--tan);
  margin: 0 auto .8rem;
}

/* ==========================================================================
   Popular conversions — rows inside one cream card
   ========================================================================== */
.popular__list {
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(.5rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2rem);
}
.conv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
  padding-block: clamp(.9rem, 2vw, 1.2rem);
  border-block-end: 1px solid var(--rule-soft);
}
.conv:last-child { border-block-end: 0; }
.conv__from, .conv__to {
  font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 700;
  letter-spacing: -.005em; font-variant-numeric: tabular-nums;
}
.conv__to { text-align: end; color: var(--cocoa-soft); }
.conv__mark {
  inline-size: 1.9rem; block-size: 1.9rem; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  font-size: .8rem; font-weight: 700;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.conv:hover .conv__mark { background: var(--cocoa); border-color: var(--cocoa); color: var(--cream); }

/* ==========================================================================
   Band — a rounded cocoa block, not a full-bleed stripe
   ========================================================================== */
.band { padding-block: 0 var(--section-space); }
.band .shell { max-width: var(--shell); }
.band__grid {
  background: var(--cocoa);
  color: var(--sand);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
.band__item {
  font-size: clamp(.8rem, 1.4vw, .95rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  opacity: .82;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-block: 0 clamp(1.5rem, 3vw, 2.5rem); }
.footer__grid {
  background: var(--cream);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.footer__col h3 {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-block-end: 1rem;
}
.footer__links li + li { margin-block-start: .55rem; }
.footer__links a { text-decoration: none; font-size: .9375rem; color: var(--cocoa-soft); }
.footer__links a:hover { color: var(--cocoa); }
.footer__tagline { margin-block-start: .9rem; color: var(--cocoa-soft); font-size: .9375rem; max-inline-size: 30ch; }

/* a divider and weight carry the emphasis, so the footer stays one card */
.rate-card {
  padding-block-start: 1.1rem;
  border-block-start: 2px solid var(--cocoa);
}
.rate-card__label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cocoa-soft);
}
/* Cifra e o legatura catre pagina perechii. Nu arata ca o legatura cat sta
   linistita -- in subsol, o cifra subliniata ar fi aratat a greseala --, dar
   se poarta ca una: se subliniaza la trecerea mouse-ului si primeste inelul de
   focus al site-ului cand se ajunge la ea din tastatura. */
.rate-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.rate-card__link:hover .rate-card__value { text-decoration: underline; text-underline-offset: .18em; }

.rate-card__value {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em;
  margin-block: .45rem .3rem;
  font-variant-numeric: tabular-nums;
  /* era un <p>; acum e un <span> inauntrul legaturii */
  display: block;
}
/* Pana vine cursul nu lasa un gol cat un rand: cartonasul sta strans. */
.rate-card__value:empty { margin-block: 0; }
.rate-card__meta { font-size: .8125rem; color: var(--cocoa-soft); }

.footer__base {
  margin-block-start: 1.5rem;
  padding-inline: clamp(.5rem, 2vw, 1rem);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8125rem; color: var(--cocoa-soft);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.hero--short { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2rem); }
.hero--short .hero__text { margin-inline: auto; }
.hero--short .hero__title { margin-block-end: 1rem; }
.hero--short .lead { margin-inline: auto; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact__form {
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.field { display: block; margin-block-end: 1.5rem; }
.field__label {
  display: block;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cocoa-soft); margin-block-end: .5rem;
}
.field__control {
  inline-size: 100%;
  background: var(--cream-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  font-size: 1rem; font-weight: 400;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field__control:focus { outline: none; border-color: var(--cocoa); background: #fff; }
textarea.field__control { resize: vertical; min-block-size: 8rem; line-height: 1.65; }
select.field__control { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field--select { position: relative; }
.field--select .unit__caret { inset-block-start: 3.1rem; inset-inline-end: 1.1rem; }

.field__error {
  display: block; margin-block-start: .45rem;
  font-size: .8125rem; font-weight: 600; color: #8A3B22;
}
.field.is-invalid .field__control { border-color: #8A3B22; }

.form__status {
  margin-block-start: 1.25rem; padding: .9rem 1.15rem;
  background: var(--sand-deep);
  border-radius: var(--r-sm);
  font-size: .9375rem;
}

.contact__panel .def__term { font-size: 1rem; }
.contact__list li {
  padding-block: .55rem;
  border-block-start: 1px solid var(--rule-soft);
  font-size: .9375rem; color: var(--cocoa-soft);
}

/* ==========================================================================
   Reveal + motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal:nth-child(2).is-in { transition-delay: .07s; }
.reveal:nth-child(3).is-in { transition-delay: .14s; }

.rise { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; }
.rise--1 { animation-delay: .05s; }
.rise--2 { animation-delay: .15s; }
.rise--3 { animation-delay: .25s; }
.rise--4 { animation-delay: .35s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Doua coloane, nu trei: a treia era goala, fiindca .nav--start se ascunde
     aici, iar .nav--end ramanea intr-un `1fr` care nu se poate micsora sub
     continutul lui. Cand nu incapea, se revarsa peste marginea barei si ducea
     butonul de meniu afara din ea. `minmax(0, 1fr)` ii da voie sa se stranga. */
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: var(--r-card);
    gap: .6rem;
  }
  .nav--start { display: none; }

  /* In bara raman doar lucrurile care n-au unde sta altundeva: limba si
     butonul care deschide sertarul. „Contact" e deja inauntrul sertarului,
     deci aici ar fi a doua oara -- si exact el era latimea care lipsea. */
  .nav--end .nav__link { display: none; }
  .nav--end { justify-content: flex-end; min-inline-size: 0; }

  .menu-toggle { display: block; }
  .wordmark { text-align: start; }
  .wordmark__line { justify-content: flex-start; }
  .wordmark__sub { display: none; }

  .nav--drawer.is-open { display: flex; }
  .nav--drawer .nav__link { font-size: .8125rem; padding-block: .5rem; }

  .standard__grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .standard__grid { gap: 2.5rem; }
  .ornament { display: none; }
}

@media (max-width: 620px) {
  .conv { grid-template-columns: minmax(0, 1fr) auto; row-gap: .3rem; }
  .conv__to { grid-column: 1 / -1; text-align: start; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .card__tabs { gap: .2rem; }
  .tab { letter-spacing: .04em; padding-inline: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .rise { opacity: 1; transform: none; }
  .domain:hover, .btn:hover, .eq__mark:hover { transform: none; }
}

/* ==========================================================================
   RTL — layout is already logical; only drawn arrows need mirroring
   ========================================================================== */
[dir="rtl"] .dot svg,
[dir="rtl"] .domain__action svg { transform: scaleX(-1); }
[dir="rtl"] .unit__caret,
[dir="rtl"] .lang__toggle::after { transform: translateY(-2px) rotate(45deg); }

@media print {
  .topbar, .band, .dot, .menu-toggle { display: none; }
  body { background: #fff; }
}

/* ---------- pagina de alegere a limbii (radacina) ----------
   Singura pagina fara limba proprie, deci fara proza: doar sigla si cele 21
   de endonime. Marca isi pastreaza dimensiunea mai mare aici, fiind singurul
   element de deasupra listei. */
.picker-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; }
.picker {
  padding: var(--gutter);
  width: 100%; max-width: 640px;
  text-align: center;
}
.picker .wordmark__num,
.picker .wordmark__script { font-size: clamp(1.9rem, 6vw, 2.6rem); }

.picker__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem;
  margin-block-start: clamp(1.75rem, 5vw, 2.75rem);
}
.picker__item {
  display: block;
  padding: .5rem .95rem;
  border: 1px solid var(--rule-soft); border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--cocoa); text-decoration: none;
  font-size: .9375rem; line-height: 1.3;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.picker__item:hover,
.picker__item:focus-visible { border-color: var(--tan); background: var(--cream-lift); }

/* ---------- textul lung al paginii ----------
   Masura de citit, nu latimea ecranului: un rand de 100 de caractere obliga
   ochiul sa caute inceputul randului urmator. Marginile logice, ca sa mearga
   si in araba si urdu fara reguli in plus. */
.prose {
  /* Spatiul de sub text e cat grosimea benzii de dedesubt. Scris din aceleasi
     valori ca banda -- cele doua paduri ale ei plus randul dinauntru -- ca sa
     nu ramana in urma daca banda se schimba vreodata. */
  --band-pad:  clamp(2rem, 4vw, 2.75rem);
  --band-line: calc(clamp(.8rem, 1.4vw, .95rem) * 1.7);   /* line-height-ul din body */
  padding-block: var(--section-space) calc(var(--band-pad) * 2 + var(--band-line));
}
/* Tot ce sta in cadru are latimea antetului: unealta, textul lung, banda
   maronie si subsolul. `.shell` isi da singur marginile laterale, pentru cazul
   cand ar fi folosit direct in pagina. Inauntrul lui `.frame__inner` insa
   marginea o da deja `.frame`, iar cele doua se adunau -- de aceea totul iesea
   cu un gutter de fiecare parte mai ingust decat bara de sus. */
.frame__inner .shell { padding-inline: 0; }
.prose h2 {
  font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em;
  margin-block: 2.5em 0;
}
.prose h2:first-child { margin-block-start: 0; }
.prose h3 {
  font-size: var(--fs-h3); line-height: 1.25;
  margin-block: 2em 0;
}
.prose h4 {
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  margin-block: 1.6em 0;
}
.prose p, .prose li { color: var(--cocoa-soft); line-height: 1.7; }
.prose p { margin-block: .75em 0; }
.prose ul, .prose ol {
  margin-block: .9em 0; padding-inline-start: 1.35em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block-start: .35em; }
.prose a {
  color: var(--cocoa); text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
  text-decoration-color: var(--tan);
}
.prose a:hover, .prose a:focus-visible { text-decoration-color: var(--cocoa); }
.prose strong { color: var(--cocoa); font-weight: 700; }

/* ==========================================================================
   Puntea dintre formate — „Conversie din X" / „Conversie în X"
   --------------------------------------------------------------------------
   O singura fisa, taiata la mijloc de o linie subtire: cele doua liste sunt
   doua fete ale aceluiasi lucru, nu doua subiecte, si o fisa le tine impreuna.

   Pastilele poarta numele formatelor, care sunt aceleasi in orice limba. De
   aceea au litera textului obisnuit, nu ingrosata: sunt multe pe un rand, iar
   ingrosate ar tipa mai tare decat titlul de deasupra lor.
   ========================================================================== */
.section--bridge { padding-block-start: 0; }

.bridge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}
/* Cand un format n-are decat o directie, coloana ramasa ia toata fisa. */
.bridge--one { grid-template-columns: 1fr; }

.bridge .bridge__half + .bridge__half {
  border-inline-start: 1px solid var(--rule-soft);
  padding-inline-start: clamp(1.75rem, 4vw, 3.25rem);
}

.bridge__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
}

.bridge__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: 1.1rem;
}
.bridge__pill {
  display: inline-block;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 400;
  color: var(--cocoa);
  background: var(--cream-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  padding: .45rem .9rem;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.bridge__pill:hover,
.bridge__pill:focus-visible {
  border-color: var(--tan);
  background: var(--sand-deep);
}

/* Pe telefon linia dintre coloane devine linie deasupra celei de-a doua. */
@media (max-width: 760px) {
  .bridge { grid-template-columns: 1fr; }
  .bridge .bridge__half + .bridge__half {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--rule-soft);
    padding-block-start: 1.75rem;
  }
}

/* Pagina pe care se afla cititorul, in propria ei lista. */
.bridge__pill.is-here {
  background: var(--sand-deep);
  border-color: var(--tan);
  font-weight: 600;
  cursor: default;
}


/* Butonul „Unelte" din subsol: acelasi cu cel din bara de sus, dar deschis in
   sus. Sub el nu mai urmeaza nimic, iar o lista deschisa in jos ar iesi din
   pagina -- si tocmai lista lunga era motivul pentru care a devenit buton. */
.footer__tools { margin-block-end: .9rem; }
.footer__tools .lang__list {
  inset-block-start: auto;
  inset-block-end: calc(100% + .5rem);
}

/* ==========================================================================
   Cautarea in lista de unelte
   --------------------------------------------------------------------------
   Campul sta lipit in capul listei, nu curge cu ea: lista are peste patruzeci
   de randuri si se deruleaza, iar un camp care fuge in sus ar disparea exact
   cand omul mai are de scris o litera. Marginile negative acopera captuseala
   panoului, ca sa nu se vada randuri trecand pe langa el.
   ========================================================================== */
.tools__search {
  position: sticky;
  inset-block-start: calc(-1 * .4rem);
  z-index: 2;
  margin: -.4rem -.4rem .35rem;
  padding: .4rem;
  background: var(--cream-lift);
}
.tools__field {
  inline-size: 100%;
  box-sizing: border-box;
  background: var(--sand);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: .5rem .75rem;
  font: inherit;
  font-size: .8125rem;
  color: var(--cocoa);
}
.tools__field::placeholder { color: var(--cocoa-soft); opacity: .8; }
.tools__field:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 1px;
  border-color: transparent;
}

.tools__none {
  margin: .35rem .35rem .15rem;
  font-size: .8125rem;
  color: var(--cocoa-soft);
}

/* In sertarul de pe telefon lista nu sta intr-un panou, ci curge in pagina;
   invelisul ei trebuie sa se comporte tot ca o coloana. */
.drawer__tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  inline-size: 100%;
}
.drawer__tools .tools__search {
  position: static;
  margin: .35rem 0 .5rem;
  padding: 0;
  background: none;
  inline-size: 100%;
}
.drawer__tools .tools__field { background: var(--cream-lift); }

/* ==========================================================================
   Pagina de licente
   --------------------------------------------------------------------------
   Un tabel fara <table>: patru coloane pe ecran larg, doua randuri suprapuse
   pe telefon. Randul cu GPL e marcat, fiindcă el e singurul care aduce cu el
   obligatii, iar cititorul trebuie sa-l gaseasca fara sa citeasca tot.
   ========================================================================== */
.lic__intro { color: var(--cocoa-soft); margin-block: .9rem 0; max-inline-size: 58ch; }

.lic__table { margin-block-start: 1.5rem; }
.lic__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  align-items: baseline;
  padding-block: .8rem;
  border-block-start: 1px solid var(--rule-soft);
}
.lic__name { font-weight: 700; }
.lic__ver { font-variant-numeric: tabular-nums; color: var(--cocoa-soft); font-size: .875rem; }
.lic__what { font-size: .875rem; color: var(--cocoa-soft); }
.lic__src { font-size: .8125rem; color: var(--cocoa); text-decoration: none; border-block-end: 1px solid var(--rule-soft); }
.lic__src:hover { border-block-end-color: var(--cocoa); }

/* Randul care aduce obligatii cu el. */
.lic__row--gpl { background: var(--sand-deep); border-radius: var(--r-sm); padding-inline: .8rem; }
.lic__row--gpl .lic__what { color: var(--cocoa); font-weight: 700; }

.lic__note {
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
.lic__noteTitle { font-size: var(--fs-h3); font-weight: 800; margin: 0 0 .7rem; }
.lic__note p { color: var(--cocoa-soft); max-inline-size: 62ch; }
.lic__links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-block-start: 1rem; }
.lic__links a { font-size: .875rem; font-weight: 600; color: var(--cocoa); }

@media (max-width: 760px) {
  .lic__row { grid-template-columns: minmax(0, 1fr) auto; }
  .lic__what { grid-column: 1; }
  .lic__src { grid-column: 2; text-align: end; }
}

/* ==========================================================================
   Eticheta de unealta pe doua trepte
   --------------------------------------------------------------------------
   „CONVERT GMT TO CET (GREENWICH MEAN TIME ↔ CENTRAL EUROPEAN TIME)" cerea
   617 px pe un telefon de 375, deci se taia la margine si restul nu se vedea
   niciodata. Prescurtarile raman pe primul rand, numele intregi coboara pe al
   doilea, mai mic si in culoarea secundara: ochiul sare pe „GMT TO CET" si
   citeste restul doar daca vrea.

   Le au doar unitatile si fusele -- acolo prima linie chiar nu spune destul.
   „PNG in JPG" n-are nevoie de nicio lamurire, si n-o primeste.
   ========================================================================== */
.tool--two { white-space: normal; }

.tool__sub {
  display: block;
  margin-block-start: .1rem;
  /* Scris normal, nu cu majuscule rarite: aici numele intregi sunt lungi, iar
     majusculele ocupa cu vreo treime mai mult si se citesc mai greu tocmai
     cand sunt multe. Prima linie isi pastreaza majusculele, deci cele doua
     trepte se deosebesc dintr-o privire. */
  text-transform: none;
  letter-spacing: .01em;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cocoa-soft);
  opacity: .85;
}

/* In listele derulante randul al doilea ar fi fortat panoul sa creasca in
   latime; acolo se incadreaza, ca in sertar. */
.lang__item.tool--two { white-space: normal; }
.tools__list .tool__sub { font-size: .75rem; }

/* Un rand gol nu lasa gol sub el: fusul fara paranteza -- daca va aparea
   vreodata unul -- n-are a doua treapta, si atunci nici spatiul ei. */
.tool__sub:empty { display: none; }


/* ==========================================================================
   Cele trei sectiuni de continut: de unde vine, la ce foloseste, intrebari.

   Textul umple latimea panoului. Randul iese mai lung decat cele 60-70 de
   semne de care vorbesc manualele de tipografie, dar panoul are oricum
   marginile lui, iar o coloana ingusta intr-o cutie lata lasa jumatate din
   panou gol si arata a greseala.
   ========================================================================== */
.section--prose { padding-block: clamp(1.5rem, 3vw, 2.25rem) 0; }

/* Proza nu-si pune spatiu dedesubt: cand doua sectiuni de proza stau una sub
   alta, spatiul il da cea de jos, si asa nu se aduna doua. Dar banda
   intunecata, care vine dupa ultima, isi pune singura padding sus 0, fiindca
   inainte urma dupa o sectiune care avea spatiu dedesubt. Zero plus zero
   inseamna lipite. Spatiul se da inapoi exact la cusatura asta, cat au si
   panourile de proza intre ele. */
.section--prose + .band { padding-block-start: clamp(1.5rem, 3vw, 2.25rem); }

.prose, .faq {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.2rem);
}

.prose__text {
  margin-block-start: .9rem;
  color: var(--cocoa-soft);
  line-height: 1.75;
}

/* ---------- intrebari frecvente ---------- */

.faq__item {
  border-block-start: 1px solid var(--rule-soft);
  padding-block: .85rem;
}
.faq__item:first-of-type { border-block-start: 0; padding-block-start: 1.1rem; }

.faq__q {
  cursor: pointer;
  font-weight: 700;
  color: var(--cocoa);
  line-height: 1.4;
  /* Sageata proprie: cea a browserului sta in stanga si se intoarce altfel in
     araba, unde intreg randul merge de la dreapta la stanga. */
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "";
  flex: 0 0 auto;
  inline-size: .45rem; block-size: .45rem;
  border-inline-end: 1.5px solid var(--tan);
  border-block-end: 1.5px solid var(--tan);
  rotate: -45deg;
  translate: 0 -.12em;
  transition: rotate .2s var(--ease);
}
[dir="rtl"] .faq__q::before { rotate: 135deg; }
.faq__item[open] > .faq__q::before { rotate: 45deg; }
[dir="rtl"] .faq__item[open] > .faq__q::before { rotate: 45deg; }

.faq__a {
  margin-block-start: .6rem;
  /* La nivelul textului intrebarii, nu al sagetii. */
  margin-inline-start: 1.15rem;
  color: var(--cocoa-soft);
  line-height: 1.75;
}