/* ── TEMA "VERDE CHIARO" ──
    Chrome chiaro e arioso con identita' verde (nav/hero/footer/tabbar/header chat),
    contenuti luminosi. Token condivisi da sito E chat: stesso linguaggio ovunque.
    Per un eventuale tema scuro basta ridefinire i token shell / on-shell / leo-lite.

    IL VERDE E' QUELLO DEL LOGO, non un verde deciso a parte (06/08/2026). Fino a ieri
    --leo era #3c9a2c, un verde erba: accanto al logo (`assets/leo-logo-official.png`,
    #3c502d misurato sul PNG) sembravano due marchi diversi, e la testata dell'app era
    proprio il punto dove si vedevano affiancati. Ora --leo E' #3c502d, esatto.
    Tutta la scala verde del sito e' la STESSA tinta a luminosita' diverse — tono 94.3
    gradi, saturazione 28%, i valori del logo: --leo-dk per i gradienti, --leo-lite per
    gli accenti su fondo scuro, e le velature rgba(60,80,45,.06-.14) per gli sfondi.
    Se serve un altro verde, si prende da questa scala; non se ne inventa uno.
    Effetto collaterale voluto: #3c502d su bianco ha contrasto 8.8:1 (il vecchio 3.6:1,
    sotto la soglia AA per il testo normale) — il grassetto verde nelle risposte di Leo
    prima era al limite della leggibilita'.
    NON entrano in questa scala, di proposito: i verdi del SEMAFORO (glicemia "nella
    norma" in libre.py, tempo in range in report.py, badge IG basso in alimenti.py) e i
    colori di CATEGORIA del grafo (grafo.py COL). Quelli dicono un valore o separano una
    categoria, non dicono "siamo noi": se diventano oliva non si distinguono piu'
    dall'ambra, e sul canvas scuro del grafo sparirebbero. */
 :root{--bg:#f6faf3;--card:#ffffff;--soft:#eef4e9;--text:#1c2416;--muted:#68755f;
  --gold:#a8842f;--gold-hi:#c9a24a;--blu:#0d6fd0;--blu-dk:#005EB8;--leo:#3c502d;--leo-dk:#304024;
  --leo-lite:#304024;
  --shell:#eef6e8;--shell-2:#f7fbf4;--shell-glass:rgba(255,255,255,.74);--shell-glass-hi:rgba(255,255,255,.93);
  --on-shell:#1c2416;--on-shell-mut:#68755f;
  --border:rgba(33,50,20,.12);--border-hi:rgba(37,60,20,.22);--font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--ink:#0c1222;--cartoon-bl:3px solid rgba(33,50,20,.18)}
 *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth}
 body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}
 a{color:inherit;text-decoration:none}
 .wrap{max-width:1080px;margin:0 auto;padding:0 20px}

 /* NAV */
 nav{position:sticky;top:0;z-index:50;background:var(--shell-glass,rgba(255,255,255,.72));backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)}
 .nav-in{max-width:1240px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:12px;position:relative}
 .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;border-radius:12px;padding:2px}
 .brand img{width:50px;height:50px;object-fit:contain;flex-shrink:0}
 .brand .brand-lockup{display:flex;flex-direction:column;line-height:1}
 .brand .brand-row{display:block;white-space:nowrap}
 .brand .brand-row-society{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--on-shell,#1c2416)}
 .brand .brand-phai{background:linear-gradient(135deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 .brand .brand-society{color:var(--on-shell,#1c2416)}
  .brand .brand-row-diabete{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.22em;color:var(--blu)}
   .brand .brand-product-mark{width:24px;height:24px;object-fit:contain;border-radius:6px;flex:0 0 24px;background:#fff;border:1px solid var(--leo-dk,#304024);padding:2px;box-sizing:border-box}
  .brand .brand-product-context{font-size:8px;letter-spacing:.16em;color:var(--blu);opacity:.82}
 nav .links{display:flex;align-items:center;gap:3px;margin-left:auto;flex-wrap:nowrap;min-width:0}
 nav .links a,nav .links button{position:relative;padding:9px 12px;border-radius:10px;font-size:13.2px;font-weight:600;color:var(--on-shell-mut,rgba(229,238,223,.70));text-decoration:none;white-space:nowrap;flex-shrink:0;transition:color .15s,background .15s}
 nav .links a:hover{color:var(--on-shell,#1c2416);background:rgba(60,80,45,.10)}
 nav .links a.active,nav .links a[aria-current=page]{color:var(--leo-lite,#304024);background:rgba(60,80,45,.12)}
 nav .links a.cta{background:linear-gradient(135deg,var(--leo),var(--leo-dk));color:#fff;font-weight:800;box-shadow:0 4px 14px rgba(60,80,45,.26)}
 nav .links a.cta:hover{filter:brightness(1.07);color:#fff;background:linear-gradient(135deg,var(--leo),var(--leo-dk))}
 nav .links a.cta.active,nav .links a.cta[aria-current=page]{color:#fff}
 /* "Installa l'app": nasce hidden, la scopre _install_js solo a chi non ce l'ha */
 nav .links .pwa-inst{display:flex;align-items:center;gap:8px;width:auto;text-align:left;background:none;border:0;font-family:inherit;cursor:pointer}
 nav .links .pwa-inst[hidden]{display:none}
 nav .links .pwa-inst .pwa-ic{width:16px;height:16px;flex-shrink:0}
  nav .links a .out{display:inline-block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
   stroke-linecap:round;stroke-linejoin:round;opacity:.45;margin-left:7px;vertical-align:-1px}
  nav .research-menu{position:relative;flex-shrink:0}
  nav .research-menu summary{display:flex;align-items:center;gap:9px;min-height:38px;padding:9px 12px;border-radius:10px;
   color:var(--on-shell-mut,rgba(229,238,223,.70));font-size:13.2px;font-weight:600;cursor:pointer;list-style:none;white-space:nowrap}
  nav .research-menu summary::-webkit-details-marker{display:none}
  nav .research-menu summary::after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .15s}
  nav .research-menu[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
  nav .research-menu summary:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
  nav .research-menu .out{display:inline-block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
   stroke-linecap:round;stroke-linejoin:round;opacity:.45;margin-left:5px;vertical-align:-1px}
  nav .research-destination{display:inline-flex;align-items:center;color:var(--blu);font-family:inherit;font-size:1em;font-weight:700;letter-spacing:0}
  nav .research-submenu{list-style:none}
  nav:not(.appnav) .research-submenu{position:absolute;z-index:70;top:calc(100% + 8px);right:0;min-width:252px;padding:8px;background:var(--shell-glass-hi,rgba(255,255,255,.96));border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 30px rgba(33,50,20,.14)}
  nav:not(.appnav) .research-submenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;color:var(--text);font-size:13px;font-weight:700}
  nav:not(.appnav) .research-submenu a:hover{background:rgba(60,80,45,.10)}
  nav:not(.appnav) .research-menu[open]>summary{background:rgba(60,80,45,.10);color:var(--on-shell,#1c2416)}
  nav .rev{display:inline-block;transform:scaleX(-1)}
 nav .langsel{margin-left:6px;border:1px solid var(--border-hi);border-radius:9px;background:var(--card);color:var(--text);font-family:var(--font);font-weight:600;font-size:13px;padding:7px 8px;cursor:pointer;outline:none}
 nav .langsel:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
 nav a:focus-visible,nav button:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
 /* IL RITORNO A LEO NON PUO' STARE DENTRO IL MENU (22/08/2026). Sul telefono la vetrina
    mostra soltanto marchio + hamburger: «Coach Leo» stava nel pannello, e per giunta sotto
    la piega (dopo Home/Ricette/Alimenti/Studi/Protocollo/Indagini). Tre gesti, di cui uno
    e' CERCARE. Si vedeva solo scendendo dall'app: tocchi «Studi» dentro Leo, perdi la barra
    in basso e la strada di casa e' nascosta.
    La regola «la pelle segue l'indirizzo» (4 agosto) NON si tocca, ed e' giusta: queste
    pagine sono pubbliche, e chi arriva da una ricerca non deve vedere il guscio di un'app
    che non ha. Quello che era rotto non era la pelle, era il rientro.
    La stessa riga serve due persone diverse: chi e' uscito da Leo per consultare la
    biblioteca, e chi arriva dal sito e deve poter entrare nel prodotto (42 profili su 45
     sono ospiti). Quando la riga completa e' visibile non serve: li' la voce e' gia' nel menu. */
  nav .cta-m{display:none;text-decoration:none}
  @media(max-width:1600px){
  nav .cta-m{display:inline-flex;align-items:center;margin-left:auto;flex-shrink:0;
   padding:10px 15px;border-radius:999px;font-size:13.5px;font-weight:800;white-space:nowrap;
   background:linear-gradient(135deg,var(--leo),var(--leo-dk));color:#fff;
   box-shadow:0 4px 14px rgba(60,80,45,.26)}
  nav .cta-m ~ .burger{margin-left:8px}
  /* nel pannello la voce resterebbe doppia: sul telefono e' gia' qui sopra */
  nav .links a.cta{display:none}
 }
 /* A 320px la riga chiede 323px e ce ne sono 305. Cade la parola «Coach»: resta il marchio,
    che e' quello che deve dire dove porta. Misurato, non stimato. */
 @media(max-width:359px){nav .cta-m .cw{display:none}nav .cta-m{padding:10px 13px}}
 .burger{display:none;width:44px;height:44px;border:1px solid var(--border-hi);border-radius:11px;background:var(--card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;margin-left:auto}
 .burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .22s,opacity .22s}
 nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 nav.open .burger span:nth-child(2){opacity:0}
 nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .m-only{display:none}
  /* La vetrina passa al menu prima di troncare una voce. A 1500px, con lingua e installazione
     visibili, la riga lunga supera lo spazio disponibile; a 1601px entra interamente. */
  @media(max-width:1600px){
  .burger{display:flex}
  nav .links{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:8px;background:var(--shell-glass-hi,rgba(255,255,255,.96));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 18px 30px rgba(33,50,20,.14);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  nav.open .links{opacity:1;visibility:visible;transform:none}
  nav .links a{padding:14px 16px;font-size:15.5px;border-radius:10px}
  nav .research-menu{width:100%}
  nav .research-menu summary{min-height:44px;padding:14px 16px;font-size:15.5px}
  nav:not(.appnav) .research-submenu{position:static;margin:0 6px 6px;padding:6px;background:rgba(60,80,45,.06);border-radius:10px;box-shadow:none}
  nav:not(.appnav) .research-submenu a{padding:12px 14px;font-size:14px}
  nav .links a.cta{margin-top:4px;justify-content:center;text-align:center}
  nav .links .pwa-inst{width:100%}
  nav .langsel{width:100%;margin:6px 0 0;padding:12px}
  .m-only{display:block}
 }
 /* ACCOUNT sempre visibile: "Accedi" da anonimo, chip col nome + menu da loggato.
    L'utente deve SEMPRE sapere come entrare nel suo sistema, da qualunque pagina. */
 nav .acct{display:inline-flex;align-items:center;gap:7px;margin-left:2px;border:1.5px solid var(--border-hi);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;background:var(--card);cursor:pointer}
 nav .acct:hover{border-color:var(--leo-dk);color:var(--leo-dk)}
 nav .acct.active{border-color:var(--leo-dk);color:var(--leo-dk)}
 nav .acct.in{background:rgba(138,174,111,.16);border-color:rgba(138,174,111,.5);color:var(--on-shell,#f1f6ee)}
 nav .acct .dot{width:8px;height:8px;border-radius:50%;background:var(--leo);box-shadow:0 0 0 3px rgba(60,80,45,.18);flex-shrink:0}
 nav .acct .acct-ic{width:15px;height:15px;flex-shrink:0}
 /* chip loggato: avatar OMINO + nome + badge giorni (coerente con la chat) */
 nav .acct.in{padding:5px 13px 5px 6px}
 nav .acct .av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--leo),var(--leo-dk));flex-shrink:0;box-shadow:0 2px 6px rgba(60,80,45,.3)}
 nav .acct .av svg{width:14px;height:14px;display:block}
 nav .acct .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
 /* Il saluto su DUE RIGHE: "Ciao" sopra in piccolo, il NOME sotto con tutta la larghezza
    del chip. Serve a una cosa sola, e la piu' importante della testata: capire a colpo
    d'occhio se sei dentro o fuori. Da anonimo il chip e' un invito ("Accedi"/"Mese gratis"),
    da loggato e' il tuo nome — due oggetti diversi, non lo stesso con parole diverse. */
 nav .acct .wh{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  line-height:1.12;min-width:0;text-align:left}
 nav .acct .wh i{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;opacity:.72}
 nav .acct .wh b{font-size:12.5px;font-weight:800;max-width:168px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
 nav .acct .gg{background:var(--leo);color:#fff;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;flex-shrink:0;line-height:1.5}
 nav .acct-menu{position:absolute;top:calc(100% + 8px);right:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 44px rgba(33,50,20,.20);min-width:238px;padding:8px;display:none;z-index:60}
 nav .acct-menu.on{display:block}
 nav .acct-menu .who{padding:9px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
 nav .acct-menu .who b{display:block;font-size:13px;word-break:break-all}
 nav .acct-menu .who span{font-size:11.5px;color:var(--leo-dk);font-weight:700}
 nav .acct-menu a,nav .acct-menu button{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);padding:9px 12px;border-radius:9px;text-decoration:none;cursor:pointer}
 nav .acct-menu a:hover,nav .acct-menu button:hover{background:rgba(60,80,45,.09)}
 nav .acct-menu .esci{color:#b3362a}
  /* Il chip account e' a tutta larghezza solo dentro il pannello a discesa. La vetrina apre
     quel pannello fino a 1600px: in una riga orizzontale il chip farebbe sbordare la pagina. */
 /* `:not(.appnav)` perche' il chip a tutta larghezza vale SOLO dove sta DENTRO il pannello a
    discesa, cioe' nella vetrina. Nell'app il chip vive nella riga della testata (dev'essere
    visibile sempre: dice che sei dentro e quanti giorni ti restano), e li' un `width:100%`
    lo faceva sbordare di 221px spingendo fuori dal bordo perfino l'hamburger — cioe' l'unico
    modo di aprire la biblioteca. Stessa regola, due contenitori diversi: va scoperchiata. */
  @media(max-width:1600px){nav:not(.appnav) .acct{width:100%;justify-content:center;margin:2px 0 0;padding:12px}nav .acct-menu{left:8px;right:8px}}
 /* NASTRO promo per gli ANONIMI: "primo mese gratis" ben in vista su ogni pagina.
    Chiudibile (localStorage), mai mostrato ai loggati ne' su /accedi e /benvenuto. */
 .promo-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px 46px 10px 16px;background:linear-gradient(90deg,#304024,#3c502d);color:#fff;font-size:13.5px;font-weight:700;position:relative;text-align:center}
 .promo-strip a{background:#fff;color:#304024;border-radius:999px;padding:6px 15px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}
 .promo-strip a:hover{transform:translateY(-1px)}
 .promo-strip .px{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:15px;cursor:pointer;opacity:.75;padding:5px 9px}
 .promo-strip .px:hover{opacity:1}
  @media(prefers-reduced-motion:reduce){nav .links,.burger span{transition:none}}
 /* ══ NAV "WOW": vetro condensante allo scroll, hairline aurora, pill animate, sweep CTA ══ */
 nav{transition:background .3s ease,box-shadow .3s ease,padding .3s ease;border-bottom:none}
 nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--leo) 18%,var(--gold-hi) 50%,var(--blu) 82%,transparent);
  opacity:.5;transition:opacity .3s}
  nav::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;pointer-events:none;z-index:1;
   background:linear-gradient(90deg,transparent 20%,#3c502d 40%,#c9a24a 50%,#0d6fd0 60%,transparent 80%);
   background-size:200% 100%;animation:navSweep 5s ease-in-out infinite;opacity:.7}
  @keyframes navSweep{0%{background-position:100% 0}100%{background-position:-100% 0}}
 nav:not(.scrolled){background:var(--shell-glass,rgba(255,255,255,.66))}
 nav.scrolled{background:var(--shell-glass-hi,rgba(255,255,255,.9));box-shadow:0 10px 30px rgba(33,50,20,.10)}
 nav.scrolled::after{opacity:.85}
 .brand img{transition:width .3s,height .3s,filter .3s}
 nav.scrolled .brand img{width:40px;height:40px}
 .brand:hover img{filter:drop-shadow(0 4px 12px rgba(60,80,45,.35))}
 nav .links a:not(.cta):not(.acct){transition:color .18s,background .18s,transform .14s,box-shadow .18s}
 nav .links a:not(.cta):not(.acct):hover{transform:translateY(-1px)}
 nav .links a.active:not(.cta),nav .links a[aria-current=page]:not(.cta){
  background:linear-gradient(135deg,rgba(138,174,111,.22),rgba(13,111,208,.16));color:var(--leo-lite,#8aae6f);
  box-shadow:inset 0 0 0 1px rgba(138,174,111,.3)}
 nav .links a.cta{position:relative;overflow:hidden}
 nav .links a.cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);animation:ctaSweep 5s ease-in-out infinite}
 @keyframes ctaSweep{0%,62%{left:-70%}82%,100%{left:135%}}
  @media(max-width:1600px){
  nav .links{border-radius:0 0 20px 20px;box-shadow:0 26px 44px rgba(33,50,20,.20)}
  nav.open .links a{animation:navItem .32s cubic-bezier(.22,1,.36,1) backwards}
  nav.open .links a:nth-child(1){animation-delay:.03s} nav.open .links a:nth-child(2){animation-delay:.06s}
  nav.open .links a:nth-child(3){animation-delay:.09s} nav.open .links a:nth-child(4){animation-delay:.12s}
  nav.open .links a:nth-child(5){animation-delay:.15s} nav.open .links a:nth-child(6){animation-delay:.18s}
 }
 @keyframes navItem{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
 @media(prefers-reduced-motion:reduce){nav .links a.cta::after{animation:none}nav.open .links a{animation:none}nav::before{animation:none;opacity:0}}
 /* ── IL PASSAGGIO FRA LE PAGINE (22/08/2026) ──────────────────────────────────────────
    Venti righe e zero JavaScript. Sta QUI, in `_NAV_STYLE`, perche' una transizione fra
    DOCUMENTI diversi funziona solo se ce l'hanno tutti e due — quello che si lascia e
    quello che arriva — e questo foglio e' l'unico che sta in ogni pagina.
    Tutto dentro `no-preference`: non e' «spegnere l'animazione se la chiedi», e' NON
    accenderla finche' non risulta che va bene. Chi ha chiesto meno movimento, e chi ha un
    browser che non la conosce (Firefox), naviga esattamente come oggi: e' una regola in
    piu' che viene ignorata, non un pezzo di cui la pagina ha bisogno.
    I NOMI del guscio stanno in `_APP_STYLE`, cioe' solo sulle pagine dell'app: uscendo
    verso la vetrina il guscio cambia davvero, e li' la dissolvenza semplice e' la cosa
    giusta — dice «hai cambiato mondo». */
 @media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root){animation:vt-esce .16s ease-in both}
  ::view-transition-new(root){animation:vt-entra .22s cubic-bezier(.22,1,.36,1) both}
 }
 @keyframes vt-esce{to{opacity:0}}
 @keyframes vt-entra{from{opacity:0;transform:translateY(6px)}}
 /* ── BOTTOM TAB BAR (app-like, stile investing.com) — SOLO mobile/tablet ─────────── */
 /* Su desktop niente barra sotto: c'e' il menu in alto (evita la ridondanza). */
 /* La tabbar E' un <nav>, quindi si becca TUTTE le regole scritte per la nav del sito:
    position:sticky, il backdrop-filter, la transition, e soprattutto i due pseudo-elementi
    — `nav::before` e' una barretta di 2px che SCORRE in orizzontale all'infinito
    (animation:sweep) e `nav::after` una hairline colorata. Sulla barra in basso non li
    vogliamo, e non vogliamo nemmeno dipendere dal fatto che qualcuno si ricordi di
    spegnerli nella media query giusta: qui li azzeriamo alla radice, una volta per tutte.
    L'indicatore della voce attiva usa `.tabbar a::after`, che e' un altro selettore e resta. */
 .tabbar{display:none}
 .tabbar::before,.tabbar::after{content:none;display:none;animation:none}
 /* Con la TASTIERA APERTA la barra si ritira invece di restare incastrata dietro (vedi
    _KB_JS): mentre si scrive non serve navigare, e cosi' non "si stacca" piu'. */
 .tabbar{transition:transform .18s ease}
 body.kb-open .tabbar{transform:translateY(110%);pointer-events:none}
 @media(prefers-reduced-motion:reduce){.tabbar{transition:none}}
 @media(max-width:900px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:60;
   background:var(--shell-glass-hi,rgba(255,255,255,.94));backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);
   border-top:1px solid var(--border);box-shadow:0 -6px 22px rgba(33,50,20,.08);
   padding:5px 4px calc(5px + env(safe-area-inset-bottom));justify-content:space-around;align-items:stretch}
  .tabbar a{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:2px;padding:6px 2px;border-radius:12px;min-height:48px;color:var(--on-shell-mut,rgba(229,238,223,.70));font-size:10.5px;font-weight:700;
   letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent}
  /* L'ETICHETTA NON VA MAI A CAPO. In inglese "Glicemia" diventa "Blood glucose": andando su
     due righe alzava tutta la barra e disallineava le icone delle altre quattro voci. Una
     voce di tab bar e' un'etichetta, non una frase: sta su una riga o si rimpicciolisce. */
  .tabbar a>span:last-child{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
   display:block;text-align:center}
  /* SEI caselle: sul telefono piu' stretto sono ~53px l'una, quindi etichetta e icona si
     stringono insieme. Il tocco resta comunque sopra i 44px di altezza. */
  @media(max-width:460px){.tabbar a{font-size:9.5px;letter-spacing:0;padding:6px 1px}
   .tabbar a .ti svg{width:21px;height:21px}}
  @media(max-width:360px){.tabbar a{font-size:8.5px}.tabbar a .ti svg{width:19px;height:19px}}
  .tabbar a .ti{font-size:21px;line-height:1;transition:transform .16s;display:flex}
  .tabbar a .ti svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
  .tabbar a::after{content:"";position:absolute;top:0;height:3px;width:0;border-radius:0 0 3px 3px;background:var(--leo-lite,#8aae6f);transition:width .16s}
  .tabbar a.active{color:var(--leo-lite,#8aae6f)}
  .tabbar a.active .ti{transform:translateY(-1px) scale(1.09)}
  .tabbar a.active::after{width:26px}
  .tabbar a:active{background:rgba(138,174,111,.14)}
  .tabbar a:focus-visible{outline:2px solid var(--blu);outline-offset:-2px}
 }
 /* Lo SPAZIO in fondo alla pagina per non finire sotto la barra sta in `_APP_STYLE`, non
    qui: questo foglio lo carica ogni pagina, anche quelle di vetrina, che la barra non ce
    l'hanno. Tenerlo qui lasciava 62px di vuoto in fondo a mezzo sito. */
 /* ── MOBILE: scroll FLUIDO ──────────────────────────────────────────────────────────
    Cause del "salto/perdita allineamento" su telefono, qui neutralizzate:
    1) la nav NON si condensa (il logo non si rimpicciolisce) → altezza header costante, niente salto;
    2) niente backdrop-filter/blur su nav e tabbar durante lo scroll (lag su iOS) → sfondo opaco;
    3) aurora ferma e sweep spenti (evita repaint continui di layer grandi mentre scrolli). */
  @media(max-width:1150px){
   nav,nav:not(.scrolled),nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.97)}
  nav.scrolled{box-shadow:0 6px 20px rgba(33,50,20,.08)}
  nav.scrolled .brand img{width:50px;height:50px}
  nav::before{animation:none;opacity:0}
  .tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.97)}
  body::before{animation:none}
 }

 /* HERO — banda verde chiaro, arioso; aurora soffusa, testo scuro leggibile */
 .hero{position:relative;text-align:center;padding:76px 20px 64px;overflow:hidden;color:var(--on-shell,#1c2416);
  background:radial-gradient(120% 120% at 50% -10%,var(--shell-2,#f2f9ed),var(--shell,#e8f3e0) 72%);
  border-bottom:1px solid var(--border)}
 .hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:120%;height:120%;
  background:radial-gradient(ellipse at 50% 0%,rgba(60,80,45,.14),transparent 55%),radial-gradient(ellipse at 50% 40%,rgba(201,162,74,.10),transparent 60%),radial-gradient(ellipse at 78% 20%,rgba(13,111,208,.10),transparent 55%);pointer-events:none}
 .hero .em{width:clamp(140px,20vw,180px);height:auto;object-fit:contain;margin:0 auto 18px;display:block;position:relative;background:#fff;border:2px solid var(--ink,#0c1222);border-radius:16px;padding:10px;box-shadow:3px 3px 0 var(--ink,#0c1222);transform:rotate(-.5deg);filter:drop-shadow(0 12px 26px rgba(33,50,20,.18))}
 .hero h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.08;position:relative;text-wrap:balance;color:var(--on-shell,#1c2416)}
 .hero h1 .g{background:linear-gradient(135deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 .hero h1 .b{background:linear-gradient(135deg,var(--blu),#9cc9f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 .hero p{max-width:600px;margin:16px auto 0;color:var(--on-shell-mut,#68755f);font-size:clamp(15px,2vw,17px);position:relative}
 .hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;position:relative}
 .btn{padding:13px 24px;border-radius:16px 12px 18px 14px / 14px 18px 12px 16px;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:2.2px solid var(--ink,#0c1222);box-shadow:3px 3px 0 var(--ink,#0c1222);transform:rotate(-.3deg);transition:transform .14s,box-shadow .14s,filter .14s}
 .btn.primary{background:var(--leo);color:#fff;box-shadow:3px 3px 0 var(--ink,#0c1222)}
 .btn.primary:hover{filter:brightness(1.07);transform:rotate(0deg) translateY(-1px);box-shadow:4px 4px 0 var(--ink,#0c1222)}
 .btn.sec{background:#ffffff;color:var(--ink,#0c1222);border-color:var(--ink,#0c1222);box-shadow:2px 2px 0 var(--ink,#0c1222);transform:rotate(.3deg)}
 .btn.sec:hover{background:#ffffff;transform:rotate(0deg) translateY(-1px);box-shadow:3px 3px 0 var(--ink,#0c1222)}
 /* la CTA del MESE GRATIS: il gesto che chiediamo, quindi il piu' visibile della pagina */
 @keyframes mesePulse{0%,100%{box-shadow:0 10px 26px rgba(60,80,45,.32)}50%{box-shadow:0 10px 34px rgba(60,80,45,.55),0 0 0 7px rgba(60,80,45,.10)}}
 .btn.mese{font-size:16.5px;padding:16px 30px;animation:mesePulse 2.6s ease-in-out infinite}
 .btn.mese small{display:block;font-size:11px;font-weight:600;opacity:.85;letter-spacing:.02em}
 @media(prefers-reduced-motion:reduce){.btn.mese{animation:none}}
 .trust{margin-top:20px;font-size:12.5px;color:var(--muted);position:relative}
 /* SEZIONI card */
 .sec-h{text-align:center;margin:54px 0 26px}
 .sec-h .eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
 .sec-h h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin-top:8px;letter-spacing:-.01em}
 .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;padding-bottom:20px}
 .card{background:var(--card);border:2px solid rgba(33,50,20,.18);border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;box-shadow:3px 3px 0 rgba(33,50,20,.10);transform:rotate(-.3deg);transition:transform .18s,box-shadow .18s,border-color .18s}
 .card:nth-child(even){transform:rotate(.4deg)}
 .card:hover{transform:rotate(0deg) translateY(-2px);border-color:rgba(33,50,20,.22);box-shadow:5px 5px 0 rgba(33,50,20,.12)}
 .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
 .card.leo::before{background:linear-gradient(90deg,var(--leo),rgba(117,157,88,.2))}
 .card.ric::before{background:linear-gradient(90deg,var(--gold),rgba(201,162,74,.2))}
 .card.stu::before{background:linear-gradient(90deg,var(--blu),rgba(77,159,230,.2))}
 .card .ic{width:44px;height:44px;border-radius:12px;background:#fff;border:2px solid var(--ink,#0c1222);box-shadow:2px 2px 0 var(--ink,#0c1222);display:grid;place-items:center;font-size:22px;line-height:1;color:var(--leo);flex-shrink:0}
 .card .ic svg{width:24px;height:24px;display:block}
 .card.ric .ic{color:var(--gold)} .card.stu .ic{color:var(--blu)}
 .card h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
 .card .badge{position:absolute;top:18px;right:18px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
 .card.leo .badge{background:rgba(117,157,88,.14);color:var(--leo)}
 .card .pub{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:rgba(159,170,150,.12);color:var(--muted)}
 .card p{color:var(--muted);font-size:14px;flex:1}
 .card ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
 .card ul li{display:flex;gap:8px} .card ul li::before{content:"✓";color:var(--leo);font-weight:800;flex-shrink:0}
 .card .go{margin-top:6px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:7px}
 .card.leo .go{color:var(--leo)} .card.ric .go{color:var(--gold-hi)} .card.stu .go{color:var(--blu)}
 .card .go .ar{transition:transform .14s} .card:hover .go .ar{transform:translateX(4px)}
 /* footer — verde chiaro, chiude la pagina */
 footer{border-top:1px solid var(--border);margin-top:56px;padding:30px 20px 44px;
  background:linear-gradient(180deg,var(--shell-2,#f2f9ed),var(--shell,#e8f3e0));color:var(--on-shell,#1c2416)}
 .foot-in{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
 .foot-in .dis{font-size:11.5px;color:var(--on-shell-mut,rgba(229,238,223,.70));max-width:640px;line-height:1.5}
 .foot-in .cp{font-size:11.5px;color:var(--on-shell-mut,rgba(229,238,223,.70))}
 .leo-wm{font-weight:800;color:var(--leo-lite,#8aae6f)}
 /* Il disegno del marchio (la Ǝ e la sua aria) NON sta piu' qui: sta in marchio.py, ed e'
    iniettato in ogni pagina da web_base._send. Qui resta solo il colore, che e' una scelta
    DELLA PAGINA — sulla barra verde scura il marchio prende il colore della barra, se no
    sarebbe verde su verde. */
 /* IL MARCHIO PRENDE IL COLORE DI DOVE STA, e non e' un dettaglio: con `color:var(--leo)`
    la voce «Leo» del menu diventava verde marchio SUL VERDE della barra, cioe' spariva — e
    lo stesso sarebbe successo sul pulsante verde di /studi e sulla barra in basso. Dove il
    verde lo vogliamo davvero (il titolo dell'eroe, la firma nel pie') c'e' gia' scritto sul
    contenitore. Un marchio invisibile e' peggio di un marchio scolorito. */
 .leo{font-weight:800}
 /* ══════════ TOCCO FUTURISTA — aurora ambientale, vetro, bagliori (leggero, non invadente) ══════════ */
 body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 48% at 14% 8%,rgba(60,80,45,.12),transparent 62%),
   radial-gradient(42% 52% at 88% 12%,rgba(13,111,208,.11),transparent 62%),
   radial-gradient(46% 50% at 78% 90%,rgba(201,162,74,.10),transparent 62%),
   radial-gradient(40% 42% at 18% 92%,rgba(60,80,45,.07),transparent 62%);
  animation:auroraDrift 26s ease-in-out infinite alternate}
 @keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.07)}100%{transform:translate3d(-2%,2%,0) scale(1.04)}}
 /* griglia tecnica finissima, quasi impercettibile, per profondita' "hi-tech" */
 body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(33,50,20,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(33,50,20,.035) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%)}
 /* superfici a vetro + bagliore all'hover */
 .card{background:rgba(255,255,255,.74);backdrop-filter:saturate(1.25) blur(10px);-webkit-backdrop-filter:saturate(1.25) blur(10px)}
 .card:hover{box-shadow:0 22px 52px rgba(33,50,20,.16),0 0 0 1px rgba(60,80,45,.20)}
 .btn.primary,nav .links a.cta{box-shadow:0 8px 22px rgba(60,80,45,.30),0 0 22px rgba(60,80,45,.16)}
 .btn.primary:hover{box-shadow:0 12px 30px rgba(60,80,45,.42),0 0 30px rgba(60,80,45,.28)}
 /* ── CARTOON LIGHT — armonia con www.phairesearch.com (stessa famiglia, non dark finanza) ──
    www = dark (#0c1222, border 3px #0c1222, shadow 5-6px) · diabete = light (#ffffff su #f6faf3,
    border rgba(33,50,20,.18) per non appesantire su bianco, shadow 4px rgba(33,50,20,.10)).
    Stesso radius hand-drawn, stessi 44px icone bianche con bordo ink, stessa Montserrat —
    si capisce che è stessa famiglia, ma resta leggibile per ricette/referti lunghi. */
 .benefit,.plan,.price,.faq details,.recipe-card,.study-card,.leo-card{
  background:var(--card);border:2px solid rgba(33,50,20,.18);
  border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;box-shadow:3px 3px 0 rgba(33,50,20,.10);
  transform:rotate(-.3deg);transition:transform .18s,box-shadow .18s,border-color .18s}
 .benefit:nth-child(even),.plan:nth-child(even),.price:nth-child(even),.recipe-card:nth-child(even){transform:rotate(.4deg)}
 .benefit:hover,.plan:hover,.price:hover,.recipe-card:hover,.study-card:hover{transform:rotate(0deg) translateY(-2px);box-shadow:5px 5px 0 rgba(33,50,20,.12);border-color:rgba(33,50,20,.22)}
 /* LEO avatar/cartoon come su www/ricerca/diabete.html — bordo 2px ink + shadow 3px (alleggerito) */
 .leo-card{position:relative;background:var(--card);border:2px solid var(--ink,#0c1222);border-radius:20px;padding:14px;box-shadow:3px 3px 0 var(--ink,#0c1222);transform:rotate(.4deg)}
 .leo-card::before{content:'LEO';position:absolute;top:-10px;left:14px;background:#fff;border:2px solid var(--ink,#0c1222);border-radius:999px;padding:2px 10px;font-family:var(--mono);font-size:10px;font-weight:800;transform:rotate(-2deg);box-shadow:1px 1px 0 var(--ink,#0c1222)}
 .leo-avatar{width:100%;aspect-ratio:1.2/1;background:linear-gradient(180deg,#e8f5e9,#fff);border:2px solid var(--ink,#0c1222);border-radius:16px;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:2px 2px 0 rgba(33,50,20,.10)}
 /* FAQ details fumetto light */
 .faq details{background:var(--card);border:2px solid rgba(33,50,20,.18);border-radius:14px;padding:0 16px;margin-bottom:10px;box-shadow:3px 3px 0 rgba(33,50,20,.10);transform:rotate(-.2deg);transition:transform .15s}
 .faq details:nth-child(even){transform:rotate(.2deg)}
 .faq details[open]{transform:rotate(0deg)}
 .faq summary{padding:14px 0;cursor:pointer;font-weight:800;display:flex;justify-content:space-between;align-items:center;list-style:none;font-family:var(--font)}
 .faq summary::after{content:'+';color:var(--leo);font-size:18px;font-weight:800}
 .faq details[open] summary::after{content:'—'}
 /* icone 44px bianche con bordo ink + shadow — come su www/ricerca/diabete.html */
 .benefit .ic,.plan .ic,.price .ic,.recipe-card .ic{width:44px;height:44px;border-radius:10px;background:#fff;border:2px solid var(--ink,#0c1222);box-shadow:2px 2px 0 var(--ink,#0c1222);display:grid;place-items:center;flex-shrink:0}
 /* top bar verde LEO 3px come su www */
 .card.leo::before{height:3px}
 /* header link hover gia' rgba(60,80,45,.10) su _NAV_STYLE — qui solo rafforzo coerente */
 nav .links a:hover{background:rgba(60,80,45,.10)}
 /* bottoni cartoon ghost mai bianco su bianco dentro card bianche: bordo ink garantito */
 .btn.ghost,.btn.sec{color:var(--ink,#0c1222)}
 /* ── LISTE, TABELLE, BLOCKQUOTE — dettagli che fanno famiglia, non rumore ── */
 .ind ul, .ind ol, .bubble ul, .bubble ol{padding-left:1.4em;margin:0.9em 0}
 .ind li, .bubble li{margin:0.35em 0;line-height:1.65}
 .ind li::marker, .bubble li::marker{color:var(--leo);font-weight:700}
 .ind ul{list-style:none;padding-left:1.1em}
 .ind ul li{position:relative;padding-left:0.4em}
 .ind ul li::before{content:"–";position:absolute;left:-0.9em;color:var(--leo);font-weight:800}
 .ind table{width:100%;border-collapse:separate;border-spacing:0;border:2px solid rgba(33,50,20,.14);border-radius:12px;overflow:hidden;margin:1em 0;font-size:14px}
 .ind th, .ind td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left}
 .ind th{background:rgba(60,80,45,.08);font-weight:800;font-size:0.86em;text-transform:uppercase;letter-spacing:0.04em;color:var(--leo-dk)}
 .ind tr:last-child td{border-bottom:none}
 .ind blockquote{border-left:3px solid var(--leo);background:rgba(60,80,45,.06);border-radius:0 12px 12px 0;padding:14px 18px;margin:1.2em 0;color:var(--muted);font-style:italic;box-shadow:2px 2px 0 rgba(33,50,20,.06)}
 .ind pre, .ind code{font-family:var(--mono);font-size:0.9em}
 .ind pre{background:rgba(33,50,20,.04);border:2px solid rgba(33,50,20,.10);border-radius:10px;padding:12px;overflow:auto}
 /* HOME: il prodotto viene prima della mappa. LEO e' una guida dentro un giardino di fonti,
    non un logo isolato sopra una landing generica. Il tratto resta leggero sui dati clinici. */
 .home-hero{padding:60px 20px 44px;text-align:left;background:
  radial-gradient(70% 95% at 84% 18%,rgba(13,111,208,.13),transparent 66%),
  radial-gradient(56% 90% at 12% 5%,rgba(201,162,74,.13),transparent 65%),
  linear-gradient(145deg,#f7fbf4 0%,#eef6e8 52%,#edf5f2 100%)}
 .home-hero::before{top:-36%;left:70%;width:92%;height:132%;opacity:.7}
 .home-hero-grid{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr);gap:clamp(36px,6vw,80px);align-items:center}
 .home-hero-copy{min-width:0}
 .home-seal{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 12px;
  border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-.6deg)}
 .home-seal::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--leo);box-shadow:0 0 0 4px rgba(60,80,45,.13)}
 .home-hero h1{max-width:720px;margin:0;font-size:clamp(38px,5.1vw,64px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
 .home-hero p{max-width:610px;margin:22px 0 0;font-size:clamp(15.5px,1.5vw,18px);line-height:1.65}
 .home-hero .ctas{justify-content:flex-start;margin-top:26px}
 .home-hero .trust{margin-top:18px}
 .leo-portal{position:relative;min-width:0;padding:14px 14px 18px;border:3px solid var(--ink);border-radius:24px 18px 28px 20px / 20px 28px 20px 24px;
  background:#102a24;box-shadow:8px 8px 0 var(--ink),0 24px 58px rgba(33,50,20,.22);transform:rotate(.45deg)}
 .leo-portal::before{content:"COACH LEO";position:absolute;z-index:3;top:-14px;left:22px;padding:5px 12px;
  border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;transform:rotate(-2deg)}
 .leo-portal-art{position:relative;overflow:hidden;border:2px solid var(--ink);border-radius:17px;background:#102a24}
 .leo-portal-art img{display:block;width:100%;height:auto;aspect-ratio:640/260;object-fit:cover}
 .leo-portal-art::after{content:"";position:absolute;inset:auto 0 0;height:45%;pointer-events:none;background:linear-gradient(transparent,rgba(5,15,18,.54))}
 .leo-console{position:relative;z-index:2;margin:-30px 18px 0;padding:14px 15px;border:2px solid var(--ink);border-radius:14px 12px 17px 13px / 12px 17px 12px 15px;
  background:#fff;color:var(--text);box-shadow:4px 4px 0 var(--ink);transform:rotate(-.35deg)}
 .leo-console-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--border);font-size:11px;font-weight:800}
 .leo-console-head span:last-child{color:var(--leo);font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
 .leo-console p{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
 .leo-console-sources{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
 .leo-console-sources span{padding:5px 8px;border:1.5px solid var(--border-hi);border-radius:999px;background:var(--soft);font-family:var(--mono);font-size:9px;font-weight:800;color:var(--leo-dk)}
 .home-proof{position:relative;z-index:1;max-width:1180px;margin:42px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
 .home-proof span{min-height:68px;padding:11px 13px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:2px solid rgba(33,50,20,.18);border-radius:14px 12px 16px 13px;background:rgba(255,255,255,.8);box-shadow:3px 3px 0 rgba(33,50,20,.10);color:var(--muted);font-size:11px;font-weight:700}
 .home-proof strong{display:block;color:var(--text);font-size:16px;line-height:1.2}
 .home-tools{padding:22px 0 64px;position:relative}
 .home-tools .sec-h{margin-top:50px}
 .home-tools .card{padding-top:58px;overflow:visible}
 .card-num{position:absolute;top:18px;left:22px;display:grid;place-items:center;width:31px;height:25px;border:2px solid var(--ink);border-radius:8px 7px 9px 7px;
  background:#fff;color:var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:var(--mono);font-size:10px;font-weight:800;transform:rotate(-3deg)}
 .home-tools .card:nth-child(2) .card-num{transform:rotate(3deg)}
 .home-map{position:relative;margin-top:8px;padding:4px 0 76px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;
  --muted:#bdcbbd;color:#f6fbf4;background:
  radial-gradient(60% 80% at 18% 8%,rgba(61,220,151,.13),transparent 70%),
  radial-gradient(52% 65% at 86% 12%,rgba(110,160,255,.13),transparent 72%),
  linear-gradient(155deg,#102a24 0%,#0c1920 52%,#101629 100%)}
 .home-map::before,.home-map::after{content:"";position:absolute;border:1px solid rgba(202,255,222,.18);border-radius:50%;pointer-events:none}
 .home-map::before{width:380px;height:380px;left:-220px;top:90px}
 .home-map::after{width:520px;height:520px;right:-330px;bottom:-290px}
 .home-map .wrap{position:relative;z-index:1}
 .home-map .sec-h{margin-top:64px}
 .home-map .sec-h h2{color:#fff}
 .home-map .sec-h .eyebrow{color:#d8b969}
 .home-map .sfx-p{color:#bdcbbd}
 .home-map .sfx-box{border:3px solid var(--ink);border-radius:22px 18px 26px 20px;box-shadow:8px 8px 0 var(--ink),0 24px 70px rgba(0,0,0,.28);
  background:radial-gradient(100% 90% at 50% 42%,rgba(255,250,235,.96),rgba(224,241,224,.70) 58%,rgba(14,42,33,.5))}
 .home-map .sfx-cta{border:2px solid var(--ink);border-radius:13px 11px 15px 12px;box-shadow:3px 3px 0 var(--ink);font-weight:800}
 @media(max-width:900px){
  .home-hero{padding:48px 20px 38px}
  .home-hero-grid{grid-template-columns:1fr;gap:38px}
  .home-hero-copy{text-align:center}
  .home-hero h1,.home-hero p{margin-left:auto;margin-right:auto}
  .home-hero .ctas{justify-content:center}
  .leo-portal{width:min(100%,620px);margin:0 auto}
  .home-proof{grid-template-columns:repeat(2,1fr);margin-top:34px}
 }
 @media(max-width:600px){
  .home-hero{padding:38px 16px 32px}
  .home-hero h1{font-size:clamp(34px,11vw,46px);line-height:1.02}
  .home-seal{font-size:9px;margin-bottom:16px}
  .home-hero .ctas{display:grid;grid-template-columns:1fr;width:100%}
  .home-hero .btn{width:100%;justify-content:center;text-align:center;min-height:54px}
  .leo-portal{padding:10px 10px 15px;border-radius:19px 15px 22px 16px;box-shadow:5px 5px 0 var(--ink)}
  .leo-console{margin:-16px 8px 0;padding:12px}
  .leo-console p{font-size:11.5px}
  .home-proof{gap:8px}
  .home-proof span{min-height:64px;padding:9px 7px;font-size:9.5px}
  .home-proof strong{font-size:14px}
  .home-tools{padding-bottom:46px}
  .home-tools .cards{grid-template-columns:1fr}
  .home-map{padding-bottom:52px}
  .home-map .sec-h{margin-top:46px}
 .home-map .sfx-box{margin-inline:0;border-radius:17px 14px 20px 15px;box-shadow:5px 5px 0 var(--ink)}
 }
 /* ── CARTOON LIGHT GLOBAL — regole comuni nel document head ── */
 body .acard,body .scard,body .tile,body .pd-card,body .ind-card,
 body .an-sez,body .gu,body .wz-card,body .pf-sez,body .rp-tile,body .sez,
 body .acc-card,body .ev-s,body .study,body .pr-nav a{
  background:var(--card)!important;border:2px solid rgba(33,50,20,.18)!important;
  border-radius:16px 14px 20px 16px / 14px 20px 16px 12px!important;
  box-shadow:3px 3px 0 rgba(33,50,20,.10)!important;transform:rotate(-.3deg);
  transition:transform .18s,box-shadow .18s,border-color .18s}
 body .acard:nth-child(even),body .scard:nth-child(even),body .tile:nth-child(even),body .ind-card:nth-child(even),
 body .an-sez:nth-child(even),body .rp-tile:nth-child(even),body .pd-card:nth-child(even){transform:rotate(.4deg)}
 body .acard:hover,body .scard:hover,body .tile:hover,body .pd-card:hover,body .ind-card:hover,
 body .an-sez:hover,body .gu:hover,body .rp-tile:hover,body .sez:hover,body .ev-s:hover,body .pr-nav a:hover{
  transform:rotate(0deg) translateY(-2px)!important;box-shadow:5px 5px 0 rgba(33,50,20,.12)!important;
  border-color:rgba(33,50,20,.22)!important}
 body .card.leo::before,body .scard::before{height:3px!important}
 body .card .ic,body .scard .ic,body .acard .ic{width:44px!important;height:44px!important;background:#fff!important;border:2px solid var(--ink,#0c1222)!important;box-shadow:2px 2px 0 var(--ink,#0c1222)!important;border-radius:11px!important}
 body .btn,body .sci-btn,body .cbtn,body .plan,body .save,body .pd,body .dc-nav a,body .dc-print,body .calview-btn,body .chip.on,body .area-tab{
  border:2.2px solid var(--ink,#0c1222)!important;box-shadow:2px 2px 0 var(--ink,#0c1222)!important;
  border-radius:14px 12px 16px 12px / 12px 16px 12px 14px!important;transform:rotate(-.2deg);transition:transform .14s,box-shadow .14s}
 body .btn.primary,body .cbtn.on,body .chip.on,body .plan,body .area-tab.on{
  background:var(--leo)!important;color:#fff!important;border-color:var(--ink,#0c1222)!important;box-shadow:3px 3px 0 var(--ink,#0c1222)!important}
 body .btn.sec,body .calview-btn,body .save{
  background:#fff!important;color:var(--ink,#0c1222)!important;border-color:var(--ink,#0c1222)!important}
 body .btn:hover,body .sci-btn:hover,body .cbtn:hover,body .area-tab:hover{transform:rotate(0deg) translateY(-1px)!important;box-shadow:3px 3px 0 var(--ink,#0c1222)!important}
 body nav:not(.appnav) .links a:hover{background:rgba(60,80,45,.10)!important}
 body nav.appnav .links a:hover{background:rgba(255,255,255,.14)!important}
 @media(prefers-reduced-motion:reduce){body::before{animation:none}}