/* Sovryk, foaia de stil "Enclave"
   Un concept: parantezele sunt perimetrul, punctul e datele clientului.
   Inauntru viu, in afara gri. Linii de 1px, etichete mono, un accent per ecran.
   Numele variabilelor din :root NU se schimba, restul site-ului depinde de ele. */

:root{
  --bg:#0A0C10;
  --bg-soft:#10141c;
  --surface:#141924;
  --surface-2:#1b212e;
  --border:#232a38;
  --border-strong:#2f3a4b;
  --text:#eef2f7;
  --muted:#9aa7b8;
  --muted-2:#6b7788;
  --accent:#34d3be;      /* teal: trust, secure */
  --accent-2:#8b7bff;    /* violet subtil pentru accente secundare */
  --accent-ink:#062b27;
  --danger:#ff6b6b;
  /* Sistem de colturi: 0 peste tot. Enclava e paranteze si unghiuri drepte,
     orice raza contrazice conceptul. Singurele forme rotunde permise sunt
     punctele-date (.dot, halo), care sunt cercuri prin definitie. */
  --radius:0;
  --radius-sm:0;
  --maxw:1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* adaugate de redesign, doar adaugiri, nimic redenumit */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.6s;
  /* Ritmul vertical al sectiunilor: o singura scara, nu valori din ochi.
     Sub 8px e spatiu de componenta (gap, margini de eticheta), nu de ritm,
     si ramane numeric. Scara: 8 14 22 34 44 56 84. */
  --rh-xs:8px;
  --rh-s:14px;
  --rh-m:22px;
  --rh-l:34px;
  --rh-xl:44px;
  --rh-2xl:56px;
  --rh-3xl:84px;
}

*{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
::selection{background:rgba(52,211,190,.22)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* pe suprafetele pline de accent, un inel teal e invizibil: alb pe ele */
.btn-primary:focus-visible,.skip-link:focus-visible{outline-color:var(--text)}
h1,h2,h3{line-height:1.12;margin:0 0 .5em}
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:700;letter-spacing:-0.035em}
h2{font-size:clamp(1.55rem,3vw,2.3rem);font-weight:650;letter-spacing:-0.025em;margin-top:0}
h3{font-size:1.15rem;font-weight:650;letter-spacing:-0.01em}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}
.mono{font-family:var(--mono)}

/* ---- Accesibilitate: skip link ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:12px 18px;font-weight:700}
.skip-link:focus{left:0;text-decoration:none}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,12,16,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.12rem;color:var(--text);letter-spacing:-0.02em;min-width:0;flex-shrink:1}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;display:inline-block;background:url(/assets/logo.svg) center/contain no-repeat;flex-shrink:0}
.nav-links{display:flex;gap:26px;align-items:center;flex-shrink:0}
.nav-links a{color:var(--muted);font-size:.94rem;font-weight:500}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--accent-ink)}
.nav-links a.btn-ghost,.nav-links a.btn-ghost:hover{color:var(--text)}
.nav .btn,.nav-toggle{white-space:nowrap}
@media(max-width:980px){.nav-links > a.btn-ghost{display:none}}
@media(max-width:760px){.nav-links > a{display:none}}

/* Firul de perimetru: hairline teal care se umple pe masura ce citesti.
   Se misca doar cu transform, actualizat prin rAF. */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;opacity:.9}

/* Dropdown de limbi, 8 intrari, cu scroll */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.04em;padding:7px 11px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--mono);transition:border-color .15s ease,color .15s ease;min-height:44px;min-width:44px;justify-content:center}
.lang-btn:hover{color:var(--text);border-color:var(--muted-2)}
.lang-btn svg{width:11px;height:11px;transition:transform .2s ease;opacity:.7}
.lang.open .lang-btn svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;min-width:158px;max-height:min(70vh,360px);overflow-y:auto;display:none;flex-direction:column;gap:2px;box-shadow:0 24px 60px -22px rgba(0,0,0,.7);z-index:60}
.lang.open .lang-menu{display:flex;animation:langpop .18s var(--ease)}
@keyframes langpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-menu a{color:var(--muted);font-size:.92rem;padding:9px 13px;border-radius:var(--radius-sm);font-weight:500;white-space:nowrap}
.lang-menu a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.lang-menu a.active{color:var(--accent);background:var(--surface-2)}

/* Meniu mobil sub 760px */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;padding:0;flex-shrink:0}
.nav-toggle svg{width:18px;height:18px}
.nav-toggle .ico-close{display:none}
.nav.menu-open .nav-toggle .ico-open{display:none}
.nav.menu-open .nav-toggle .ico-close{display:block}
.nav-menu{display:none}
@media(max-width:760px){
  .nav-toggle{display:inline-flex}
  .nav-menu{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg-soft);border-bottom:1px solid var(--border);box-shadow:0 24px 60px -30px rgba(0,0,0,.8);max-height:0;overflow:hidden;transition:max-height .24s var(--ease)}
  .nav.menu-open .nav-menu{max-height:70vh;overflow-y:auto}
  .nav-menu .menu-inner{display:block}
  .nav-menu a{display:flex;align-items:center;min-height:44px;padding:15px 20px;color:var(--text);font-size:1rem;border-bottom:1px solid var(--border)}
  .nav-menu a:last-child{border-bottom:none}
  .nav-menu a.menu-cta{color:var(--accent);font-weight:700}
  .nav-menu a:hover{background:var(--surface);text-decoration:none}
}

/* ---- Butoane ---- */
/* min-height 44 e global, nu doar pe touch: pe desktop unele limbi cadeau
   la 43px si tinta minima e o regula de proiect, nu de breakpoint */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;min-height:44px;border-radius:var(--radius-sm);font-weight:650;font-size:.98rem;cursor:pointer;border:1px solid transparent;transition:transform .08s ease,background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#48e2cd}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--muted-2);background:var(--surface)}
/* A treia treapta de buton: descarcarea aplicatiei. Nu poate fi primary (ala e
   demo-ul, actiunea care aduce banii B2B) si nu poate fi identic cu ghost-ul, ca
   sa nu se confunde cu „See how it works". Tratat ca o adnotare de instrument:
   mono, hairline, text potolit care se aprinde la hover. Merge si pe starea
   „in curand", cand nu e inca actionabil, si pe cea de descarcare reala. */
/* Mai mic si mai potolit decat celelalte doua: in coloana hero nu incap trei
   butoane pe un rand, deci ala trece jos oricum. Facut vizibil o treapta mai jos,
   ruperea citeste ca ierarhie, nu ca accident. */
.btn-app{background:transparent;color:var(--muted);border-color:var(--border-strong);
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;
  padding:10px 16px}
.btn-app:hover{color:var(--text);border-color:var(--accent);background:var(--surface)}

/* ---- Hero ---- */
/* 84 sus (o treapta de sectiune), 56 jos: hero-ul si prima sectiune impart
   granita, deci jumatatea de jos nu are nevoie de treapta intreaga. */
.hero{position:relative;padding:var(--rh-3xl) 0 var(--rh-2xl);overflow:hidden}
/* caroiaj de blueprint, abia vizibil, doar in hero */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(238,242,247,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(238,242,247,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 40%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 40%,transparent 78%)}
.hero::after{content:"";position:absolute;top:-38%;left:58%;width:760px;height:760px;background:radial-gradient(circle,rgba(52,211,190,.09),transparent 62%);pointer-events:none}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);font-size:.78rem;font-weight:500;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
a.eyebrow:hover{color:var(--text);border-color:var(--muted-2);text-decoration:none}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(52,211,190,.16);flex-shrink:0}
.hero p.lead{font-size:clamp(1.05rem,2.1vw,1.24rem);color:var(--muted);max-width:560px;margin:0 0 30px}
.hero p.lead strong{color:var(--text);font-weight:600}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* Linia de trust: un singur rand mono care se infasoara natural pe DE si RU,
   inlocuieste cele 3 pastile care se rupeau in 3 randuri */
/* flux inline normal, nu flex: flex-ul manca spatiile dintre text si <b>
   si rupea randul urat pe limbile cu text lung */
.trustline{display:block;margin-top:34px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;line-height:2;color:var(--muted)}
.trustline b{color:var(--text);font-weight:600}
.trustline .sep{color:var(--muted-2);margin:0 10px}
/* Fiecare afirmatie se rupe ca bloc, nu pe la mijloc. Altfel "Hosted in Iceland,"
   ramanea agatat pe un rand si "outside the EU" cadea singur pe urmatorul. */
.trustline .ti{display:inline-block;white-space:nowrap}
@media(max-width:420px){.trustline .ti{white-space:normal}}

/* ---- Diagrama enclavei ---- */
.enclave{position:relative;max-width:430px;margin:0 auto;width:100%}
.enclave svg{display:block;width:100%;height:auto}

/* ---- Linia care se cripteaza sub ochii vizitatorului ----
   Ideea fondatorului, si e cea corecta: NU decriptam. Un mesaj citibil intra in
   perimetru si iese cifrat. Spune singur ce face produsul, si inverseaza clișeul
   de film in care textul se descifra.
   Latimea e rezervata cu un pseudo-element care tine textul in clar, ca schimbarea
   caracterelor sa nu miste layoutul (fara asta, hero-ul tremura la fiecare ciclu). */
.hero-art{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}

/* ---- Motto, inscriptia enclavei ----
   Sta deasupra emblemei, in coloana de arta: mono mic, sentence-case, cu accentul
   teal doar pe a doua propozitie. Aceeasi clasa de greutate cu .cipher-note de sub
   diagrama, deci H1 ramane singurul accent bold de pe primul ecran. <br>-ul din
   i18n se pastreaza: rupe intre propozitii, iar rusa, germana si albaneza cad pe
   doua randuri curate. Intrarea e legata prin :has() de starile prep/live pe care
   JS-ul le pune deja pe .enclave, deci fara JS sau cu reduced motion textul e
   static si vizibil, nu invizibil. */
.hero-motto{margin:0 0 6px;padding:0 8px;max-width:430px;font-family:var(--mono);font-size:.8rem;line-height:1.7;letter-spacing:.04em;color:var(--muted);text-align:center;text-wrap:balance}
.hero-motto .hl{color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .hero-art:has(.enclave.prep) .hero-motto{opacity:0;transform:translateY(6px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .hero-art:has(.enclave.live) .hero-motto{opacity:1;transform:none}
}
.cipher{margin:18px auto 0;text-align:center;max-width:100%;min-width:0}
.cipher-line{position:relative;display:inline-block;font-family:var(--mono);font-size:.82rem;
  letter-spacing:.06em;color:var(--text);margin:0;white-space:pre;overflow-wrap:normal;
  transition:color .35s ease}
.cipher-line::before{content:attr(data-plain);display:block;height:0;overflow:hidden;visibility:hidden}
/* linia e un carusel de mesaje de lungimi diferite. Latimea se rezerva dupa cel
   mai LUNG mesaj al limbii, nu dupa primul, altfel hero-ul se largea si se
   stramta la fiecare rotatie. Fallback pe data-plain pentru paginile care inca
   nu au atributul (welcome.html din overlay). */
.cipher-line[data-widest]::before{content:attr(data-widest)}
.cipher-line[data-state="cipher"]{color:var(--accent)}
/* eticheta sta DEASUPRA liniei cifrate, ca toate etichetele-index din pagina
   (sec-idx peste h2, frow-idx peste h3, .tag peste pret): mono, uppercase,
   lipita de continutul ei, cu aerul intre diagrama si bloc, nu intre ele.
   muted, nu muted-2: la .72rem pe fundalul de baza muted-2 cadea sub 4.5:1. */
.cipher-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted);
  margin:0 0 7px;text-transform:uppercase}
@media(max-width:420px){
  /* pe ecran ingust mesajul monospace nu incape la .82rem */
  .cipher-line{font-size:.72rem;letter-spacing:.02em}
  .cipher-note{font-size:.66rem;letter-spacing:.06em}
}
@media(max-width:340px){
  .cipher-line{font-size:.64rem;letter-spacing:0}
  /* nota e o propozitie intreaga („criptat inainte sa plece de pe dispozitiv"),
     nu doua cuvinte. Pe germana si albaneza se rupea in doua randuri sub 340px,
     unde spatiul util e 276px si nota cere 294px. Fara letter-spacing incape. */
  .cipher-note{font-size:.62rem;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
  /* fara animatie, rămâne mesajul in clar plus explicatia de dedesubt */
  .cipher-line{color:var(--text)!important}
}
/* fara JS sau cu reduced motion, parantezele sunt desenate din start */
.enc-br path{stroke-dasharray:none}
/* tranzitia sta pe starea de baza, nu pe .live: altfel, cand diagrama iese din
   viewport si `live` cade, parantezele sar instant de la desenat la nedesenat si
   se vede o clipire la scroll lent. */
.enclave.prep .enc-br path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--ease) .15s}
.enclave.live .enc-br path{stroke-dashoffset:0}
/* punctul respira doar cat e hero-ul in viewport */
.enc-halo{transform-box:fill-box;transform-origin:center}
.enclave.live .enc-halo{animation:encbreathe 5s ease-in-out infinite}
@keyframes encbreathe{0%,100%{transform:scale(1);opacity:.10}50%{transform:scale(1.28);opacity:.20}}
.enc-msg circle{transform-box:fill-box;transform-origin:center}
.enclave.live .enc-msg .m1{animation:encdrift 7s ease-in-out infinite}
.enclave.live .enc-msg .m2{animation:encdrift 7s ease-in-out 3.5s infinite reverse}
@keyframes encdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-5px)}}
@media(prefers-reduced-motion:reduce){
  .enclave.prep .enc-br path{stroke-dasharray:none;stroke-dashoffset:0}
  .enclave.live .enc-halo,.enclave.live .enc-msg .m1,.enclave.live .enc-msg .m2{animation:none}
}

/* Sub 880px hero-ul se stivuieste si diagrama cu linia cifrata trec PRIMELE,
   vizual, prin order. DOM-ul ramane h1-first pentru SEO si screen readers
   (diagrama e aria-hidden). Diagrama scade la 220px ca titlul si butonul de
   demo sa ramana in primul ecran, altfel hook-ul ar ingropa mesajul.
   Blocul sta DUPA regulile de baza .enclave si .cipher: inainte statea
   inaintea lor si, la specificitate egala, baza (430px, 18px) castiga prin
   ordine. Pe 601-880px diagrama ramanea la 430px, fix ce interzice
   comentariul de mai sus. Bug de cascada, prins pe randarea reala la 768. */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-art{order:-1}
  .enclave{max-width:220px}
  .cipher{margin-top:12px}
}

/* ---- Sectiuni ---- */
section{padding:var(--rh-3xl) 0}
section[id]{scroll-margin-top:80px}
/* capul nou de sectiune: index mono pe hairline, aliniat stanga.
   Stanga rezista la germana si rusa, centrat se rupea urat.
   Tracking-ul mono are trei trepte, nu valori din ochi:
   .14em etichete-index uppercase (sec-idx, ledger-idx, frow-idx, tag, kicker,
         cipher-note, h4 din footer),
   .08em headere de tabel si badge-ul eyebrow (uppercase dens, in chenar),
   .04-.06em mono inline la marime de text (trustline, foot-status, lang-btn,
         btn-app, etichetele generate din tabelul stivuit). */
.sec-head{max-width:720px;margin:0 0 var(--rh-xl)}
.sec-idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--rh-s);padding-top:var(--rh-s);border-top:1px solid var(--border-strong)}
.sec-head p{color:var(--muted);font-size:1.04rem;margin-bottom:0}
/* capul vechi centrat ramane valid pentru 404 si security */
.section-head{max-width:680px;margin:0 auto var(--rh-xl);text-align:center}
.section-head p{color:var(--muted);font-size:1.05rem}

/* ---- Reveal la scroll ----
   Doar opacity si transform. Fara will-change: clasele se scot din JS dupa
   tranzitie, deci nu ramane nimic rezidual pe elemente. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease) var(--d,0ms),transform var(--dur) var(--ease) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---- Registrul de principii (#how) ----
   Randuri pe hairlines, nu carduri. 9 carduri vechi au devenit 3 randuri. */
.ledger{border-top:1px solid var(--border)}
.ledger-row{display:grid;grid-template-columns:88px 1fr 1.6fr;gap:28px;padding:var(--rh-l) 0;border-bottom:1px solid var(--border);align-items:start}
.ledger-idx{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;color:var(--accent);padding-top:6px}
.ledger-row h3{margin:0}
.ledger-row p{color:var(--muted);margin:0;max-width:56ch}
@media(max-width:820px){
  .ledger-row{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .ledger-idx{padding-top:0}
}

/* ---- Randuri de feature cu diagrama (#features) ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:var(--rh-2xl) 0;border-bottom:1px solid var(--border)}
.frow:last-child{border-bottom:none}
.frow-idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.frow p{color:var(--muted);margin:0;max-width:52ch}
.frow-art{display:flex;justify-content:center}
.frow-art svg{width:100%;max-width:340px;height:auto;color:var(--border-strong)}
.frow:nth-child(even) .frow-art{order:-1}
@media(max-width:820px){
  .frow{grid-template-columns:1fr;gap:26px;padding:var(--rh-xl) 0}
  .frow:nth-child(even) .frow-art{order:0}
  .frow-art svg{max-width:280px}
}

/* ---- Grid si carduri (folosite de paginile de limba si de ghiduri) ---- */
.grid{display:grid;gap:18px;min-width:0}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
@media(max-width:620px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:border-color .15s ease,transform .15s ease;min-width:0}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
a.card{color:inherit;display:block}
a.card:hover{text-decoration:none;border-color:var(--accent)}
a.card h3{transition:color .15s ease}
a.card:hover h3{color:var(--accent)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);margin:0}

/* ---- Banda alternativa ---- */
.band{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---- Tabel comparativ, stilizat ca fisa de specificatii ---- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:transparent;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--border)}
.tbl th{background:var(--surface);font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tbl th:nth-child(2){color:var(--accent)}
.tbl td:not(:first-child),.tbl th:not(:first-child){text-align:center}
.tbl td:first-child{color:var(--text)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(20,25,36,.5)}
.yes{color:var(--muted);font-weight:600}
.tbl td:nth-child(2){background:rgba(52,211,190,.035)}
.tbl td:nth-child(2).yes{color:var(--accent);font-weight:700}
.no{color:var(--muted)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll .tbl{min-width:640px}

/* ---- Tabelul comparativ pe ecran ingust: registru stivuit ----
   Sub 700px cele 4 coloane nu incap fara scroll lateral, iar scrollul ascundea
   fix comparatia care vinde: coloana Sovryk si concurenta nu se vedeau
   niciodata impreuna pe telefon. Fiecare rand devine un bloc: capabilitatea
   ca titlu, apoi trei linii eticheta/valoare cu valorile aliniate dreapta.
   Sovryk primul, pe banda teal; concurenta gri dedesubt. Ochiul scaneaza
   coloana valorilor de sus in jos si vede "da" teal peste "nu" gri de sase
   ori la rand: inauntru viu, in afara sters, sistemul enclavei pe comparatie.
   Scoped cu :has(td.cap): se aplica DOAR tabelului comparativ de pe
   landinguri. Tabelele legale (dpa, privacy, security) nu au td.cap si raman
   neatinse. Browserele fara :has raman pe tabelul cu scroll, functional.
   Semantica: sub breakpoint display:block pierde semantica nativa de tabel;
   rolurile ARIA care o pastreaza (role=table/rowgroup/row/columnheader/cell)
   se adauga in HTML din bucla principala, pasii in RESURSE-DESIGN/TABEL.md.
   Pana atunci, cititoarele citesc eticheta generata (content:attr) inaintea
   fiecarei valori, deci sensul nu se pierde nici acum. */
@media screen and (max-width:700px){
  /* Indiciul de scroll (masca de margine) porneste de la latimea la care
     tabelul de 640px chiar incepe sa scrolleze (640 + 2x22 padding = 684),
     nu de la 600: intre 601 si 684 masca lipsea desi tabelul scrolla. */
  .tbl-scroll{-webkit-mask-image:linear-gradient(90deg,#000 91%,transparent);mask-image:linear-gradient(90deg,#000 91%,transparent)}
  /* Tabelele de proza pe exact 2 coloane (security.html "What / How it's
     protected", dpa "Element / Detaliu") nu au nevoie de min-width 640:
     textul se infasoara natural si tot tabelul incape fara scroll lateral.
     Masca de margine (indiciul de scroll) se stinge pe ele, altfel ar
     estompa degeaba marginea dreapta a unui tabel care nu mai scrolleaza. */
  .tbl-scroll .tbl:has(tr>td:nth-child(2):last-child){min-width:0}
  .tbl-scroll:has(tr>td:nth-child(2):last-child){-webkit-mask-image:none;mask-image:none}
  /* coloana a doua e proza in tabelele astea, nu verdicte: centrata pe trei
     randuri se citea greu, stanga respira */
  .tbl:has(tr>td:nth-child(2):last-child) td:not(:first-child),
  .tbl:has(tr>td:nth-child(2):last-child) th:not(:first-child){text-align:left}
  .tbl-scroll:has(td.cap){overflow:visible;-webkit-mask-image:none;mask-image:none}
  .tbl-scroll .tbl:has(td.cap){min-width:0}
  .tbl:has(td.cap){display:block;border:none;border-top:1px solid var(--border)}
  /* header-ul vizual dispare (fiecare celula isi poarta eticheta), dar ramane
     in arborele de accesibilitate prin clip, nu prin display:none */
  .tbl:has(td.cap) thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* si randul si celulele header devin block, altfel tr-ul intern pastreaza
     latimea de tabel (640px+) si iese din viewport chiar si sub clip */
  .tbl:has(td.cap) thead tr,.tbl:has(td.cap) thead th{display:block;width:1px;padding:0;border:0}
  .tbl:has(td.cap) tbody{display:block}
  .tbl:has(td.cap) tbody tr{display:block;padding:16px 0 18px;border-bottom:1px solid var(--border)}
  .tbl:has(td.cap) td{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;align-items:baseline;padding:7px 10px;border-bottom:none;text-align:left}
  .tbl:has(td.cap) td::before{content:attr(data-label);font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
  .tbl:has(td.cap) td.cap{display:block;padding:0 10px 8px;font-weight:600}
  .tbl:has(td.cap) td.cap::before{content:none}
  /* banda Sovryk: singurul accent al sectiunii; hoverul de desktop se stinge */
  .tbl:has(td.cap) tbody tr:hover td{background:transparent}
  .tbl:has(td.cap) td.own,.tbl:has(td.cap) tbody tr:hover td.own{background:rgba(52,211,190,.07)}
  .tbl:has(td.cap) td.own::before{color:var(--accent)}
}
/* Peste breakpoint randurile-tinta de reveal doar se aprind din opacity:
   translateY pe display:table-row se randeaza inconsistent intre motoare. */
@media screen and (min-width:701px){
  .tbl tr.reveal{transform:none}
}
.proof-note{color:var(--muted);font-size:.92rem;max-width:640px;margin:26px 0 0;padding-left:14px;border-left:2px solid var(--accent)}
.proof-cta{margin-top:22px}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;min-width:0}
/* 980px, nu 780: la 780 planurile erau strangulate pe o coloana ingusta si
   cresteau pe verticala, cu bifele rupte pe doua randuri degeaba.
   Late si scunde = fise de specificatii, nu turnuri. */
.price-grid.two{grid-template-columns:repeat(2,1fr);max-width:980px;margin:0 auto}
/* stivuit pe o coloana, tick-urile de colt ies 8px deasupra planului Business
   si ajungeau la 12px de cardul Personal, pareau lipite de el. Aer suplimentar. */
@media(max-width:860px){
  .price-grid{grid-template-columns:1fr}
  .price-grid.two{grid-template-columns:1fr;max-width:560px}
  .plan.featured{margin-top:12px}
}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 30px;display:flex;flex-direction:column;min-width:0}
/* Planul evidentiat: cu colturi drepte, inelul dublu (border + box-shadow 1px)
   se citea ca un chenar gros de 2px, nu ca un accent. Accentul e acum patru
   tick-uri de colt detasate la 8px, citarea directa a logo-ului [ • ]: planul
   Business e inauntrul perimetrului. Bordura cardului coboara la neutru ferm
   (border-strong), o treapta peste planul Personal; bordura teal plus tick-uri
   ar fi fost doua rame, adica fix aglomerarea pe care tick-urile o inlocuiesc.
   Glow-ul discret ramane. */
.plan.featured{position:relative;border-color:var(--border-strong);box-shadow:0 24px 60px -30px rgba(52,211,190,.35)}
.plan.featured::after{content:"";position:absolute;inset:-8px;pointer-events:none;background:
  linear-gradient(var(--accent),var(--accent)) top left/16px 2px no-repeat,
  linear-gradient(var(--accent),var(--accent)) top left/2px 16px no-repeat,
  linear-gradient(var(--accent),var(--accent)) top right/16px 2px no-repeat,
  linear-gradient(var(--accent),var(--accent)) top right/2px 16px no-repeat,
  linear-gradient(var(--accent),var(--accent)) bottom left/16px 2px no-repeat,
  linear-gradient(var(--accent),var(--accent)) bottom left/2px 16px no-repeat,
  linear-gradient(var(--accent),var(--accent)) bottom right/16px 2px no-repeat,
  linear-gradient(var(--accent),var(--accent)) bottom right/2px 16px no-repeat}
.plan .tag{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:600;margin-bottom:6px;overflow-wrap:anywhere}
/* 1.8rem, nu 2.2: suma reala e "Private pricing", text, nu cifra. La 2.2rem
   cuvantul mare langa "pricing" mic arata strambat si umfla cardul pe inaltime. */
.plan .amt{font-size:1.8rem;font-weight:700;margin:4px 0;letter-spacing:-0.02em;overflow-wrap:anywhere}
.plan .amt span{font-size:1rem;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:14px 0 20px;flex:1}
.plan li{padding:5px 0 5px 24px;position:relative;color:var(--muted)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.plan .btn{width:100%;justify-content:center}

/* ---- Cutia de demo + formular ---- */
.cta-box{background:linear-gradient(165deg,var(--surface),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);padding:46px 44px;text-align:center;max-width:680px;margin:0 auto}
.form-row{display:flex;gap:10px;max-width:460px;margin:22px auto 0}
@media(max-width:560px){.form-row{flex-direction:column}}
.form-row input{flex:1;min-width:0;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem}
/* intre muted si muted-2: 6.5:1 pe --bg (default-ul UA cadea sub 4.5),
   dar vizibil mai stins decat textul introdus */
.form-row input::placeholder{color:#8a97a9}
.form-row input:focus{outline:none;border-color:var(--accent)}
.form-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* honeypot fara stil inline, ca sa treaca de CSP strans pe style-src */
.hp{display:none}
#demo-status[data-state="ok"]{color:var(--accent)}
#demo-status[data-state="err"]{color:var(--danger)}
#demo-status:focus{outline:2px solid var(--accent);outline-offset:3px}
.subnote{color:var(--muted);font-size:.88rem}

/* ---- Lista de linkuri (Learn more) ---- */
.linklist{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border-top:1px solid var(--border)}
@media(max-width:720px){.linklist{grid-template-columns:1fr}}
.linklist a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px solid var(--border);color:var(--text);font-weight:550;min-height:44px}
.linklist a:hover{text-decoration:none;color:var(--accent)}
.linklist a .arr{color:var(--muted-2);font-family:var(--mono);flex-shrink:0;transition:transform .15s ease,color .15s ease}
.linklist a:hover .arr{color:var(--accent);transform:translateX(4px)}
.linklist a small{display:block;color:var(--muted);font-weight:400;font-size:.88rem;margin-top:2px}

/* ---- Articole (paginile de ghid si legale) ----
   Paddingul lateral sta pe articol, nu pe un .wrap: paginile legale nu au
   .wrap deloc (textul atingea literalmente marginea ecranului pe telefon),
   iar pe cele SEO .article venea dupa .wrap in foaie si ii anula paddingul
   prin shorthand. Un singur padding, aici, acopera ambele cazuri.
   Latimea: 660px de continut = ~75 de caractere pe rand la 1.06rem, in banda
   de citit confortabil. La 760px ieseau ~90 de caractere, obositor fix pe
   documentele pe care un avocat le citeste integral. */
.article{max-width:704px;margin:0 auto;padding:var(--rh-2xl) 22px}
.article .kicker{color:var(--accent);font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;margin-bottom:12px}
.article h1{margin-bottom:16px;font-size:clamp(1.9rem,4vw,2.8rem)}
/* muted, nu muted-2: la .9rem pe fundalul de baza muted-2 dadea 4.2:1 */
.article .meta{color:var(--muted);font-size:.9rem;margin-bottom:var(--rh-l);border-bottom:1px solid var(--border);padding-bottom:20px}
/* fraza de deschidere de pe legal.html si ghiduri: o jumatate de treapta
   peste corp, muted, ca sa introduca fara sa concureze cu h1 */
.article .lead{font-size:1.18rem;color:var(--muted)}
/* hairline peste fiecare h2: acelasi registru ca sec-idx si ledger de pe
   landing, si un reper de scanare in documente de 3000 de cuvinte */
.article h2{margin-top:var(--rh-xl);padding-top:26px;border-top:1px solid var(--border);font-size:1.6rem}
.article h3{margin-top:28px;font-size:1.2rem}
.article p,.article li{color:#cdd6e2;font-size:1.06rem}
/* Sirurile care nu se rup singure: liniile de semnatura din DPA (`____________`),
   compusele lungi din germana, adresele de mail. La 320px impingeau pagina la 411px
   latime, iar Chrome pe telefon "rezolva" asta largind viewportul, adica micsorand
   tot textul. Prins de QA-ul mobil dupa ce documentele legale au iesit pe 8 limbi. */
.article p,.article li,.article h1,.article h2,.article h3,.tbl td,.tbl th{overflow-wrap:anywhere}
.article .small{font-size:.9rem}
.article ul,.article ol{padding-left:22px}
.article li{margin:8px 0}
/* listele-inventar din documentele legale (ce NU facem, ce date exista,
   masurile art. 32): randuri pe hairline, acelasi registru ca #how de pe
   landing. Bulina generica spunea "lista oarecare"; registrul spune
   "inventar verificabil", fix tonul pe care il cauta un avocat. */
.doc-list,.article .doc-list{list-style:none;padding:0;margin:18px 0 26px;border-top:1px solid var(--border)}
.doc-list li,.article .doc-list li{margin:0;padding:11px 0;border-bottom:1px solid var(--border)}
.article blockquote{border-left:3px solid var(--accent);margin:24px 0;padding:6px 20px;color:var(--muted);font-style:italic;background:var(--surface)}
.callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:20px 22px;margin:28px 0}
.callout strong{color:var(--text)}
.faq{margin-top:20px}
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 18px;margin-bottom:12px;background:var(--surface)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--text)}
.faq details[open] summary{border-bottom:1px solid var(--border);margin-bottom:12px}
/* adresa .onion: se rupe oriunde, altfel iese din ecran pe telefon */
.onion-line{margin-top:26px}
.onion-line code{display:inline-block;max-width:100%;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;font-family:var(--mono);font-size:.9rem;color:var(--accent)}
.related{margin-top:48px;padding-top:28px;border-top:1px solid var(--border)}
.related a{display:block;padding:6px 0}

/* ---- Footer ---- */
footer{border-top:1px solid var(--border);padding:52px 0 40px;color:var(--muted)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;margin-bottom:36px}
.foot-col{min-width:0}
.foot-col.foot-about{max-width:280px}
.foot-col.foot-about .brand{margin-bottom:12px}
.foot-col h4{color:var(--text);font-size:.82rem;font-family:var(--mono);margin:0 0 12px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.foot-col a{display:block;color:var(--muted);font-size:.92rem;padding:4px 0}
.foot-col a:hover{color:var(--text);text-decoration:none}
.foot-bottom{border-top:1px solid var(--border);padding-top:22px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* linia de status: infrastructura care isi arata pulsul */
.foot-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.foot-status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* Sub 860 flex-wrap arunca coloana Contact singura pe un rand, orfana sub
   restul. Grid pe 2 coloane: About pe tot randul, apoi coloanele perechi. */
@media(max-width:860px){
  .foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
  .foot-col.foot-about{grid-column:1/-1;max-width:460px}
}

/* ---- Mobil ---- */
@media(max-width:600px){
  .wrap{padding:0 16px}
  /* dupa .wrap, ca pe paginile SEO (.article.wrap) sa castige articolul */
  .article{padding:var(--rh-l) 16px}
  section{padding:var(--rh-2xl) 0}
  .sec-head{margin-bottom:var(--rh-l)}
  .section-head{margin-bottom:var(--rh-l)}
  .section-head p,.sec-head p{font-size:1rem}
  .nav .wrap{height:56px}
  .nav-links{gap:10px}
  .brand{font-size:1.05rem}
  .btn{padding:10px 15px;font-size:.9rem}
  .tbl th,.tbl td{padding:11px 12px}
  .hero{padding:34px 0 44px}
  .hero-grid{gap:22px}
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.6rem)}
  .hero p.lead{font-size:1.02rem;margin-bottom:22px}
  .eyebrow{font-size:.72rem;margin-bottom:14px}
  .cta-row{gap:10px}
  /* Trei butoane stivuite ar impinge titlul si actiunea principala sub fold pe
     telefon. Deci primary pe toata latimea, iar cele doua secundare impart un
     rand: aceeasi inaltime totala ca inainte, cu un buton in plus. */
  .cta-row .btn{flex:1 1 100%;justify-content:center}
  /* Baza 40%, nu 50% minus gap: cu 50% suma iesea exact latimea randului si o
     rotunjire de sub un pixel le arunca pe randuri separate. Cu 40% incap sigur,
     apoi flex-grow le umfla egal pana umplu randul. */
  .cta-row .btn-ghost,.cta-row .btn-app{flex:1 1 40%;min-width:0}
  .cta-row .btn-app{font-size:.76rem;letter-spacing:.02em;padding:12px 10px;text-align:center}
  .trustline{margin-top:26px;font-size:.74rem}
  .trustline .sep{margin:0 8px}
  .enclave{max-width:172px}
  .hero-motto{font-size:.74rem;letter-spacing:.02em;line-height:1.6;margin-bottom:2px}
  .card{padding:22px}
  .plan{padding:20px 22px}
  .cta-box{padding:30px 20px}
  .foot-grid{gap:22px}
  .foot-bottom{flex-direction:column;gap:8px}
}
@media(max-width:400px){
  /* doar padding: .amt ramane la 1.8rem din regula de baza. Vechiul override
     de 1.9rem era rest din scara 2.4rem si ar fi MARIT pretul pe ecranul mic. */
  .plan{padding:18px}
}
@media(max-width:380px){
  .lang-btn{padding:6px 10px;font-size:.74rem;gap:4px;min-height:44px}
  .lang-btn svg{display:none}
  .btn{padding:9px 12px;font-size:.86rem}
}
@media(max-width:360px){
  /* franceza are 40 de caractere pe prima propozitie; la .68rem intra intr-un
     singur rand si la 320px, fara sa se mai rupa a treia oara */
  .hero-motto{font-size:.68rem;letter-spacing:.01em}
  .brand span:not(.mark){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-links{gap:8px}
  /* ecran foarte mic: hero-ul se comprima ca hook + titlu + cat mai mult din
     lead sa incapa in primul ecran; sub 568px inaltime nu incape onest si
     butonul, ramane la un flick distanta */
  .hero{padding-top:24px}
  .hero-grid{gap:18px}
  .enclave{max-width:140px}
  .cipher{margin-top:8px}
  .eyebrow{font-size:.64rem;letter-spacing:.05em;padding:5px 10px;margin-bottom:12px}
  .hero h1{font-size:1.78rem}
  .hero p.lead{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .nav-menu{transition:none}
  .progress{display:none}
}

/* ---- High contrast ---- */
@media(prefers-contrast:more){
  :root{--muted:#c3cddb;--muted-2:#9aa7b8;--border:#3a4557;--border-strong:#55637a}
  .btn-ghost{border-color:var(--muted-2)}
  .hero::before,.hero::after{display:none}
}

/* ---- Print / Save as PDF ----
   Elementele revelate la scroll trebuie sa fie vizibile si daca pagina se
   printeaza inainte sa intre in viewport. */
@media print{
  .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}
  .nav,.nav-menu,.nav-toggle,.lang,.skip-link,.progress{display:none!important}
  body{background:#fff;color:#111}
  .card,.plan,.cta-box,.tbl{background:#fff;border-color:#ccc;box-shadow:none}
  .plan.featured::after{display:none}
  h1,h2,h3,h4,.brand,.plan .amt,.linklist a,.tbl td:first-child{color:#111}
  p,li,.section-head p,.sec-head p,.card p,.plan li,.muted,.ledger-row p,.frow p,.trustline,.proof-note{color:#333}
  /* selectorii de articol au specificitate peste p/li si ramaneau pe culorile
     de ecran: text #cdd6e2 pe hartie alba, adica pagini legale ilizibile
     fix la printarea de dinaintea semnarii. Acoperiti explicit. */
  .article p,.article li,.article blockquote,.article .lead,.article .meta,.faq summary{color:#222}
  .callout,.faq details,.article blockquote,.eyebrow{background:#fff;border-color:#bbb}
  .callout strong,.faq summary,.tbl td{color:#111}
  .yes,.no,.eyebrow{color:#333}
  .eyebrow .dot{background:#555}
  .sec-idx,.ledger-idx,.frow-idx,.plan .tag,.kicker,.article .kicker,.cipher-note{color:#555}
  .hero-motto,.hero-motto .hl{color:#333}
  a{color:#111;text-decoration:underline}
  section{padding:24px 0;break-inside:avoid}
  .article{padding:0 0 24px}
  .hero::before,.hero::after{display:none}
  .enclave{display:none}
  .tbl td:nth-child(2){background:#f2f2f2}
  .tbl td:nth-child(2).yes{color:#111}
  .article h2,.article .meta{border-color:#ccc}
  .tbl th{background:#eee;color:#333}
  .tbl-scroll{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .tbl-scroll .tbl{min-width:0}
  .foot-status .dot{background:#333}
}

/* Linkurile din corpul unui articol se disting doar prin culoare, ceea ce axe
   semnaleaza ca „serious": cine nu percepe culoarea nu vede ca e link. Le dam
   subliniere discreta. Navigatia, footerul si listele au deja alt tratament. */
.article p > a,.article li > a,.article blockquote a,.article td > a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.article p > a:hover,.article li > a:hover,.article td > a:hover{
  text-decoration-color:var(--accent)}

/* Tabelele de referinta (proza in fiecare celula, fara marcaje yes/no) mosteneau
   `text-align:center` de la tabelele de comparatie, unde valorile sunt scurte.
   Pe fraze intregi arata rupt. Comparatiile isi pastreaza centrarea. */
.tbl:not(:has(td.yes)):not(:has(td.no)) td:not(:first-child),
.tbl:not(:has(td.yes)):not(:has(td.no)) th:not(:first-child){text-align:left}
/* si culoarea, nu doar alinierea: coloana 2 primea accentul turcoaz al coloanei
   „Sovryk" din tabelul comparativ, deci „ce spune legea" arata ca pozitia noastra. */
.tbl:not(:has(td.yes)):not(:has(td.no)) td:nth-child(2){background:transparent}
.tbl:not(:has(td.yes)):not(:has(td.no)) th:nth-child(2){color:var(--ink,inherit)}