/* colshare.app's home page (src/acte/site-acasa.ts makes the HTML, colshare.js and fond.js move it). The design is
   Colshare/design_handoff_colshare_website: night, oat and paper bands, one ochre action, square web UI (only the mocks
   of the app and of the link page keep its 14 px radius), rules over cards. The fonts are the app's own (/acte/fonts/, OFL).
   Breakpoint 900 px. Every animated piece starts hidden only under html.anim, which the script sets when motion is
   allowed: without the script or with reduced motion the page shows its final state. */
@font-face { font-family: "Funnel Display"; font-weight: 700; font-display: swap; src: url("/acte/fonts/funnel-display-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Display"; font-weight: 700; font-display: swap; src: url("/acte/fonts/funnel-display-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url("/acte/fonts/martian-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url("/acte/fonts/martian-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; font-weight: 500; font-display: swap; src: url("/acte/fonts/martian-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; font-weight: 500; font-display: swap; src: url("/acte/fonts/martian-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-weight: 400; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-weight: 400; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-weight: 600; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-weight: 600; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --noapte: #121313;
  --noapte-2: #1c1d1e;
  --linie-n: #2a2c2e;     /* rules on night */
  --contur-n: #3a3c3f;    /* outlined buttons on night */
  --ovaz: #ece8df;
  --ovaz-adanc: #e3ded3;
  --hartie: #f7f5f0;
  --linie-h: #dedad0;     /* rules on paper */
  --linie-o: #c9c3b6;     /* rules on oat */
  --ocru: #e2a52b;        /* the seal and one action */
  --ocru-hover: #edb443;
  --ocru-text: #8a5a0b;   /* ochre as text on light */
  --piatra: #a8a398;      /* secondary text on night */
  --piatra-2: #c9c4ba;
  --estompat: #5c5850;    /* secondary text on light */
  --corp-h: #3c3a35;      /* body text on light */
  --rau: #f2a39b;
  --gri: #6a6c6f;
  --lat: clamp(20px, 4vw, 56px);
  --sec: clamp(72px, 9vw, 128px);
  --usor: cubic-bezier(0.2, 0.7, 0.2, 1);
  --titlu: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --text: "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  /* The app's own text face (the mocks of its screens and of the link pages). */
  --aplicatie: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noapte); color: var(--ovaz); font: 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ocru); }
.ovaz a:hover, .hartie a:hover, .ovaz-adanc a:hover { color: var(--ocru-text); }
::selection { background: var(--ocru); color: var(--noapte); }
:focus-visible { outline: 2px solid var(--ocru); outline-offset: 3px; }
[hidden] { display: none !important; }
button { font: inherit; }
.simboluri { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--mono); }
.ocru { color: var(--ocru); }
.ocru-text { color: var(--ocru-text); }
.piatra { color: var(--piatra); }
.estompat { color: var(--estompat); }
.gri { color: var(--gri); }

/* The seal (src/acte/sigiliu.ts): ring and lines ochre, the face night; the wordmark's letters in currentColor. */
svg.sigiliu { display: block; fill: var(--ocru); overflow: visible; }
.marca-svg { display: block; fill: currentColor; }
.marca-svg .sigiliu { fill: var(--ocru); }
.jumatati .jum { transition: transform 600ms var(--usor), opacity 500ms var(--usor); }
[data-viata="0"] .jum, [data-deschis="0"] .jum { transform: translate(var(--x0), var(--y0)); }
[data-viata="1"] .jum { transform: none; }
[data-viata="2"] .jum, [data-deschis="1"] .jum { transform: translate(var(--x2), var(--y2)); }
[data-viata="3"] .jum { transform: translate(var(--x2), var(--y2)); opacity: 0; }
.jumatati .contur { stroke: #8b867c; opacity: 0; transition: opacity 500ms var(--usor); }
[data-viata="3"] .contur { opacity: 1; }
/* Kept: the whole seal, no slit, over the halves (which close under it, so the change reads as one movement). */
.jumatati .intreg { opacity: 0; transition: opacity 260ms var(--usor); }
[data-viata="0"] .intreg { opacity: 1; transition-delay: 300ms; }
[data-viata="0"] .jum { opacity: 0; transition: transform 600ms var(--usor), opacity 0ms linear 560ms; }

/* ------------------------------------------------------------------ layout and type */
.s { position: relative; }
.s[id] { scroll-margin-top: 76px; }
.s.noapte { background: var(--noapte); color: var(--ovaz); }
.s.ovaz { background: var(--ovaz); color: var(--noapte); }
.s.ovaz-adanc { background: var(--ovaz-adanc); color: var(--noapte); overflow: hidden; }
.s.hartie { background: var(--hartie); color: var(--noapte); }
.cadru { max-width: 1280px; margin: 0 auto; padding: var(--sec) var(--lat); }
.cadru.sus { padding-bottom: clamp(40px, 5vw, 72px); }
.cadru.jos { padding-top: 0; }
.coloana { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.centru { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.titlu-bloc { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .doua-mari { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 64px; align-items: end; }
.doua-mari { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.titlu-rand { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--linie-n); padding-bottom: 24px; }
.ovaz .titlu-rand, .hartie .titlu-rand { border-color: var(--noapte); }
.titlu-rand.jos-aliniat { border: 0; padding: 0; gap: 24px 48px; }
.linie-jos { border-bottom: 1px solid var(--noapte); padding-bottom: 28px; }
.linie-sus { border-top: 1px solid var(--noapte); padding-top: 24px; }

.eticheta { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font: 700 clamp(48px, 7vw, 100px)/0.92 var(--titlu); letter-spacing: -0.035em; max-width: 12ch; }
h1 span { display: inline-block; }
.h2 { font: 700 clamp(40px, 5vw, 72px)/0.98 var(--titlu); letter-spacing: -0.028em; max-width: 13ch; }
.h-declaratie { font: 700 clamp(44px, 7.4vw, 112px)/0.9 var(--titlu); letter-spacing: -0.04em; max-width: 13ch; text-wrap: balance; }
.h-declaratie.mic { font-size: clamp(44px, 6.4vw, 96px); max-width: 11ch; }
.h-declaratie.stanga { font-size: clamp(48px, 8vw, 128px); line-height: 0.88; letter-spacing: -0.045em; max-width: 12ch; }
.h-declaratie.stanga.mic { font-size: clamp(48px, 7vw, 104px); }
.h-mic { font: 700 clamp(24px, 2.4vw, 32px)/1.05 var(--titlu); letter-spacing: -0.02em; }
.cutie { display: inline-block; line-height: 0.9; background: var(--noapte); color: var(--ovaz); padding: 0.02em 0.12em 0.06em; }
.corp { margin: 0; font-size: 18px; line-height: 1.55; max-width: 46ch; text-wrap: pretty; color: var(--corp-h); }
.noapte .corp { color: var(--piatra-2); }
.corp.mic { font-size: 16px; max-width: 64ch; }
.centru .corp { max-width: 52ch; }
.lead { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--piatra-2); max-width: 46ch; text-wrap: pretty; }

.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; padding: 11px 18px; border: 1px solid transparent; transition: background 160ms, border-color 160ms, transform 160ms; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.plin { background: var(--ocru); color: var(--noapte); }
.btn.plin:hover { background: var(--ocru-hover); color: var(--noapte); }
.btn.contur { border-color: var(--contur-n); color: var(--ovaz); }
.btn.contur:hover { border-color: var(--ovaz); color: var(--ovaz); }
.btn.text { padding-left: 4px; padding-right: 4px; color: var(--piatra-2); text-decoration: underline; text-decoration-color: var(--contur-n); text-underline-offset: 6px; }
.btn.text:hover { color: var(--ovaz); text-decoration-color: var(--ocru); }
.btn.mare { padding: 16px 24px; font-size: 16px; }
.btn.mare.text { padding: 16px 4px; }
.btn.plin svg { transition: transform 160ms var(--usor); }
.btn.plin:hover svg { transform: translateX(3px); }
.actiuni { display: flex; gap: 12px; flex-wrap: wrap; }

/* Reveal on scroll: only when the script runs and motion is allowed (html.anim); otherwise everything is in place. */
html.anim [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--usor) var(--d, 0ms), transform 700ms var(--usor) var(--d, 0ms); }
html.anim [data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ header */
.antet { position: sticky; top: 0; z-index: 20; background: rgba(18, 19, 19, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie-n); color: var(--ovaz); }
.antet-rand { max-width: 1280px; margin: 0 auto; padding: 0 var(--lat); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.antet .marca { color: var(--ovaz); display: inline-flex; flex: none; }
.antet-nav { display: none; align-items: center; gap: clamp(14px, 2.2vw, 32px); font-size: 15px; }
.antet-nav a:not(.btn) { text-decoration: none; color: var(--piatra-2); white-space: nowrap; }
.antet-nav a:not(.btn):hover { color: var(--ovaz); }
.antet-ingust { display: flex; align-items: center; gap: 8px; }
.antet-ingust .btn { min-height: 44px; padding: 0 14px; }
.meniu-buton { width: 44px; height: 44px; padding: 0; border: 1px solid var(--contur-n); background: transparent; color: var(--ovaz); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.meniu-buton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.meniu-buton[aria-expanded="true"] .deschis, .meniu-buton[aria-expanded="false"] .inchis { display: none; }
.meniu { display: flex; flex-direction: column; border-top: 1px solid var(--linie-n); padding: 8px var(--lat) 20px; font: 700 28px/1.1 var(--titlu); letter-spacing: -0.02em; }
.meniu a { text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--linie-n); }
.meniu a:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .antet-nav { display: flex; }
  .antet-ingust, .meniu { display: none !important; }
}


/* The safe copy on A4 and the specimen card, sized by their own width (container units). */
.a4 { container-type: inline-size; width: 100%; }
.a4-pagina { width: 100%; aspect-ratio: 210 / 297; background: #fff; position: relative; overflow: hidden; font-family: var(--aplicatie); color: #2a3336; }
.a4-carti { position: absolute; left: 14cqw; right: 14cqw; top: 13cqw; display: flex; flex-direction: column; gap: 7cqw; }
.a4-marcaj { position: absolute; left: -60%; top: -40%; width: 220%; height: 180%; transform: rotate(-27deg); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.a4-marcaj div { white-space: pre; font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.02em; color: rgba(62, 66, 68, 0.55); text-shadow: 0 0 0.5cqw rgba(255, 255, 255, 0.95), 0 0 0.2cqw rgba(255, 255, 255, 0.95); }
.a4-eticheta { position: absolute; top: 5cqw; right: 5cqw; padding: 1.6cqw 3cqw; background: var(--noapte); color: #fff; font: 700 3.6cqw/1 var(--titlu); letter-spacing: 0.14em; }
.a4-banda { position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; display: flex; gap: 3.5cqw; align-items: center; background: #fff; padding: 1.2cqw; color: var(--noapte); }
.a4-qr { width: 16cqw; height: 16cqw; flex: none; display: block; }
.a4-banda div { display: flex; flex-direction: column; gap: 0.8cqw; }
.a4-banda b { font: 700 2.8cqw/1.1 var(--titlu); }
.a4-banda span { font-size: 2cqw; line-height: 1.35; }
.carte { container-type: inline-size; width: 100%; aspect-ratio: 85.6 / 54; background: #e8edee; border-radius: 4.5% / 7.1%; position: relative; overflow: hidden; font-family: var(--aplicatie); color: #2a3336; border: 1px solid #c7d0d2; }
.carte dl { margin: 0; }
.carte dd { margin: 0; }
.carte-sus { position: absolute; left: 0; right: 0; top: 0; height: 12cqw; background: #d2dde0; display: flex; align-items: center; justify-content: space-between; padding: 0 5cqw; }
.carte-sus b { font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.08em; }
.carte-sus i { font-style: normal; font-size: 2.8cqw; font-weight: 700; letter-spacing: 0.1em; color: #7a8689; }
.carte-poza { position: absolute; left: 5cqw; top: 17cqw; width: 23cqw; height: 31cqw; border-radius: 1.6cqw; background: #bcc7ca; overflow: hidden; }
.carte-poza span { position: absolute; background: #a3b0b4; }
.carte-poza span:first-child { left: 5.5cqw; top: 4.5cqw; width: 12cqw; height: 12cqw; border-radius: 50%; }
.carte-poza span:last-child { left: 2.5cqw; top: 18.5cqw; width: 18cqw; height: 16cqw; border-radius: 9cqw 9cqw 0 0; }
.carte-campuri { position: absolute; left: 33cqw; top: 16cqw; right: 4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3cqw; }
.carte-campuri .lat { grid-column: 1 / 3; }
.carte dt { font-size: 2.4cqw; color: #6b777a; }
.carte-campuri dd { font-size: 3.4cqw; font-weight: 600; line-height: 1.25; }
.carte-campuri dd.mare { font-size: 4cqw; font-weight: 700; }
.carte-campuri .ascuns { position: relative; }
.carte-campuri .ascuns::after { content: ""; position: absolute; left: -0.8cqw; right: -0.8cqw; bottom: -0.6cqw; height: 5cqw; background: #111; }
.carte-adresa { position: absolute; left: 5cqw; top: 6cqw; right: 5cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.carte-adresa dd { font-size: 3.4cqw; font-weight: 600; line-height: 1.3; }
.carte-adresa dt:nth-of-type(2) { margin-top: 1.5cqw; }
.carte-mrz { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; font: 4.3cqw/1.35 ui-monospace, "Roboto Mono", Menlo, monospace; letter-spacing: 0.02em; white-space: nowrap; }
.carte-mrz.ascuns::after { content: ""; position: absolute; inset: -1cqw; background: #111; }

/* ------------------------------------------------------------------ figures */
.cifre { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--linie-n); border-bottom: 1px solid var(--linie-n); }
.cifre > div { display: flex; align-items: flex-end; gap: 16px; padding: 28px 24px 28px 0; }
.cifre > div + div { border-top: 1px solid var(--linie-n); }
.cifre > div > span:last-child { font-size: 17px; line-height: 1.35; padding-bottom: 6px; max-width: 12ch; }
.cifra-mare { font: 700 clamp(96px, 12vw, 180px)/0.78 var(--titlu); letter-spacing: -0.06em; }
@media (min-width: 900px) {
  .cifre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifre > div + div { border-top: 0; border-left: 1px solid var(--linie-n); padding-left: 24px; }
}

.qr-placa { background: #fff; border: 1px solid var(--linie-h); padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-decoration: none; text-align: center; }
.qr-placa .eticheta { font-size: 11px; }
.qr { width: min(100%, 220px); height: auto; aspect-ratio: 1; display: block; }

/* ------------------------------------------------------------------ pricing */
.segment { display: flex; border: 1px solid var(--noapte); }
.segment button { min-height: 48px; padding: 0 20px; border: 0; background: transparent; color: var(--noapte); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 200ms, color 200ms; }
.segment button[aria-pressed="true"] { background: var(--noapte); color: var(--ovaz); }
.planuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); border: 1px solid var(--noapte); }
.plan { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden; }
.plan.noapte { background: var(--noapte); color: var(--ovaz); }
.plan-sus { position: relative; display: flex; flex-direction: column; gap: 6px; }
.plan .eticheta { font-size: 10.5px; }
.pret { font: 700 clamp(64px, 8vw, 112px)/0.85 var(--titlu); letter-spacing: -0.05em; }
.pret-rand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pe, .pret-nota { color: var(--piatra); }
.pe { font-size: 17px; }
.pret-nota { font-size: 14.5px; min-height: 20px; }
.plan ul { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--noapte); }
.plan.noapte ul { border-top-color: var(--ovaz); }
.plan li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linie-o); font-size: 16px; }
.plan.noapte li { border-bottom-color: var(--linie-n); }
.plan li b { font-weight: 600; text-align: right; }
.plan-nota { margin: -12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--corp-h); }
.plan-sigiliu { position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; opacity: 0.16; pointer-events: none; }

/* ------------------------------------------------------------------ questions */
.doua-intr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 80px; align-items: start; }
.intr-titlu { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .intr-titlu { position: sticky; top: 110px; } }
.faq { border-top: 1px solid var(--noapte); }
.faq details { border-bottom: 1px solid var(--linie-h); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 22px 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { font-size: 10.5px; font-weight: 400; color: var(--ocru-text); }
.faq summary i { font-style: normal; font-size: 26px; font-weight: 400; justify-self: end; transition: transform 200ms; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px 52px; font-size: 16px; line-height: 1.6; color: var(--corp-h); max-width: 58ch; }

/* ------------------------------------------------------------------ get the app */
.ia { padding-bottom: clamp(40px, 5vw, 64px); }
.ia .titlu-bloc { gap: 28px; }
.ia-h { font-size: clamp(44px, 6vw, 88px); line-height: 0.94; letter-spacing: -0.033em; max-width: 11ch; }
.ia .eticheta { font-size: 10.5px; }
.sigiliu-final { display: flex; justify-content: center; }
.final { width: min(100%, 420px); height: auto; aspect-ratio: 1; }
.final .jum { transition-duration: 420ms; }

/* ------------------------------------------------------------------ footer */
.subsol { background: var(--noapte); color: var(--piatra); overflow: hidden; }
.subsol > .cadru:first-child { padding-top: 40px; padding-bottom: 0; }
.subsol-coloane { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 48px; font-size: 15px; border-top: 1px solid var(--linie-n); padding-top: 32px; }
.subsol-coloane > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.subsol-coloane a { text-decoration: none; overflow-wrap: anywhere; }
.subsol-coloane .eticheta { font-size: 11px; }
.limbi { display: flex; gap: 14px; }
.subsol-marca { margin: 40px 0 -1.6%; color: var(--ovaz); }
.subsol-marca svg { width: 100%; height: auto; }
.subsol-jos { position: relative; background: var(--noapte); padding-top: 16px; padding-bottom: 24px; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font: 10.5px var(--mono); }
.subsol-jos .firma { flex-basis: 100%; font: 12.5px/1.5 var(--text); color: var(--piatra); }

/* Reduced motion: every animated thing in its final state (the script also skips its loop, typing and scrambles). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .scan-linie { display: none; }
}

/* ================================================================== the 2026-10-22 redesign
   One working sample per screen, little text, the backgrounds drawn from Colshare's own material: the seal's engraving
   at -27°, real ciphertext, the slit (decisions.md 2026-10-22, "colshare.app: one working sample per screen"). */

/* The section label: a mono line with a short rule, as on a technical drawing. */
.sectiune { display: inline-flex; align-items: center; gap: 12px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; margin: 0; }
.sectiune i { width: 28px; height: 1px; background: currentColor; flex: none; }
.sectiune.insigna i { width: 8px; height: 8px; border-radius: 50%; background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.16); }
h2.sectiune { font-weight: 400; }
.h-mare { font: 700 clamp(48px, 8vw, 128px)/0.88 var(--titlu); letter-spacing: -0.045em; max-width: 11ch; text-wrap: balance; }

/* ------------------------------------------------------------------ hero: the engraved seal */
.erou { min-height: min(82svh, 760px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; }
.gravura { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
@media (max-width: 899px) { .gravura { opacity: 0.42; } }
.erou-grila { width: 100%; padding-top: clamp(56px, 8vh, 96px); padding-bottom: 40px; }
.erou-text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; max-width: 640px; }
.erou h1 { font-size: clamp(40px, 4.4vw, 60px); line-height: 0.98; letter-spacing: -0.03em; max-width: none; text-shadow: 0 2px 24px rgba(18, 19, 19, 0.9); }
.erou .lead { font-size: clamp(16px, 1.25vw, 18px); max-width: 48ch; text-shadow: 0 1px 12px rgba(18, 19, 19, 0.95); }
.erou .insigna { color: var(--piatra-2); }

/* ------------------------------------------------------------------ the copy: marked by the visitor */
.copia { overflow: clip; isolation: isolate; }
/* The marking's own angle as the paper's texture, very light. */
.hasura-fond { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(153deg, rgba(18, 19, 19, 0.045) 0 1px, transparent 1px 14px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.copia-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .copia-grila { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.copia-text { display: flex; flex-direction: column; gap: 24px; }
.marcheaza { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--noapte); margin-top: 8px; }
@media (min-width: 560px) { .marcheaza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .marcheaza label + label { border-left: 1px solid var(--linie-h); padding-left: 18px; } }
.marcheaza label { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 12px; border-bottom: 1px solid var(--noapte); }
.marcheaza .eticheta { color: var(--ocru-text); }
.marcheaza input { width: 100%; border: 0; padding: 4px 0; background: transparent; color: var(--noapte); font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--titlu); letter-spacing: -0.02em; caret-color: var(--ocru-text); }
.marcheaza input:focus { outline: none; }
.marcheaza label:focus-within { border-bottom-color: var(--ocru-text); box-shadow: inset 0 -2px 0 var(--ocru-text); }
.copia-text > .eticheta { margin: -12px 0 0; font-size: 10.5px; }
.copia-foaie { margin: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; perspective: 1800px; }
.copia-foaie .eticheta { font-size: 10.5px; text-align: center; max-width: 52ch; }
.copia-foaie:hover .foaie-3d { transform: rotateX(0) rotateZ(0); }

/* ------------------------------------------------------------------ the link: phone, server, the one person */
.legatura { overflow: hidden; isolation: isolate; }
.cifru { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; -webkit-mask-image: radial-gradient(120% 90% at 50% 62%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 62%, #000 30%, transparent 85%); }
.legatura .doua { align-items: end; }
.legatura .cifre { border-color: var(--linie-n); }
.legatura .cifra-mare { font-size: clamp(64px, 7vw, 108px); }
.traseu { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .traseu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .traseu .nod + .nod { border-left: 0; } }
.nod { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding: 22px; min-height: 300px; background: rgba(18, 19, 19, 0.82); border: 1px solid var(--linie-n); }
.nod-cap { display: flex; justify-content: space-between; align-items: center; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--contur-n); transition: background 300ms, box-shadow 300ms; }
.nod-camp { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nod-camp textarea { flex: 1; min-height: 96px; resize: none; border: 1px solid var(--contur-n); background: transparent; color: var(--ovaz); padding: 12px; font: 400 17px/1.45 var(--text); caret-color: var(--ocru); }
.nod-camp textarea:focus { outline: none; border-color: var(--ocru); }
.nod-camp textarea[readonly] { color: var(--piatra); border-style: dashed; }
.nod-jos .eticheta, .nod .eticheta { font-size: 10px; letter-spacing: 0.05em; }
.jurnal { margin: 0; display: flex; flex-direction: column; font: 400 12px/1.4 var(--mono); }
.jurnal div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--linie-n); }
.jurnal dt { color: var(--gri); }
.jurnal dd { margin: 0; color: var(--ovaz); overflow-wrap: anywhere; }
.jurnal .octeti { color: var(--piatra); }
[data-stare="deschis"] .jurnal dd, [data-stare="folosit"] .jurnal dd { color: var(--gri); text-decoration: line-through; }
[data-stare="deschis"] .jurnal [data-j-id], [data-stare="folosit"] .jurnal [data-j-id] { text-decoration: none; }
.vede { margin-top: auto; }
.vede summary { cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--contur-n); text-underline-offset: 4px; }
.vede summary::-webkit-details-marker { display: none; }
.vede ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--piatra-2); }
.vede ul li::before { content: "+ "; font-family: var(--mono); color: var(--piatra); }
.vede ul.nu-vede li::before { content: "× "; color: var(--ocru); }
.ei-sus { display: flex; gap: 14px; align-items: center; }
.ei-sus > div { display: flex; flex-direction: column; gap: 4px; font-family: var(--aplicatie); }
.ei-sus b { font: 700 20px/1.1 var(--titlu); letter-spacing: -0.015em; }
.ei-sus .gri { font-size: 12.5px; line-height: 1.35; color: var(--piatra); }
.ei-sigiliu { width: 56px; height: 56px; flex: none; }
.ei-text { margin: 0; font: 15px/1.5 var(--aplicatie); color: var(--piatra-2); flex: 1; }
.ei-text q { display: block; color: var(--ovaz); font-size: 17px; border-left: 2px solid var(--ocru); padding-left: 12px; margin-bottom: 10px; }
.ei-text q::before, .ei-text q::after { content: none; }
.ei-text b { color: var(--ovaz); font-weight: 600; }
.ei-buton { justify-content: center; min-height: 52px; border: 0; cursor: pointer; }
.ei-iar { align-self: flex-start; border: 0; background: none; cursor: pointer; }
/* The seal on the recipient's side: closed until opened, parted after. */
[data-stare="deschis"] .ei-sigiliu .jum { transform: translate(var(--x2), var(--y2)); }
[data-stare="folosit"] .ei-sigiliu .jum { transform: translate(var(--x2), var(--y2)); opacity: 0; }
[data-stare="folosit"] .ei-sigiliu .contur { opacity: 1; }
[data-stare] .nod-tu .led, [data-stare="gata"] .nod-server .led { background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.18); }
[data-stare="deschis"] .nod-ei .led { background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.18); }
[data-stare="fara"] .ei-buton { display: none; }
.traseu-nota { max-width: none !important; color: var(--piatra) !important; }

/* ------------------------------------------------------------------ the seal: the section cut along its slit */
.sigiliu-s { overflow: clip; isolation: isolate; }
/* A layer twice the section's size, turned -27°: its two halves are hatched with horizontal lines, which the turn makes
   the seal's engraving; the gap between them is the slit. data-viata closes it, cuts it, parts it, empties it. */
.despicat { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; transform: rotate(-27deg); z-index: -1; pointer-events: none; --fanta: 26px; --dep: 0px; }
.jum-fond { position: absolute; left: 0; right: 0; height: 50%; background: repeating-linear-gradient(180deg, rgba(236, 232, 223, 0.07) 0 1px, transparent 1px 13px); transition: transform 900ms var(--usor), opacity 700ms var(--usor), background-color 700ms; }
.jum-fond.sus { top: 0; transform: translateY(calc(var(--fanta) / -2 - var(--dep))); border-bottom: 1px solid rgba(226, 165, 43, 0.6); }
.jum-fond.jos { bottom: 0; transform: translateY(calc(var(--fanta) / 2 + var(--dep))); border-top: 1px solid rgba(226, 165, 43, 0.6); }
.sigiliu-s[data-viata="0"] .despicat { --fanta: 0px; }
.sigiliu-s[data-viata="0"] .jum-fond { border-color: transparent; }
.sigiliu-s[data-viata="2"] .despicat { --dep: clamp(28px, 4vw, 64px); }
.sigiliu-s[data-viata="2"] .jum-fond { background-color: rgba(226, 165, 43, 0.025); }
.sigiliu-s[data-viata="3"] .despicat { --dep: clamp(28px, 4vw, 64px); }
.sigiliu-s[data-viata="3"] .jum-fond { opacity: 0.25; border-style: dashed; border-color: var(--gri); }
.sigiliu-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; min-height: min(92svh, 860px); }
@media (min-width: 900px) { .sigiliu-grila { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "t s" "x s"; } .sigiliu-grila > .titlu-bloc { grid-area: t; align-self: end; } .sigiliu-mare { grid-area: s; } .stari { grid-area: x; align-self: start; } }
.sigiliu-mare { display: flex; justify-content: center; }
.ciclu { width: min(100%, 520px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)); }
.stari { display: flex; flex-direction: column; gap: 18px; }
.stari-nume { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font: 400 11px/1.3 var(--mono); color: var(--gri); }
.stari-nume li { cursor: pointer; padding: 4px 0; }
.stari-nume li:nth-child(2) { text-align: center; transform: translateX(-16%); }
.stari-nume li:nth-child(3) { text-align: center; transform: translateX(16%); }
.stari-nume li:last-child { text-align: right; }
.stari-nume li.activ { color: var(--ocru); }
.stare-text { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linie-n); padding-top: 18px; min-height: 150px; }
.stare-text h3 { font: 700 clamp(28px, 3vw, 40px)/1 var(--titlu); letter-spacing: -0.025em; }
.stare-text p { margin: 0; color: var(--piatra-2); font-size: 16.5px; line-height: 1.5; max-width: 44ch; }

/* ------------------------------------------------------------------ the check: a fingerprint that breaks */
.dovada-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: 24px; }
@media (min-width: 900px) { .dovada-grila { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.dovada .qr-placa { flex-direction: row; justify-content: flex-start; padding: 16px; gap: 16px; align-self: flex-start; text-align: left; max-width: 360px; }
.dovada .qr { width: 96px; flex: none; }
.amprenta { background: var(--noapte); color: var(--ovaz); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 40px 80px -40px rgba(18, 19, 19, 0.5); }
.amprenta .eticheta { color: var(--piatra); }
.amp-randuri { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-bottom: 1px solid var(--linie-n); padding-bottom: 18px; }
.amp-randuri dt { font: 10px var(--mono); color: var(--gri); letter-spacing: 0.06em; }
.amp-randuri dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; transition: color 300ms; }
.amprenta[data-v="1"] [data-amp-data] { color: var(--rau); }
.amp-hex { font: 500 clamp(17px, 2.1vw, 27px)/1.35 var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; color: var(--ovaz); min-height: 4.1em; }
.amp-hex span { transition: color 400ms; }
.amp-hex .alt { color: var(--ocru); }
html.anim .amp-hex .alt { animation: cifra 520ms steps(6) 1; }
@keyframes cifra { 0% { opacity: 0.2; } 50% { opacity: 1; } 70% { opacity: 0.4; } 100% { opacity: 1; } }
.amp-verdict { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.amp-verdict i { width: 10px; height: 10px; border-radius: 50%; background: var(--ocru); }
.amprenta[data-v="1"] .amp-verdict i { background: var(--rau); }
.btn.contur-n { align-self: flex-start; border-color: var(--contur-n); color: var(--ovaz); background: transparent; cursor: pointer; }
.btn.contur-n:hover { border-color: var(--ovaz); }
.dovada-nota { padding-top: 0 !important; color: var(--estompat); }

/* ------------------------------------------------------------------ also in the app: one ruled line each */
.mai .cadru { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.mai-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-n); }
.mai-lista li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--linie-n); }
@media (min-width: 900px) { .mai-lista li { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr); align-items: baseline; } }
.mai-lista b { font: 700 clamp(20px, 1.9vw, 26px)/1.15 var(--titlu); letter-spacing: -0.015em; }
.mai-lista p { margin: 0; color: var(--piatra-2); font-size: 15.5px; line-height: 1.5; }

/* ------------------------------------------------------------------ the end */
.capat .cadru { padding-top: clamp(96px, 12vw, 180px); }
.capat .titlu-bloc { gap: 28px; }
.capat .corp.mic { color: var(--piatra); max-width: 52ch; }

@media (min-width: 900px) { .doua-mari { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.legatura .cifre > div { padding-top: 18px; padding-bottom: 18px; gap: 12px; }
.legatura .cifre > div > span:last-child { font-size: 14px; max-width: 11ch; }
.legatura .cifra-mare { font-size: clamp(56px, 5.4vw, 88px); }
/* The ask's title takes the full width; its three figures sit in a row under it. */
.legatura .doua { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.legatura .h2 { max-width: none; text-wrap: balance; }
.legatura .titlu-bloc .corp { max-width: 62ch; }

/* ------------------------------------------------------------------ sections told in stages as one scrolls
   The section is as tall as its markers; its scene sticks under the header meanwhile (html.js only: without the script
   the markers are gone and the scene shows its last stage, unpinned). */
.etapizat { display: grid; }
.etapizat > .repere, .etapizat > .scena { grid-area: 1 / 1; }
.repere { display: none; }
.scena { position: relative; }
.etapizat.pornit > .repere { display: flex; flex-direction: column; pointer-events: none; }
/* A stretch of scroll per stage; the last marker is the screen plus its stretch, so the last stage is pinned too. */
.repere i { display: block; height: 60vh; }
.repere i:last-child { height: 140vh; }
.etapizat.pornit > .scena { position: sticky; top: 0; height: 100svh; align-self: start; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 76px; }
.etapizat.pornit > .scena > .cadru { padding-top: 24px; padding-bottom: 24px; width: 100%; }

/* The stages' names: a ruled list, the current one lit. */
.etape { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--noapte); }
.etape li { border-bottom: 1px solid var(--linie-h); padding: 10px 0; opacity: 0.38; transition: opacity 400ms var(--usor); }
.etape li.activ { opacity: 1; }
.etape button { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 14px; width: 100%; }
.etape button:focus-visible { outline: 2px solid var(--ocru-text); outline-offset: 3px; }
.etape .mono { font-size: 10.5px; color: var(--ocru-text); }
.etape b { font: 700 clamp(19px, 1.8vw, 24px)/1.15 var(--titlu); letter-spacing: -0.015em; }
.etape p { margin: 0; max-height: 0; overflow: hidden; padding-left: 32px; color: var(--corp-h); font-size: 15.5px; line-height: 1.45; transition: max-height 500ms var(--usor), margin 500ms var(--usor); }
.etape li.activ p { max-height: 5em; margin-top: 6px; }

/* ------------------------------------------------------------------ the copy, stage by stage
   0 scanned, 1 numbers found, 2 burned out, 3 marked, 4 checkable. Without the script it is the last. */
.copia .copia-grila { min-height: 0; }
.copia-foaie { position: relative; }
.foaie-3d { width: min(100%, 440px, calc((100svh - 300px) * 0.707)); transform: rotateX(16deg) rotateZ(-5deg) scale(0.96); }
.copia[data-etapa="1"] .foaie-3d, .copia[data-etapa="2"] .foaie-3d { transform: rotateX(9deg) rotateZ(-3deg) scale(0.98); }
.copia[data-etapa="3"] .foaie-3d, .copia[data-etapa="4"] .foaie-3d, .copia:not(.pornit) .foaie-3d { transform: rotateX(2deg) rotateZ(-1deg); }
.copia-foaie:hover .foaie-3d { transform: rotateX(0) rotateZ(0); }
/* The marking sweeps in row by row; COPY and the check band arrive last. */
.a4-marcaj div { transition: opacity 500ms var(--usor) calc(var(--i) * 35ms), transform 700ms var(--usor) calc(var(--i) * 35ms); }
.copia.pornit:is([data-etapa="0"], [data-etapa="1"], [data-etapa="2"]) .a4-marcaj div { opacity: 0; transform: translateX(-12%); }
.a4-eticheta, .a4-banda { transition: opacity 500ms var(--usor), transform 600ms var(--usor); }
.a4-eticheta { transform-origin: 70% 30%; }
.copia.pornit:not([data-etapa="4"]) .a4-eticheta { opacity: 0; transform: scale(1.8) rotate(-8deg); }
.copia.pornit:not([data-etapa="4"]) .a4-banda { opacity: 0; transform: translateY(30%); }
/* The bars: none while scanned and found, burned in from stage 2 on. */
.carte-campuri .ascuns::after, .carte-mrz.ascuns::after { transform-origin: left center; transition: transform 520ms cubic-bezier(0.7, 0, 0.2, 1); }
.carte-mrz.ascuns::after { transition-delay: 200ms; }
.copia.pornit:is([data-etapa="0"], [data-etapa="1"]) .ascuns::after { transform: scaleX(0); }
/* What the app found: ochre frames, named, only while found and as they burn. */
.carte-campuri .ascuns::before, .carte-mrz.ascuns::before { position: absolute; z-index: 2; font: 500 2.1cqw/1 var(--mono); letter-spacing: 0.04em; color: var(--noapte); background: var(--ocru); padding: 0.7cqw 1cqw; white-space: nowrap; opacity: 0; transition: opacity 300ms; pointer-events: none; }
.carte-campuri .ascuns::before { content: "FOUND · DOCUMENT NO."; left: -1cqw; top: -4.4cqw; }
.carte-mrz.ascuns::before { content: "FOUND · CODE LINES"; left: -1cqw; top: -5.6cqw; }
.carte-campuri .ascuns, .carte-mrz.ascuns { outline: 0.5cqw solid transparent; outline-offset: 0.9cqw; transition: outline-color 300ms; }
.copia.pornit:is([data-etapa="1"], [data-etapa="2"]) .ascuns { outline-color: var(--ocru); }
.copia.pornit:is([data-etapa="1"], [data-etapa="2"]) .ascuns::before { opacity: 1; }
/* The scan: one ochre line passes the sheet when the numbers are found. */
.a4-pagina::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ocru); box-shadow: 0 0 18px 4px rgba(226, 165, 43, 0.5); opacity: 0; pointer-events: none; }
html.anim .copia[data-etapa="1"] .a4-pagina::after { animation: scan 1100ms cubic-bezier(0.5, 0, 0.5, 1) 1; }
@keyframes scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* Marking it, and drawing boxes: at the last stages. */
.marcheaza, .cutii { transition: opacity 400ms var(--usor); }
.copia.pornit:is([data-etapa="0"], [data-etapa="1"], [data-etapa="2"]) .marcheaza { opacity: 0.25; pointer-events: none; }
.copia.pornit:not([data-etapa="4"]) .cutii { opacity: 0; pointer-events: none; }
.copia-foaie figcaption { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cutii { display: flex; gap: 8px; align-items: center; }
.btn.contur-h { border-color: var(--noapte); color: var(--noapte); background: transparent; cursor: pointer; min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn.contur-h[aria-pressed="true"] { background: var(--noapte); color: var(--ovaz); }
.btn.text-h { border: 0; background: none; color: var(--estompat); text-decoration: underline; cursor: pointer; font-size: 14px; padding: 8px 6px; }
.a4-pagina.desen { cursor: crosshair; touch-action: none; outline: 2px dashed var(--ocru-text); outline-offset: 4px; }
.cutie-arsa { position: absolute; z-index: 3; background: #111; outline: 1px dashed var(--ocru); }
.cutie-arsa.arsa { outline: 0; }
.copia-nota { padding-top: 0 !important; color: var(--estompat); }
.copia.pornit .copia-nota { display: none; }
@media (max-width: 899px) {
  .copia.pornit .copia-grila { gap: 14px; }
  .copia.pornit .copia-text { gap: 12px; }
  .copia.pornit .copia-text .h2 { font-size: 30px; }
  .copia.pornit .etape li:not(.activ) { display: none; }
  .copia.pornit .etape { border-top: 0; }
  .copia.pornit .etape li { padding: 0; border: 0; }
  .copia.pornit .etape p { max-height: none; margin-top: 4px; }
  .copia.pornit .marcheaza { display: none; }
  .copia.pornit[data-etapa="4"] .marcheaza, .copia.pornit[data-etapa="3"] .marcheaza { display: grid; }
  .copia.pornit[data-etapa="3"] .etape, .copia.pornit[data-etapa="4"] .etape { display: none; }
  .foaie-3d { width: min(100%, calc((100svh - 360px) * 0.707)); }
  .copia.pornit .copia-nota, .copia.pornit .copia-foaie figcaption > .eticheta { display: none; }
  /* Marking and drawing: the title gives way, the two fields share a row, the sheet makes room for the button. */
  .copia.pornit:is([data-etapa="3"], [data-etapa="4"]) .copia-text .h2 { display: none; }
  .copia.pornit .marcheaza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; }
  .copia.pornit .marcheaza label + label { border-left: 1px solid var(--linie-h); padding-left: 12px; }
  .copia.pornit .marcheaza label { padding: 8px 0 6px; }
  .copia.pornit .marcheaza input { font-size: 17px; }
  .copia.pornit:is([data-etapa="3"], [data-etapa="4"]) .foaie-3d { width: min(100%, calc((100svh - 330px) * 0.707)); }
}

/* ------------------------------------------------------------------ the seal, stage by stage */
.sigiliu-s .sigiliu-grila { min-height: 0; }
.sigiliu-s.pornit .ciclu { width: min(100%, 520px, calc(100svh - 260px)); }
.stari-bara { height: 2px; background: var(--contur-n); position: relative; }
.stari-bara i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--ocru); transition: width 600ms var(--usor); }
.stari-nume { margin-top: -8px; }
.stari-nume button { all: unset; cursor: pointer; display: block; width: 100%; padding: 8px 0; text-align: inherit; }
.stari-nume button:focus-visible { outline: 2px solid var(--ocru); outline-offset: 2px; }
.stari-nume button.activ { color: var(--ocru); }
.stari-nume li { cursor: default; }
@media (max-width: 899px) {
  .sigiliu-s.pornit .sigiliu-grila { gap: 18px; }
  .sigiliu-s.pornit .titlu-bloc .corp { display: none; }
  .sigiliu-s.pornit .ciclu { width: min(70vw, calc(100svh - 470px)); }
  .stare-text { min-height: 0; }
  .stari-nume { font-size: 10px; }
}
@media (min-width: 900px) { .erou h1 .ocru { white-space: nowrap; } }

/* ------------------------------------------------------------------ the copy on night: a sheet on a light table
   (Cristian, 2026-10-22: the section on paper was "very bland in colour and contrast"). The sheet is the brightest thing
   on the page; a soft light falls on it; the stage being shown is oat, the others stone, the numbers ochre. */
.copia .scena { background: radial-gradient(52% 70% at 74% 52%, #2b2d2f 0%, #1a1b1c 45%, var(--noapte) 75%); }
.copia .hasura-fond { background: repeating-linear-gradient(153deg, rgba(236, 232, 223, 0.05) 0 1px, transparent 1px 14px); }
.copia .etape { border-top-color: var(--ovaz); }
.copia .etape li { border-bottom-color: var(--linie-n); opacity: 0.4; }
.copia .etape li.activ { opacity: 1; }
.copia .etape .mono { color: var(--ocru); }
.copia .etape li.activ b { color: var(--ovaz); }
.copia .etape p { color: var(--piatra-2); }
.copia .etape button:focus-visible { outline-color: var(--ocru); }
.copia .marcheaza { border-top-color: var(--ovaz); }
.copia .marcheaza label { border-bottom-color: var(--ovaz); }
.copia .marcheaza label + label { border-left-color: var(--linie-n); }
.copia .marcheaza .eticheta { color: var(--ocru); }
.copia .marcheaza input { color: var(--ovaz); caret-color: var(--ocru); }
.copia .marcheaza label:focus-within { border-bottom-color: var(--ocru); box-shadow: inset 0 -2px 0 var(--ocru); }
.copia .sectiune.ocru-text { color: var(--ocru); }
.copia .eticheta.estompat, .copia .copia-nota { color: var(--piatra); }
.copia .foaie-3d { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 120px -20px rgba(236, 232, 223, 0.12); }
.copia .btn.contur-h { border-color: var(--contur-n); color: var(--ovaz); }
.copia .btn.contur-h:hover { border-color: var(--ovaz); }
.copia .btn.contur-h[aria-pressed="true"] { background: var(--ocru); border-color: var(--ocru); color: var(--noapte); }
.copia .btn.text-h { color: var(--piatra-2); }
.copia .a4-pagina.desen { outline-color: var(--ocru); }
.erou-sub { margin-top: -10px; font-size: 10.5px; letter-spacing: 0.08em; }

/* ------------------------------------------------------------------ firms first (decisions.md 2026-10-22) */
/* The language switch: two letters in mono, beside the menu. */
.antet-limba { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-decoration: none; color: var(--piatra-2); border: 1px solid var(--contur-n); padding: 9px 10px; min-height: 36px; display: inline-flex; align-items: center; }
.antet-limba:hover { color: var(--ovaz); border-color: var(--ovaz); }
.antet-ingust .antet-limba { min-height: 44px; padding: 0 12px; }
/* The hero's quiet way to the people's side. */
.erou-oameni { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--piatra-2); text-decoration: underline; text-decoration-color: var(--contur-n); text-underline-offset: 5px; }
.erou-oameni:hover { color: var(--ovaz); text-decoration-color: var(--ocru); }
.erou-oameni svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* What a firm gets: the WhatsApp question beside a numbered, ruled list. */
.firme-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
@media (min-width: 900px) { .firme-grila { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .firme-grila > .titlu-bloc { position: sticky; top: 110px; } }
.firme-s .h2 { max-width: 15ch; }
.dece { margin-top: 20px; border-left: 3px solid var(--noapte); padding: 4px 0 4px 18px; display: flex; flex-direction: column; gap: 8px; }
.dece b { font: 700 clamp(19px, 1.8vw, 24px)/1.15 var(--titlu); letter-spacing: -0.015em; }
.dece p { margin: 0; color: var(--corp-h); font-size: 16px; line-height: 1.55; max-width: 52ch; }
.firme-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--noapte); }
.firme-lista li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid var(--linie-o); }
.firme-lista .mono { font-size: 10.5px; color: var(--ocru-text); padding-top: 6px; grid-row: span 2; }
.firme-lista b { font: 700 clamp(19px, 1.7vw, 23px)/1.15 var(--titlu); letter-spacing: -0.015em; }
.firme-lista p { margin: 0; color: var(--corp-h); font-size: 15.5px; line-height: 1.5; }
.firme-gratuit { margin-top: 18px; font-weight: 600; color: var(--noapte) !important; }

/* Pricing, both sides: a labelled group each, one switch above. */
.planuri-grup { display: flex; flex-direction: column; gap: 14px; }
.planuri-grup > .eticheta { font-size: 11px; letter-spacing: 0.06em; }
.planuri-grup + .planuri-grup { margin-top: clamp(16px, 3vw, 40px); }
.plan-firma li { font-size: 15.5px; }
.plan-firma li span { flex: 1; }
.plan-cumpar { align-self: flex-start; position: relative; }
.plan.noapte .plan-cumpar.plin { color: var(--noapte); }
/* The wordmark, larger in the header (Cristian, 2026-10-22: "logo can be bigger"). */
.antet-rand { min-height: 76px; }

/* ------------------------------------------------------------------ the intro (home/intro.js)
   Over the whole screen, once a visit: ciphertext streams into the seal, the slit cuts the screen, the two halves part.
   Hidden without .ruleaza (so without the script, or once it is gone, the page is simply there); never with reduced
   motion. */
.intro { display: none; }
.intro.ruleaza { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro-jum { position: absolute; inset: 0; background: var(--noapte); transform: translate(0, 0); transition: transform 700ms cubic-bezier(0.7, 0, 0.2, 1); }
.intro.deschis .intro-jum { transform: translate(var(--x), var(--y)); }
.intro-sig, .intro-intreg { position: absolute; left: calc(var(--cx) - var(--D) / 2); top: calc(var(--cy) - var(--D) / 2); width: var(--D); height: var(--D); }
.intro-sig svg, .intro-intreg svg { width: 100%; height: 100%; }
.intro-sig { opacity: 0; }
.intro.taiat .intro-sig { opacity: 1; }
.intro-intreg { opacity: 0; transform: scale(0.82); transition: opacity 420ms var(--usor), transform 520ms var(--usor); }
.intro.sigilat .intro-intreg { opacity: 1; transform: none; }
.intro.taiat .intro-intreg { opacity: 0; transition: none; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The cut: an ochre line along the slit, across the whole screen, drawn once. */
.intro-taietura { position: absolute; left: calc(var(--cx) - 150vmax); top: var(--cy); width: 300vmax; height: 2px; background: var(--ocru); box-shadow: 0 0 16px 2px rgba(226, 165, 43, 0.55); transform-origin: 50% 50%; transform: translateY(calc(var(--D) * -0.04 * 0.891)) translateX(calc(var(--D) * -0.04 * 0.454)) rotate(-27deg) scaleX(0); opacity: 0; transition: transform 260ms cubic-bezier(0.6, 0, 0.3, 1), opacity 200ms; }
.intro.taiat .intro-taietura { transform: translateY(calc(var(--D) * -0.04 * 0.891)) translateX(calc(var(--D) * -0.04 * 0.454)) rotate(-27deg) scaleX(1); opacity: 1; }
.intro.deschis .intro-taietura { opacity: 0; transition: opacity 300ms; }
.intro.sari { opacity: 0; transition: opacity 200ms; }
@media (prefers-reduced-motion: reduce) { .intro-jum, .intro-usa, .intro-intreg, .intro-taietura { transition: none !important; } }

/* ------------------------------------------------------------------ the hero, centred on the seal (2026-10-22)
   The intro parts the seal in the middle of the screen; the hero sits on that same seal: a large hairline watermark
   behind the headline, everything centred over it, four facts ruled along its foot. */
.erou { min-height: calc(100svh - 76px); }
.erou-grila { display: flex; justify-content: center; padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(32px, 6vh, 64px); }
.erou-text { align-items: center; text-align: center; max-width: 920px; gap: 26px; }
.erou h1 { font-size: clamp(40px, 5.4vw, 76px); max-width: none; text-shadow: 0 2px 30px var(--noapte), 0 0 60px var(--noapte); }
.erou .lead { max-width: 58ch; text-shadow: 0 1px 16px var(--noapte), 0 0 30px var(--noapte); }
.erou .actiuni { justify-content: center; }
.erou-sub { margin-top: -6px; }
.erou-oameni { margin-top: -4px; }
.erou-dovezi { list-style: none; margin: 0 auto; padding: 0 var(--lat); width: 100%; max-width: 1280px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie-n); position: relative; }
.erou-dovezi li { font: 400 10.5px/1.45 var(--mono); letter-spacing: 0.06em; color: var(--piatra-2); padding: 16px 12px; text-align: center; border-bottom: 1px solid var(--linie-n); background: linear-gradient(to top, var(--noapte), rgba(18, 19, 19, 0.6)); }
.erou-dovezi li:nth-child(odd) { border-right: 1px solid var(--linie-n); }
@media (min-width: 900px) {
  .erou-dovezi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .erou-dovezi li { border-bottom: 0; padding: 20px 12px 26px; }
  .erou-dovezi li + li { border-left: 1px solid var(--linie-n); }
  .erou-dovezi li:nth-child(odd) { border-right: 0; }
}
@media (max-width: 899px) { .gravura { opacity: 0.6; } }

/* ------------------------------------------------------------------ two homepages in one page (2026-10-22, "the choice")
   html[data-pentru] shows one audience; without it (no script) both are shown. */
html[data-pentru="firme"] [data-pentru="oameni"], html[data-pentru="oameni"] [data-pentru="firme"] { display: none !important; }
html:not([data-pentru]) .antet-grup[data-pentru="oameni"], html:not([data-pentru]) .antet-nav > span[data-pentru="oameni"] { display: none; }
.antet-grup { display: contents; }
.antet-nav > span[data-pentru] { display: contents; }
.antet-comut { font: inherit; background: none; border: 0; color: var(--piatra-2); cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--contur-n); text-underline-offset: 5px; white-space: nowrap; }
.antet-comut:hover { color: var(--ovaz); text-decoration-color: var(--ocru); }
.meniu .antet-grup { display: contents; }
.meniu .antet-comut { font: inherit; text-align: left; padding: 14px 0; color: var(--ovaz); text-decoration: none; }
button.erou-oameni { font: inherit; font-size: 15px; background: none; border: 0; cursor: pointer; padding: 0; }
.erou-varianta { display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.erou { display: flex; flex-direction: column; }

/* Why firms switch: the three risks, then the GDPR line; three numbered pillars beside. */
.riscuri { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--noapte); }
.riscuri li { padding: 14px 0 14px 18px; border-bottom: 1px solid var(--linie-o); position: relative; }
.riscuri li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; background: var(--rau-text, #b3261e); border-radius: 50%; }
.riscuri b { font: 700 clamp(18px, 1.6vw, 21px)/1.2 var(--titlu); letter-spacing: -0.01em; }
.riscuri p { margin: 4px 0 0; color: var(--corp-h); font-size: 15.5px; line-height: 1.5; }
.gdpr { margin-top: 16px !important; color: var(--estompat) !important; max-width: 58ch; }
.firme-fara { margin-top: 18px !important; color: var(--corp-h) !important; }
.firme-gratuit { margin-top: 8px !important; }

/* The three steps of a request, where the figures were. */
.pasi-cerere { list-style: none; margin: 0; padding: 0; }
.pasi-cerere li { display: flex; align-items: flex-end; gap: 16px; padding: 22px 24px 22px 0; }
.pasi-cerere li + li { border-top: 1px solid var(--linie-n); }
@media (min-width: 900px) { .pasi-cerere li + li { border-top: 0; border-left: 1px solid var(--linie-n); padding-left: 24px; } }
.pasi-cerere li > span:last-child { font-size: 15px; line-height: 1.35; padding-bottom: 6px; max-width: 16ch; }

/* The questions numbered by what is shown. */
.faq { counter-reset: q; }
.faq details { counter-increment: q; }
.faq summary .mono::before { content: counter(q, decimal-leading-zero); }

/* ------------------------------------------------------------------ the intro's two doors */
.intro.alege { pointer-events: auto; }
.intro.alege:not(.deschis) .intro-jum { transform: translate(var(--xa), var(--ya)); transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro-jum::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 220ms var(--usor); pointer-events: none; }
.intro-jum.sus::before { background: radial-gradient(70% 60% at 22% 22%, rgba(226, 165, 43, 0.07), transparent 70%); }
.intro-jum.jos::before { background: radial-gradient(70% 60% at 78% 78%, rgba(226, 165, 43, 0.07), transparent 70%); }
.intro.static .intro-jum, .intro.static .intro-usa, .intro.static .intro-intreg { transition: none !important; }
.intro.alege .intro-taietura { opacity: 0; transition: opacity 600ms; }
.intro-usa { position: absolute; display: flex; flex-direction: column; gap: 14px; max-width: min(460px, 40vw); background: none; border: 0; color: var(--ovaz); text-align: left; cursor: pointer; padding: 8px; opacity: 0; pointer-events: none; transition: opacity 500ms var(--usor) 200ms, color 200ms; font: inherit; }
.intro-usa.firme { left: max(6vw, 24px); top: max(15vh, 96px); }
.intro-usa.oameni { right: max(6vw, 24px); bottom: max(13vh, 72px); text-align: right; align-items: flex-end; }
.intro.alege .intro-usa { opacity: 1; pointer-events: auto; }
.intro.deschis .intro-usa { opacity: 0; transition: opacity 200ms; }
.intro-usa .eticheta { color: var(--ocru); font-size: 11px; letter-spacing: 0.1em; }
.intro-usa b { font: 700 clamp(26px, 3.4vw, 48px)/1.02 var(--titlu); letter-spacing: -0.03em; }
.intro-intra { display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--text); color: var(--piatra-2); }
.intro-intra svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--usor); }
.intro-usa:focus-visible { outline: 2px solid var(--ocru); outline-offset: 6px; }
.intro-intrebare { position: absolute; left: 0; right: 0; top: calc(var(--cy) + var(--D) / 2 + 28px); text-align: center; color: var(--piatra); font-size: 11px; letter-spacing: 0.16em; opacity: 0; transition: opacity 500ms 300ms; pointer-events: none; }
.intro.alege .intro-intrebare { opacity: 1; }
.intro.deschis .intro-intrebare { opacity: 0; transition: opacity 150ms; }
@media (max-width: 899px) {
  .intro-usa { max-width: 80vw; }
  .intro-usa.firme { top: max(10vh, 80px); }
  .intro-usa.oameni { bottom: max(9vh, 48px); }
  .intro-intrebare { display: none; }
}
/* Until a door is chosen the gap between the halves is a deep slit, not the page; once chosen, the page shows through. */
.intro.ruleaza { background: #080909; }
.intro.deschis { background: transparent; }
.intro canvas, .intro-intreg, .intro-taietura, .intro-sig { pointer-events: none; }

/* ------------------------------------------------------------------ the doors, polished (2026-10-22)
   Each half is lit along its cut; each door is a composed block (label, headline, one line, a button) that slides out
   of the slit; the door under the pointer brightens its edge and the other one steps back. */
.intro-jum.sus { background: radial-gradient(120% 90% at 20% 15%, #1a1b1c 0%, var(--noapte) 60%); }
.intro-jum.jos { background: radial-gradient(120% 90% at 80% 85%, #1a1b1c 0%, var(--noapte) 60%); }
.intro-margine { position: absolute; left: calc(var(--px) - 150vmax); top: calc(var(--py) - 1.5px); width: 300vmax; height: 3px; background: var(--ocru); box-shadow: 0 0 18px 3px rgba(226, 165, 43, 0.35); transform: rotate(-27deg); transform-origin: 50% 50%; opacity: 0; transition: opacity 700ms var(--usor) 150ms, box-shadow 300ms; pointer-events: none; }
.intro.alege .intro-margine { opacity: 0.85; }
.intro.deschis .intro-margine { opacity: 0; transition: opacity 250ms; }

.intro-usa { gap: 16px; padding: 18px 20px; max-width: min(500px, 42vw); transition: opacity 600ms var(--usor), transform 800ms var(--usor), color 200ms; border-radius: 2px; }
.intro-usa.firme { transform: translate(10px, 20px); transition-delay: 250ms; }
.intro-usa.oameni { transform: translate(-10px, -20px); transition-delay: 400ms; }
.intro.alege .intro-usa { transform: none; }
.intro.static .intro-usa { transform: none; }
.usa-cap { display: inline-flex; align-items: center; gap: 10px; }
.usa-cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.16); }
.intro-usa .eticheta { color: var(--piatra-2); letter-spacing: 0.14em; }
.intro-usa b { font: 700 clamp(28px, 3.3vw, 50px)/1.02 var(--titlu); letter-spacing: -0.03em; color: var(--ovaz); text-wrap: balance; }
.usa-text { font: 400 clamp(15px, 1.2vw, 17px)/1.5 var(--text); color: var(--piatra-2); max-width: 36ch; }
.intro-intra { margin-top: 6px; padding: 12px 18px; border: 1px solid var(--contur-n); color: var(--ovaz); font: 600 15px var(--text); transition: background 200ms, border-color 200ms, color 200ms; }
.intro-usa:focus-visible { outline: none; }
.intro-usa:focus-visible .intro-intra { outline: 2px solid var(--ovaz); outline-offset: 3px; }
.intro-sig { transition: opacity 300ms; }
/* The question, with a rule each side, under the seal. */
.intro-intrebare { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--piatra-2); }
.intro-intrebare::before, .intro-intrebare::after { content: ""; width: 32px; height: 1px; background: var(--contur-n); }
@media (max-width: 899px) {
  .intro-usa { max-width: 86vw; padding: 12px; gap: 10px; }
  .usa-text { display: none; }
  .intro-intra { padding: 10px 14px; }
}
.intro-usa .intro-intra { align-self: flex-start; }
.intro-usa.oameni .intro-intra { align-self: flex-end; }
/* The question, written inside the slit along its angle. */
.intro-intrebare { left: var(--px); top: var(--py); right: auto; width: max-content; transform: translate(-50%, -50%) rotate(-27deg); font-size: 10.5px; letter-spacing: 0.22em; color: var(--ocru); }
.intro-intrebare::before, .intro-intrebare::after { background: rgba(226, 165, 43, 0.4); width: 48px; }
@media (max-width: 899px) { .intro-intrebare { display: flex; font-size: 9.5px; } }
/* The lit side follows the pointer, not the buttons: the half the pointer is over (which side of the slit, worked out in
   intro.js as data-spre) warms, its button fills, the other door steps back, and a click anywhere on it opens it. Once
   the doors have come in, every change is quick and without delay, so the light moves with the hand. */
.intro.alege:not(.deschis) { cursor: pointer; }
.intro.usi-gata .intro-usa { transition: opacity 220ms var(--usor), color 150ms; transition-delay: 0ms; }
.intro.usi-gata .intro-intra { transition-duration: 150ms; }
.intro.usi-gata .intro-margine { transition: opacity 220ms, box-shadow 220ms; }
.intro.alege:not(.deschis)[data-spre="firme"] .sus::before, .intro.alege:not(.deschis)[data-spre="oameni"] .jos::before { opacity: 1; }
.intro[data-spre="firme"] .firme .intro-intra, .intro[data-spre="oameni"] .oameni .intro-intra { background: var(--ocru); border-color: var(--ocru); color: var(--noapte); }
.intro[data-spre="firme"] .firme .intro-intra svg, .intro[data-spre="oameni"] .oameni .intro-intra svg { transform: translateX(4px); }
.intro[data-spre="firme"] .oameni .intro-intra, .intro[data-spre="oameni"] .firme .intro-intra { outline: none; }
.intro.alege:not(.deschis)[data-spre="firme"] .intro-usa.oameni, .intro.alege:not(.deschis)[data-spre="oameni"] .intro-usa.firme { opacity: 0.38; }
.intro[data-spre="firme"] .jos .intro-sig, .intro[data-spre="oameni"] .sus .intro-sig { opacity: 0.55; }
.intro.alege:not(.deschis)[data-spre] .intro-margine { opacity: 1; box-shadow: 0 0 28px 6px rgba(226, 165, 43, 0.5); }
/* The overlay covers the page from the first paint (home/inainte.js decides, in <head>), so the hero never flashes
   before the cipher field; intro.js takes over from here. */
html.intro-acum .intro { display: block; position: fixed; inset: 0; z-index: 100; background: #080909; }
/* Pricing: the title on one line (each audience its own), then one bar with the plan family and the billing switch. */
.h2.lat { max-width: none; }
.h2.lat > span { display: block; }
.pret-bara { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--noapte); }
.pret-bara .eticheta { font-size: 11px; letter-spacing: 0.08em; }
.pret-bara + .planuri-grup { margin-top: calc(20px - clamp(40px, 5vw, 72px)); }

/* ------------------------------------------------------------------ why firms switch: one ID, copied (2026-10-22)
   Pinned, on night, as the people's copy is: the places one client's ID ends up in, counted stage by stage (data-etapa
   from colshare.js), then gathered into one encrypted place at the firm. Without the script it is the last stage. */
.copii .scena { background: radial-gradient(55% 70% at 72% 50%, #2b2d2f 0%, #1a1b1c 45%, var(--noapte) 75%); }
.copii-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
@media (min-width: 900px) { .copii-grila { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.copii-text { display: flex; flex-direction: column; gap: 22px; }
.copii .h2 { max-width: 17ch; font-size: clamp(34px, 3.6vw, 56px); }
.copii .etape { border-top-color: var(--ovaz); }
.copii .etape li { border-bottom-color: var(--linie-n); opacity: 0.4; }
.copii .etape li.activ { opacity: 1; }
.copii .etape .mono { color: var(--ocru); }
.copii .etape p { color: var(--piatra-2); }
.copii .etape button:focus-visible { outline-color: var(--ocru); }
.copii .etape li:last-child.activ b { color: var(--ocru); }

.copii-harta { margin: 0; display: flex; flex-direction: column; gap: 22px; }
.cc-contor { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--linie-n); padding-bottom: 16px; }
.cc-contor b { font: 400 clamp(56px, 6vw, 96px)/1 var(--mono); letter-spacing: -0.05em; color: var(--rau); font-variant-numeric: tabular-nums; min-width: 1.3ch; transition: color 400ms; }
.cc-contor b.bate { animation: cc-bate 420ms var(--usor); }
@keyframes cc-bate { from { transform: translateY(-14%); opacity: 0.2; } to { transform: none; opacity: 1; } }
.cc-contor .eticheta { color: var(--piatra); font-size: 10.5px; line-height: 1.6; max-width: 24ch; }
.copii[data-etapa="0"] .cc-contor b { color: var(--ovaz); }
.copii[data-etapa="4"] .cc-contor b { color: var(--ocru); }

.cc-camp { position: relative; min-height: min(clamp(230px, 26vw, 340px), calc(100svh - 470px)); }
.cc-copii { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px) clamp(10px, 1.6vw, 20px); }
.cc-copii li { display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 1.2vw, 16px); border: 1px solid var(--contur-n); background: rgba(28, 29, 30, 0.85); opacity: 0; transform: translate(0, 12px) scale(0.88); transition: opacity 500ms var(--usor), transform 700ms var(--usor), border-color 400ms; }
.cc-copii span { font: 500 clamp(11.5px, 1vw, 13px)/1.3 var(--text); color: var(--piatra-2); }
.cc-act { display: block; position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 6px; background: linear-gradient(135deg, #3d3f42, #2a2c2e); overflow: hidden; }
.cc-act > i { position: absolute; display: block; background: #57595d; border-radius: 2px; }
.cc-act > i:nth-child(1) { left: 8%; top: 18%; width: 26%; height: 58%; border-radius: 3px; }
.cc-act > i:nth-child(2) { left: 42%; top: 26%; width: 46%; height: 8%; }
.cc-act > i:nth-child(3) { left: 42%; top: 46%; width: 32%; height: 8%; }
/* Which places hold the ID: one phone; its gallery and backup; a colleague's three. */
.copii[data-etapa="0"] [data-c="0"],
.copii:is([data-etapa="1"], [data-etapa="2"], [data-etapa="3"]) :is([data-c="0"], [data-c="1"], [data-c="2"]),
.copii:is([data-etapa="2"], [data-etapa="3"]) :is([data-c="3"], [data-c="4"], [data-c="5"]) { opacity: 1; transform: none; }
.cc-copii [data-c="1"], .cc-copii [data-c="4"] { transition-delay: 120ms; }
.cc-copii [data-c="2"], .cc-copii [data-c="5"] { transition-delay: 240ms; }
/* The colleague leaves, with the copies. */
.copii[data-etapa="2"] :is([data-c="3"], [data-c="4"], [data-c="5"]) { border-style: dashed; border-color: var(--rau); transform: translateX(5%) rotate(1.2deg); }
.cc-plecat { position: absolute; right: 0; bottom: -30px; color: var(--rau); font-size: 10.5px; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 500ms var(--usor); }
.copii[data-etapa="2"] .cc-plecat { opacity: 1; transform: none; }
/* Who is asking? What the client gets from an unknown number. */
.copii[data-etapa="3"] .cc-copii li { opacity: 0.22; }
.cc-mesaj { position: absolute; left: 50%; top: 50%; width: min(400px, 92%); padding: 18px 22px 20px; background: var(--ovaz); color: var(--noapte); border-radius: 4px 20px 20px 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); opacity: 0; transform: translate(-50%, -38%); transition: opacity 400ms var(--usor), transform 600ms var(--usor); pointer-events: none; }
.cc-mesaj .eticheta { color: var(--estompat); font-size: 10px; }
.cc-mesaj p { margin: 8px 0 0; font: 500 clamp(15px, 1.3vw, 18px)/1.4 var(--text); }
.cc-mesaj em { display: block; margin-top: 12px; font: 700 16px var(--titlu); font-style: normal; color: #b3261e; }
.copii[data-etapa="3"] .cc-mesaj { opacity: 1; transform: translate(-50%, -50%); }
/* Colshare: every copy gathers into one place, sealed. */
.cc-copii [data-c="0"] { --tx: 110%; --ty: 55%; } .cc-copii [data-c="1"] { --tx: 0%; --ty: 55%; } .cc-copii [data-c="2"] { --tx: -110%; --ty: 55%; }
.cc-copii [data-c="3"] { --tx: 110%; --ty: -55%; } .cc-copii [data-c="4"] { --tx: 0%; --ty: -55%; } .cc-copii [data-c="5"] { --tx: -110%; --ty: -55%; }
.copii[data-etapa="4"] .cc-copii li { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); transition-delay: 0ms; }
.cc-firma { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: 100%; padding: 28px clamp(24px, 3vw, 44px); text-align: center; border: 1px solid var(--ocru); background: rgba(18, 19, 19, 0.94); box-shadow: 0 0 0 6px rgba(226, 165, 43, 0.07), 0 0 60px rgba(226, 165, 43, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, -50%) scale(0.86); transition: opacity 500ms var(--usor), transform 700ms var(--usor); }
.copii[data-etapa="4"] .cc-firma { opacity: 1; transform: translate(-50%, -50%); transition-delay: 280ms; }
.cc-sig { width: 76px; height: 76px; margin-bottom: 4px; }
.cc-firma b { font: 700 clamp(20px, 1.9vw, 26px)/1.1 var(--titlu); letter-spacing: -0.015em; color: var(--ovaz); }
.cc-firma .eticheta { color: var(--piatra); font-size: 10px; }
.cc-firma .cc-verificat { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ocru); }
.cc-verificat i { width: 7px; height: 7px; border-radius: 50%; background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.16); }
@media (max-width: 899px) {
  .copii.pornit .copii-grila { gap: 18px; }
  .copii.pornit .copii-text { gap: 12px; }
  .copii.pornit .h2 { font-size: 28px; }
  .copii.pornit .etape { border-top: 0; }
  .copii.pornit .etape li { padding: 0; border: 0; }
  .copii.pornit .etape li:not(.activ) { display: none; }
  .copii.pornit .etape p { max-height: none; margin-top: 4px; }
  .cc-contor b { font-size: 48px; }
  .cc-camp { min-height: 200px; }
  .copii-harta { gap: 12px; }
  .cc-contor { padding-bottom: 10px; }
  .cc-copii li { padding: 8px; gap: 6px; }
  .cc-copii span { font-size: 10.5px; }
  .cc-sig { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .cc-copii li, .cc-mesaj, .cc-firma, .cc-plecat { transition: none !important; } .cc-contor b.bate { animation: none; } }

/* ------------------------------------------------------------------ what firms get: three columns, big numerals */
.firme-piloni .cadru { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.piloni { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--noapte); }
.piloni li { display: flex; flex-direction: column; gap: 14px; padding: 28px clamp(16px, 2.4vw, 36px) 12px 0; }
.piloni li + li { border-left: 1px solid var(--linie-o); padding-left: clamp(16px, 2.4vw, 36px); }
.pilon-nr { font: 400 clamp(44px, 4.4vw, 68px)/1 var(--mono); letter-spacing: -0.05em; color: var(--ocru-text); }
.piloni b { font: 700 clamp(21px, 1.9vw, 27px)/1.15 var(--titlu); letter-spacing: -0.015em; text-wrap: balance; }
.piloni p { margin: 0; color: var(--corp-h); font-size: 15.5px; line-height: 1.55; }
.piloni-jos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 40px; border-top: 1px solid var(--linie-o); padding-top: 20px; }
.piloni-jos p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--estompat); }
.piloni-jos .piloni-gratuit { color: var(--noapte); font-weight: 600; }
@media (max-width: 899px) { .piloni li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie-o); } }

/* ------------------------------------------------------------------ what firms get: three working pictures (bento)
   Each card's scene plays once it is in view (.asteapta, then .in, from colshare.js); without the script or motion every
   scene is in its final state. */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .b-dovada { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .b-dovada .bento-scena { height: 100%; min-height: 320px; }
  .b-dovada .bento-text { justify-content: center; }
}
.bento-c { display: flex; flex-direction: column; background: var(--hartie); border: 1px solid var(--noapte); overflow: hidden; }
.bento-scena { position: relative; height: clamp(250px, 23vw, 310px); background: radial-gradient(80% 90% at 50% 40%, #26282a 0%, var(--noapte) 75%); color: var(--ovaz); overflow: hidden; }
.bento-text { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 32px); }
.bento-text .pilon-nr { font: 400 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--ocru-text); }
.bento-text h3 { margin: 0; font: 700 clamp(21px, 1.9vw, 27px)/1.15 var(--titlu); letter-spacing: -0.015em; text-wrap: balance; }
.bento-text p { margin: 0; color: var(--corp-h); font-size: 15.5px; line-height: 1.55; max-width: 54ch; }

/* 01: loose papers, collated into one PDF. */
.foaie-libera { position: absolute; left: 50%; top: 50%; width: min(34%, 190px); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #1c1d1e; border: 1px solid var(--contur-n); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  --sx: 0%; --sy: 0%; --sr: 0deg;
  transform: translate(-50%, -50%) translate(calc(-28% + (var(--i) - 1) * 9px), calc((var(--i) - 1) * 9px)) rotate(calc((var(--i) - 1) * 2deg));
  transition: transform 900ms var(--usor) calc(var(--i) * 90ms); }
.foaie-libera span { font: 500 11.5px/1.2 var(--text); color: var(--piatra-2); }
.foaie-libera:nth-of-type(1) { --sx: -100%; --sy: -34%; --sr: -9deg; }
.foaie-libera:nth-of-type(2) { --sx: 4%; --sy: 22%; --sr: 4deg; }
.foaie-libera:nth-of-type(3) { --sx: 100%; --sy: -20%; --sr: 10deg; }
html.anim .b-pdf.asteapta:not(.in) .foaie-libera { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) rotate(var(--sr)); }
.pdf-gata { position: absolute; left: 62%; top: 56%; width: min(44%, 230px); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--ovaz); color: var(--noapte); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); transition: opacity 500ms var(--usor) 650ms, transform 700ms var(--usor) 650ms; }
.pdf-tab { align-self: flex-start; padding: 3px 7px; background: var(--ocru); color: var(--noapte); font: 600 10px/1 var(--mono); letter-spacing: 0.08em; }
.pdf-gata b { font: 700 clamp(15px, 1.4vw, 18px)/1.2 var(--titlu); overflow-wrap: anywhere; }
.pdf-gata .eticheta { color: var(--estompat); font-size: 10px; }
html.anim .b-pdf.asteapta:not(.in) .pdf-gata { opacity: 0; transform: translate(-50%, -40%) scale(0.92); transition-delay: 0ms; }

/* 02: ciphertext everywhere; readable only inside the firm's computer, a window drifting across. */
.cheie-cifru, .cheie-clar { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 14px 0 40px; white-space: nowrap; overflow: hidden; }
.cheie-cifru > span, .cheie-clar > span { display: block; height: 18px; line-height: 18px; padding-left: 3%; }
.cheie-cifru > span { font: 400 13px var(--mono); letter-spacing: 0.06em; color: rgba(236, 232, 223, 0.26); }
.cheie-clar { background: #1f2022; clip-path: inset(14px 30% 40px 30% round 6px); }
.cheie-clar > span { font: 600 15px var(--text); color: var(--ovaz); word-spacing: 0.1em; }
.cheie-fereastra { position: absolute; top: 14px; bottom: 40px; left: 30%; width: 40%; border: 1px solid var(--ocru); border-radius: 6px; box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.08), 0 0 40px rgba(226, 165, 43, 0.14); pointer-events: none; }
.cheie-fereastra .eticheta { position: absolute; top: 0; left: 12px; transform: translateY(-50%); padding: 3px 8px; background: var(--ocru); color: var(--noapte); font-size: 9.5px; }
.cheie-afara { position: absolute; left: 3%; bottom: 14px; color: var(--piatra); font-size: 9.5px; }
html.anim .cheie-clar { animation: cheie-clip 7s ease-in-out 8 alternate; }
html.anim .cheie-fereastra { animation: cheie-fer 7s ease-in-out 8 alternate; }
html.anim .b-cheie.asteapta:not(.in) :is(.cheie-clar, .cheie-fereastra) { animation-play-state: paused; }
@keyframes cheie-clip { from { clip-path: inset(14px 56% 40px 4% round 6px); } to { clip-path: inset(14px 4% 40px 56% round 6px); } }
/* Moved by transform, not left (left re-laid the page out every frame): 52% of the card is 130% of the 40% window. */
@keyframes cheie-fer { from { left: 4%; transform: translateX(0); } to { left: 4%; transform: translateX(130%); } }

/* 03: the request the client sees; the signed receipt, printing. */
.b-dovada .bento-scena { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 44px); padding: 28px; }
.cerere-card { width: min(270px, 46%); display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--ovaz); color: var(--noapte); border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); transform: rotate(-2deg); }
.cerere-card .eticheta { color: var(--estompat); font-size: 10px; }
.cerere-card b { font: 700 19px/1.2 var(--titlu); }
.cerere-ok { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 12.5px/1.35 var(--text); color: #1f6b3a; }
.cerere-ok i, .ch-valid i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2f9a55; box-shadow: 0 0 0 4px rgba(47, 154, 85, 0.18); }
.chitanta { width: min(300px, 50%); display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 20px; background: var(--hartie); color: var(--noapte); font: 400 11px/1.45 var(--mono); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); transform: rotate(1.5deg); clip-path: inset(0 0 0 0); transition: clip-path 1500ms cubic-bezier(0.5, 0, 0.3, 1) 300ms; }
.chitanta b { font: 600 11px var(--mono); letter-spacing: 0.12em; }
.chitanta > span:nth-of-type(1) { color: var(--estompat); }
.ch-rand { display: flex; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px dashed var(--linie-o); transition: opacity 300ms calc(500ms + var(--i) * 320ms); }
.ch-rand em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rand code { flex: none; font: inherit; color: var(--ocru-text); }
.ch-valid { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--noapte); color: #1f6b3a; font-weight: 600; letter-spacing: 0.08em; transition: opacity 300ms 1600ms, transform 400ms var(--usor) 1600ms; }
html.anim .b-dovada.asteapta:not(.in) .chitanta { clip-path: inset(0 0 100% 0); }
html.anim .b-dovada.asteapta:not(.in) .ch-rand, html.anim .b-dovada.asteapta:not(.in) .ch-valid { opacity: 0; }
html.anim .b-dovada.asteapta:not(.in) .ch-valid { transform: scale(0.9); }
@media (max-width: 899px) {
  .b-dovada .bento-scena { flex-direction: column; height: auto; padding: 28px 20px; gap: 18px; }
  .cerere-card, .chitanta { width: 100%; max-width: 320px; }
  .cheie-clar > span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .foaie-libera, .pdf-gata, .chitanta, .ch-rand, .ch-valid { transition: none !important; } }

/* The person's send link, in the live demo: the link as it would be sent, the key after the #. */
.nod-link { display: block; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--contur-n); color: var(--ocru); font: 400 11px/1.5 var(--mono); overflow-wrap: anywhere; }
[data-stare="folosit"] .nod-link { color: var(--gri); text-decoration: line-through; }

/* ------------------------------------------------------------------ the check, live (2026-10-22)
   On night: the line the phone signed, editable; its SHA-256; the real signature checked on every key; the seal whole
   while it holds, parted in red when it doesn't (data-viata on .verificator, as the seal's states). */
.dovada { position: relative; overflow: clip; }
.dovada .hasura-fond { background: repeating-linear-gradient(153deg, rgba(236, 232, 223, 0.04) 0 1px, transparent 1px 14px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.dovada .titlu-bloc .corp { color: var(--piatra-2); }
.dovada .dovada-grila { align-items: center; }
.dovada .dovada-nota { color: var(--piatra); }
.verificator { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 36px); background: rgba(28, 29, 30, 0.92); border: 1px solid var(--contur-n); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); transition: border-color 300ms, box-shadow 300ms; }
.verificator[data-viata="2"] { border-color: rgba(242, 163, 155, 0.55); box-shadow: 0 0 0 4px rgba(242, 163, 155, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.verificator .eticheta { color: var(--piatra); font-size: 10.5px; }
.verificator .eticheta.gri { color: var(--gri); }
.ver-cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ver-campuri { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr); border-top: 1px solid var(--linie-n); border-bottom: 1px solid var(--linie-n); }
.ver-campuri label { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px 0; min-width: 0; }
.ver-campuri label + label { border-left: 1px solid var(--linie-n); padding-left: 14px; }
.ver-campuri input { all: unset; min-width: 0; padding-bottom: 4px; border-bottom: 1px dashed var(--contur-n); font: 600 17px/1.3 var(--text); color: var(--ovaz); cursor: text; transition: color 200ms, border-color 200ms; }
.ver-campuri input:focus { border-bottom-color: var(--ocru); }
.ver-campuri input.schimbat { color: var(--rau); border-bottom-color: var(--rau); }
.verificator .amp-hex { font-size: clamp(15px, 1.7vw, 22px); min-height: 0; }
.verificator[data-viata="2"] .amp-hex .alt { color: var(--rau); }
.ver-verdict { display: flex; align-items: center; gap: 18px; padding-top: 16px; border-top: 1px solid var(--linie-n); }
.ver-sigiliu { width: 72px; height: 72px; flex: none; transition: fill 300ms; }
.verificator[data-viata="2"] .ver-sigiliu { fill: var(--rau); }
.ver-verdict b { display: block; font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--titlu); letter-spacing: -0.015em; color: var(--ovaz); transition: color 300ms; }
.verificator[data-viata="2"] .ver-verdict b { color: var(--rau); }
.ver-verdict span { display: block; margin-top: 4px; color: var(--piatra-2); font-size: 15px; line-height: 1.45; }
.ver-pun { align-self: flex-start; }
@media (max-width: 599px) {
  .ver-campuri { grid-template-columns: minmax(0, 1fr); }
  .ver-campuri label + label { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie-n); }
  .ver-sigiliu { width: 56px; height: 56px; }
}

/* ------------------------------------------------------------------ the copy's specimen: an A4 bank statement (2026-10-22)
   Flat, as a sheet lies on a desk: no tilt between stages (it read as wobbling), a real paper's shadow. The blacked-out
   pieces (.ascuns) are what the app proposes on a statement; data-gasit names what was found. */
.foaie-3d, .copia[data-etapa] .foaie-3d, .copia:not(.pornit) .foaie-3d, .copia-foaie:hover .foaie-3d { transform: none; }
.foaie-3d { transition: transform 600ms var(--usor); }
.copia.pornit[data-etapa="0"] .foaie-3d { transform: scale(0.97); }
.copia .a4-pagina { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 30px 60px -18px rgba(0, 0, 0, 0.7); background: linear-gradient(180deg, #fdfdfb, #f6f5f1); }
.ex { position: absolute; inset: 8cqw 8cqw 26cqw; display: flex; flex-direction: column; gap: 3.2cqw; font-family: var(--aplicatie); color: #23292b; }
.ex-et { display: block; font-size: 1.75cqw; color: #7a8487; text-transform: uppercase; letter-spacing: 0.06em; }
.ex-sus { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 2.4cqw; border-bottom: 0.35cqw solid #1d3b4f; }
.ex-banca { display: flex; align-items: center; gap: 1.8cqw; }
.ex-banca i { width: 5cqw; height: 5cqw; border-radius: 1cqw; background: linear-gradient(135deg, #1d3b4f, #2f6a7d); }
.ex-banca b { font-size: 2.9cqw; letter-spacing: 0.12em; color: #1d3b4f; }
.ex-titlu { text-align: right; display: flex; flex-direction: column; gap: 0.6cqw; }
.ex-titlu b { font-size: 3.3cqw; }
.ex-titlu span { font-size: 2cqw; color: #5b6568; }
.ex-client { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.ex-client > div { display: flex; flex-direction: column; gap: 0.5cqw; }
.ex-client b { font-size: 2.5cqw; font-weight: 600; }
.ex-client span:not(.ex-et) { font-size: 2cqw; color: #4b5457; }
.ex-client .ex-et + b + .ex-et { margin-top: 1.2cqw; }
.ex-client b.ascuns { font-family: ui-monospace, "Roboto Mono", Menlo, monospace; font-size: 2.3cqw; align-self: flex-start; }
.ex-sold { display: grid; grid-template-columns: repeat(4, 1fr); background: #eef2f3; border-radius: 1cqw; padding: 2cqw 2.4cqw; gap: 1.6cqw; }
.ex-sold b { font-size: 2.6cqw; font-variant-numeric: tabular-nums; }
.ex-tabel { display: flex; flex-direction: column; }
.ex-rand { position: relative; display: grid; grid-template-columns: 11cqw 1fr 17cqw; gap: 2cqw; padding: 1.45cqw 0.6cqw; font-size: 2.15cqw; border-bottom: 0.15cqw solid #e2e6e7; font-variant-numeric: tabular-nums; }
.ex-rand span:last-child { text-align: right; }
.ex-cap { font-size: 1.75cqw; color: #7a8487; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 0.25cqw solid #c9d1d3; }
.ex-jos { margin: auto 0 0; font-size: 1.7cqw; color: #8b9497; letter-spacing: 0.04em; }

/* Found, then burned in: a black bar over the whole piece, drawn left to right; while found, an ochre outline and a tag. */
.ex .ascuns { position: relative; outline: 0.45cqw solid transparent; outline-offset: 0.6cqw; transition: outline-color 300ms; }
.ex .ascuns::after { content: ""; position: absolute; inset: -0.5cqw -0.8cqw; background: #111; transform-origin: left center; transition: transform 520ms cubic-bezier(0.7, 0, 0.2, 1); }
.ex .ex-rand.ascuns::after { inset: 0.3cqw 0; }
.ex .ascuns::before { content: "FOUND · " attr(data-gasit); position: absolute; z-index: 2; right: 0; top: -2.6cqw; padding: 0.5cqw 0.9cqw; font: 500 1.55cqw/1 var(--mono); letter-spacing: 0.04em; color: var(--noapte); background: var(--ocru); white-space: nowrap; opacity: 0; transition: opacity 300ms; pointer-events: none; }
.ex .ex-rand.ascuns::before { top: 50%; transform: translateY(-50%); right: -1cqw; }
.ex-rand.ascuns:nth-of-type(4)::after { transition-delay: 120ms; }
.ex-rand.ascuns:nth-of-type(6)::after { transition-delay: 220ms; }
.copia.pornit:is([data-etapa="0"], [data-etapa="1"]) .ex .ascuns::after { transform: scaleX(0); }
.copia.pornit:is([data-etapa="1"], [data-etapa="2"]) .ex .ascuns { outline-color: var(--ocru); }
.copia.pornit[data-etapa="1"] .ex .ascuns::before { opacity: 1; }

/* ------------------------------------------------------------------ the doors' texture and shade (2026-10-22)
   Each half as a slab: darker towards the slit (its cut edge), a vignette at the corners, a faint warm light behind its
   words, film grain; over it the seal's engraving at -27°, strongest round the seal and gone by the corners. */
.intro-jum.sus { background:
  linear-gradient(153deg, transparent calc(50% - 280px), rgba(0, 0, 0, 0.55) calc(50% - 8px)),
  radial-gradient(55% 45% at 22% 28%, rgba(226, 165, 43, 0.055), transparent 70%),
  radial-gradient(130% 115% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(120% 90% at 20% 15%, #1d1e1f 0%, var(--noapte) 62%); }
.intro-jum.jos { background:
  linear-gradient(153deg, rgba(0, 0, 0, 0.55) calc(50% + 8px), transparent calc(50% + 280px)),
  radial-gradient(55% 45% at 78% 70%, rgba(226, 165, 43, 0.055), transparent 70%),
  radial-gradient(130% 115% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(120% 90% at 80% 85%, #1d1e1f 0%, var(--noapte) 62%); }
.intro-jum::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(153deg, rgba(236, 232, 223, 0.045) 0 1px, transparent 1px 11px);
  -webkit-mask-image: radial-gradient(60% 75% at var(--cx) var(--cy), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
  mask-image: radial-gradient(60% 75% at var(--cx) var(--cy), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%); }
.intro-jum > .intro-margine, .intro-jum > .intro-sig, .intro-jum > .intro-usa { z-index: 1; }
.intro-sig svg, .intro-intreg svg { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
/* A note laid out as its own .cadru keeps the page's width and gutters (the small text's 64ch cap would shrink the box
   and move it off the column); the line length is limited by the right padding instead. */
.cadru.corp.mic { max-width: 1280px; padding-right: max(var(--lat), calc(100% - 64ch - var(--lat))); }
.dovada .titlu-bloc .dovada-nota { margin-top: 4px; font-size: 14.5px; max-width: 46ch; }

/* ------------------------------------------------------------------ also in the app: four working pictures (2026-10-22)
   Each card's scene plays once in view (.asteapta, then .in, colshare.js); without the script it shows its end state. */
.mai-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .mai-grila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mai-c { display: flex; flex-direction: column; background: #18191a; border: 1px solid var(--linie-n); overflow: hidden; transition: border-color 300ms; }
.mai-c:hover { border-color: var(--contur-n); }
.mai-scena { position: relative; height: clamp(200px, 18vw, 240px); display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(70% 90% at 50% 30%, #26282a 0%, #18191a 75%); border-bottom: 1px solid var(--linie-n); overflow: hidden; }
.mai-text { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.2vw, 28px); }
.mai-text .eticheta { font-size: 10.5px; }
.mai-text h3 { margin: 0; font: 700 clamp(20px, 1.8vw, 25px)/1.15 var(--titlu); letter-spacing: -0.015em; color: var(--ovaz); }
.mai-text p { margin: 0; color: var(--piatra-2); font-size: 15px; line-height: 1.55; }
.mai-scena .eticheta { font-size: 9.5px; color: var(--piatra); }

/* Ask: three files drop into a folder. */
.m-cere { width: min(100%, 420px); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 12px 18px; align-items: center; }
.m-cerere { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--ovaz); color: var(--noapte); border-radius: 4px 14px 14px 14px; }
.m-cerere .eticheta { color: var(--estompat); }
.m-cerere b { font: 600 15px var(--text); }
.m-fisiere { display: flex; flex-direction: column; gap: 6px; }
.m-fisiere i { font: 400 11.5px var(--mono); font-style: normal; color: var(--ovaz); padding: 6px 10px; border: 1px solid var(--contur-n); background: #1f2022; transition: opacity 400ms var(--usor) calc(300ms + var(--i) * 260ms), transform 600ms var(--usor) calc(300ms + var(--i) * 260ms); }
.m-dosar { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.m-dosar-ico { width: 56px; height: 42px; border-radius: 4px; background: linear-gradient(180deg, #e9b54a, var(--ocru)); position: relative; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.m-dosar-ico::before { content: ""; position: absolute; left: 0; top: -7px; width: 22px; height: 9px; border-radius: 3px 3px 0 0; background: #c88f1f; }
.m-dosar b { font: 600 13px var(--text); color: var(--ovaz); }
html.anim .m-0.asteapta:not(.in) .m-fisiere i { opacity: 0; transform: translateX(-24px); }

/* Read: the code lines, read offline; the check digits light up. */
.m-mrz { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #e8edee; color: #2a3336; border-radius: 8px; position: relative; overflow: hidden; width: min(100%, 420px); }
.m-mrz code { font: 500 clamp(11px, 1.05vw, 13.5px)/1.3 ui-monospace, "Roboto Mono", Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; }
.m-mrz code b { font-weight: 700; color: #1f6b3a; background: rgba(47, 154, 85, 0.18); border-radius: 2px; transition: background 300ms 1100ms, color 300ms 1100ms; }
.m-mrz .eticheta { color: #5b6568; }
.m-offline, .m-ok { display: inline-flex; align-items: center; gap: 7px; }
.m-offline i { width: 7px; height: 7px; border-radius: 50%; background: #8b9497; }
.m-ok { color: #1f6b3a !important; margin-top: 4px; transition: opacity 300ms 1200ms; }
.m-ok i { width: 7px; height: 7px; border-radius: 50%; background: #2f9a55; box-shadow: 0 0 0 3px rgba(47, 154, 85, 0.2); }
.m-mrz::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ocru); box-shadow: 0 0 14px 3px rgba(226, 165, 43, 0.5); opacity: 0; }
html.anim .m-1.in .m-mrz::after { animation: scan 1100ms cubic-bezier(0.5, 0, 0.5, 1) 1; }
html.anim .m-1.asteapta:not(.in) .m-mrz code b { background: transparent; color: inherit; }
html.anim .m-1.asteapta:not(.in) .m-ok { opacity: 0; }

/* Fill in: the form's fields fill from the ID, one after another. */
.m-form { width: min(100%, 380px); display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--hartie); color: var(--noapte); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.m-form > .eticheta { color: var(--estompat); }
.m-camp { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: end; font-size: 12px; }
.m-camp span { color: #6b7275; }
.m-camp b { font: 600 13px/1.2 ui-monospace, "Roboto Mono", Menlo, monospace; padding: 2px 4px; border-bottom: 1px solid #c9c3b6; background: rgba(226, 165, 43, 0.16); white-space: nowrap; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path 500ms steps(12) calc(300ms + var(--i) * 380ms); }
html.anim .m-2.asteapta:not(.in) .m-camp b { clip-path: inset(0 100% 0 0); }

/* Backup: one locked file, carried to a new phone. */
.m-rez { display: flex; align-items: center; gap: 14px; width: min(100%, 440px); }
.m-fis { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; border: 1px solid var(--ocru); background: rgba(18, 19, 19, 0.9); text-align: center; box-shadow: 0 0 30px rgba(226, 165, 43, 0.1); }
.m-fis b { font: 500 12px var(--mono); color: var(--ovaz); }
.m-lacat { width: 22px; height: 18px; border-radius: 3px; background: var(--ocru); position: relative; margin-top: 10px; }
.m-lacat::before { content: ""; position: absolute; left: 4px; top: -10px; width: 14px; height: 12px; border: 3px solid var(--ocru); border-bottom: 0; border-radius: 8px 8px 0 0; box-sizing: border-box; }
.m-drum { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--contur-n) 0 6px, transparent 6px 12px); position: relative; }
.m-drum i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ocru); transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(226, 165, 43, 0.6); }
html.anim .m-3.in .m-drum i { animation: m-drum 2.4s var(--usor) 6; }
@keyframes m-drum { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.m-telefon { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m-telefon i { width: 40px; height: 70px; border: 2px solid var(--piatra); border-radius: 8px; position: relative; }
.m-telefon i::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 12px; height: 2px; border-radius: 1px; background: var(--piatra); transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .m-fisiere i, .m-camp b, .m-ok, .m-mrz code b { transition: none !important; } }
/* After the demo's note has typed itself: the open button calls for a click, a few times. */
.ei-buton.invita { animation: invita 1.4s var(--usor) 3; }
@keyframes invita { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 165, 43, 0.55); } 60% { box-shadow: 0 0 0 12px rgba(226, 165, 43, 0); } }
/* The demo's packets fly over the panels, on their own canvas (fond.js cifru). */
.cifru-sus { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; }
.nod { background: rgba(18, 19, 19, 0.8); }
/* The pinned scenes: a thin line at the foot of the screen fills as one scrolls through the section, so the next stage
   is felt coming (a scroll-driven animation, no script; where unsupported, no line). */
@supports (animation-timeline: view()) {
  .etapizat { view-timeline: --etapizat block; }
  .etapizat.pornit > .scena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: var(--ocru); box-shadow: 0 0 10px rgba(226, 165, 43, 0.5); transform-origin: left center; transform: scaleX(0); pointer-events: none; animation: etapizat-progres linear both; animation-timeline: --etapizat; animation-range: contain 0% contain 100%; }
  @keyframes etapizat-progres { to { transform: scaleX(1); } }
}

/* Why firms switch, realistic (2026-10-22): the same specimen ID in each place it ends up, each place shown as what it
   is (a chat bubble, a gallery, a synced backup), in two labelled rows: yours, then a colleague's, forwarded. */
.cc-rand-cap { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--linie-n); transition: opacity 400ms var(--usor); }
.cc-rand-cap .eticheta { font-size: 10px; color: var(--piatra); }
.cc-rand-cap .cc-plecat { position: static; bottom: auto; right: auto; color: var(--rau); }
.cc-rand-cap[data-rand="1"] { opacity: 0; }
.copii:is([data-etapa="2"], [data-etapa="3"]) .cc-rand-cap[data-rand="1"] { opacity: 1; }
.copii[data-etapa="4"] .cc-rand-cap { opacity: 0; }
.cc-copii li[data-c] { gap: 8px; padding: 8px; }
.cc-loc { display: flex; align-items: center; gap: 7px; font: 500 12px/1.2 var(--text); color: var(--piatra-2); }
.cc-loc svg { width: 13px; height: 13px; flex: none; fill: var(--piatra); }
.cc-vedere { position: relative; aspect-ratio: 1.45; border-radius: 6px; overflow: hidden; background: #0f1011; }
.cc-vedere .carte { width: 100%; border-radius: 6% / 9%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.cc-chat { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8%; background: #151b1d; background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 8px 8px; }
.cc-bula { width: 80%; padding: 4px 4px 3px; border-radius: 8px 8px 2px 8px; background: #2b3336; }
.cc-ora { display: block; margin-top: 2px; text-align: right; font: 400 8.5px/1 var(--text); color: #9aa4a7; }
.cc-galerie { position: absolute; inset: 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px; }
.cc-galerie i { display: block; border-radius: 2px; background: linear-gradient(160deg, #4a5a63, #283035); }
.cc-galerie i:nth-child(3) { background: linear-gradient(160deg, #5d4f40, #2e2924); }
.cc-galerie .cc-ales { grid-row: 1 / 3; display: flex; align-items: center; padding: 6%; background: #202426; outline: 1px solid rgba(242, 163, 155, 0.55); outline-offset: -1px; }
.cc-nor { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8%; background: radial-gradient(80% 80% at 50% 40%, #1d2326, #121516); }
.cc-nor .carte { width: 72%; }
.cc-sync { display: inline-flex; align-items: center; gap: 5px; font: 400 9px/1 var(--mono); color: var(--piatra); }
.cc-sync i { width: 6px; height: 6px; border-radius: 50%; background: #2f9a55; }
@media (max-width: 899px) { .cc-loc { font-size: 10px; } .cc-loc svg { display: none; } .cc-ora, .cc-sync { display: none; } }
.cc-copii li.cc-rand-cap { padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--linie-n); background: none; transform: none; opacity: 1; transition: opacity 400ms var(--usor); }
.cc-copii li.cc-rand-cap[data-rand="1"] { opacity: 0; margin-top: 6px; }
.copii:is([data-etapa="2"], [data-etapa="3"]) .cc-copii li.cc-rand-cap[data-rand="1"] { opacity: 1; }
.copii[data-etapa="3"] .cc-copii li.cc-rand-cap { opacity: 0.3; }
.copii[data-etapa="4"] .cc-copii li.cc-rand-cap { opacity: 0; }
.cc-copii li.cc-rand-cap { flex-direction: row; justify-content: space-between; align-items: center; }
/* The stage's line beside the picture, so the eye stays on one side; the list on the left is the stages' index. */
.cc-fraza { display: flex; flex-direction: column; gap: 6px; min-height: 4.6em; }
.cc-fraza b { font: 700 clamp(22px, 2.1vw, 30px)/1.1 var(--titlu); letter-spacing: -0.015em; color: var(--ovaz); }
.cc-fraza span { color: var(--piatra-2); font-size: 16px; line-height: 1.45; max-width: 52ch; }
.copii[data-etapa="4"] .cc-fraza b { color: var(--ocru); }
.cc-fraza.nou { animation: cc-fraza 480ms var(--usor); }
@keyframes cc-fraza { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.copii .etape p { display: none; }
@media (max-width: 899px) { .copii.pornit .copii-text .etape { display: none; } .cc-fraza b { font-size: 20px; } .cc-fraza span { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .cc-fraza.nou { animation: none; } }
.cc-contor { align-items: flex-start; }
.cc-contor-dr { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 6px; }
.cc-contor-dr > .eticheta { color: var(--piatra); font-size: 10px; max-width: none; }
.cc-fraza { min-height: 0; }
/* The picture's head: the stage's line on the left, the count on the right, its label under the figure. */
.cc-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--linie-n); }
.cc-cap .cc-contor { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; border: 0; padding: 0; text-align: right; }
.cc-cap .cc-contor b { font-size: clamp(48px, 4.6vw, 72px); line-height: 0.9; min-width: 0; }
.cc-cap .cc-contor .eticheta { max-width: 24ch; font-size: 9.5px; line-height: 1.5; color: var(--piatra); }
.cc-cap .cc-fraza { gap: 8px; }
.cc-cap .cc-fraza span { font-size: 15.5px; }
@media (max-width: 899px) { .cc-cap { gap: 14px; padding-bottom: 10px; } .cc-cap .cc-contor b { font-size: 40px; } .cc-cap .cc-contor .eticheta { display: none; } }

/* The last stage: the firm's side, filling the picture: its name with a verified badge, one client's papers, each
   encrypted, and the devices that alone open them. */
.cc-firma { left: 0; top: 0; right: 0; bottom: 0; width: auto; max-width: none; align-items: stretch; justify-content: center; gap: 18px; padding: clamp(20px, 2.4vw, 32px); text-align: left; transform: scale(0.94); }
.copii[data-etapa="4"] .cc-firma { transform: none; }
.cf-sus { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linie-n); }
.cf-sus .cc-sig { width: 52px; height: 52px; margin: 0; flex: none; }
.cf-nume { display: flex; flex-direction: column; gap: 6px; }
.cf-nume b { font: 700 clamp(20px, 1.9vw, 26px)/1.1 var(--titlu); letter-spacing: -0.015em; color: var(--ovaz); }
.cf-verificat { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(47, 154, 85, 0.16); border: 1px solid rgba(47, 154, 85, 0.45); color: #7fd6a2; font: 600 12.5px/1.3 var(--text); }
.cf-verificat svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: #2f9a55; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cf-dosar { display: flex; flex-direction: column; gap: 10px; }
.cf-client { display: flex; align-items: center; gap: 10px; }
.cf-folder { width: 22px; height: 16px; border-radius: 2px; background: var(--ocru); position: relative; flex: none; }
.cf-folder::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 5px; border-radius: 2px 2px 0 0; background: #c88f1f; }
.cf-client b { font: 600 15px var(--text); color: var(--ovaz); }
.cf-client span { font-size: 13px; color: var(--piatra); }
.cf-dosar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-dosar li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; background: #1c1d1e; border: 1px solid var(--linie-n); border-radius: 4px; font-size: 14px; color: var(--piatra-2); transition: opacity 400ms var(--usor) calc(450ms + var(--k, 0) * 120ms), transform 500ms var(--usor) calc(450ms + var(--k, 0) * 120ms); }
.cf-dosar li:nth-child(2) { --k: 1; } .cf-dosar li:nth-child(3) { --k: 2; }
.cf-dosar li svg { width: 15px; height: 15px; fill: none; stroke: var(--ocru); stroke-width: 1.6; }
.cf-dosar li em { font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: 0.06em; color: var(--ocru); padding: 3px 6px; border: 1px solid rgba(226, 165, 43, 0.4); border-radius: 2px; }
.copii:not([data-etapa="4"]) .cf-dosar li { opacity: 0; transform: translateY(6px); }
@media (max-width: 899px) { .cc-firma { gap: 10px; padding: 14px; } .cf-dosar li { padding: 6px 10px; font-size: 12.5px; } .cf-client span { display: none; } }
@media (min-width: 900px) { .cc-firma { gap: 22px; } .cf-dosar { gap: 12px; } .cf-dosar ul { gap: 8px; } .cf-dosar li { padding: 12px 14px; font-size: 15px; } .cf-sus .cc-sig { width: 60px; height: 60px; } }

/* The desk's own button: a client's papers saved as one PDF (src/acte/birou/birou.ts "client.pdf"). */
.cf-unpdf { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 14px; border: 1px solid var(--contur-n); border-radius: 3px; font: 600 13.5px var(--text); color: var(--ovaz); transition: opacity 400ms var(--usor) 850ms; }
.cf-unpdf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copii:not([data-etapa="4"]) .cf-unpdf { opacity: 0; }

/* ------------------------------------------------------------------ pricing, alive (2026-10-22)
   The switch counts the prices to their new figure; a chip says what yearly saves while it is on; each firm plan draws
   its seats; the cards rise in once in view and lift under the pointer. */
.pret-comutator { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.economie { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(226, 165, 43, 0.16); border: 1px solid rgba(138, 90, 11, 0.35); color: var(--ocru-text); font: 600 13px/1.2 var(--text); transition: opacity 300ms var(--usor), transform 400ms var(--usor); }
.economie::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ocru); }
#pricing[data-perioada="lunar"] .economie { opacity: 0.35; transform: scale(0.96); }
.pret { display: inline-block; font-variant-numeric: tabular-nums; }
.pret.rostogol { animation: pret-rostogol 520ms var(--usor); }
@keyframes pret-rostogol { 0% { transform: translateY(-10%); filter: blur(1.5px); } 60% { filter: none; } 100% { transform: none; } }
.plan-disp { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; min-height: 30px; }
.plan-disp i { display: block; position: relative; transition: opacity 400ms var(--usor) calc(200ms + var(--i) * 70ms), transform 500ms var(--usor) calc(200ms + var(--i) * 70ms); }
.plan-disp .pc { width: 34px; height: 22px; border: 2px solid currentColor; border-radius: 3px; opacity: 0.85; }
.plan-disp .pc::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 3px; background: currentColor; border-radius: 1px; transform: translateX(-50%); }
.plan-disp .tel { width: 15px; height: 26px; border: 2px solid currentColor; border-radius: 4px; opacity: 0.85; }
.plan-disp .plus { width: 26px; height: 26px; border: 1.5px dashed currentColor; border-radius: 50%; opacity: 0.45; font: 500 15px/23px var(--text); font-style: normal; text-align: center; }
.plan.noapte .plan-disp { color: var(--ocru); }
html.anim .planuri-grup.asteapta:not(.in) .plan { opacity: 0; transform: translateY(26px); }
html.anim .planuri-grup.asteapta:not(.in) .plan-disp i { opacity: 0; transform: translateY(8px); }
.plan { transition: opacity 600ms var(--usor), transform 600ms var(--usor), box-shadow 300ms var(--usor); }
.plan + .plan { transition-delay: 120ms; }
.planuri-grup.in .plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(18, 19, 19, 0.45); transition-delay: 0ms; z-index: 1; }
.plan-sigiliu { transition: transform 900ms var(--usor), opacity 600ms; }
.plan.noapte:hover .plan-sigiliu { transform: rotate(-12deg); opacity: 0.26; }
@media (prefers-reduced-motion: reduce) { .pret.rostogol { animation: none; } .plan, .plan-disp i { transition: none !important; } }
/* Pricing, aligned: "a month" on the price's baseline, a check by each line, the action at the foot of every card,
   the partner offer as its own callout above the small print. */
.pret-rand { align-items: flex-end; column-gap: 10px; }
.pret-rand .pe { padding-bottom: 0.15em; }
.plan-firma li { justify-content: flex-start; gap: 12px; align-items: center; }
.plan-firma li::before { content: ""; flex: none; width: 10px; height: 5px; margin: -3px 2px 0 2px; border-left: 2px solid var(--ocru-text); border-bottom: 2px solid var(--ocru-text); transform: rotate(-45deg); }
.plan.noapte .plan-firma li::before { border-color: var(--ocru); }
.plan-firma li:first-child { font-weight: 600; }
.plan .plan-cumpar { margin-top: auto; align-self: stretch; justify-content: center; text-align: center; min-height: 52px; font-size: 16px; }
.plan-disp { padding: 4px 0 2px; }
.pret-jos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 6px; }
@media (min-width: 900px) { .pret-jos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.parteneri-nota { margin: 0; padding: 14px 18px; border-left: 3px solid var(--ocru); background: rgba(226, 165, 43, 0.12); font: 600 15.5px/1.5 var(--text); color: var(--noapte); }
.pret-jos .corp.mic { margin: 0; font-size: 13.5px; color: var(--estompat); }
.pret-bara ~ .planuri-grup { margin-top: calc(20px - clamp(40px, 5vw, 72px)); }

/* ------------------------------------------------------------------ what you get, with depth (2026-10-22)
   Cards that float on a lit ground: rounded, a paper gradient, layered shadows; each scene an inset screen; one short
   line under each title; the small print as three short lines with marks. */
.firme-piloni { position: relative; overflow: clip; background: radial-gradient(70% 60% at 50% 0%, #f6f3ec 0%, var(--ovaz) 60%, #e4dfd3 100%); }
.firme-piloni::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(153deg, rgba(18, 19, 19, 0.035) 0 1px, transparent 1px 13px); -webkit-mask-image: radial-gradient(60% 70% at 100% 100%, #000, transparent 70%); mask-image: radial-gradient(60% 70% at 100% 100%, #000, transparent 70%); }
.firme-piloni .cadru { position: relative; }
.bento { gap: 20px; }
.bento-c { border: 1px solid rgba(18, 19, 19, 0.1); border-radius: 16px; background: linear-gradient(180deg, #fdfcf9 0%, #f4f1ea 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(18, 19, 19, 0.05), 0 18px 40px -22px rgba(18, 19, 19, 0.35); padding: 10px; transition: transform 400ms var(--usor), box-shadow 400ms var(--usor); }
.bento-c:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 8px rgba(18, 19, 19, 0.06), 0 30px 60px -26px rgba(18, 19, 19, 0.45); }
.bento-scena { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 12px 30px rgba(0, 0, 0, 0.35); }
.bento-c:hover .bento-scena { background: radial-gradient(80% 90% at 50% 40%, #2b2d2f 0%, var(--noapte) 75%); }
.bento-text { padding: 18px 14px 12px; gap: 8px; }
.bento-text p { color: var(--estompat); font-size: 15px; }
.b-dovada .bento-scena { min-height: 300px; }
@media (min-width: 900px) { .b-dovada .bento-text { padding: 18px 26px; } }
ul.piloni-jos { list-style: none; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.piloni-jos li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(18, 19, 19, 0.08); font: 500 14px/1.3 var(--text); color: var(--corp-h); }
.piloni-jos li i { width: 8px; height: 8px; border-radius: 50%; background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.18); flex: none; }
.piloni-jos li:last-child { font-weight: 600; color: var(--noapte); }

/* ------------------------------------------------------------------ what you get, as pictures (2026-10-22, third pass)
   A bento you look into: the encryption card tall on the left, the PDF and the receipt on the right; each card a whole
   dark picture with its title over a fade at the foot; a light follows the pointer; the window and the receipt answer. */
.bento { gap: 18px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 340px 340px; }
  .b-cheie { grid-column: 1; grid-row: 1 / 3; }
  .b-pdf { grid-column: 2; grid-row: 1; }
  .b-dovada { grid-column: 2; grid-row: 2; display: block !important; }
}
.bento-c, .bento-c:hover { position: relative; padding: 0; border-radius: 18px; border: 1px solid rgba(18, 19, 19, 0.7); background: var(--noapte); overflow: hidden; box-shadow: 0 2px 6px rgba(18, 19, 19, 0.15), 0 30px 60px -28px rgba(18, 19, 19, 0.6); }
@media (max-width: 899px) { .bento-c { height: 400px; } }
.bento-c:hover { transform: translateY(-3px); }
.bento-c::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 300ms; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(226, 165, 43, 0.13), transparent 60%); box-shadow: inset 0 0 0 1px rgba(226, 165, 43, 0.25); }
.bento-c:hover::after { opacity: 1; }
.bento-c .bento-scena, .b-dovada .bento-scena { position: absolute; inset: 0; height: auto; min-height: 0; border-radius: 0; box-shadow: none; padding-bottom: 118px; }
.bento-c .bento-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 56px 24px 22px; background: linear-gradient(180deg, transparent 0%, rgba(18, 19, 19, 0.88) 42%, var(--noapte) 100%); pointer-events: none; }
.bento-c .bento-text h3 { color: var(--ovaz); }
.bento-c .bento-text p { color: var(--piatra-2); max-width: 46ch; }
.bento-c .bento-text .pilon-nr { color: var(--ocru); }
@media (min-width: 900px) { .b-dovada .bento-text { padding: 56px 24px 22px; justify-content: flex-end; } }

/* The PDF card's scene sits above the caption. */
.b-pdf .foaie-libera { top: 36%; }
.b-pdf .pdf-gata { top: 42%; }

/* The encryption card: rows over the whole height; the window follows the pointer while it is over the card. */
.b-cheie .cheie-cifru, .b-cheie .cheie-clar { padding: 46px 0 150px; gap: 16px; justify-content: flex-start; }
.b-cheie .cheie-clar { clip-path: inset(30px 30% 140px 30% round 8px); }
.b-cheie .cheie-fereastra { top: 30px; bottom: 140px; }
.b-cheie .cheie-afara { bottom: 124px; }
html.anim .b-cheie .cheie-clar { animation-name: cheie-clip-mare; }
@keyframes cheie-clip-mare { from { clip-path: inset(30px 56% 140px 4% round 8px); } to { clip-path: inset(30px 4% 140px 56% round 8px); } }
.b-cheie.urmareste .cheie-fereastra { animation: none !important; left: var(--wx); transition: left 90ms linear; }
.b-cheie.urmareste .cheie-clar { animation: none !important; clip-path: inset(30px calc(60% - var(--wx)) 140px var(--wx) round 8px); transition: clip-path 90ms linear; }
.cheie-muta { position: absolute; right: 18px; top: 10px; font-size: 9.5px; color: var(--piatra); opacity: 0.8; transition: opacity 300ms; }
.b-cheie.urmareste .cheie-muta { opacity: 0; }
@media (hover: none) { .cheie-muta { display: none; } }

/* The receipt card: smaller pieces to fit above the caption; "change one byte" breaks the signature. */
.b-dovada .bento-scena { gap: 18px; padding-top: 22px; }
.b-dovada .cerere-card { width: min(230px, 44%); padding: 14px 16px; }
.b-dovada .cerere-card b { font-size: 16px; }
.b-dovada .chitanta { width: min(260px, 48%); padding: 12px 14px 14px; gap: 5px; font-size: 10px; }
.ch-nu { display: none; }
.b-dovada.rupt .ch-da { display: none; }
.b-dovada.rupt .ch-nu { display: inline; }
.b-dovada.rupt .ch-valid { color: #b3261e; }
.b-dovada.rupt .ch-valid i { background: #d93a2e; box-shadow: 0 0 0 4px rgba(217, 58, 46, 0.2); }
.b-dovada.rupt .ch-rand:nth-of-type(2) code { color: #b3261e; text-decoration: line-through; }
.ch-schimb { position: absolute; z-index: 4; right: 16px; top: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--contur-n); background: rgba(18, 19, 19, 0.7); color: var(--ovaz); font: 600 12px var(--text); cursor: pointer; transition: border-color 200ms, background 200ms; }
.ch-schimb:hover, .ch-schimb[aria-pressed="true"] { border-color: var(--ocru); }
.ch-schimb:focus-visible { outline: 2px solid var(--ocru); outline-offset: 2px; }
@media (max-width: 899px) { .b-dovada .bento-scena { flex-direction: row; padding: 50px 14px 120px; } .b-dovada .cerere-card { display: none; } .b-dovada .chitanta { width: min(280px, 90%); } }
/* Smaller cards (the phone's, the PDF card's height) show the first rows only. */
.b-cheie .cheie-cifru, .b-cheie .cheie-clar { overflow: hidden; }
/* What you get: the light ground textured like paper: a fine grain, faint fibres, and the -27° engraving. */
.firme-piloni { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .07 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
  radial-gradient(70% 60% at 50% 0%, #f6f3ec 0%, var(--ovaz) 60%, #e2dccf 100%); }
.firme-piloni::before { background: repeating-linear-gradient(153deg, rgba(18, 19, 19, 0.05) 0 1px, transparent 1px 12px); -webkit-mask-image: radial-gradient(75% 80% at 100% 100%, #000, transparent 72%), radial-gradient(45% 50% at 0% 0%, rgba(0, 0, 0, 0.6), transparent 70%); mask-image: radial-gradient(75% 80% at 100% 100%, #000, transparent 72%), radial-gradient(45% 50% at 0% 0%, rgba(0, 0, 0, 0.6), transparent 70%); }

/* ------------------------------------------------------------------ small specimen papers (2026-10-22) */
.hm { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 0.707; display: flex; flex-direction: column; gap: 3.2cqw; padding: 8cqw 8cqw 6cqw; background: linear-gradient(180deg, #fdfdfb, #f3f1ec); color: #262c2e; font-family: var(--aplicatie); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 22px -8px rgba(0, 0, 0, 0.55); overflow: hidden; }
.hm-sus { display: flex; align-items: center; gap: 3cqw; padding-bottom: 3cqw; border-bottom: 0.6cqw solid #1d3b4f; }
.hm-logo { width: 7cqw; height: 7cqw; border-radius: 1.4cqw; background: var(--c); }
.hm-sus b { font-size: 5.4cqw; letter-spacing: 0.1em; color: #1d3b4f; }
.hm-t { font-size: 8cqw; line-height: 1.1; margin-top: 1cqw; }
.hm-sub { font-size: 4.4cqw; color: #6b7275; margin-bottom: 2cqw; }
.hm-r { display: flex; justify-content: space-between; gap: 3cqw; padding: 1.8cqw 0; border-bottom: 0.3cqw solid #e2e5e6; font-size: 4.6cqw; font-variant-numeric: tabular-nums; }
.hm-r i { font-style: normal; }
.hm-r.tare { font-weight: 700; border-bottom: 0; border-top: 0.5cqw solid #262c2e; margin-top: 1cqw; }
.hm-l { display: block; height: 2.4cqw; width: var(--w); border-radius: 1cqw; background: #dfe2e2; }
.hm-semn { margin-top: auto; display: flex; justify-content: space-between; padding-top: 3cqw; border-top: 0.3cqw solid #e2e5e6; }
.hm-sem { width: 36cqw; height: 12cqw; fill: none; stroke: #1d3b4f; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hm-sem + .hm-sem { stroke: #4a4f52; transform: scaleX(-1); }
.carte.spate { background: #e3e9ea; }

/* The PDF card: real papers scatter and collate. */
.b-pdf .foaie-libera { width: min(26%, 150px); padding: 0; gap: 6px; background: none; border: 0; box-shadow: none; }
.b-pdf .foaie-libera .carte { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 22px -8px rgba(0, 0, 0, 0.55); }
.b-pdf .foaie-libera > span { font-size: 10.5px; color: var(--piatra); text-align: center; }
.b-pdf .foaie-libera:first-of-type { width: min(32%, 190px); }

/* The encryption card: a desk of papers under the window, bytes everywhere else. */
.b-cheie .cheie-clar { display: block; padding: 0; background: #1d1e1f; }
.masa { position: absolute; left: 0; right: 0; top: 30px; bottom: 140px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 16px 18px; }
.masa-loc { display: flex; align-items: center; justify-content: center; min-height: 0; transform: rotate(var(--r, -1.5deg)); }
.masa-loc:nth-child(2n) { --r: 1.8deg; } .masa-loc:nth-child(3n) { --r: -2.6deg; }
.masa-loc .hm { width: auto; height: 100%; max-width: 100%; }
.masa-loc.lat .carte { width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 22px -8px rgba(0, 0, 0, 0.55); }

/* The receipt card: the request as a small browser window; the receipt with a torn foot. */
.browser-mic { padding: 0 !important; overflow: hidden; border-radius: 8px !important; display: flex; flex-direction: column; gap: 0 !important; }
.bm-bara { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #d8d4ca; }
.bm-bara i { width: 6px; height: 6px; border-radius: 50%; background: #b5b0a5; }
.bm-bara span { margin-left: 6px; flex: 1; padding: 2px 8px; border-radius: 4px; background: #f3f1ec; font: 400 9px var(--mono); color: #6b7275; white-space: nowrap; overflow: hidden; }
.bm-corp { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; }
.bm-corp > b { font: 700 15px/1.2 var(--titlu); }
.bm-act { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0 0; border-top: 1px solid #e2ddd2; font-size: 11px; color: #3c3a35; }
.bm-act em { font-style: normal; font: 600 10px var(--text); padding: 2px 8px; border-radius: 999px; background: var(--noapte); color: var(--ovaz); }
.b-dovada .chitanta { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%, 70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px), 45% 100%, 40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%, 20% calc(100% - 6px), 15% 100%, 10% calc(100% - 6px), 5% 100%, 0 calc(100% - 6px)); padding-bottom: 18px !important; background: linear-gradient(180deg, #fbfaf6, #f1eee6); }
/* The small papers sized in em from one base (container units resolved to nothing in these grids). */
.hm { container-type: normal; font-size: 7px; width: 21em; max-width: 100%; height: auto; gap: 0.7em; padding: 1.7em 1.7em 1.3em; }
.hm-sus { gap: 0.6em; padding-bottom: 0.6em; border-bottom-width: 0.13em; }
.hm-logo { width: 1.5em; height: 1.5em; border-radius: 0.3em; }
.hm-sus b { font-size: 1.15em; }
.hm-t { font-size: 1.7em; margin-top: 0.1em; }
.hm-sub { font-size: 0.95em; margin-bottom: 0.3em; }
.hm-r { font-size: 1em; padding: 0.38em 0; gap: 0.6em; border-bottom-width: 0.07em; }
.hm-r.tare { border-top-width: 0.1em; margin-top: 0.2em; }
.hm-l { height: 0.5em; border-radius: 0.2em; }
.hm-semn { padding-top: 0.6em; }
.hm-sem { width: 7.5em; height: 2.5em; }
.b-pdf .foaie-libera .hm { font-size: 6.4px; }
.masa-loc .hm { width: 21em; height: auto; font-size: clamp(6px, 0.5vw, 7.5px); }
.b-pdf .foaie-libera .hm { font-size: 4.8px; }
.b-pdf .foaie-libera:first-of-type { width: min(28%, 160px); }
.b-pdf .foaie-libera { top: 40%; }
.b-pdf .pdf-gata { top: 46%; left: 64%; width: min(40%, 210px); padding: 12px 14px; }
.b-dovada .bento-scena { align-items: flex-start; padding-top: 18px; }
.b-dovada .bm-act:nth-child(n+6) { display: none; }
.b-dovada .bm-corp { gap: 4px; padding: 8px 10px 10px; }
.b-dovada .bm-corp > b { font-size: 14px; }
.b-dovada .cerere-ok { font-size: 11px; }
.b-dovada .chitanta { gap: 4px; }

/* ------------------------------------------------------------------ also in the app, as pictures (2026-10-22)
   As the firms' cards: whole dark pictures with the caption over a fade, a light that follows the pointer, specimen
   papers; each plays once in view and again under the pointer. */
@media (min-width: 900px) {
  .mai-grila { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 330px; gap: 18px; }
  .mai-c.m-0, .mai-c.m-3 { grid-column: span 2; }
}
.mai-c { position: relative; padding: 0; border-radius: 18px; border: 1px solid var(--linie-n); background: radial-gradient(80% 90% at 50% 30%, #25272a 0%, #161718 75%); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); transition: transform 400ms var(--usor), border-color 300ms; }
@media (max-width: 899px) { .mai-c { height: 380px; } }
.mai-c:hover { transform: translateY(-3px); }
.mai-c::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 300ms; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(226, 165, 43, 0.12), transparent 60%); box-shadow: inset 0 0 0 1px rgba(226, 165, 43, 0.22); }
.mai-c:hover::after { opacity: 1; }
.mai-c .mai-scena { position: absolute; inset: 0; height: auto; padding: 22px 22px 120px; border: 0; background: none; }
.mai-c .mai-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 56px 24px 22px; background: linear-gradient(180deg, transparent, rgba(22, 23, 24, 0.9) 42%, #161718); pointer-events: none; }
.mai-c .mai-text p { max-width: 52ch; }
.mai-scena .eticheta { color: var(--piatra); }

/* Ask: a request bubble, three payslips fanning in, the folder they land in. */
.n-cere { width: 100%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; align-items: center; gap: 18px; }
.n-bula { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--ovaz); color: var(--noapte); border-radius: 4px 16px 16px 16px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
.n-bula .eticheta { color: var(--estompat) !important; font-size: 9px; }
.n-bula b { font: 700 15px/1.2 var(--titlu); }
.n-bula span:last-child { font-size: 13px; color: var(--corp-h); }
.n-plati { position: relative; height: 170px; }
.n-plata { position: absolute; top: 0; left: calc(var(--i) * 26%); width: 44%; transform: rotate(calc((var(--i) - 1) * 6deg)); transition: opacity 500ms var(--usor) calc(250ms + var(--i) * 230ms), transform 700ms var(--usor) calc(250ms + var(--i) * 230ms); }
.n-plata .hm { font-size: 4.6px; }
html.anim .m-0.asteapta:not(.in) .n-plata { opacity: 0; transform: translate(-40px, 20px) rotate(-12deg); }
.n-dosar { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.n-dosar-ico { width: 64px; height: 48px; border-radius: 5px; background: linear-gradient(180deg, #e9b54a, var(--ocru)); position: relative; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.n-dosar-ico::before { content: ""; position: absolute; left: 0; top: -8px; width: 26px; height: 10px; border-radius: 3px 3px 0 0; background: #c88f1f; }
.n-dosar b { font: 600 13px var(--text); color: var(--ovaz); }

/* Read: the ID's back, scanned; the check digits light up; offline. */
.n-citesc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.n-verso { width: min(100%, 280px); position: relative; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); }
.n-verso .carte-mrz b { font-weight: 700; color: #1f6b3a; background: rgba(47, 154, 85, 0.22); border-radius: 2px; transition: background 300ms 1200ms, color 300ms 1200ms; }
html.anim .m-1.asteapta:not(.in) .n-verso .carte-mrz b { background: transparent; color: inherit; }
.n-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ocru); box-shadow: 0 0 14px 4px rgba(226, 165, 43, 0.55); opacity: 0; }
html.anim .m-1.in .n-scan { animation: scan 1200ms cubic-bezier(0.5, 0, 0.5, 1) 1; }
.n-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--contur-n); font: 500 10.5px var(--mono); letter-spacing: 0.06em; color: var(--piatra-2); }
.n-pill svg { width: 13px; height: 13px; fill: currentColor; }
.n-ok { border-color: rgba(47, 154, 85, 0.5); color: #7fd6a2; transition: opacity 300ms 1300ms; }
.n-ok i { width: 7px; height: 7px; border-radius: 50%; background: #2f9a55; }
html.anim .m-1.asteapta:not(.in) .n-ok { opacity: 0; }

/* Fill in: the ID beside a form whose fields fill from it. */
.n-complet { width: 100%; display: grid; grid-template-columns: minmax(0, 0.8fr) 24px minmax(0, 1.2fr); align-items: center; gap: 10px; }
.n-complet .carte { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5); transform: rotate(-3deg); }
.n-sageata { height: 2px; background: var(--ocru); position: relative; }
.n-sageata::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--ocru); border-right: 0; }
.n-form { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; background: var(--hartie); color: var(--noapte); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); }
.n-form > .eticheta { color: var(--estompat) !important; font-size: 8.5px; }
.n-camp { display: flex; flex-direction: column; gap: 2px; font-size: 9px; color: #6b7275; }
.n-camp b { font: 600 11.5px/1.3 ui-monospace, "Roboto Mono", Menlo, monospace; color: var(--noapte); padding: 3px 5px; border: 1px solid #d5cfc2; background: rgba(226, 165, 43, 0.14); white-space: nowrap; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path 500ms steps(12) calc(300ms + var(--i) * 360ms); }
html.anim .m-2.asteapta:not(.in) .n-camp b { clip-path: inset(0 100% 0 0); }

/* Backup: the locked file carried from the old phone to the new one, which fills and says restored. */
.n-rez { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
.n-tel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.n-ecran { position: relative; width: 74px; height: 140px; padding: 14px 8px; border: 2px solid var(--contur-n); border-radius: 14px; background: #0f1011; display: flex; flex-direction: column; gap: 6px; }
.n-ecran > i { display: block; height: 14px; border-radius: 3px; background: #2a2c2e; }
.n-tel:not(.nou) .n-ecran > i { background: linear-gradient(90deg, #3a3c3f, #2a2c2e); }
.n-tel.nou .n-ecran > i { transform-origin: left; transition: transform 400ms var(--usor) calc(1300ms + var(--k, 0) * 120ms), background 400ms; background: #3a3c3f; }
.n-tel.nou .n-ecran > i:nth-child(2) { --k: 1; } .n-tel.nou .n-ecran > i:nth-child(3) { --k: 2; } .n-tel.nou .n-ecran > i:nth-child(4) { --k: 3; }
html.anim .m-3.asteapta:not(.in) .n-tel.nou .n-ecran > i { transform: scaleX(0); }
.n-bara { position: absolute; left: 8px; right: 8px; bottom: 12px; height: 4px; border-radius: 2px; background: #2a2c2e; overflow: hidden; }
.n-bara i { display: block; height: 100%; width: 100%; background: var(--ocru); transform-origin: left; transition: transform 1200ms var(--usor) 500ms; }
html.anim .m-3.asteapta:not(.in) .n-bara i { transform: scaleX(0); }
.n-gata { font: 600 11.5px var(--text); color: #7fd6a2; transition: opacity 300ms 1800ms; }
html.anim .m-3.asteapta:not(.in) .n-gata { opacity: 0; }
.n-drum { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--contur-n) 0 6px, transparent 6px 12px); }
.n-fis { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px; border: 1px solid var(--ocru); border-radius: 6px; background: #161718; box-shadow: 0 0 30px rgba(226, 165, 43, 0.15); text-align: center; transition: left 1300ms cubic-bezier(0.6, 0, 0.3, 1) 300ms; }
html.anim .m-3.asteapta:not(.in) .n-fis { left: 8%; }
.n-fis svg { width: 20px; height: 20px; fill: none; stroke: var(--ocru); stroke-width: 1.6; }
.n-fis b { font: 500 12px var(--mono); color: var(--ovaz); }
.n-fis span { font: 400 11px var(--mono); letter-spacing: 0.1em; color: var(--piatra-2); }
.n-fis em { font: 500 9px var(--mono); font-style: normal; letter-spacing: 0.08em; color: var(--ocru); }
@media (max-width: 899px) { .n-cere { grid-template-columns: minmax(0, 1fr) auto; } .n-cere .n-bula { grid-column: 1 / -1; } .n-ecran { width: 54px; height: 100px; } .n-rez { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .n-plata, .n-camp b, .n-fis, .n-bara i, .n-tel.nou .n-ecran > i, .n-gata, .n-ok { transition: none !important; } }
/* Read and fill in: compact enough to sit above the caption. */
.n-citesc { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; }
.n-verso { width: min(100%, 230px); order: 2; flex-basis: 100%; max-width: 230px; }
.n-citesc .n-pill { order: 1; padding: 4px 9px; font-size: 9.5px; }
.n-citesc .n-ok { order: 1; }
.n-form .n-camp:nth-child(n+5) { display: none; }
.n-form { gap: 5px; padding: 10px 10px 12px; }
.n-camp b { font-size: 11px; padding: 2px 5px; }
@media (min-width: 900px) { .n-complet { margin-top: -6px; } }
/* Stage changes ease in rather than snap: a little longer, a softer curve, in the pinned scenes only. */
.etapizat { --etapa-ease: cubic-bezier(0.25, 0.8, 0.25, 1); }
.etapizat .etape li { transition: opacity 650ms var(--etapa-ease); }
.etapizat .etape p { transition: max-height 750ms var(--etapa-ease), margin 750ms var(--etapa-ease); }
.copii .cc-copii li { transition-duration: 700ms, 950ms, 500ms; transition-timing-function: var(--etapa-ease); }
.cc-fraza.nou { animation-duration: 700ms; animation-timing-function: var(--etapa-ease); }
.cc-mesaj, .cc-firma { transition-duration: 650ms, 850ms; transition-timing-function: var(--etapa-ease); }
.copia .a4-marcaj div { transition-duration: 700ms, 900ms; }
.copia .ex .ascuns::after { transition-duration: 750ms; }
.sigiliu-s .jum { transition-duration: 850ms; }

/* ------------------------------------------------------------------ phones (2026-10-22)
   Titles and labels break into even lines, paragraphs keep no word alone on the last line. Hover effects answer a
   real pointer only: on a phone a tap (or the start of a scroll) left a card lifted, lit, or its papers scattered. */
h1, h2, h3, .h2, .eticheta, .sectiune, .btn { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }
@media (hover: hover) {
  html.anim .b-pdf.in:hover .foaie-libera { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) rotate(var(--sr)); }
  html.anim .b-pdf.in:hover .pdf-gata { opacity: 0; transform: translate(-50%, -40%) scale(0.92); transition-delay: 0ms; }
}
@media (hover: none) {
  .bento-c:hover, .mai-c:hover, .planuri-grup.in .plan:hover { transform: none; }
  .bento-c:hover::after, .mai-c:hover::after { opacity: 0; }
  .plan.noapte:hover .plan-sigiliu { transform: none; opacity: 0.16; }
}
@media (max-width: 899px) {
  /* The cards: the picture on top, the caption under it in the flow (over the picture, it covered the scene). */
  .bento-c, .mai-c { height: auto; display: flex; flex-direction: column; }
  .bento-c .bento-scena, .b-dovada .bento-scena { position: relative; inset: auto; flex: none; height: 290px; padding-bottom: 0; }
  .mai-c .mai-scena { position: relative; inset: auto; flex: none; min-height: 250px; padding: 26px 20px 30px; }
  .bento-c .bento-text, .mai-c .mai-text { position: relative; margin-top: -34px; padding: 34px 22px 24px; }
  .b-pdf .foaie-libera { top: 46%; }
  .b-pdf .pdf-gata { top: 54%; left: 62%; width: min(54%, 230px); }
  .b-cheie .bento-scena { height: 300px; }
  .b-cheie .cheie-cifru, .b-cheie .cheie-clar { padding: 44px 0 60px; }
  .b-cheie .cheie-clar { clip-path: inset(30px 30% 70px 30% round 8px); }
  .b-cheie .cheie-fereastra, .masa { bottom: 70px; }
  .b-cheie .cheie-afara { bottom: 42px; }
  html.anim .b-cheie .cheie-clar { animation-name: cheie-clip-tel; }
  .b-dovada .bento-scena { padding: 62px 14px 0; }
  /* The seal's four states fit one line. */
  .stari-nume { display: flex; justify-content: space-between; gap: 8px; }
  .stari-nume li:nth-child(n) { transform: none; }
  .stari-nume button { font-size: 10px; white-space: nowrap; }
}
@keyframes cheie-clip-tel { from { clip-path: inset(30px 56% 70px 4% round 8px); } to { clip-path: inset(30px 4% 70px 56% round 8px); } }
/* The badge's dot stays with its first word when the line breaks. */
@media (max-width: 600px) { .sectiune.insigna { display: block; text-align: center; } .sectiune.insigna i { display: inline-block; margin-right: 10px; vertical-align: 0.05em; } }
/* Text over the cipher field reads on a dark halo. */
.legatura .cadru p, .legatura .cadru li { text-shadow: 0 0 10px var(--noapte), 0 0 3px var(--noapte); }
@media (max-width: 899px) {
  .b-pdf .bento-scena, .b-dovada .bento-scena { height: 260px; }
  .b-pdf .foaie-libera > span { display: none; }
  .cheie-fereastra .eticheta { white-space: nowrap; }
  .b-cheie .cheie-afara { padding: 2px 6px; background: var(--noapte); }
}
/* The hero's title in three lines on a phone, not four. */
@media (max-width: 480px) { .erou h1 { font-size: clamp(30px, 9vw, 40px); } }
.intreg-cuv { white-space: nowrap; }

/* ------------------------------------------------------------------ the open slit, full of cipher (2026-10-22)
   Under the two halves (intro.js puts it first): rows of base64 along the cut, drifting slowly each its own way; the
   question over them where the cipher is wiped out: only the silhouette of a strip, in the slit's own dark. */
.intro-fanta { position: absolute; left: calc(var(--px) - 150vmax); top: calc(var(--py) - var(--g) / 2); width: 300vmax; height: var(--g); transform: rotate(-27deg); transform-origin: 50% 50%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; opacity: 0; transition: opacity 700ms var(--usor) 300ms; pointer-events: none; }
.intro.alege .intro-fanta { opacity: 1; }
.intro.deschis .intro-fanta { opacity: 0; transition: opacity 200ms; }
.intro-fanta span { display: block; white-space: nowrap; font: 500 11px/14px var(--mono); letter-spacing: 0.18em; color: rgba(226, 165, 43, 0.34); transform: translateX(-10%); }
html.anim .intro.alege .intro-fanta span { animation: fanta-curge 60s linear 2 alternate; }
html.anim .intro.alege .intro-fanta span:nth-child(2n) { animation-direction: alternate-reverse; color: rgba(236, 232, 223, 0.2); }
@keyframes fanta-curge { from { transform: translateX(-4%); } to { transform: translateX(-16%); } }
.intro-intrebare { padding: 4px 14px 3px; background: #080909; color: var(--ocru); font-weight: 600; box-shadow: 0 0 0 1px rgba(226, 165, 43, 0.28), 0 0 18px 6px #080909; }
.intro-intrebare::before, .intro-intrebare::after { display: none; }
@media (max-width: 899px) { .intro-intrebare { padding: 2px 9px 1px; } .intro-fanta span { font-size: 10px; line-height: 12px; } }
/* The statement as large as the screen allows (2026-10-22: "make this bigger, it has more space"). On a phone, while the
   section is pinned, the eyebrow gives way and the sheet runs almost to the edges. */
.foaie-3d { width: min(100%, 560px, calc((100svh - 210px) * 0.707)); }
@media (max-width: 899px) {
  .copia.pornit .copia-text > .sectiune { display: none; }
  .copia.pornit .foaie-3d { width: min(calc(100% + 20px), calc((100svh - 335px) * 0.707)); }
  .copia.pornit:is([data-etapa="3"], [data-etapa="4"]) .foaie-3d { width: min(calc(100% + 20px), calc((100svh - 290px) * 0.707)); }
}

/* ------------------------------------------------------------------ no jumps between stages (2026-10-22)
   A pinned scene recentred itself whenever its content changed height (a stage line one line longer, the colleague's
   row, the firm's panel), so the picture jumped. Now the stage texts share one place sized to the longest, the
   marking fields take the steps' place instead of the title's, and the scenes grow downwards from a fixed top. */
@media (max-width: 899px) {
  .copii.pornit .etape, .copia.pornit .etape { display: grid; }
  .copii.pornit .etape li, .copia.pornit .etape li { grid-area: 1 / 1; }
  .copii.pornit .etape li:not(.activ), .copia.pornit .etape li:not(.activ) { display: block; visibility: hidden; }
  .copia.pornit .copia-text { display: grid; grid-template-columns: minmax(0, 1fr); }
  .copia.pornit .copia-text > .etape, .copia.pornit .copia-text > .marcheaza { grid-row: 2; grid-column: 1; align-self: start; }
  .copia.pornit:is([data-etapa="3"], [data-etapa="4"]) .copia-text .h2 { display: block; }
  .copia.pornit[data-etapa="3"] .etape, .copia.pornit[data-etapa="4"] .etape { display: grid; visibility: hidden; }
  .copia.pornit .marcheaza { display: grid; visibility: hidden; }
  .copia.pornit:is([data-etapa="3"], [data-etapa="4"]) .marcheaza { visibility: visible; }
  .copia.pornit:is([data-etapa="3"], [data-etapa="4"]) .foaie-3d { width: min(calc(100% + 20px), calc((100svh - 335px) * 0.707)); }
  .copii.pornit > .scena { justify-content: flex-start; padding-top: max(88px, calc(50svh - 310px)); }
}
@media (min-width: 900px) { .copii.pornit > .scena { justify-content: flex-start; padding-top: max(80px, calc(50svh - 330px)); } }
/* The seal's four state texts share one place, sized to the longest, so the scene doesn't move between states. */
.stari { display: grid; grid-template-columns: minmax(0, 1fr); }
.stare-text { grid-row: 3; grid-column: 1; }
.stare-text[hidden] { display: flex !important; visibility: hidden; }
@media (max-width: 899px) and (max-height: 780px) { .copii.pornit > .scena { padding-top: 80px; } .copii.pornit .copii-grila { gap: 10px; } }
/* Not pinned (a short screen, or no script): the steps read as a list, every one in full, without the stage line. */
.copii:not(.pornit) .etape li { opacity: 1; }
.copii:not(.pornit) .cc-fraza { display: none; }
/* A phone with its toolbars showing leaves 600–760px: the copies scene (title, stage line, the copies or the firm's
   panel) is taller than that, and the last stage's "Save as one PDF" was cut off. The title steps down and the
   picture is drawn smaller (zoom, so the layout shrinks with it). */
@media (max-width: 899px) and (max-height: 760px) { .copii.pornit .h2 { font-size: 24px; } .copii.pornit .cc-camp { zoom: 0.88; } }
@media (max-width: 899px) and (max-height: 690px) { .copii.pornit .cc-camp { zoom: 0.78; } .copii.pornit .cc-fraza b { font-size: 18px; } }
@media (max-width: 899px) and (max-height: 640px) { .copii.pornit .cc-camp { zoom: 0.7; } }
/* Phones: the doors hang from the seal, not from the screen's edges (from the top edge, the firms' door ran into the
   seal on a phone with its toolbars showing): the firms' just above it, the people's just below, the same gap each. */
@media (max-width: 899px) and (min-height: 540px) {
  .intro-usa.firme { top: auto; bottom: calc(100% - var(--cy) + var(--D) / 2 + 24px); }
  .intro-usa.oameni { bottom: auto; top: calc(var(--cy) + var(--D) / 2 + 24px); }
}
@media (max-width: 899px) and (min-height: 540px) and (max-height: 700px) {
  .intro-usa b { font-size: 24px; }
  .intro-usa.firme { bottom: calc(100% - var(--cy) + var(--D) / 2 + 16px); }
  .intro-usa.oameni { top: calc(var(--cy) + var(--D) / 2 + 16px); }
}
/* "Your data, your choice." on one line (Cristian, 2026-10-22): no 13ch cap here, sized to its column. */
.copia-text .h2 { max-width: none; font-size: clamp(30px, 3.2vw, 44px); }
@media (max-width: 899px) { .copia.pornit .copia-text .h2 { font-size: clamp(26px, 8vw, 32px); } }