/* ==========================================================================
   LEGAL: terms.html e privacy.html
   ==========================================================================
   Erano due fogli di stile INLINE, quasi identici, copiati da una pagina
   all'altra: la palette per chain era ferma a due reti su cinque (chi
   navigava su BNB apriva i Termini e la pagina tornava verde Robinhood), e i
   font arrivavano da Google mentre tutto il resto del sito e' passato al font
   di sistema. Due copie divergono sempre, ed erano gia' divergenti.

   Qui c'e' un foglio solo, con tre cambiamenti oltre all'unificazione:

   1. LE CINQUE CHAIN. La stessa struttura di variabili di index.html, con
      tutte le reti. Una pagina legale che cambia colore rispetto al resto del
      sito e' esattamente il tipo di dettaglio che fa dubitare del resto.
   2. LA STESSA SCENA. Alone della rete in alto, vignetta, grana: sono le tre
      leve del resto del sito, e senza queste pagine sembravano appartenere a
      un altro prodotto.
   3. SI LEGGE. Misura di riga sui 70 caratteri, interlinea 1.75, numerazione
      delle sezioni tirata fuori dal testo e messa a margine, e un indice
      appiccicato in cima su schermo largo. Un documento legale che nessuno
      riesce a leggere e' un documento legale che nessuno legge.
   ========================================================================== */

:root{
  --bg:#05070a;
  --panel:#0b0e12;
  --text:#e7ebef;
  --text-dim:#98a1ab;
  --text-mute:#66707e;
  --line:rgba(255,255,255,.075);
  --line-hi:rgba(255,255,255,.15);
  --green:#00a34f;
  --green-rgb:0,163,79;

  /* Font di sistema, come la landing e come l'applicazione. Sparisce anche un
     caricamento di rete: il testo non "salta" piu' quando il font arriva. */
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* Le cinque palette, identiche per struttura a quelle di index.html. */
:root[data-chain="arc"]{
  --bg:#050813;--panel:#090e1d;--text:#e6ebf5;--text-dim:#8791ab;
  --green:#3d7dff;--green-rgb:61,125,255;
}
:root[data-chain="bsc"]{
  --bg:#050505;--panel:#070706;--text:#f7f7f6;--text-dim:#a8a7a3;
  --green:#f0b90b;--green-rgb:240,185,11;
}
:root[data-chain="hyperevm"]{
  --bg:#040c0a;--panel:#070f0d;--text:#eef7f4;--text-dim:#8fa6a0;
  --green:#4fd6bd;--green-rgb:79,214,189;
}
:root[data-chain="solana"]{
  --bg:#050409;--panel:#0a0812;--text:#f0edf7;--text-dim:#9d96b0;
  --green:#9945ff;--green-rgb:153,69,255;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg);}
body{
  color:var(--text);font-family:var(--font-body);font-size:15px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  position:relative;min-height:100%;
}

/* ---- LA SCENA ----
   Gli stessi tre strati del resto del sito, ridotti all'essenziale: qui non
   c'e' niente da illuminare se non il testo. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(110% 55% at 50% -10%,
      rgba(var(--green-rgb),.13) 0%, rgba(var(--green-rgb),.045) 28%, transparent 68%),
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.5), transparent 55%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:soft-light;
  background-image: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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

.wrap{
  position:relative;z-index:2;
  max-width:760px;margin:0 auto;
  padding:clamp(40px,7vh,72px) 22px clamp(80px,12vh,120px);
}

a.back{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--text-dim);text-decoration:none;font-size:13.5px;
  padding:8px 15px 8px 12px;border-radius:99px;
  border:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background .3s var(--ease),transform .3s var(--ease);
}
a.back:hover{
  color:var(--text);border-color:rgba(var(--green-rgb),.45);
  background:rgba(255,255,255,.045);transform:translateX(-2px);
}
a.back small{color:var(--green);}

/* ---- TESTATA DEL DOCUMENTO ---- */
h1{
  font-size:clamp(30px,4.4vw,44px);font-weight:640;letter-spacing:-.04em;
  line-height:1.05;margin-top:34px;
  background:linear-gradient(180deg,#fff 8%,rgba(255,255,255,.74) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;margin-bottom:-.02em;
}
.updated{
  color:var(--text-mute);font-size:11px;font-family:var(--font-mono);
  letter-spacing:.16em;text-transform:uppercase;margin-top:16px;
  padding-bottom:34px;
  border-bottom:1px solid transparent;
  position:relative;
}
.updated::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--green-rgb),.5),var(--line) 40%,transparent);
}

/* ---- IL CORPO ----
   La numerazione ("1. Eligibility") viveva DENTRO il testo del titolo: a
   capo si allineava sotto il numero e la scansione del documento spariva.
   Qui il testo del titolo resta al suo posto e il numero esce nel margine
   sinistro, dove su schermo largo forma una colonna che si scorre con
   l'occhio. Sotto i 900px rientra in linea, perche' il margine non c'e'. */
h2{
  font-size:17px;font-weight:640;letter-spacing:-.025em;color:var(--text);
  margin:38px 0 12px;scroll-margin-top:24px;position:relative;
}
/* Solo i Termini sono un documento numerato: la Privacy ha titoli discorsivi
   e numerarli le darebbe una formalita' che non ha. Da qui la classe sul
   contenitore invece di una regola valida per entrambi. */
.wrap.numbered{counter-reset:sez;}
@media (min-width:900px){
  .wrap.numbered h2::before{
    content:counter(sez) ".";counter-increment:sez;
    position:absolute;left:-56px;width:44px;text-align:right;
    font-family:var(--font-mono);font-size:13px;font-weight:500;
    color:rgba(var(--green-rgb),.75);
    top:.22em;
  }
}
/* Sotto i 900px il margine sinistro non c'e' e il numero rientra in linea:
   toglierlo del tutto perderebbe la scansione del documento proprio dove
   serve di piu', cioe' su uno schermo dove si vede una sezione per volta. */
@media (max-width:899px){
  .wrap.numbered h2::before{
    content:counter(sez) ". ";counter-increment:sez;
    color:rgba(var(--green-rgb),.8);font-family:var(--font-mono);font-size:.85em;
  }
}

p{color:var(--text-dim);line-height:1.75;margin-bottom:12px;max-width:70ch;}
p strong,li b{color:var(--text);font-weight:600;}
ul{margin:10px 0 18px;padding-left:0;list-style:none;max-width:70ch;}
li{
  color:var(--text-dim);line-height:1.75;margin-bottom:9px;
  padding-left:22px;position:relative;
}
li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:2px;
  background:rgba(var(--green-rgb),.5);
}

a{color:var(--green);text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(var(--green-rgb),.4);
  transition:box-shadow .25s var(--ease);}
a:hover{box-shadow:inset 0 -2px 0 rgba(var(--green-rgb),.9);}
a.back{box-shadow:none;}

/* ---- CHIUSURA ---- */
.legal-foot{
  margin-top:56px;padding-top:24px;position:relative;
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--text-mute);
}
.legal-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),var(--line) 40%,transparent);
}
.legal-foot a{color:var(--text-dim);box-shadow:none;}
.legal-foot a:hover{color:var(--text);box-shadow:none;}

::selection{background:rgba(var(--green-rgb),.32);color:#fff;}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}

a:focus-visible{outline:2px solid rgba(var(--green-rgb),.75);outline-offset:3px;border-radius:4px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;}
}

/* =========================================================================
   LA PELLE, SULLE DUE PAGINE LEGALI.
   Termini e Privacy caricavano il solo legal.css e restavano il pezzo di
   sito serio dentro una discarica: chi ci arrivava dal piede usciva dal
   marchio e ci rientrava tornando indietro.
   Adesso caricano trash.css come tutto il resto, e queste regole fanno le
   due cose che quel foglio da solo non puo' fare qui: rimettono a posto il
   titolo (che qui usa background-clip:text e con un colore forzato sopra
   uscirebbe pieno a meta') e vestono le classi che esistono solo su queste
   due pagine.
   LA REGOLA CHE NON SI PIEGA, come sulla pagina di un token: il testo di un
   documento legale si LEGGE. Niente rotazioni sui paragrafi, niente ombre
   sul corpo, misura di riga invariata, interlinea invariata. Si sporcano le
   cornici, mai le righe.
   ========================================================================= */

:root[data-brand="trash"]{
  /* La palette della discarica prende il posto dell'accento della rete:
     sotto la pelle il fondo e' lo stesso su tutte e cinque. */
  --bg:#0e0f0a;
  --panel:#1c1d14;
  --text:#e6e0cd;
  --text-dim:#c3bda9;
  --text-mute:#9c9683;
  --green:#d2703a;
  --green-rgb:210,112,58;
  --line:rgba(230,224,205,.10);
  --line-hi:rgba(230,224,205,.20);
}

/* Il titolo era ritagliato su un gradiente bianco (background-clip:text con
   color:transparent). trash.css gli forza un colore, ma il ritaglio resta e
   il risultato dipendeva dall'ordine dei fogli: qui si spegne il ritaglio e
   il titolo torna una scritta dipinta piena. */
:root[data-brand="trash"] h1{
  background:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  -webkit-text-fill-color:var(--lt-osso) !important;
  color:var(--lt-osso) !important;
}

/* IL DOCUMENTO E' UN FOGLIO INCHIODATO A UNA PIASTRA.
   Fondo pieno sotto il testo: sul fondo della discarica (sacchi, pozzanghere,
   colature) un paragrafo lungo diventa illeggibile, e queste sono le due
   pagine in cui la leggibilita' non e' negoziabile. */
:root[data-brand="trash"] .wrap{
  background-color:var(--lt-lamiera);
  background-image:
    radial-gradient(circle at 14px 14px, #6a6448 0 2.4px, rgba(0,0,0,.5) 2.4px 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) 14px, #6a6448 0 2.4px, rgba(0,0,0,.5) 2.4px 4px, transparent 4px),
    radial-gradient(circle at 14px calc(100% - 14px), #6a6448 0 2.4px, rgba(0,0,0,.5) 2.4px 4px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #6a6448 0 2.4px, rgba(0,0,0,.5) 2.4px 4px, transparent 4px),
    linear-gradient(163deg,#24251a 0%,#1a1b12 46%,#2a2b1e 100%);
  border:2px solid #4a4632;
  border-radius:2px;
  box-shadow:5px 6px 0 rgba(0,0,0,.55);
  /* Il margine laterale non scende sotto i 16px a nessuna larghezza. */
  margin:clamp(16px,3vw,40px) auto clamp(40px,8vh,90px);
  max-width:820px;
  padding:clamp(28px,5vh,56px) clamp(18px,4vw,44px) clamp(48px,8vh,80px);
}

/* La colonna dei numeri delle sezioni esce nel margine: dentro una piastra
   con un padding suo, a -56px finiva sotto il bordo. Rientra. */
@media (min-width:900px){
  :root[data-brand="trash"] .wrap.numbered h2::before{ left:-42px; width:34px; }
}

/* Il bottone di ritorno: una targhetta imbullonata, non una pillola. */
:root[data-brand="trash"] a.back{
  border-radius:2px;
  border:2px solid #4a4632;
  background:var(--lt-lamiera-hi);
  color:var(--lt-osso);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
:root[data-brand="trash"] a.back:hover{
  background:#353626;
  border-color:var(--lt-ruggine);
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
:root[data-brand="trash"] a.back small{ color:var(--lt-ruggine-hi); }

/* La data e' un pezzo di nastro appiccicato in cima al documento. */
:root[data-brand="trash"] .updated{
  display:inline-block;
  margin-bottom:26px;
  padding:4px 10px;
  color:#241f14;
  background:var(--lt-nastro);
  font-weight:800;
  transform:rotate(-1deg);
  clip-path:polygon(1% 0,98% 3%,100% 92%,2% 100%);
}
:root[data-brand="trash"] .updated::after{ display:none; }

/* I titoli di sezione sono dipinti a pennello, ma DRITTI: trash.css li
   inclina di mezzo grado, e otto titoli storti dentro un documento legale
   si leggono come una pagina rotta invece che come uno stile. */
:root[data-brand="trash"] h2{
  transform:none !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.6) !important;
  color:var(--lt-lanterna) !important;
  border-left:3px solid var(--lt-ruggine);
  padding-left:10px;
  margin-left:-13px;
}

/* Il corpo del testo resta pulito: nessuna ombra, nessuna rotazione. */
:root[data-brand="trash"] p,
:root[data-brand="trash"] li{ text-shadow:none !important; transform:none !important; }
:root[data-brand="trash"] li::before{ background:var(--lt-ruggine-hi); border-radius:0; }

:root[data-brand="trash"] .legal-foot{
  border-top:2px solid #4a4632;
  padding-top:20px;
}
:root[data-brand="trash"] .legal-foot::before{ display:none; }