/* ============================================================
   LEUCOTEO — sistema visivo
   Quattro segni, ripetuti con disciplina:
   le due metà · ambra/acquamarina · l'angolo documentale · la frattura.
   Dal 15 settembre le parti diventano tre: il manager è blu
   elettrico. Le *metà* restano due — creator e azienda sono i due
   lati di una collaborazione — e il manager non è una terza metà:
   è chi può agire al posto di uno dei due.
   Tutto il resto è superficie, spazio e luce.
   ============================================================ */

:root{
  /* --- le parti --- */
  --cre:#FFB020;  --cre-rgb:255,176,32;   --cre-hi:#FFC759;  --cre-deep:#2A1802;
  --bra:#12C4AC;  --bra-rgb:18,196,172;   --bra-hi:#3AE7CD;  --bra-deep:#04231F;
  --su-cre:#1A0F00;  --su-bra:#00201C;

  /* Il terzo lato: gli influencer manager, blu elettrico (deciso il
     15 settembre). Non è ancora costruito — `MANAGER.md` — ma il
     colore si decide una volta sola, prima che qualcuno lo
     improvvisi in una pagina.

     Qui i due ruoli sono separati più nettamente che per ambra e
     acquamarina, e non è un capriccio: un blu elettrico *saturo* è
     intrinsecamente più scuro degli altri due a parità di
     saturazione. `--man` è l'identità — riempimenti, pastiglie, il
     segno — e regge il bianco sopra; `--man-hi` è il colore del
     **testo sul fondo scuro**, dove ambra e acquamarina usano le
     loro `-hi`. Usare `--man` come testo lungo lo spegnerebbe
     accanto agli altri due. Contrasti sul fondo: --man 6.1,
     --man-hi 10.2, bianco su --man 3.3. */
  --man:#4D8BFF;  --man-rgb:77,139,255;   --man-hi:#8FBBFF;  --man-deep:#04122E;
  --su-man:#000F26;

  /* --- i piani: il fondo non è mai un nero solo --- */
  --fondo:#08090A;
  --su-1:#0D0F10;
  --su-2:#131617;
  --su-3:#1A1D1F;
  --velo:rgba(255,255,255,.045);
  --velo-2:rgba(255,255,255,.07);

  /* --- bordi: si vedono solo se li cerchi --- */
  --bo:rgba(255,255,255,.075);
  --bo-2:rgba(255,255,255,.12);
  --bo-3:rgba(255,255,255,.18);
  --lin:rgba(255,255,255,.075);
  --lin-2:rgba(255,255,255,.12);
  --lin-3:rgba(255,255,255,.18);

  /* --- testo: ogni livello passa AA sul fondo --- */
  --bia:#FFFFFF;
  --gri-2:#D5D9DC;
  --gri:#A7AEB2;
  --gri-3:#8B9298;

  /* --- stato --- */
  --ok:#3AE7CD; --att:#FFB020; --male:#FF6B58; --neutro:#A7AEB2;

  /* --- raggi --- */
  --r-1:10px; --r-2:14px; --r-3:20px; --r-4:26px; --r-p:999px;

  /* --- ombre: morbide, mai nette --- */
  --om-1:0 1px 2px rgba(0,0,0,.4);
  --om-2:0 4px 16px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.4);
  --om-3:0 18px 48px rgba(0,0,0,.46), 0 2px 8px rgba(0,0,0,.34);
  --om-4:0 32px 80px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  /* il filo di luce in cima a una superficie */
  --filo:inset 0 1px 0 rgba(255,255,255,.06);

  /* --- tracking: misurato, mai spettacolare --- */
  --tr-xl:-.032em; --tr-l:-.022em; --tr-s:-.011em; --tr-uc:.075em;

  /* --- movimento: curve prese dal comportamento iOS ---
     std   = decelerazione pura, quello che usa quasi tutto
     sheet = l'apertura di un foglio modale, parte veloce e si posa
     molla = un piccolo scavalco, solo su cose che "arrivano"
     esci  = accelerazione, per ciò che se ne va                      */
  --e-std:cubic-bezier(.32,.72,0,1);
  --e-sheet:cubic-bezier(.32,.72,0,1);
  --e-molla:cubic-bezier(.34,1.42,.5,1);
  --e-esci:cubic-bezier(.4,0,1,1);
  --e-morbida:cubic-bezier(.4,0,.2,1);
  --curva:var(--e-std);
  --molla:var(--e-molla);

  --t-istante:.12s;   /* un feedback che deve sembrare immediato */
  --t-tocco:.2s;      /* risposta a una pressione */
  --t-entrata:.42s;   /* qualcosa che arriva o se ne va */
  --t-foglio:.5s;     /* un pannello che sale */
  --t-scena:.9s;      /* un cambio di stato importante */
  --sfalsa:55ms;      /* il ritardo fra un elemento e il successivo */
  --aperto:5px;

  /* --- misure --- */
  --fianco:280px;
  --fianco-min:96px;
  --fianco-orlo:14px;
  --dock-h:66px;
  --dock-gap:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --pollice:calc(var(--dock-h) + var(--dock-gap) * 2 + var(--safe-b));
  --z-fondo:0; --z-corpo:1; --z-sticky:30; --z-fianco:40;
  --z-velo:60; --z-foglio:70; --z-grana:81; --z-avviso:90;
}

/* il lato che stai guardando decide l'accento */
[data-lato="azienda"]{ --acc:var(--bra); --acc-hi:var(--bra-hi); --acc-rgb:var(--bra-rgb); --su-acc:var(--su-bra); --acc-deep:var(--bra-deep); }
/* Il terzo lato. Il colore era stato deciso il 15 settembre e messo
   fra i token prima che servisse — «un colore si decide una volta
   sola, prima che qualcuno lo improvvisi in una pagina». Qui viene
   collegato al lato, che è il giorno in cui serve davvero. */
[data-lato="manager"]{ --acc:var(--man); --acc-hi:var(--man-hi); --acc-rgb:var(--man-rgb); --su-acc:var(--su-man); --acc-deep:var(--man-deep); }
[data-lato="creator"]{ --acc:var(--cre); --acc-hi:var(--cre-hi); --acc-rgb:var(--cre-rgb); --su-acc:var(--su-cre); --acc-deep:var(--cre-deep); }
:root{ --acc:var(--cre); --acc-hi:var(--cre-hi); --acc-rgb:var(--cre-rgb); --su-acc:var(--su-cre); --acc-deep:var(--cre-deep); }

/* Il colore dell'altra metà. Il numero di una collaborazione non
   appartiene a chi la guarda: appartiene alle due parti insieme, e
   portarlo nel colore opposto lo dice senza scriverlo. */
[data-lato="creator"]{ --contro:var(--bra-hi); }
[data-lato="azienda"]{ --contro:var(--cre); }
:root{ --contro:var(--bra-hi); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* L'interfaccia è scura e basta: senza dirlo, il browser disegna
   barre di scorrimento, maniglie e controlli nativi in chiaro, e in
   mezzo a una pagina nera sembrano un errore. */
html{color-scheme:dark}

body{
  margin:0;background:var(--fondo);color:var(--bia);
  position:relative;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:var(--tr-s);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  overflow-x:hidden;
}
/* Le barre di scorrimento: sottili, dello stesso grigio dei bordi, e
   visibili solo quando servono. Su Firefox bastano due proprietà; su
   WebKit si disegnano a mano. */
*{scrollbar-width:thin;scrollbar-color:var(--bo-3, rgba(255,255,255,.18)) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
img,svg,video{max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
::selection{background:rgba(var(--acc-rgb),.26)}

/* ============================================================
   TIPOGRAFIA
   Una sola famiglia. La gerarchia viene da peso, misura e spazio.
   Il monospace è un dettaglio, non la voce narrante.
   ============================================================ */
.disp{font-weight:800;letter-spacing:var(--tr-xl);text-transform:lowercase;line-height:1.02}
.disp-m{font-weight:700;letter-spacing:var(--tr-l);text-transform:lowercase;line-height:1.14}
.uc{font-size:12px;font-weight:600;letter-spacing:var(--tr-uc);text-transform:uppercase;color:var(--gri-3)}
/* Niente monospace. Serviva a incolonnare le cifre, ma quello lo fa
   già font-variant-numeric: tabular-nums con il carattere del sito.
   Un font da terminale, con lo zero sbarrato, faceva sembrare un IBAN
   un output di console. */
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em;
  font-feature-settings:"cv02","cv03","cv04","cv11","ss01"}
.cifra{font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.sm{font-size:14px} .xs{font-size:13px}
.gri{color:var(--gri)} .gri2{color:var(--gri-2)}
.acc{color:var(--acc)} .verde{color:var(--bra-hi)} .ambra{color:var(--cre)}

/* Il logotipo: leuc + le due metà + teo.
   Il segno del marchio sostituisce la o centrale, quindi vive qui e non
   nelle singole pagine: se lo si copia, prima o poi una copia si perde. */
.marchio-w{display:inline-flex;align-items:baseline;font-family:Poppins,Inter,sans-serif;
  font-weight:600;letter-spacing:-.028em;text-transform:lowercase;line-height:1}
.marchio-w .o{position:relative;top:.008em;margin:0 .012em;width:.62em;height:.62em}
.o{display:inline-block;position:relative;border-radius:50%;overflow:hidden;flex:none;
  vertical-align:baseline}
.o::before,.o::after{content:"";position:absolute;top:0;bottom:0;width:50%}
.o::before{left:0;background:var(--cre);border-radius:99px 0 0 99px}
.o::after{right:0;background:var(--bra-hi);border-radius:0 99px 99px 0}

/* ============================================================
   IMPIANTO
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}
.riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.riga.tra{justify-content:space-between}
.pila{display:flex;flex-direction:column}
.crescita{flex:1}
.griglia{display:grid;gap:16px}

/* SEGNO 4 · LA COLONNATURA — struttura, non decorazione.
   Si nota solo dopo aver guardato la pagina. */
.colonne{
  position:fixed;inset:0;z-index:var(--z-fondo);pointer-events:none;
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(6,1fr);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 62%,transparent 96%);
          mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 62%,transparent 96%);
}
.colonne span{border-left:1px solid rgba(255,255,255,.017)}
.colonne span:last-child{border-right:1px solid rgba(255,255,255,.017)}

/* ============================================================
   LA SCENA — il fondo non è nero, è una stanza poco illuminata
   Due sorgenti fuori campo: ambra a sinistra, acquamarina a destra.
   Si sfiorano al centro e si spengono verso i bordi.

   Nota di costo: niente filter:blur() e niente animazione su questo
   strato. È grande quanto la finestra e fisso: sfocarlo o muoverlo
   obbliga il browser a ridisegnare tutto lo schermo a ogni fotogramma.
   I gradienti radiali sono già morbidi da soli.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 46% at 10% 0%,   rgba(255,176,32,.20) 0%,
                    rgba(255,176,32,.09) 38%, transparent 72%),
    radial-gradient(54% 44% at 94% 8%,   rgba(18,196,172,.16) 0%,
                    rgba(18,196,172,.07) 40%, transparent 74%),
    radial-gradient(70% 50% at 68% 100%, rgba(255,176,32,.14) 0%,
                    rgba(255,176,32,.06) 42%, transparent 72%),
    radial-gradient(48% 40% at 0% 76%,   rgba(18,196,172,.10) 0%, transparent 74%);
}
/* la vignettatura tiene lo sguardo al centro e spegne gli angoli */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(116% 90% at 50% 40%, transparent 30%,
              rgba(0,0,0,.4) 74%, rgba(0,0,0,.64) 100%);
}
/* il lato che si guarda scalda la stanza dalla sua parte */
body[data-lato="azienda"]::before{
  background:
    radial-gradient(58% 46% at 10% 0%,   rgba(18,196,172,.19) 0%,
                    rgba(18,196,172,.08) 38%, transparent 72%),
    radial-gradient(54% 44% at 94% 8%,   rgba(255,176,32,.12) 0%,
                    rgba(255,176,32,.05) 40%, transparent 74%),
    radial-gradient(70% 50% at 68% 100%, rgba(18,196,172,.14) 0%,
                    rgba(18,196,172,.06) 42%, transparent 72%),
    radial-gradient(48% 40% at 0% 76%,   rgba(255,176,32,.08) 0%, transparent 74%);
}

/* La grana c'era, ed è stata tolta: a opacità .028 con mix-blend-mode
   su uno strato fisso grande quanto la finestra non si vedeva, e
   costava una decina di fotogrammi al secondo sulla landing. */

/* LUCE — il colore si comporta come una sorgente fuori campo, non come vernice.
   Ambra da sinistra, acquamarina da destra: i due mondi si sfiorano al centro. */
/* L'alone di sezione. Niente filter:blur(): su un elemento alto 820 px
   costa un ridisegno a schermo intero per fotogramma e da solo faceva
   scendere la landing da 60 a 26 fps. I gradienti radiali con più fermate
   sono già morbidi, e a occhio non cambia niente. */
.alone{
  position:absolute;inset:-40% -20% auto;height:820px;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 52% at 12% 34%, rgba(var(--cre-rgb),.13) 0%,
                    rgba(var(--cre-rgb),.05) 42%, transparent 72%),
    radial-gradient(50% 56% at 88% 46%, rgba(var(--bra-rgb),.13) 0%,
                    rgba(var(--bra-rgb),.05) 44%, transparent 74%),
    radial-gradient(70% 44% at 50% 8%,  rgba(255,255,255,.035) 0%, transparent 74%);
}
.alone.cre{background:radial-gradient(52% 58% at 26% 34%, rgba(var(--cre-rgb),.15) 0%,
              rgba(var(--cre-rgb),.05) 42%, transparent 72%)}
.alone.bra{background:radial-gradient(52% 58% at 74% 34%, rgba(var(--bra-rgb),.15) 0%,
              rgba(var(--bra-rgb),.05) 42%, transparent 72%)}

/* SEGNO 3 · L'ANGOLO TAGLIATO
   Solo su ciò che è contratto, ricevuta, documento, archivio.
   Mai su una scheda qualsiasi: qui l'estetica è linguaggio. */
.tagliato{position:relative;border-radius:var(--r-3) 0 var(--r-3) var(--r-3)}
.tagliato::after{
  content:"";position:absolute;top:0;right:0;width:26px;height:26px;pointer-events:none;
  background:linear-gradient(to bottom left,
    var(--fondo) 0 calc(50% - .5px), var(--bo-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.tagliato.su2::after{background:linear-gradient(to bottom left,
    var(--su-1) 0 calc(50% - .5px), var(--bo-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px))}

/* l'occhiello di sezione: 03 · collaborazione. Niente §, niente codici. */
.marg{
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--gri-3);display:flex;align-items:center;gap:9px;margin-bottom:20px;
}
.marg b{color:var(--acc);font-weight:600;font-variant-numeric:tabular-nums}
.marg i{width:3px;height:3px;border-radius:50%;background:var(--bo-3);font-style:normal;flex:none}

/* IL FUORI REGISTRO — aperto = sfalsato, chiuso = allineato.
   Sopravvive come alone di luce, non più come doppio bordo pieno. */
.registro{
  position:relative;
  box-shadow:calc(var(--aperto) * -1) var(--aperto) 0 -1px rgba(var(--cre-rgb),.5),
             var(--aperto) calc(var(--aperto) * -1) 0 -1px rgba(var(--bra-rgb),.55),
             var(--om-2);
  transition:box-shadow var(--t-scena) var(--curva);
}
.registro.allineato{box-shadow:0 0 0 0 rgba(var(--cre-rgb),0), 0 0 0 0 rgba(var(--bra-rgb),0), var(--om-2)}
.registro.stretto{--aperto:3px}

/* SEGNO 4 · LA LINEA DI FRATTURA — usata con moderazione */
.frattura{
  height:13px;width:100%;background-color:var(--bo-2);opacity:.7;
  transition:background-color var(--t-scena) var(--curva),opacity var(--t-scena) var(--curva);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='13' viewBox='0 0 300 13'%3E%3Cpath d='M0 6.5 L26 3.4 L52 8.2 L74 4.1 L98 9 L126 5.2 L150 2.8 L178 7.6 L204 4.4 L232 8.8 L258 5 L280 3.2 L300 6.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='13' viewBox='0 0 300 13'%3E%3Cpath d='M0 6.5 L26 3.4 L52 8.2 L74 4.1 L98 9 L126 5.2 L150 2.8 L178 7.6 L204 4.4 L232 8.8 L258 5 L280 3.2 L300 6.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
}
.frattura.viva{background-color:var(--acc);opacity:1}

/* LO SCORPORO — i soldi in chiaro, quando li chiedi */
.tabulato{display:flex;flex-direction:column;gap:0}
.tab-r{display:flex;align-items:baseline;gap:12px;font-size:14.5px;padding:9px 0}
.tab-r .k{color:var(--gri);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tab-r .g{flex:1;height:1px;background:var(--bo);transform:translateY(-3px);min-width:20px}
.tab-r .n{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-r .n.giu{color:var(--bra-hi)}
.tab-r .n.acc{color:var(--acc)}
.tab-r .n.gri{color:var(--gri-3);font-weight:450}
.tab-r.tot{border-top:1px solid var(--bo-2);margin-top:8px;padding-top:14px}
.tab-r.tot .k{color:var(--bia);font-weight:600}
.tab-r.tot .n{color:var(--acc);font-size:19px;font-weight:700}

/* LA LINGUETTA D'ARCHIVIO — resta solo sui documenti */
.faldone{position:relative}
.faldone::before{
  content:attr(data-cod);position:absolute;top:0;left:26px;transform:translateY(-100%);
  background:var(--su-2);border:1px solid var(--bo);border-bottom:0;border-radius:10px 10px 0 0;
  padding:6px 14px 6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gri-3);line-height:1.2;white-space:nowrap;
}
.faldone.cre::before{color:var(--cre)}
.faldone.bra::before{color:var(--bra-hi)}
.faldone.contro::before{color:var(--contro)}

/* ============================================================
   SEGNO 1 · LE DUE METÀ
   Non è un logo: è lo stato della collaborazione.
   Separate → si avvicinano → combaciano quando il denaro è passato.
   ============================================================ */
.mon{display:inline-block;line-height:0;flex:none;width:24px}
.mon svg{display:block;width:100%;height:auto;overflow:visible}
.mon .l,.mon .r{transform-box:view-box;transform-origin:50px 50px}
.mon:not(.libera) .l,.mon:not(.libera) .r{transition:transform .62s var(--molla)}
.mon .l{fill:var(--cre);transform:translateY(6px)}
.mon .r{fill:var(--bra-hi);transform:translateY(-6px)}
.mon.on .l,.mon.on .r{transform:translateY(0)}
.mon.vuota .l,.mon.vuota .r{fill:#24282A}
@keyframes cerca-l{0%,100%{transform:translateY(8px)}50%{transform:translateY(1px)}}
@keyframes cerca-r{0%,100%{transform:translateY(-8px)}50%{transform:translateY(-1px)}}
@keyframes gira{to{transform:rotate(360deg)}}
.mon.cerca{animation:gira 3.4s linear infinite;transform-origin:50% 50%}
.mon.cerca .l{animation:cerca-l 1.2s ease-in-out infinite}
.mon.cerca .r{animation:cerca-r 1.2s ease-in-out infinite}

/* avatar: stessa grammatica del segno */
/* L'immagine di un profilo: un tondo pieno con dentro la sagoma di
   chi è. Ambra e una persona per il creator, acquamarina e una
   vetrina per l'azienda. Le due metà restano il marchio di
   Leucoteo e non finiscono qui dentro: come avatar erano
   illeggibili a 34 px e facevano sembrare tutti la stessa cosa. */
.ava{position:relative;display:inline-grid;place-items:center;vertical-align:middle;
  width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(0,0,0,.06)}
.ava.cre{background:linear-gradient(170deg,var(--cre-hi),var(--cre));color:var(--su-cre)}
.ava.azi{background:linear-gradient(170deg,var(--bra-hi),var(--bra));color:var(--su-bra)}
.ava.man{background:linear-gradient(170deg,var(--man-hi),var(--man));color:var(--su-man)}
.ava .sag{width:58%;height:58%;display:block;opacity:.88}
.ava.foto{box-shadow:inset 0 0 0 1px var(--bo-2)}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.g{width:78px;height:78px}

/* ------------------------------------------------------------
   IL SEGNO DELLA BETA
   Una targhetta piccola accanto al marchio. Non è una decorazione:
   dice che quello che stai guardando è la prima versione, e che
   non si paga. Chi ci passa sopra lo legge per esteso.
   ------------------------------------------------------------ */
.beta{position:relative;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px 4px 8px;border-radius:7px;margin-left:10px;
  color:var(--cre);cursor:help;flex:none;
  background:linear-gradient(180deg,rgba(255,176,32,.18),rgba(255,176,32,.08));
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.34), 0 2px 10px rgba(255,176,32,.12);
  transition:box-shadow .24s var(--curva),transform .24s var(--molla)}
.beta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cre);
  box-shadow:0 0 0 0 rgba(255,176,32,.5);animation:beta-vive 2.8s var(--curva) infinite}
@keyframes beta-vive{
  0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.5)}
  50%{box-shadow:0 0 0 4px rgba(255,176,32,0)}
}
.beta:hover,.beta:focus-visible{transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.55), 0 4px 16px rgba(255,176,32,.2)}

.beta .spiega{
  position:absolute;top:calc(100% + 12px);left:-10px;
  transform:translate(0,5px) scale(.97);transform-origin:top left;
  width:272px;max-width:calc(100vw - 32px);padding:14px 16px;border-radius:var(--r-2);
  background:var(--su-3);box-shadow:var(--om-3), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:13px;font-weight:450;letter-spacing:var(--tr-s);text-transform:none;
  line-height:1.55;color:var(--gri-2);text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;z-index:var(--z-avviso);
  transition:opacity .2s var(--curva),transform .28s var(--molla),visibility .2s}
.beta .spiega b{color:var(--bia);font-weight:600}
.beta .spiega .gratis{color:var(--cre);font-weight:700}
/* la punta */
.beta .spiega::before{content:"";position:absolute;bottom:100%;left:24px;
  border:6px solid transparent;border-bottom-color:var(--su-3)}
.beta:hover .spiega,.beta:focus-visible .spiega,.beta:focus .spiega{
  opacity:1;visibility:visible;transform:translate(0,0) scale(1)}

/* Su uno schermo stretto non esiste un ancoraggio al badge che stia
   dentro: qualunque lato si scelga, una nuvoletta larga quanto serve
   esce. Quindi non si aggancia al badge ma alla finestra, con lo stesso
   margine dei due lati. */
@media (max-width:640px){
  .beta{font-size:9px;padding:3px 7px 3px 6px;margin-left:8px;letter-spacing:.13em}
  .beta .spiega{position:fixed;top:86px;left:16px;right:16px;
    width:auto;max-width:none;font-size:12.5px;padding:13px 15px;
    transform:translateY(6px) scale(.98);transform-origin:top center}
  .beta .spiega::before{display:none}
  .beta:hover .spiega,.beta:focus .spiega,.beta:focus-visible .spiega{
    transform:translateY(0) scale(1)}
}

/* ============================================================
   COMPONENTI
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,var(--acc-hi),var(--acc));
  color:var(--su-acc);border-radius:var(--r-p);padding:14px 26px;min-height:50px;
  font-weight:600;font-size:15px;letter-spacing:var(--tr-s);
  box-shadow:var(--om-2), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s var(--molla),filter var(--t-tocco) ease,box-shadow var(--t-tocco) ease;
  max-width:100%;text-align:center;line-height:1.25;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:var(--om-3), inset 0 1px 0 rgba(255,255,255,.26)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.due{background:linear-gradient(180deg,var(--bra-hi),var(--bra));color:var(--su-bra)}
/* La terza porta. `.due` è l'azienda, `.tre` il manager: i nomi
   sono i lati nell'ordine in cui sono nati, non un giudizio. */
.btn.tre{background:linear-gradient(180deg,var(--man-hi),var(--man));color:var(--su-man)}
.btn.ghost{background:var(--velo);color:var(--bia);
  box-shadow:inset 0 0 0 1px var(--bo-2), var(--filo)}
.btn.ghost:hover{background:var(--velo-2);filter:none;box-shadow:inset 0 0 0 1px var(--bo-3), var(--filo)}
.btn.nero{background:rgba(0,0,0,.42);color:var(--bia);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn.nero:hover{background:rgba(0,0,0,.46);filter:none}
.btn.p{padding:10px 18px;min-height:40px;font-size:14px}

/* --- il segnalibro di «tieni d'occhio» ------------------------
   Quadrato e piccolo: sta in coda a una card accanto all'azione
   vera, e non deve competerci. Acceso è pieno, spento è solo il
   contorno — la differenza si vede in mezzo secondo, che è tutto il
   tempo che qualcuno le dedica mentre scorre. */
.btn.salva{padding:0;width:40px;min-width:40px;height:40px;min-height:40px;
  display:inline-grid;place-items:center;flex:0 0 auto}
.btn.salva svg{width:18px;height:18px}
/* Acceso prende il colore del lato di chi guarda, non un colore
   suo: il segnalibro è un gesto personale, e dirlo con la propria
   metà è più chiaro di una tinta in più da imparare. */
.btn.salva.tenuto{color:var(--cre-hi);box-shadow:inset 0 0 0 1px currentColor}
body[data-lato="azienda"] .btn.salva.tenuto{color:var(--bra-hi)}
body[data-lato="manager"] .btn.salva.tenuto{color:var(--man-hi)}
.btn.salva.tenuto svg{fill:currentColor}
.btn.pieno{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none;box-shadow:none}

.campo{
  width:100%;background:var(--su-2);border:1px solid var(--bo);border-radius:var(--r-2);
  padding:13px 16px;font-size:15px;color:var(--bia);min-height:50px;
  box-shadow:var(--filo);
  transition:border-color var(--t-tocco) ease,background-color var(--t-tocco) ease,box-shadow var(--t-tocco) ease;
}
.campo::placeholder{color:var(--gri-3)}
.campo:focus{outline:none;border-color:rgba(var(--acc-rgb),.55);background:var(--su-3);
  box-shadow:0 0 0 4px rgba(var(--acc-rgb),.11), var(--filo)}
.etichetta{display:block;color:var(--gri);font-size:13.5px;margin-bottom:8px}

/* SUPERFICIE — appena traslucida, bordo quasi invisibile, ombra morbida.
   La profondità si sente, non si vede. */
.scheda{
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022)),var(--su-1);
  border:1px solid var(--bo);border-radius:var(--r-3);padding:28px;position:relative;
  box-shadow:var(--om-2), var(--filo);
}
.scheda.fitta{padding:20px;border-radius:var(--r-2)}
.scheda h3{font-weight:600;font-size:17px;letter-spacing:var(--tr-l);text-transform:lowercase}
/* Il minuscolo è il tono del prodotto e vale per i titoli. **Su un
   nome di persona no**: «giulia ferrante» non sembra uno stile,
   sembra un errore — e il nome di un creator, nel lato manager, è
   l'informazione principale della riga, non un'intestazione. */
.scheda h3.nome, .blocco > h3.nome, .problema-collab h3.nome{text-transform:none}
#titolo.nome{text-transform:none}

/* pastiglia di stato */
.pil{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--gri);
  background:var(--velo);box-shadow:inset 0 0 0 1px var(--bo);border-radius:var(--r-p);
  padding:6px 13px;white-space:nowrap}
.pil.ok{color:var(--su-acc);background:var(--acc);box-shadow:none}
.pil.corso{color:var(--acc-hi);background:rgba(var(--acc-rgb),.11);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.34)}
.pil.att{color:var(--bia);background:var(--velo-2);box-shadow:inset 0 0 0 1px var(--bo-3)}
.pil.male{color:var(--male);background:rgba(255,107,88,.1);box-shadow:inset 0 0 0 1px rgba(255,107,88,.34)}

/* avanzamento */
.barra{position:relative;height:8px;background:var(--su-3);border-radius:var(--r-p);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.barra i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-p);
  background:linear-gradient(90deg,var(--bra) 0%,var(--cre) 100%);
  box-shadow:0 0 12px rgba(var(--acc-rgb),.34);
  transition:width var(--t-scena) var(--curva)}

/* registro */
.reg-t{width:100%;border-collapse:collapse;font-size:14.5px}
.reg-t th{font-size:11.5px;letter-spacing:.06em;font-weight:600;
  text-transform:uppercase;color:var(--gri-3);text-align:left;
  padding:0 16px 12px 0;border-bottom:1px solid var(--bo);white-space:nowrap}
.reg-t td{padding:15px 16px 15px 0;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
.reg-t td.mono,.reg-t td .uc{white-space:nowrap}
.reg-t tr:last-child td{border-bottom:0}
.reg-t td.n{font-variant-numeric:tabular-nums;text-align:right;padding-right:0;font-weight:600}
.reg-t th.n{text-align:right;padding-right:0}
.scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* nota */
.nota{background:var(--su-1);border:1px solid var(--bo);border-left:2px solid var(--acc);
  border-radius:var(--r-2);padding:18px 22px;color:var(--gri-2);font-size:14.5px;box-shadow:var(--filo)}
.nota b{color:var(--bia);font-weight:600}
.nota.due{border-left-color:var(--bra-hi)}

/* ============================================================
   ENTRATE
   ============================================================ */
.rise{transition:opacity var(--t-entrata) var(--curva),transform var(--t-entrata) var(--curva)}
/* si nasconde solo se lo script c'è ed è partito: altrimenti un errore
   in una riga qualsiasi lascerebbe la pagina completamente bianca */
.con-script .rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none}

/* ============================================================
   PREFERENZE DI SISTEMA
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .alone{display:none}
  .scheda,.btn.ghost,.btn.nero{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--su-2)}
}
@media (prefers-contrast:more){
  :root{--gri:#CBD1D5;--gri-2:#EDF0F2;--gri-3:#B4BABE;
        --bo:rgba(255,255,255,.24);--bo-2:rgba(255,255,255,.34);--bo-3:rgba(255,255,255,.46)}
}

/* ============================================================
   SEGNI — tratto morbido, 1.6px
   ============================================================ */
.ico{width:20px;height:20px;flex:none;display:block}
.ico.p{width:16px;height:16px}
.ico.g{width:26px;height:26px}
.illo{width:100%;height:auto;display:block;border-radius:var(--r-3)}

.bollo{width:44px;height:44px;flex:none;border-radius:var(--r-2);display:grid;place-items:center;
  background:rgba(var(--acc-rgb),.13);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.16)}
.bollo.spenta{background:var(--velo);color:var(--gri);box-shadow:inset 0 0 0 1px var(--bo)}
.bollo.allerta{background:rgba(255,107,88,.13);color:var(--male);box-shadow:inset 0 0 0 1px rgba(255,107,88,.2)}

/* ============================================================
   DI CHI È LA PALLA
   ============================================================ */
.turno{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;white-space:nowrap}
.turno i{width:8px;height:8px;border-radius:50%;flex:none}
.turno.tu i{background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16)}
.turno.tu{color:var(--acc)}
.turno.loro i{background:var(--gri-3)}
.turno.loro{color:var(--gri)}
.turno.finito i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gri-3)}
.turno.finito{color:var(--gri-3)}

/* ============================================================
   IL PERCORSO
   ============================================================ */
.percorso{display:flex;align-items:center;gap:0;width:100%}
.percorso .tappa{flex:1;display:flex;align-items:center;gap:0;min-width:0}
.percorso .pallino{width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--su-3);box-shadow:inset 0 0 0 1.5px var(--bo-2);
  transition:background-color var(--t-scena) var(--curva),box-shadow var(--t-scena) var(--curva)}
.percorso .tratto{flex:1;height:2px;background:var(--bo-2);min-width:8px;border-radius:2px;
  transition:background-color var(--t-scena) var(--curva)}
.percorso .tappa.fatta .pallino{background:var(--acc);box-shadow:0 0 10px rgba(var(--acc-rgb),.34)}
.percorso .tappa.fatta .tratto{background:var(--acc)}
.percorso .tappa.ora .pallino{background:var(--fondo);box-shadow:inset 0 0 0 3px var(--acc)}

/* ============================================================
   REGISTRAZIONE
   ============================================================ */
.entra{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.entra-alto{padding:24px 0}
.entra-corpo{flex:1;display:grid;place-items:center;padding:48px 0 72px}
.entra-foglio{width:100%;max-width:840px}
.entra h1{font-weight:800;letter-spacing:var(--tr-xl);
  text-transform:lowercase;line-height:1.04;font-size:clamp(30px,4vw,46px)}
.entra .occhiello{color:var(--gri);font-size:17px;margin-top:16px;max-width:52ch}

.avanza{display:flex;align-items:center;gap:12px}
.avanza .tacca{width:34px;height:3px;border-radius:2px;background:var(--bo-2);
  transition:background-color var(--t-entrata) var(--curva)}
.avanza .tacca.viva{background:var(--acc)}
.avanza .qta{font-size:12.5px;color:var(--gri-3)}

/* le due carte */
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:44px}
/* Dal 18 settembre le porte sono tre. Con un binario da 300px la
   terza restava sola su una seconda riga, e una carta spaiata dice
   «questa è l'opzione strana» — che è esattamente il contrario di
   quello che vogliamo far capire. Si stringe **solo quando le carte
   sono tre**: la schermata a due resta identica a com'era. */
.scelte:has(> :nth-child(3)){grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.scelta{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  text-align:left;padding:0;border-radius:var(--r-4);border:1px solid var(--bo);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018)),var(--su-1);
  box-shadow:var(--om-2), var(--filo);
  transition:border-color var(--t-tocco) ease,transform .22s var(--curva),box-shadow .22s var(--curva)}
.scelta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;
  background:radial-gradient(78% 58% at 50% 0%, rgba(var(--acc-rgb),.15), transparent 72%)}
.scelta:hover{border-color:var(--bo-2);transform:translateY(-3px);box-shadow:var(--om-3), var(--filo)}
.scelta .illo{border:0;border-radius:0;position:relative;z-index:1}
.scelta .testo{padding:26px 28px 22px;position:relative;z-index:1}
.scelta h2{font-weight:700;font-size:24px;letter-spacing:var(--tr-l);text-transform:lowercase}
.scelta p{color:var(--gri);font-size:15px;margin-top:12px;line-height:1.55}
.scelta .vantaggi{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.scelta .vantaggi li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--gri-2)}
.scelta .vantaggi .ico{width:17px;height:17px;margin-top:3px;color:var(--acc)}
.scelta[data-lato="creator"]{--acc:var(--cre);--acc-hi:var(--cre-hi);--acc-rgb:var(--cre-rgb);--su-acc:var(--su-cre)}
.scelta[data-lato="azienda"]{--acc:var(--bra);--acc-hi:var(--bra-hi);--acc-rgb:var(--bra-rgb);--su-acc:var(--su-bra)}
.scelta[data-lato="manager"]{--acc:var(--man);--acc-hi:var(--man-hi);--acc-rgb:var(--man-rgb);--su-acc:var(--su-man)}
.scelta .prendi{margin:auto 28px 28px;pointer-events:none;align-self:stretch;position:relative;z-index:1}

/* modulo */
.modulo{display:flex;flex-direction:column;gap:20px;margin-top:36px;max-width:470px}
.campo-g{display:flex;flex-direction:column;gap:8px}
.campo-g .aiuto{color:var(--gri-3);font-size:13px}
.doppio{display:grid;grid-template-columns:auto 1fr;gap:0;align-items:stretch}
.doppio .fisso{display:grid;place-items:center;padding:0 16px;background:var(--su-3);
  border:1px solid var(--bo);border-right:0;border-radius:var(--r-2) 0 0 var(--r-2);
  font-size:15px;color:var(--gri)}
.doppio .campo{border-radius:0 var(--r-2) var(--r-2) 0}

/* collegamenti */
.collega{display:flex;flex-direction:column;gap:12px;margin-top:32px;max-width:540px}
.canale{display:flex;align-items:center;gap:16px;text-align:left;width:100%;
  background:var(--su-1);border:1px solid var(--bo);border-radius:var(--r-2);padding:18px 20px;
  box-shadow:var(--filo);
  transition:border-color var(--t-tocco) ease,background-color var(--t-tocco) ease}
.canale:hover{border-color:var(--bo-2);background:var(--su-2)}
.canale .n{display:block;font-weight:600;font-size:15.5px}
.canale .d{display:block;color:var(--gri);font-size:13.5px;margin-top:3px}
.canale .esito{margin-left:auto}
.canale.collegato{border-color:rgba(var(--acc-rgb),.4)}
.canale.collegato .bollo{background:var(--acc);color:var(--su-acc)}

.fine-reg{text-align:center;max-width:540px;margin:0 auto}
.fine-reg .illo{max-width:280px;margin:0 auto 32px;border:0}

/* ============================================================
   PROFILO
   ============================================================ */
.ava.foto{overflow:hidden;border-radius:50%}
.ava.foto img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:3}
.ava.xg{width:112px;height:112px}

.ritratto{position:relative;display:inline-block;flex:none}
.ritratto .cambia{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--su-2);color:var(--bia);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--bo-2), var(--om-2);cursor:pointer;
  transition:background-color var(--t-tocco) ease}
.ritratto .cambia:hover{background:var(--su-3)}
.ritratto .cambia .ico{width:16px;height:16px}

/* ============================================================
   GIUDIZIO
   ============================================================ */
.stelle{display:inline-flex;align-items:center;gap:2px;color:var(--acc)}
.stelle .ico{width:15px;height:15px}
.stelle .spenta{color:var(--bo-3)}
.stelle .voto{margin-left:8px;font-size:14px;font-weight:600;color:var(--gri-2);font-variant-numeric:tabular-nums}

/* ============================================================
   MODULI LUNGHI
   ============================================================ */
.modulo-lungo{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
.passi-lato{position:sticky;top:112px;display:flex;flex-direction:column;gap:3px}
.passi-lato button{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-2);
  text-align:left;width:100%;font-size:14.5px;color:var(--gri);
  transition:color var(--t-tocco) ease,background-color var(--t-tocco) ease}
.passi-lato button:hover{color:var(--bia);background:var(--velo)}
.passi-lato button[aria-current="step"]{color:var(--bia);background:rgba(var(--acc-rgb),.1)}
.passi-lato .nu{width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;background:var(--su-3);color:var(--gri-3)}
.passi-lato button[aria-current="step"] .nu{background:var(--acc);color:var(--su-acc)}
.passi-lato button.fatto .nu{background:rgba(var(--acc-rgb),.2);color:var(--acc)}

.blocco{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--su-1);
  border:1px solid var(--bo);border-radius:var(--r-3);padding:30px;box-shadow:var(--om-2), var(--filo)}
.blocco + .blocco{margin-top:18px}
/* Nelle impostazioni (e in ogni modulo lungo) i blocchi non sono
   sempre fratelli diretti: alcuni arrivano avvolti. Lo spazio lo dà la
   colonna, non il blocco, così non manca mai (26/09). */
.modulo-lungo > div:last-child{display:flex;flex-direction:column;gap:22px;min-width:0}
.modulo-lungo > div:last-child > *{margin-top:0!important}
.modulo-lungo > div:last-child > :empty{display:none}
.blocco{scroll-margin-top:120px}
.blocco > h3{font-weight:600;font-size:19px;letter-spacing:var(--tr-l);text-transform:lowercase}
.blocco > .sotto{color:var(--gri);font-size:14.5px;margin-top:9px;max-width:60ch}
.campi{display:grid;gap:20px;margin-top:26px}
.campi.due-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
textarea.campo{min-height:110px;resize:vertical;line-height:1.6;font-family:inherit}
/* la maniglia di ridimensionamento è un dettaglio da modulo di sistema,
   e sul telefono non serve a niente: non si trascina con il dito */
@media (max-width:860px){ textarea.campo{resize:none;min-height:130px} }
select.campo{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A7AEB2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}

.opzioni-riga{display:flex;flex-direction:column;gap:10px}
.opz{display:flex;align-items:flex-start;gap:14px;padding:17px 19px;text-align:left;width:100%;
  background:var(--su-2);border:1px solid var(--bo);border-radius:var(--r-2);box-shadow:var(--filo);
  transition:border-color var(--t-tocco) ease,background-color var(--t-tocco) ease}
.opz:hover{border-color:var(--bo-2)}
.opz[aria-pressed="true"]{border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.07)}
.opz .segno{width:19px;height:19px;border-radius:50%;flex:none;margin-top:2px;
  box-shadow:inset 0 0 0 1.5px var(--bo-2);display:grid;place-items:center;
  transition:box-shadow var(--t-tocco) ease}
.opz[aria-pressed="true"] .segno{box-shadow:inset 0 0 0 5.5px var(--acc)}
.opz .t{display:block;font-weight:600;font-size:15px}
.opz .d{display:block;color:var(--gri);font-size:13.5px;margin-top:5px;line-height:1.55}

.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:var(--r-p);
  background:var(--velo);box-shadow:inset 0 0 0 1px var(--bo);font-size:14px;color:var(--gri-2);
  transition:color var(--t-tocco) ease,box-shadow var(--t-tocco) ease,background-color var(--t-tocco) ease}
.chip:hover{color:var(--bia);background:var(--velo-2)}
.chip[aria-pressed="true"]{color:var(--su-acc);background:var(--acc);box-shadow:none}
.chip .ico{width:15px;height:15px}

.riga-consegna{display:grid;grid-template-columns:1fr 140px 140px auto;gap:12px;align-items:end}
.riga-consegna.condizioni{grid-template-columns:150px minmax(160px,1fr) 86px 150px auto}
.riga-consegna > *{min-width:0}
.riga-consegna.senza-etichette .etichetta{display:none}
.riga-consegna + .riga-consegna{margin-top:-6px}
.riga-consegna .togli{align-self:center;color:var(--gri-3);padding:10px;border-radius:var(--r-1)}
.riga-consegna .togli:hover{color:var(--male);background:rgba(255,107,88,.09)}
.altre-condizioni{grid-column:1/-1;margin-top:2px;border-top:1px solid var(--bo);padding-top:10px}
.altre-condizioni summary{width:max-content;min-height:44px;display:flex;align-items:center;
  gap:5px;flex-wrap:wrap;cursor:pointer;color:var(--gri);font-size:13.5px;font-weight:600;list-style:none}
.altre-condizioni summary::-webkit-details-marker{display:none}
.altre-condizioni summary::after{content:'+';font-size:18px;margin-left:8px;color:var(--acc)}
.altre-condizioni[open] summary::after{content:'−'}
.altre-condizioni > .campi{margin-top:10px}

/* La barra che resta in fondo mentre si scorre. Il velo era un nero
   all'82%: con quell'opacità la sfocatura sotto non si vedeva più, e
   quello che restava era un rettangolo scuro appoggiato sulla pagina,
   con due spigoli netti ai lati. Adesso il lavoro lo fa la sfocatura,
   il velo la accompagna appena, e una maschera dissolve i due bordi —
   così la barra non ha un punto in cui comincia.

   Velo, sfocatura e filo stanno su uno pseudo-elemento e non
   sull'elemento: mascherare `.riepilogo` sbiadirebbe anche il
   contenuto, e «Avanti» è appoggiato proprio al bordo destro. Sfuma
   lo sfondo, non il pulsante. */
.riepilogo{--sfuma:64px;
  position:sticky;bottom:0;padding:18px 0;margin-top:28px;z-index:20}
.riepilogo > *{position:relative;z-index:1}
.riepilogo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,10,.66),rgba(8,9,10,.30));
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  border-top:1px solid var(--bo);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--sfuma),
    #000 calc(100% - var(--sfuma)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--sfuma),
    #000 calc(100% - var(--sfuma)),transparent 100%)}

/* ============================================================
   STORICO
   ============================================================ */
.storia-riga{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.storia-riga:last-child{border-bottom:0}
.storia-riga .quando{font-size:12.5px;color:var(--gri-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.storia-riga .chi{font-weight:600;font-size:15px}
.storia-riga .cosa{color:var(--gri);font-size:13.5px;margin-top:3px}
.storia-riga .velato{color:var(--gri-2);font-style:normal}

.riservatezza{display:flex;gap:15px;align-items:flex-start;background:var(--su-1);
  border:1px solid var(--bo);border-left:2px solid var(--bra-hi);border-radius:var(--r-2);
  padding:18px 20px;font-size:14px;color:var(--gri-2);box-shadow:var(--filo)}
.riservatezza b{color:var(--bia)}

/* --- la nota breve: una riga, non un paragrafo -----------------
   La riservatezza era spiegata per esteso in ogni schermata che
   la sfiorava, con tre paragrafi diversi che dicevano la stessa
   cosa. La regola adesso è: una riga qui, la spiegazione intera
   in termini.html, e nessuna schermata che si mette a discutere
   mentre stai lavorando. ------------------------------------- */
.nota-breve{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;
  font-size:13px;line-height:1.5;color:var(--gri-2)}
.nota-breve svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--gri-3)}
.nota-breve a{color:var(--acc-hi);text-decoration:underline;text-underline-offset:2px}
.nota-breve.forte{color:var(--gri)}

/* --- la checklist di avvio ------------------------------------
   Sostituisce metà della registrazione: si entra con il minimo e
   il resto si chiede qui, una cosa per volta, con scritto a cosa
   serve. Sparisce da sola quando è finita. ------------------- */
.scheda.avvio{border-left:2px solid var(--acc)}
.lista-avvio{list-style:none;display:flex;flex-direction:column;gap:11px}
.lista-avvio li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--bia)}
.lista-avvio li .segno{width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;background:var(--velo-2);box-shadow:inset 0 0 0 1px var(--bo-3)}
.lista-avvio li .segno svg{width:11px;height:11px}
.lista-avvio li.fatto{color:var(--gri-2)}
.lista-avvio li.fatto .t{text-decoration:line-through;text-decoration-color:var(--gri-3)}
.lista-avvio li.fatto .segno{background:var(--acc);color:var(--su-acc);box-shadow:none}
.lista-avvio .t{display:block}
.lista-avvio .d{display:block;margin-top:3px;font-size:12.5px;color:var(--gri-2)}

/* le scadenze in Oggi: sono date, non compiti — quindi non hanno
   un pulsante e non fanno rumore */
.scheda.scadenze{border-left:2px solid var(--bo-3)}


/* ============================================================
   DATI BANCARI — qui il monospace serve davvero
   ============================================================ */
.iban{font-size:17px;font-weight:500;letter-spacing:.09em;font-variant-numeric:tabular-nums;
  background:var(--su-2);border:1px solid var(--bo);border-radius:var(--r-2);padding:16px 18px;
  display:flex;align-items:center;gap:14px;word-break:break-all;box-shadow:var(--filo)}
.iban .copia{margin-left:auto;flex:none}

@media (max-width:900px){
  .modulo-lungo{grid-template-columns:1fr;gap:22px}
  .passi-lato{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .passi-lato button{white-space:nowrap;flex:none}
  .riga-consegna,.riga-consegna.condizioni{grid-template-columns:1fr;gap:12px}
  .riga-consegna .togli{justify-self:start}
  .blocco{padding:22px;border-radius:var(--r-2)}
  .scheda{padding:22px}
}

/* ============================================================
   MOVIMENTO — primitive riutilizzabili
   Regola: un'animazione racconta cosa è successo. Se non racconta
   niente, non ci va. Tutto passa da queste classi, mai da CSS locale.
   ============================================================ */

/* la pressione: ogni cosa toccabile cede sotto il dito e torna con
   un accenno di molla. È il feedback che fa sembrare l'interfaccia viva. */
.tap{transition:transform var(--t-tocco) var(--e-molla), filter var(--t-tocco) var(--e-std),
     background-color var(--t-tocco) var(--e-std), box-shadow var(--t-tocco) var(--e-std)}
.tap:active{transform:scale(.965)}
.tap-p:active{transform:scale(.98)}
@media (hover:hover){ .tap:hover{filter:brightness(1.06)} }

/* entrata sfalsata: l'indice arriva da --i, così una lista si compone
   invece di comparire tutta insieme */
.su{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--t-entrata) var(--e-std), transform var(--t-entrata) var(--e-std);
  transition-delay:calc(var(--i,0) * var(--sfalsa))}
.su.in{opacity:1;transform:none}

/* cambio di vista: il contenuto vecchio esce, il nuovo entra da sotto */
@keyframes vista-entra{from{opacity:0;transform:translate3d(0,10px,0) scale(.995)}
                       to{opacity:1;transform:none}}
.vista-nuova{animation:vista-entra .38s var(--e-std) both}

/* un foglio che sale dal basso */
@keyframes foglio-su{from{transform:translate3d(0,100%,0)} to{transform:none}}
@keyframes velo-in{from{opacity:0} to{opacity:1}}

/* il numero che cambia: sale di un soffio e si riposa */
@keyframes cifra-su{0%{opacity:0;transform:translate3d(0,9px,0)}
                    100%{opacity:1;transform:none}}
.cifra-viva{animation:cifra-su .44s var(--e-molla) both}

/* la barra che si riempie e brilla un istante quando arriva in fondo */
@keyframes lampo{0%{opacity:0}40%{opacity:.5}100%{opacity:0}}
.barra.piena i::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:lampo 1s var(--e-std) both}

/* le due metà che si ricompongono: è il gesto del marchio, riusato
   ovunque significhi "concluso" */
@keyframes mon-chiudi{0%{transform:translateY(var(--da))}
                      70%{transform:translateY(calc(var(--da) * -.14))}
                      100%{transform:translateY(0)}}
.mon.chiude .l{--da:8px;animation:mon-chiudi .72s var(--e-molla) both}
.mon.chiude .r{--da:-8px;animation:mon-chiudi .72s var(--e-molla) both;animation-delay:.05s}

/* pulsazione discreta su ciò che aspetta te */
@keyframes respiro{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.34)}
                   70%{box-shadow:0 0 0 7px rgba(var(--acc-rgb),0)}}
.turno.tu i{animation:respiro 2.6s var(--e-morbida) infinite}

/* lo scheletro mentre si carica */
@keyframes scorre{to{background-position-x:-200%}}
.osso{background:linear-gradient(90deg,var(--su-2) 40%,var(--su-3) 50%,var(--su-2) 60%);
  background-size:200% 100%;animation:scorre 1.4s linear infinite;border-radius:var(--r-1);color:transparent}

/* ============================================================
   MOBILE — pattern riutilizzabili, non fix per pagina
   ============================================================ */

/* 1 · LA TABELLA DIVENTA UNA LISTA DI SCHEDE.
   Pattern riutilizzabile: si applica .tab-schede a una tabella e si dà a
   ogni cella la sua etichetta in data-k. Sotto gli 860 px la tabella si
   smonta e ogni riga diventa una scheda leggibile — nessuno scroll
   laterale, nessun testo a 9 px, nessun fix per pagina. */
@media (max-width:860px){
  .tab-schede, .tab-schede tbody, .tab-schede tr, .tab-schede td{display:block;width:100%}
  /* il thead resta nell'albero di accessibilità ma esce a sinistra:
     nascondere con width:1px non basta, le celle continuano a occupare
     la loro larghezza vera e spingono la pagina oltre lo schermo */
  .tab-schede thead{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
  .tab-schede tr{background:var(--su-1);border:1px solid var(--bo);border-radius:var(--r-2);
    padding:14px 16px;margin-bottom:10px;box-shadow:var(--filo)}
  .tab-schede td{border:0;padding:6px 0;display:flex;align-items:baseline;gap:14px;text-align:left}
  .tab-schede td::before{content:attr(data-k);flex:none;min-width:100px;
    font-size:13px;color:var(--gri-3)}
  .tab-schede td:empty{display:none}
  .tab-schede td.n{text-align:left;justify-content:space-between}
  .tab-schede td.primo{padding:0 0 10px;margin-bottom:8px;border-bottom:1px solid var(--bo);
    font-weight:600;font-size:15.5px;display:block}
  .tab-schede td.primo::before{display:none}
  /* il segno di stato passa in alto a destra della scheda */
  .tab-schede tr{position:relative}
  .tab-schede td.segno{position:absolute;top:14px;right:16px;padding:0;width:auto}
  .tab-schede td.segno::before{display:none}
  .scorri{overflow:visible}
}

/* 2 · LA COPPIA CHIAVE-VALORE non va mai a capo storta — e soprattutto
   non esce dallo schermo. Il valore era nowrap: un «Proteine vegetali
   vaniglia · 900 g» allargava la colonna e con lei tutta la scheda,
   che finiva tagliata dal bordo. Adesso il valore va a capo e
   l'etichetta cede lo spazio. */
@media (max-width:640px){
  .tab-r{gap:10px 14px;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
  .tab-r .k{white-space:normal;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip}
  .tab-r .g{display:none}
  .tab-r .n{white-space:normal;text-align:right;flex:0 1 auto;min-width:0;
    max-width:100%;overflow-wrap:anywhere}
}

/* 3 · LA BARRA DI AZIONE NEL POLLICE.
   Su mobile l'azione principale di una schermata smette di stare in
   mezzo al contenuto e si posa in fondo, sopra il dock. */
.azione-pollice{display:none}
@media (max-width:860px){
  .azione-pollice{
    display:block;position:fixed;left:0;right:0;
    bottom:calc(var(--pollice) - 4px);z-index:var(--z-sticky);
    padding:12px 16px calc(12px + var(--safe-b));
    background:linear-gradient(to top,rgba(8,9,10,.96) 55%,rgba(8,9,10,0));
    pointer-events:none;
  }
  .azione-pollice > *{pointer-events:auto}
  .azione-pollice .btn{width:100%}
  body.ha-azione .vista{padding-bottom:calc(var(--pollice) + 76px)}
}

/* 4 · TIPOGRAFIA RICALIBRATA, non rimpicciolita.
   Il corpo resta a 16 px per leggibilità; scendono i display, che su
   desktop servivano a fare scena e su un telefono rubano solo spazio. */
@media (max-width:640px){
  .uc{font-size:12.5px}
  .xs{font-size:13px}
  .disp{letter-spacing:-.028em;line-height:1.06}
  .disp-m{letter-spacing:-.02em;line-height:1.18}
  .scheda{padding:20px;border-radius:var(--r-2)}
  .scheda.fitta{padding:16px}
  .nota{padding:16px 18px}
  .wrap{padding:0 18px}
  .btn{min-height:52px;font-size:16px}   /* pollice: 52 px pieni */
  .btn.p{min-height:44px;font-size:14.5px}
  .campo{min-height:52px;font-size:16px} /* 16 px: iOS non zooma il campo */
  /* filtri e chip: sul telefono erano pillole enormi. Restano
     afferrabili (38 px + area sensibile), ma smettono di occupare
     mezza riga ciascuna. */
  .filtro,.chip{min-height:38px;font-size:13px;padding:8px 14px}
  .chip{gap:6px}
}

/* 4bis · I LINK DI TESTO restano afferrabili.
   Un link alto 19 px in un piè di pagina è un bersaglio da 19 px: si
   allarga l'area sensibile senza toccare il testo. */
@media (max-width:860px){
  /* i link dentro un paragrafo non possono essere alti 44 px senza
     sfasciare l'interlinea: si allarga solo l'area sensibile */
  .foot nav a, .piede a, .testo a, .nota a, .riservatezza a, .gri a{position:relative}
  .foot nav a::after, .piede a::after, .testo a::after,
  .nota a::after, .riservatezza a::after{content:"";position:absolute;
    left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  /* dove invece il link è un elemento a sé, l'altezza è vera */
  .foot nav a,.piede a{display:inline-block;padding:11px 0;line-height:1.5}
  .foot nav a::after,.piede a::after{display:none}
}

/* 5 · NIENTE ESCE DALLO SCHERMO — rete di sicurezza globale */
@media (max-width:860px){
  html,body{max-width:100%;overflow-x:hidden}
  .griglia-2,.griglia-3,.tremezzo,.campi.due-col,.scelte,.duelati{grid-template-columns:1fr!important}
  /* una casella di griglia vale per default min-content: senza questo,
     un solo figlio largo allarga la colonna e la pagina esce di lato
     anche quando la colonna è dichiarata 1fr */
  .griglia-2>*,.griglia-3>*,.tremezzo>*,.campi>*,.scelte>*,.duelati>*,
  .fascia>*,.compiti>*{min-width:0}
  table{max-width:100%}
  pre,code,.iban{overflow-wrap:anywhere}
}

/* 6 · IL FOGLIO — modali e menu su mobile salgono dal basso,
   non compaiono al centro. È il gesto che la gente si aspetta. */
.velo{position:fixed;inset:0;z-index:var(--z-velo);background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity var(--t-foglio) var(--e-std)}
.velo.qui{opacity:1;pointer-events:auto}
.foglio{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-foglio);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--su-1);
  border-top:1px solid var(--bo-2);border-radius:var(--r-4) var(--r-4) 0 0;
  padding:10px 18px calc(24px + var(--safe-b));
  box-shadow:0 -24px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  transform:translate3d(0,100%,0);transition:transform var(--t-foglio) var(--e-sheet);
  max-height:86vh;overflow-y:auto;overscroll-behavior:contain}
.foglio.qui{transform:none}
.foglio .maniglia{width:40px;height:4px;border-radius:99px;background:var(--bo-3);
  margin:0 auto 18px;flex:none}
@media (min-width:861px){
  .foglio{left:auto;right:22px;bottom:22px;width:340px;border-radius:var(--r-3);
    border:1px solid var(--bo);transform:translate3d(0,12px,0) scale(.98);opacity:0;
    transition:transform var(--t-entrata) var(--e-molla),opacity var(--t-entrata) var(--e-std)}
  .foglio.qui{transform:none;opacity:1}
  .foglio .maniglia{display:none}
}

/* Problemi e accordi: lo stato formale si vede, ma non diventa una
   seconda timeline concorrente con il percorso della collaborazione. */
.problemi-collab{display:flex;flex-direction:column;gap:12px}
.problema-collab{padding:16px;border:1px solid var(--bo);border-radius:var(--r-2);
  background:var(--su-1)}
.problema-collab.aperto{border-left:3px solid var(--bra-hi)}
.problema-collab+.problema-collab{margin-top:0}

/* Un giudizio e la sua replica: due blocchi separati da una linea,
   perché sono due voci e non un dialogo. */
.giudizio-riga{padding-top:16px;margin-top:16px;border-top:1px solid var(--bo)}
.giudizio-riga:first-of-type{padding-top:0;margin-top:14px;border-top:0}

/* Il piano di pagamento. Una rata è una riga con tre cose: cosa
   è, quanto è, e — solo se tocca a chi guarda — il gesto. Quella
   che aspetta il proprio turno resta leggibile ma spenta: è
   concordata, non è in ritardo. */
.conto-rate{display:flex;flex-direction:column;gap:10px}
.rata{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  padding:14px 16px;border:1px solid var(--bo);border-radius:var(--r-2);
  background:var(--su-1)}
.rata.tocca{border-left:3px solid var(--acc)}
.rata.incassata{opacity:.72}
.rata .i{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.rata .a{grid-column:1/-1;margin-top:4px}
.rata .a:empty{display:none}
.totali-rate{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--bo)}
.totali-rate>div{display:flex;flex-direction:column;gap:3px}
.totali-rate b{font-variant-numeric:tabular-nums}
.totali-rate .acc{color:var(--acc-hi)}
.rimborsi{margin-top:16px;padding-top:14px;border-top:1px solid var(--bo);
  display:flex;flex-direction:column;gap:12px}
@media (min-width:560px){
  .rata{grid-template-columns:1fr auto auto}
  /* Anche vuota: è la colonna che tiene gli importi incolonnati. */
  .rata .a{grid-column:auto;margin-top:0;min-width:116px;
    display:flex;justify-content:flex-end}
  .rata .a:empty{display:block}
}

/* Che cosa cambia in una modifica dell'accordo. Il «prima» resta
   leggibile e barrato invece di sparire: una riga che mostra solo
   il valore nuovo obbliga a fidarsi, e questo è il punto del
   documento — non doversi fidare. Su schermo stretto la freccia
   passa sotto, perché tre colonne a 320px non ci stanno. */
.cambi-accordo{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:9px}
.cambi-accordo li{display:grid;gap:2px 10px;align-items:baseline;
  grid-template-columns:1fr auto 1fr;
  padding-top:9px;border-top:1px solid var(--bo)}
.cambi-accordo li>.uc{grid-column:1/-1}
.cambi-accordo .prima{color:var(--gri-3);text-decoration:line-through;
  font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.cambi-accordo .freccia{color:var(--gri-3)}
.cambi-accordo .dopo{font-size:.9rem;color:var(--acc-hi);
  min-width:0;overflow-wrap:anywhere}
@media (max-width:420px){
  .cambi-accordo li{grid-template-columns:1fr}
  .cambi-accordo .freccia{display:none}
  .cambi-accordo .dopo::before{content:'→ ';color:var(--gri-3)}
}

@media (prefers-reduced-motion:reduce){
  .su,.vista-nuova,.cifra-viva{opacity:1!important;transform:none!important;animation:none!important}
  .tap:active{transform:none}
}

/* ------------------------------------------------------------
   Il media kit su misura (DECISIONI §22): le scelte a sinistra,
   la pagina vera a destra. Sul telefono l'anteprima va sotto.
   ------------------------------------------------------------ */
.kit-pagina{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;align-items:start}
.kit-anteprima{position:sticky;top:18px}
.kit-anteprima iframe{width:100%;height:calc(100vh - 120px);min-height:520px;border:0;border-radius:22px;
  background:var(--su-1);box-shadow:var(--filo)}
@media (max-width:1100px){.kit-pagina{grid-template-columns:1fr}.kit-anteprima{position:static}
  .kit-anteprima iframe{height:78vh}}
.kit-colore{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .15s}
.kit-colore[aria-pressed="true"]{box-shadow:0 0 0 3px var(--su-1),0 0 0 5px var(--c)}
.kit-colore:hover{transform:scale(1.06)}
.kit-riga{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--su-2)}
.kit-riga.spenta b{opacity:.5}
/* Le tre barrette: si trascina da qui. */
.kit-maniglia{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:28px;height:32px;
  cursor:grab;touch-action:none;padding:0 6px;border-radius:8px}
.kit-maniglia i{display:block;height:2px;border-radius:2px;background:var(--gri-3)}
.kit-maniglia:hover i{background:var(--gri)}
.kit-riga{user-select:none;transition:box-shadow .15s,background .15s}
.kit-riga.presa{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(var(--acc-rgb),.5);background:var(--su-3);cursor:grabbing}
.kit-riga.presa .kit-maniglia{cursor:grabbing}
/* L'interruttore, come quello dell'iPhone. */
.kit-switch{position:relative;width:51px;height:31px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.16);transition:background .2s;flex:none}
.kit-switch span{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s}
.kit-switch[aria-checked="true"]{background:#34C759}
.kit-switch[aria-checked="true"] span{transform:translateX(20px)}
.kit-switch:disabled{opacity:.45;cursor:not-allowed}
.opz-breve{padding:10px 16px;border-radius:999px;border:1px solid var(--bo);background:transparent;
  color:var(--gri);font:inherit;font-size:14px;cursor:pointer}
.opz-breve[aria-pressed="true"]{border-color:rgba(var(--acc-rgb),.6);color:var(--acc-hi);background:rgba(var(--acc-rgb),.1)}

/* La trattativa come conversazione (26/09): chi dice cosa a chi. */
.tratta{display:flex;flex-direction:column;gap:12px}
.tratta-voce{border-radius:18px;padding:14px 16px;background:var(--su-2);border:1px solid var(--bo)}
.tratta-voce.mia{border-color:rgba(var(--acc-rgb),.35)}
.tratta-chi{display:flex;align-items:center;gap:10px}
.tratta-titolo{font-size:14.5px;line-height:1.4}
.tratta-cambi{margin-top:12px;display:grid;gap:6px}
.tratta-testa,.tratta-riga{display:grid;grid-template-columns:minmax(90px,1.1fr) 1fr 18px 1fr;gap:10px;align-items:baseline}
.tratta-testa span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gri-3)}
.tratta-riga .prima{color:var(--gri);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.tratta-riga .dopo{color:var(--bia);font-weight:600}
.tratta-riga .freccia{color:var(--gri-3)}
@media (max-width:640px){.tratta-testa{display:none}.tratta-riga{grid-template-columns:1fr 1fr;row-gap:2px}
  .tratta-riga .uc{grid-column:1/-1}.tratta-riga .freccia{display:none}}

/* Prima di sapere chi sei (26/09): niente schermate di un lato a caso. */
body.in-arrivo > *{visibility:hidden}
body.in-arrivo::after{content:'Un attimo…';visibility:visible;position:fixed;inset:0;display:grid;
  place-items:center;color:var(--gri);font-size:15px;letter-spacing:.02em}

/* Le occasioni del manager come bacheca (26/09). */
.occ-bacheca{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:1100px){.occ-bacheca{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.occ-bacheca{grid-template-columns:1fr}}
.occ-colonna{background:var(--su-1);border:1px solid var(--bo);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.occ-colonna header{display:flex;flex-direction:column;gap:2px;padding:2px 4px 6px}
.occ-carta{background:var(--su-2);border:1px solid var(--bo);border-radius:16px;padding:12px 14px}
.occ-carta.tardi{border-color:rgba(var(--acc-rgb),.55)}
.occ-titolo{all:unset;cursor:pointer;font-weight:600;font-size:15px;line-height:1.3;color:var(--bia)}
.occ-titolo:hover{text-decoration:underline}
.occ-valore{margin-top:8px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--acc-hi)}
.occ-prossima{margin-top:8px;font-size:13px}
.occ-vuota{padding:6px 4px}
.occ-perse{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.occ-passi{display:grid;gap:10px;max-width:520px;margin:18px auto 0;text-align:left}
.occ-passi div{display:flex;gap:12px;align-items:flex-start}
.occ-passi b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--acc-rgb),.15);color:var(--acc-hi);font-size:13px}