/* Montamelo, sito pubblico (28/10/2026). Stesso sistema della pagina del creator (caricamento/pagina.html):
   crema e quasi-nero, lime #adfb00 solo come riempimento con testo nero sopra (14,75:1), oliva #4a6b00 per gli accenti sottili su chiaro (5,64:1). */
@font-face { font-family:"Figtree"; font-style:normal; font-weight:400 800; font-display:swap; src:url(/font/figtree.woff2) format("woff2"); }
@font-face { font-family:"Bricolage"; font-style:normal; font-weight:500 800; font-display:swap; src:url(/font/bricolage.woff2) format("woff2"); }

:root {
  --sfondo:#f7f4ef; --carta:#ffffff; --carta2:#efe9e0; --testo:#1c1915; --tenue:#655d55; --linea:rgba(28,25,21,.10);
  --lime:#adfb00; --su-lime:#141210; --oliva:#4a6b00; --oliva-t:rgba(122,178,0,.14);
  --ombra-sm:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(25,28,33,.07);
  --ombra-md:0 0 0 1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.06), 0 12px 24px -12px rgba(0,0,0,.12), 0 32px 48px -24px rgba(0,0,0,.10);
  --ombra-btn:0 1px 0 0 rgba(255,255,255,.45) inset, 0 1px 2px rgba(45,70,0,.25), 0 10px 22px -10px rgba(74,107,0,.55);
  --esce:cubic-bezier(.23,1,.32,1);
  --r:20px; --r-grande:28px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo:#141210; --carta:#1e1b18; --carta2:#26221e; --testo:#f5f0ea; --tenue:#a59b91; --linea:rgba(255,255,255,.09);
    --oliva:#adfb00; --oliva-t:rgba(173,251,0,.10);
    --ombra-sm:0 0 0 1px rgba(255,255,255,.07);
    --ombra-md:0 0 0 1px rgba(255,255,255,.07), 0 24px 48px -24px rgba(0,0,0,.8);
    --ombra-btn:0 1px 0 0 rgba(255,255,255,.35) inset, 0 0 0 1px rgba(173,251,0,.25), 0 12px 30px -12px rgba(173,251,0,.40);
  }
}

* { box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; background:var(--sfondo); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--sfondo); color:var(--testo); font:400 18px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1, h2, h3, .marchio { font-family:"Bricolage", "Figtree", system-ui, sans-serif; letter-spacing:-.02em; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--oliva); outline-offset:3px; border-radius:8px; }

.pagina { max-width:640px; margin:0 auto; padding:0 20px; }

/* testata */
header.testa { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--sfondo) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .2s ease; padding-top:env(safe-area-inset-top); }
header.testa.sotto { border-bottom-color:var(--linea); }
header.testa .pagina { display:flex; align-items:center; justify-content:space-between; height:62px; }
.marchio { display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; text-decoration:none; }
.marchio svg { width:34px; height:34px; display:block; border-radius:9px; }
.link-prova { font-weight:700; font-size:16px; text-decoration:none; padding:10px 14px; border-radius:999px; background:var(--carta);
  box-shadow:var(--ombra-sm); transition:transform .16s var(--esce); }
.link-prova:active { transform:scale(.97); }

/* pulsanti */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; min-height:60px; padding:0 28px; border:0; border-radius:999px;
  font:700 19px/1 "Figtree", system-ui, sans-serif; text-decoration:none; cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none;
  transition:transform .16s var(--esce), box-shadow .2s ease; }
.btn:active { transform:scale(.97); }
.btn-lime { background:var(--lime); color:var(--su-lime); box-shadow:var(--ombra-btn); }
.btn-lime svg { transition:transform .2s var(--esce); }
@media (hover:hover) and (pointer:fine) { .btn-lime:hover svg { transform:translateX(3px); } }
.btn-chiaro { background:var(--carta); color:var(--testo); box-shadow:var(--ombra-sm); }
.btn[disabled] { opacity:.6; cursor:default; }

/* apertura */
.apertura { padding:36px 0 8px; }
.apertura h1 { font-size:clamp(38px, 10.5vw, 58px); line-height:1.02; font-weight:800; margin:0 0 18px; text-wrap:balance; }
.apertura h1 .seconda { color:var(--tenue); }
.apertura p.sotto { font-size:19px; color:var(--tenue); margin:0 0 28px; max-width:30em; text-wrap:pretty; }
.apertura .azioni { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.apertura .rassicura { font-size:15px; color:var(--tenue); margin:2px 0 0; text-align:center; }
@media (min-width:560px) { .apertura .azioni { flex-direction:row; align-items:center; } .apertura .rassicura { text-align:left; } }

/* prima e dopo */
.video-blocco { margin:40px 0 0; }
.telefono { position:relative; margin:0 auto; width:min(100%, 340px); aspect-ratio:9/16; border-radius:34px; overflow:hidden; background:#000;
  box-shadow:var(--ombra-md), 0 0 0 8px var(--carta), 0 0 0 9px var(--linea); }
.telefono video { width:100%; height:100%; object-fit:cover; display:block; }
.didascalia { text-align:center; font-size:15px; color:var(--tenue); margin:24px auto 0; max-width:26em; }

/* sezioni */
section.blocco { padding:72px 0 0; }
section.blocco h2 { font-size:clamp(30px, 8vw, 40px); line-height:1.08; font-weight:800; margin:0 0 10px; text-wrap:balance; }
section.blocco p.intro { color:var(--tenue); margin:0 0 28px; text-wrap:pretty; }

ol.passi { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:26px; }
ol.passi li { display:grid; grid-template-columns:52px 1fr; gap:4px 16px; align-items:baseline; }
ol.passi .n { grid-row:span 2; font-family:"Bricolage", sans-serif; font-weight:800; font-size:44px; line-height:1; color:var(--oliva); }
ol.passi h3 { font-size:22px; margin:0; font-weight:700; letter-spacing:-.01em; }
ol.passi p { margin:0; color:var(--tenue); }

ul.incluso { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0; background:var(--carta); border-radius:var(--r);
  box-shadow:var(--ombra-sm); overflow:hidden; }
ul.incluso li { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-top:1px solid var(--linea); }
ul.incluso li:first-child { border-top:0; }
ul.incluso svg { flex:none; width:22px; height:22px; margin-top:2px; color:var(--oliva); }
ul.incluso b { font-weight:700; }
ul.incluso span { color:var(--tenue); }

.rapida { margin-top:16px; display:flex; gap:16px; align-items:flex-start; padding:20px; border-radius:var(--r); background:var(--oliva-t); }
.rapida .lampo { flex:none; width:44px; height:44px; border-radius:12px; background:var(--lime); color:var(--su-lime); display:grid; place-items:center; }
.rapida h3 { margin:0 0 4px; font-size:20px; }
.rapida p { margin:0; color:var(--tenue); }

/* prezzi */
.pacchetti { display:grid; gap:12px; }
.pacchetto { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; padding:20px 22px; background:var(--carta);
  border-radius:var(--r); box-shadow:var(--ombra-sm); }
.pacchetto .quanti { font-family:"Bricolage", sans-serif; font-weight:800; font-size:24px; letter-spacing:-.01em; }
.pacchetto .prezzo { font-family:"Bricolage", sans-serif; font-weight:800; font-size:28px; grid-row:span 2; text-align:right; }
.pacchetto .a-video { color:var(--tenue); font-size:16px; }
.pacchetto .risparmio { color:var(--oliva); font-weight:700; }
.pacchetto.scelto { box-shadow:0 0 0 2px var(--oliva), var(--ombra-md); }
.pacchetto .bollino { position:absolute; top:-11px; left:20px; background:var(--lime); color:var(--su-lime); font-size:13px; font-weight:800;
  padding:4px 10px; border-radius:999px; }
.nota-prezzi { font-size:15px; color:var(--tenue); margin:16px 0 0; }

/* domande */
.domande { border-top:1px solid var(--linea); }
.domande details { border-bottom:1px solid var(--linea); }
.domande summary { list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative; font-weight:700; font-size:19px; }
.domande summary::-webkit-details-marker { display:none; }
.domande summary::after { content:""; position:absolute; right:6px; top:50%; width:11px; height:11px; margin-top:-8px; border-right:2.5px solid var(--tenue);
  border-bottom:2.5px solid var(--tenue); transform:rotate(45deg); transition:transform .2s var(--esce); }
.domande details[open] summary::after { transform:translateY(5px) rotate(-135deg); }
.domande details p { margin:-6px 0 20px; color:var(--tenue); }

/* modulo */
.prova { margin-top:80px; padding:30px 22px 26px; background:var(--carta); border-radius:var(--r-grande); box-shadow:var(--ombra-md); scroll-margin-top:80px; }
.prova h2 { font-size:clamp(30px, 8vw, 38px); line-height:1.06; margin:0 0 8px; font-weight:800; }
.prova p.intro { color:var(--tenue); margin:0 0 24px; }
.campo { display:block; margin:0 0 16px; }
.campo span { display:block; font-weight:700; font-size:16px; margin:0 0 6px; }
.campo small { font-weight:500; color:var(--tenue); }
.campo input { width:100%; min-height:56px; padding:0 16px; font:500 18px "Figtree", system-ui, sans-serif; color:var(--testo); background:var(--sfondo);
  border:1.5px solid var(--linea); border-radius:14px; transition:border-color .15s ease, box-shadow .15s ease; -webkit-appearance:none; appearance:none; }
.campo input:focus { outline:none; border-color:var(--oliva); box-shadow:0 0 0 4px var(--oliva-t); }
.trappola { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.consenso { display:flex; gap:12px; align-items:flex-start; margin:6px 0 22px; font-size:16px; color:var(--tenue); cursor:pointer; }
.consenso input { flex:none; width:24px; height:24px; margin:1px 0 0; accent-color:var(--oliva); }
.prova .btn { width:100%; }
.errore { color:#b3261e; font-weight:600; font-size:16px; margin:14px 0 0; min-height:1px; }
@media (prefers-color-scheme: dark) { .errore { color:#ff8a80; } }

.esito { text-align:left; }
.esito .spunta { width:56px; height:56px; border-radius:50%; background:var(--lime); color:var(--su-lime); display:grid; place-items:center; margin:0 0 18px; }
.esito .spunta path { stroke-dasharray:30; stroke-dashoffset:30; animation:disegna .5s .15s var(--esce) forwards; }
.esito h2 { margin-bottom:6px; }
.link-personale { margin:18px 0 12px; padding:16px; border-radius:14px; background:var(--sfondo); border:1.5px dashed var(--linea);
  font:600 16px/1.35 ui-monospace, "SF Mono", Menlo, monospace; word-break:break-all; }
.esito .azioni { display:grid; gap:10px; }
.esito .suggerimento { font-size:15px; color:var(--tenue); margin:16px 0 0; }
@keyframes disegna { to { stroke-dashoffset:0; } }

/* piede */
footer.piede { margin-top:80px; padding:32px 0 calc(36px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea); font-size:15px; color:var(--tenue); }
footer.piede .pagina { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
footer.piede a { text-decoration:none; font-weight:600; color:var(--testo); }
footer.piede .diritti { margin-left:auto; }

/* testi legali */
.legale { padding:28px 0 0; }
.legale h1 { font-size:clamp(32px, 8vw, 42px); line-height:1.08; margin:0 0 6px; }
.legale .agg { color:var(--tenue); font-size:15px; margin:0 0 28px; }
.legale h2 { font-size:22px; margin:32px 0 8px; }
.legale p, .legale li { color:var(--testo); }
.legale ul { padding-left:20px; }
.legale .bozza { background:var(--oliva-t); border-radius:14px; padding:14px 16px; font-size:15px; }

/* entrate: una volta, brevi, solo opacita' e spostamento; nessuna con «riduci movimento» */
.entra { opacity:0; transform:translateY(14px); transition:opacity .6s var(--esce), transform .6s var(--esce); }
.entra.vista { opacity:1; transform:none; }
.apertura .entra:nth-child(2) { transition-delay:.06s; } .apertura .entra:nth-child(3) { transition-delay:.12s; }
@media (prefers-reduced-motion: reduce) {
  .entra { opacity:1; transform:none; transition:none; }
  .esito .spunta path { animation:none; stroke-dashoffset:0; }
  .btn, .link-prova { transition:none; }
}

/* ---------- 28/10 sera: accesso e area personale ---------- */
.testa-azioni { display:flex; align-items:center; gap:8px; }
.link-accedi { font-weight:700; font-size:16px; text-decoration:none; padding:10px 6px; color:var(--testo); }
.opzionale { display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--tenue); margin:2px 0 4px; }
.opzionale input, .consenso input { width:22px; height:22px; flex:0 0 22px; margin:2px 0 0; accent-color:var(--oliva); }

.conto { padding-top:28px; padding-bottom:64px; display:flex; flex-direction:column; gap:18px; }
.conto h1 { font-size:34px; line-height:1.1; margin:0; }
.conto .sotto { color:var(--tenue); margin:6px 0 0; }
.scheda { background:var(--carta); border-radius:var(--r-grande); box-shadow:var(--ombra-md); padding:22px; }
.scheda h2 { font-size:22px; margin:0 0 4px; }
.scheda .intro { color:var(--tenue); margin:0 0 14px; font-size:16px; }
.saldo { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.saldo .num { font-family:"Bricolage", system-ui, sans-serif; font-weight:800; font-size:72px; line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; }
.saldo .eti { color:var(--tenue); font-size:16px; margin-top:8px; }
.saldo .pill-lime { background:var(--lime); color:var(--su-lime); font-weight:700; font-size:14px; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.scheda .btn { width:100%; margin-top:16px; }

.lista { list-style:none; margin:0; padding:0; }
.lista li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--linea); font-size:16px; }
.lista li:first-child { border-top:0; }
.lista .t { font-weight:600; }
.lista .q { color:var(--tenue); font-size:14px; }
.lista .piu { color:var(--oliva); font-weight:700; font-variant-numeric:tabular-nums; }
.lista .meno { color:var(--tenue); font-variant-numeric:tabular-nums; }
.vuoto-t { color:var(--tenue); font-size:16px; margin:0; }

.pacchi { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pac { display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--testo); background:var(--sfondo); border-radius:18px; padding:14px;
  box-shadow:var(--ombra-sm); position:relative; transition:transform .16s var(--esce); }
.pac:active { transform:scale(.97); }
.pac.scelto { box-shadow:0 0 0 2px var(--oliva); }
.pac b { font-family:"Bricolage", system-ui, sans-serif; font-size:20px; }
.pac .e { font-weight:800; font-size:24px; }
.pac .a { color:var(--tenue); font-size:13px; }
.pac[aria-disabled="true"] { cursor:default; }
.avviso { background:var(--carta2); border-radius:14px; padding:12px 14px; font-size:15px; color:var(--tenue); margin:0 0 12px; }

.interruttore { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16px; }
.interruttore .q { color:var(--tenue); font-size:14px; }
.toggle { appearance:none; -webkit-appearance:none; width:54px; height:32px; flex:0 0 54px; border-radius:999px; background:var(--carta2);
  box-shadow:inset 0 0 0 1px var(--linea); position:relative; cursor:pointer; transition:background-color .2s ease; margin:0; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .22s var(--esce); }
.toggle:checked { background:var(--lime); }
.toggle:checked::after { transform:translateX(22px); background:var(--su-lime); }
.azioni-basse { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.link-tenue { background:none; border:0; padding:8px 0; font:600 16px "Figtree", system-ui, sans-serif; color:var(--tenue); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer; }

.accesso { padding:36px 0 64px; max-width:440px; }
.accesso h1 { font-size:34px; margin:0 0 8px; line-height:1.1; }
.accesso .intro { color:var(--tenue); margin:0 0 20px; }
.codice-in { font:800 34px/1 "Bricolage", system-ui, sans-serif !important; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; }
.passo { display:flex; flex-direction:column; gap:14px; }
.passo[hidden] { display:none; }
.nota-accesso { background:var(--carta2); border-radius:16px; padding:14px 16px; font-size:16px; }
.cambio { animation:cambio .32s var(--esce) both; }
@keyframes cambio { from { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cambio { animation:none; } .toggle, .toggle::after { transition:none; } }

/* area personale sul telefono: le due colonne si sciolgono e l'ordine resta saldo, pronti, ricarica, movimenti, preferenze */
.col-lato, .col-princ { display:contents; }
.o1 { order:1; } .o2 { order:2; } .o3 { order:3; } .o4 { order:4; } .o5 { order:5; } .o6 { order:6; }
.conto-testa { order:0; }

/* ---------- 28/10 sera: versione da computer (Alex: «non un telefono stirato») ----------
   768 px: righe piu' larghe, griglie a 2-3 colonne. 1100 px: impaginazioni vere a due colonne. Larghezza massima 1120. */
@media (min-width:768px) {
  .pagina { max-width:1120px; padding:0 32px; }
  header.testa .pagina { height:72px; }
  .apertura { padding:64px 0 8px; max-width:720px; }
  .apertura h1 { font-size:clamp(52px, 6vw, 68px); }
  section.blocco { padding-top:104px; }
  section.blocco h2 { font-size:44px; }
  section.blocco > .intro, section.blocco > h2 { max-width:680px; }
  ol.passi { grid-template-columns:repeat(3, 1fr); gap:32px; }
  ol.passi li { grid-template-columns:1fr; gap:10px; }
  ol.passi .n { grid-row:auto; }
  ul.incluso { grid-template-columns:1fr 1fr; }
  ul.incluso li:nth-child(2) { border-top:0; }
  ul.incluso li:nth-child(odd) { border-right:1px solid var(--linea); }
  .pacchetti { grid-template-columns:1fr 1fr; gap:16px; }
  .domande { max-width:760px; }
  .prova { max-width:620px; margin:104px auto 0; padding:40px 40px 34px; }
  .legale { max-width:720px; padding-top:48px; }
  .accesso { margin:0 auto; padding-top:88px; }
  .conto h1 { font-size:44px; }
  .scheda { padding:28px; }
}
@media (min-width:1100px) {
  /* apertura in due colonne: testo a sinistra, il prima e dopo a destra */
  main.pagina:has(> .apertura) { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); column-gap:72px; align-items:center; }
  main.pagina:has(> .apertura) > * { grid-column:1 / -1; }
  main.pagina:has(> .apertura) > .apertura { grid-column:1; grid-row:1; padding:80px 0 24px; }
  main.pagina:has(> .apertura) > .video-blocco { grid-column:2; grid-row:1; margin:48px 0 0; }
  .telefono { width:min(100%, 360px); }
  .pacchetti { grid-template-columns:repeat(4, 1fr); }
  .pacchetto { grid-template-columns:1fr; align-content:start; padding:28px 22px 24px; gap:6px; }
  .pacchetto .prezzo { grid-row:auto; text-align:left; font-size:36px; order:2; }
  .pacchetto .a-video { order:3; }
  .pacchetto .risparmio { display:block; }
  .rapida { max-width:760px; }
  /* area personale: colonna principale (pronti, movimenti, preferenze) e colonna di lato (saldo e ricarica, ferma mentre si scorre) */
  .conto { display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:24px 32px; align-items:start; padding-top:48px; }
  .conto-testa { grid-column:1 / -1; }
  .col-princ, .col-lato { display:flex; flex-direction:column; gap:24px; min-width:0; }
  .col-princ { grid-column:1; grid-row:2; }
  .col-lato { grid-column:2; grid-row:2; position:sticky; top:96px; }
  .pacchi { grid-template-columns:1fr 1fr; }
}
@media (hover:hover) and (pointer:fine) {
  .link-prova, .link-accedi, footer.piede a, .pac { transition:transform .16s var(--esce), box-shadow .2s ease, color .15s ease; }
  .link-prova:hover { box-shadow:var(--ombra-md); }
  .link-accedi:hover, footer.piede a:hover { color:var(--oliva); }
  .pacchetto, .pac[href] { transition:transform .2s var(--esce), box-shadow .2s ease; }
  .pacchetto:hover, .pac[href]:hover { transform:translateY(-2px); box-shadow:var(--ombra-md); }
  .pacchetto.scelto:hover { box-shadow:0 0 0 2px var(--oliva), var(--ombra-md); }
  .domande summary:hover { color:var(--oliva); }
  .btn-chiaro:hover { box-shadow:var(--ombra-md); }
  .link-tenue:hover { color:var(--testo); }
}
/* 28/10: il pulsante del hero andava a capo su desktop («Prova gratis 1 / video») */
.azioni .btn { flex-shrink:0; }

/* 28/10 Alex: su desktop la pagina deve occupare tutta la larghezza, non restare al centro */
@media (min-width:1100px) {
  .pagina { max-width:1680px; padding:0 clamp(40px, 5.5vw, 112px); }
  main.pagina:has(> .apertura) { column-gap:clamp(64px, 7vw, 140px); }
  main.pagina:has(> .apertura) > .apertura { max-width:none; }
  .apertura h1 { font-size:clamp(64px, 5.6vw, 104px); }
  .apertura p.sotto { font-size:clamp(19px, 1.35vw, 23px); }
  .telefono { width:min(100%, clamp(360px, 26vw, 460px)); }
  section.blocco > .intro, section.blocco > h2 { max-width:900px; }
  .domande { max-width:980px; }
}

/* 28/10 «Porta un amico»: scheda nell'area personale e banner sulla pagina iniziale */
.btn-scuro { background:var(--testo); color:var(--sfondo); box-shadow:var(--ombra-sm); width:100%; }
.invita .intro b { color:var(--testo); }
.invito-link { display:flex; align-items:center; gap:10px; justify-content:space-between; margin:4px 0 14px; padding:12px 12px 12px 16px;
  border-radius:16px; background:var(--carta2); border:1px solid var(--linea); font-weight:600; font-size:16px; }
.invito-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.btn-piccolo { flex-shrink:0; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--lime); color:var(--su-lime);
  font:inherit; font-weight:700; font-size:15px; cursor:pointer; transition:transform .16s var(--esce); }
.btn-piccolo:active { transform:scale(.97); }
.inv-conto { margin:14px 0 6px; font-size:16px; color:var(--testo); }
.inv-regole { color:var(--tenue); font-size:14px; margin:0; }
.banner-invito { display:flex; align-items:center; gap:12px; margin:16px 0 0; padding:12px 16px; border-radius:16px;
  background:var(--oliva-t); border:1px solid var(--linea); font-weight:600; font-size:16px; }
.banner-invito .dono { flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--lime); color:var(--su-lime); }
.banner-invito[hidden] { display:none; }

/* 28/10 Alex (monitor 21:9): niente fasce vuote ai lati, il contenuto arriva fino ai bordi */
@media (min-width:1100px) {
  .pagina { max-width:none; padding:0 clamp(40px, 6vw, 200px); }
  .apertura h1 { font-size:clamp(64px, 5.4vw, 150px); }
  .apertura p.sotto { font-size:clamp(19px, 1.3vw, 30px); max-width:36em; }
  .telefono { width:min(100%, clamp(360px, 24vw, 640px)); }
  section.blocco > .intro, section.blocco > h2 { max-width:none; }
  .domande { max-width:1400px; }
}

/* ===== 28/10 sera: animazioni della home (Alex: «qualche animazione carina da vedere nella home?»)
   Pagina vista di rado: qui c'e' spazio per un po' di piacere. Solo transform/opacity (+ il disegno della spunta),
   una volta sola, tutto spento con «riduci movimento». */
:root { --molla:cubic-bezier(.34,1.36,.64,1); }

/* 1. titolo: le parole salgono una dopo l'altra (le avvolge lo script) */
.parole .p { display:inline-block; animation:sale .8s var(--esce) both; animation-delay:calc(var(--i) * 55ms + 60ms); }
.parole .seconda .p { animation-duration:1s; }
@keyframes sale { from { opacity:0; transform:translateY(.45em); } }

/* 2. il logo: le tre scie entrano da sinistra, e al passaggio del mouse fanno uno scatto */
.marchio .scia { transform-box:fill-box; animation:scia .7s var(--esce) both; }
.marchio .scia:nth-of-type(2) { animation-delay:.07s; } .marchio .scia:nth-of-type(3) { animation-delay:.14s; }
@keyframes scia { from { opacity:0; transform:translateX(-7px); } }
.marchio.pronto .scia { animation:none; }
@media (hover:hover) and (pointer:fine) {
  .marchio.pronto:hover .scia { animation:sfreccia .42s var(--esce); }
  .marchio.pronto:hover .scia:nth-of-type(2) { animation-delay:.03s; } .marchio.pronto:hover .scia:nth-of-type(3) { animation-delay:.06s; }
}
@keyframes sfreccia { 0% { transform:none; } 35% { opacity:.35; transform:translateX(-5px); } 100% { transform:none; } }

/* 3. la timeline del passo 2: senza script (o con meno movimento) si vede il risultato finale */
.striscia { grid-column:-2 / -1; width:100%; max-width:360px; height:auto; margin:14px 0 0; display:block; overflow:visible; color:var(--tenue); }
.striscia .binario { stroke:var(--linea); stroke-width:2; }
.striscia .clip { transform-box:view-box; }
.striscia .scarto { fill:url(#righe); opacity:0; transform-box:fill-box; transform-origin:center; }
.striscia .c2 { transform:translateX(-38px); } .striscia .c3 { transform:translateX(-82px); }
.striscia .clip { fill:var(--lime); stroke:var(--su-lime); stroke-opacity:.18; }
.striscia .testina { fill:var(--oliva); opacity:0; transform-box:view-box; }
.striscia .fatto circle { fill:var(--lime); }
.striscia .fatto path { fill:none; stroke:var(--su-lime); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.striscia .fatto { transform-box:fill-box; transform-origin:center; }
/* in attesa di arrivare in vista: il girato com'e', con gli scarti */
.striscia.attesa .clip { fill:var(--testo); stroke:none; transform:none; }
.striscia.attesa .scarto { opacity:1; }
.striscia.attesa .fatto { opacity:0; }
/* in vista: taglio (0,25 s) → si uniscono (0,7 s) → la testina scorre (1,2 s) → diventa lime → spunta (2,2 s) */
.striscia.gioca .scarto { animation:taglia .32s .25s var(--esce) both; }
.striscia.gioca .c2 { animation:unisci-2 .5s .55s var(--molla) both; }
.striscia.gioca .c3 { animation:unisci-3 .5s .62s var(--molla) both; }
.striscia.gioca .testina { animation:scorre 1s 1.15s cubic-bezier(.65,0,.35,1) both; }
.striscia.gioca .c1, .striscia.gioca .c2, .striscia.gioca .c3 { transition:fill .3s ease; }
.striscia.gioca.lime .clip { fill:var(--lime); stroke:var(--su-lime); }
.striscia.gioca .fatto { animation:compare .45s 2.15s var(--molla) both; }
.striscia.gioca .fatto path { stroke-dasharray:22; stroke-dashoffset:22; animation:disegna .35s 2.35s var(--esce) forwards; }
@keyframes taglia { from { opacity:1; transform:none; } to { opacity:0; transform:scaleY(.4); } }
@keyframes unisci-2 { from { transform:none; } to { transform:translateX(-38px); } }
@keyframes unisci-3 { from { transform:none; } to { transform:translateX(-82px); } }
@keyframes scorre { 0% { opacity:0; transform:translateX(0); } 8% { opacity:1; } 90% { opacity:1; transform:translateX(194px); } 100% { opacity:0; transform:translateX(194px); } }
@keyframes compare { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }

/* 4. numeri che contano: niente salti di larghezza mentre contano */
.conta { font-variant-numeric:tabular-nums; display:inline-block; text-align:right; }

/* 5. la scheda del prima e dopo si inclina un poco seguendo il mouse (solo desktop, la muove lo script) */
@media (hover:hover) and (pointer:fine) { .telefono { will-change:transform; } }

/* 6. un bagliore lime che si sposta piano dietro l'apertura (solo desktop) */
.bagliore { display:none; }
@media (min-width:1100px) {
  main.pagina:has(> .apertura) { overflow-x:clip; }
  .apertura { position:relative; isolation:isolate; }
  .bagliore { display:block; position:absolute; z-index:-1; left:-12%; top:-10%; width:min(70vw, 1500px); aspect-ratio:1.4; pointer-events:none;
    background:radial-gradient(closest-side, rgba(173,251,0,.20), rgba(173,251,0,.07) 45%, transparent 72%);
    opacity:.75; animation:deriva 26s ease-in-out infinite alternate; will-change:transform; }
  .nascosta .bagliore { animation-play-state:paused; }
}
@media (min-width:1100px) and (prefers-color-scheme: dark) { .bagliore { opacity:.55; } }
@keyframes deriva { from { transform:translate3d(-4%, 0, 0) scale(1); } to { transform:translate3d(10%, 8%, 0) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .parole .p, .marchio .scia, .striscia * { animation:none !important; }
  .bagliore { animation:none; }
}

/* 28/10 Alex: «il logo vorrei si vedesse meglio ed in grande, non solo li' in alto a sinistra» */
.marchio { font-size:23px; gap:11px; color:var(--testo); }
.marchio svg { width:38px; height:38px; border-radius:10px; box-shadow:0 1px 2px rgba(20,18,16,.12), 0 4px 12px rgba(122,178,0,.22); }
@media (min-width:768px) { .marchio { font-size:26px; gap:12px; } .marchio svg { width:44px; height:44px; border-radius:11px; } }

/* sigillo in apertura: il marchio come momento, sopra il titolo */
.sigillo { width:clamp(88px, 8.5vw, 168px); aspect-ratio:1; margin:28px 0 26px; }
.sigillo svg { width:100%; height:100%; display:block; border-radius:23%;
  box-shadow:0 1px 2px rgba(20,18,16,.10), 0 10px 30px -6px rgba(122,178,0,.38), 0 26px 60px -24px rgba(61,90,0,.45); }
.sigillo { animation:sigillo .8s var(--esce) both; }
@keyframes sigillo { from { opacity:0; transform:translateY(10px) scale(.96); } }
.sigillo .scia { transform-box:fill-box; animation:scia-grande .8s var(--esce) .25s both; }
.sigillo .scia:nth-of-type(2) { animation-delay:.32s; } .sigillo .scia:nth-of-type(3) { animation-delay:.39s; }
@keyframes scia-grande { from { opacity:0; transform:translateX(-9px); } }
@media (min-width:1100px) { main.pagina:has(> .apertura) > .apertura { padding-top:56px; } .sigillo { margin:0 0 34px; } }

/* firma grande in fondo */
footer.piede .firma-blocco { display:block; padding-top:8px; padding-bottom:30px; margin-bottom:22px; border-bottom:1px solid var(--linea); }
footer.piede a.firma { display:flex; align-items:center; gap:clamp(14px, 2vw, 40px); text-decoration:none; color:var(--testo);
  font-family:"Bricolage", "Figtree", system-ui, sans-serif; font-weight:800; letter-spacing:-.045em; line-height:.9;
  font-size:clamp(52px, 12.5vw, 400px); }
footer.piede a.firma svg { flex:none; width:.86em; height:.86em; border-radius:23%; box-shadow:0 12px 34px -10px rgba(122,178,0,.45); }
.firma span { white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .sigillo, .sigillo .scia { animation:none; } }

/* 28/10 Alex: «Registrati» in alto a destra, ben visibile */
.link-registrati { background:var(--lime); color:var(--su-lime); padding:11px 20px; box-shadow:var(--ombra-btn); }
.testa.sotto .pagina { display:flex; align-items:center; justify-content:space-between; }

/* ---------- 28/10 notte: accesso con Google e dashboard del cliente (Alex: «una dashboard, accesso con Google») ---------- */
.g-box { min-height:44px; display:flex; flex-direction:column; gap:10px; }
.g-btn { min-height:44px; display:flex; justify-content:flex-start; }
.oppure { display:flex; align-items:center; gap:12px; color:var(--tenue); font-size:14px; margin:6px 0 0; }
.oppure::before, .oppure::after { content:""; flex:1; height:1px; background:var(--linea); }
.accesso .btn-chiaro { width:100%; }
.email-ok { display:block; margin-top:6px; color:var(--testo); font-weight:600; font-size:15px; }

body.app { min-height:100dvh; }
.salta { position:absolute; left:-9999px; }
.salta:focus { left:16px; top:16px; z-index:20; background:var(--carta); padding:8px 12px; border-radius:10px; }
.app-lato { display:none; }
.app-testa { position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 20px 10px; background:color-mix(in srgb, var(--sfondo) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); }
.app-testa .marchio svg { width:38px; height:38px; display:block; filter:drop-shadow(0 4px 10px rgba(122,178,0,.25)); }
.saldo-pill { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:999px; background:var(--carta);
  box-shadow:var(--ombra-sm); text-decoration:none; font-size:15px; color:var(--tenue); touch-action:manipulation; }
.saldo-pill b { color:var(--testo); font:800 18px "Bricolage", system-ui, sans-serif; font-variant-numeric:tabular-nums; }
.app-main { padding:8px 20px calc(110px + env(safe-area-inset-bottom, 0px)); max-width:1400px; }
.vista[hidden] { display:none; }
.app-intesta { margin:8px 0 18px; }
.app-intesta h1 { font-size:34px; line-height:1.08; margin:0; }
.app-intesta .sotto { color:var(--tenue); margin:6px 0 0; font-size:17px; max-width:38em; }
.app-griglia { display:grid; gap:16px; align-items:start; }
.stretta { max-width:640px; }
.vista > .scheda + .scheda, .vista > .scheda + .azioni-basse { margin-top:16px; }
.riga-t { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 6px; }
.riga-t h2 { margin:0; }
.link-oliva { color:var(--oliva); font-weight:700; font-size:15px; text-decoration:none; }
.q { color:var(--tenue); font-size:14px; }
.centro { text-align:center; margin:10px 0 0; }

/* carica */
.carica-scheda .saldo { margin-bottom:6px; }
.carica-scheda .saldo .btn-piccolo { text-decoration:none; display:inline-flex; align-items:center; background:var(--carta2); color:var(--testo); }
.btn.grande { min-height:72px; font-size:20px; border-radius:22px; }
.rapida { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 0; padding:14px 16px; border-radius:18px;
  background:var(--sfondo); cursor:pointer; transition:background .2s ease, box-shadow .2s ease; }
.rapida[hidden] { display:none; }
.rapida-t { display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.rapida-t svg { flex:none; margin-top:2px; color:var(--tenue); transition:color .2s ease, transform .3s var(--esce); }
.rapida.on { background:var(--oliva-t); box-shadow:0 0 0 1px color-mix(in srgb, var(--oliva) 35%, transparent) inset; }
.rapida.on .rapida-t svg { color:var(--oliva); transform:scale(1.1); }
.avviso-rapida { margin:10px 0 0; font-size:15px; background:#fff4e5; color:#6b4300; border-radius:14px; padding:12px 14px; }
@media (prefers-color-scheme: dark) { .avviso-rapida { background:#2e2412; color:#ffd59a; } }
.avviso-rapida a { color:inherit; font-weight:700; }
.avanza { margin:18px 0 0; padding:16px; border-radius:18px; background:var(--sfondo); }
.avanza-t { display:flex; justify-content:space-between; align-items:baseline; font-weight:700; }
.avanza-t b { font:800 26px "Bricolage", system-ui, sans-serif; font-variant-numeric:tabular-nums; }
.barra { height:10px; border-radius:999px; background:var(--carta2); overflow:hidden; margin:10px 0 8px; }
.barra i { display:block; height:100%; background:var(--lime); transform-origin:left; transform:scaleX(0); transition:transform .4s var(--esce); }
.avanza .q { margin:2px 0 0; }
.vista .esito { margin:18px 0 0; padding:18px; border-radius:18px; background:var(--sfondo); }
.vista .esito h3 { font-size:22px; margin:0 0 4px; }
.vista .esito p { margin:0; color:var(--tenue); font-size:16px; }
.vista .esito.problema .spunta { background:#ffe1dc; color:#8c1d12; }
@media (prefers-color-scheme: dark) { .vista .esito.problema .spunta { background:#3a1e1a; color:#ffb4a8; } }

/* passi di lavorazione */
.passi-lista { list-style:none; margin:0; padding:0; }
.passi-lista li { padding:14px 0; border-top:1px solid var(--linea); }
.passi-lista li:first-child { border-top:0; }
.passi-lista li.vuoto { padding:6px 0; }
.pl-t { display:flex; align-items:center; gap:10px; justify-content:space-between; font-size:16px; }
.pl-t b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pl-t .pill-lime { flex:none; background:var(--lime); color:var(--su-lime); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; }
.pl-fasi { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:10px 0 6px; }
.pl-fasi i { height:6px; border-radius:999px; background:var(--carta2); }
.pl-fasi i.fatto { background:var(--oliva); }
.pl-fasi i.ora { background:var(--lime); animation:pulsa-fase 1.6s ease-in-out infinite; }
.pl-fasi.ferma i { background:var(--carta2); }
@keyframes pulsa-fase { 50% { opacity:.45; } }

/* video */
.segmenti { display:flex; gap:6px; padding:5px; border-radius:999px; background:var(--carta2); width:max-content; max-width:100%; overflow-x:auto; margin:0 0 18px; }
.segmenti button { border:0; background:none; font:700 15px "Figtree", system-ui, sans-serif; color:var(--tenue); min-height:42px; padding:0 16px;
  border-radius:999px; cursor:pointer; white-space:nowrap; touch-action:manipulation; transition:background .2s ease, color .2s ease; }
.segmenti button[aria-selected="true"] { background:var(--carta); color:var(--testo); box-shadow:var(--ombra-sm); }
.segmenti span:not(:empty) { margin-left:4px; color:var(--oliva); }
.riga-azioni { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.riga-azioni .btn-piccolo { font-weight:700; }
.griglia-video { display:grid; gap:16px; }
.video-c { background:var(--carta); border-radius:var(--r-grande); box-shadow:var(--ombra-md); padding:12px; display:flex; flex-direction:column; gap:10px; }
.video-c video { width:100%; aspect-ratio:9/16; max-height:70vh; border-radius:18px; background:#000; object-fit:contain; }
.video-c .info { display:flex; flex-direction:column; gap:2px; padding:0 4px; }
.video-c .info b { font-size:17px; line-height:1.3; }
.video-c .btn { min-height:52px; font-size:16px; width:100%; }
.video-c .btn svg { width:20px; height:20px; }
.avviso-mod { display:flex; gap:8px; align-items:center; margin:0; padding:10px 12px; border-radius:12px; background:var(--carta2); font-size:14px; color:var(--tenue); }
.avviso-mod svg { width:18px; height:18px; flex:none; }
.mod { display:flex; flex-direction:column; gap:10px; }
.mod[hidden] { display:none; }
.mod textarea { width:100%; font:500 16px/1.4 "Figtree", system-ui, sans-serif; color:var(--testo); background:var(--sfondo); border:1px solid var(--linea);
  border-radius:14px; padding:12px; resize:vertical; }
.mod textarea:focus { outline:none; border-color:var(--oliva); box-shadow:0 0 0 4px var(--oliva-t); }
.mod-azioni { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mod-azioni .btn { min-height:48px; padding:0 12px; }
.voce.ascolta { background:#ffe1dc; color:#8c1d12; }
.voce .punto { width:10px; height:10px; border-radius:50%; background:#d93025; animation:pulsa-fase 1s ease-in-out infinite; }
.esito-mod { margin:0; }

/* profilo */
.pill-g { flex:none; font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--carta2); }
.vista .azioni-basse { margin-top:16px; }
.vista .azioni-basse .btn { width:auto; min-height:52px; }

/* barra in basso (telefono) */
.app-tab { position:fixed; left:0; right:0; bottom:0; z-index:7; display:grid; grid-template-columns:repeat(5, 1fr);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--linea); }
.app-tab a { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:52px; justify-content:center;
  text-decoration:none; color:var(--tenue); font-size:11px; font-weight:700; border-radius:14px; touch-action:manipulation;
  user-select:none; -webkit-user-select:none; transition:color .15s ease, transform .12s var(--esce); }
.app-tab a span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.app-tab a svg { width:24px; height:24px; }
.app-tab a:active { transform:scale(.94); }
.app-tab a[aria-current] { color:var(--testo); }
.app-tab a[aria-current] svg { color:var(--su-lime); background:var(--lime); border-radius:10px; padding:3px; width:30px; height:26px; }
.punto-nuovi { position:absolute; top:8px; right:calc(50% - 18px); width:9px; height:9px; border-radius:50%; background:#d93025; box-shadow:0 0 0 2px var(--carta); }
.punto-nuovi[hidden] { display:none; }

@media (min-width:768px) {
  .app-griglia { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:20px; }
  .griglia-video { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
  .app-intesta h1 { font-size:44px; }
}
@media (min-width:1000px) {
  body.app { display:grid; grid-template-columns:272px minmax(0, 1fr); }
  .app-testa, .app-tab { display:none; }
  .app-lato { display:flex; flex-direction:column; gap:28px; position:sticky; top:0; height:100dvh; padding:28px 18px;
    border-right:1px solid var(--linea); background:var(--sfondo); }
  .app-lato .marchio { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:800; text-decoration:none; padding:0 10px; }
  .app-lato .marchio svg { width:42px; height:42px; filter:drop-shadow(0 4px 12px rgba(122,178,0,.3)); }
  .app-nav { display:flex; flex-direction:column; gap:4px; }
  .app-nav a { position:relative; display:flex; align-items:center; gap:12px; min-height:48px; padding:0 14px; border-radius:14px;
    text-decoration:none; color:var(--tenue); font-weight:700; font-size:16px; transition:background .15s ease, color .15s ease; }
  .app-nav a svg { width:22px; height:22px; flex:none; }
  .app-nav a[aria-current] { background:var(--carta); color:var(--testo); box-shadow:var(--ombra-sm); }
  .app-nav a[aria-current] svg { color:var(--oliva); }
  .app-nav .punto-nuovi { position:static; margin-left:auto; box-shadow:none; }
  .app-chi { margin-top:auto; padding:14px; border-radius:16px; background:var(--carta); box-shadow:var(--ombra-sm);
    display:flex; flex-direction:column; gap:2px; font-size:15px; min-width:0; }
  .app-chi span { color:var(--tenue); font-size:13px; overflow:hidden; text-overflow:ellipsis; }
  .app-main { padding:40px clamp(28px, 4vw, 72px) 64px; max-width:none; }
  .app-intesta { margin:0 0 28px; }
  .app-intesta h1 { font-size:clamp(44px, 3.4vw, 64px); }
  .app-griglia { grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:24px; }
  .griglia-video { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (hover:hover) and (pointer:fine) {
  .app-nav a:hover { color:var(--testo); background:color-mix(in srgb, var(--carta) 60%, transparent); }
  .segmenti button:hover { color:var(--testo); }
  .link-oliva:hover { text-decoration:underline; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-fasi i.ora, .voce .punto { animation:none; }
  .barra i, .rapida, .rapida-t svg, .app-tab a { transition:none; }
}

/* 28/10 Alex: i crediti rimasti sempre in vista, anche da computer (prima la barra in alto spariva sopra i 1000 px) */
@media (min-width:1000px) {
  .app-testa { display:flex; position:fixed; top:20px; right:28px; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; z-index:20; }
  .app-testa .marchio { display:none; }
  .saldo-pill { min-height:46px; padding:0 18px; font-size:16px; }
  .saldo-pill b { font-size:22px; }
}

/* ===== 28/10 notte (Alex): saldo lime, carica bloccata senza crediti, «Invita» con contatori, piccoli elementi grafici ===== */
.saldo-pill { background:var(--lime); color:var(--su-lime); box-shadow:0 6px 18px -8px rgba(122,178,0,.55), var(--ombra-sm); }
.saldo-pill b { color:var(--su-lime); }
.btn.senza { background:var(--carta); color:var(--testo); box-shadow:inset 0 0 0 2px var(--oliva), var(--ombra-sm); }
/* un alone lime morbido dietro i titoli: decorazione ferma, sotto al testo */
.app-intesta { position:relative; isolation:isolate; }
.app-intesta::before { content:""; position:absolute; z-index:-1; left:-40px; top:-60px; width:320px; height:220px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(173,251,0,.32), rgba(173,251,0,0)); opacity:.75; }
@media (prefers-color-scheme: dark) { .app-intesta::before { opacity:.45; } }
/* stati vuoti: la M di Montamelo, piccola e tenue */
.vuoto-t::before { content:""; display:block; width:44px; height:44px; margin:0 auto 12px; border-radius:12px; opacity:.9;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='translate(32 32) scale(.84) translate(-34.2 -32)' fill='%23141210'%3E%3Crect x='6.82' y='19.5' width='13' height='5' rx='2.5'/%3E%3Crect x='8.2' y='29.5' width='9.5' height='5' rx='2.5'/%3E%3Crect x='9.57' y='39.5' width='6' height='5' rx='2.5'/%3E%3Cpath d='M22 50V14h10l7 13 7-13h10v36h-8.5V31l-6.5 11.5h-4L30.5 31v19z' transform='skewX(-12) translate(6.5 0)'/%3E%3C/g%3E%3C/svg%3E") center/100% no-repeat;
  box-shadow:0 8px 20px -10px rgba(122,178,0,.6); }
.vuoto-t { text-align:center; }
/* indicatore dei crediti */
.gauge { height:10px; border-radius:999px; background:var(--oliva-t); overflow:hidden; margin:14px 0 6px; }
.gauge i { display:block; height:100%; border-radius:999px; background:var(--lime); transform-origin:left center; transform:scaleX(.015);
  transition:transform .7s var(--esce); }
.gauge i.basso { background:#f2a33a; }
/* Invita un amico: tre numeri grandi, la strada verso il prossimo premio, una piccola festa */
.invita { position:relative; overflow:hidden; }
.invita::after { content:""; position:absolute; right:-28px; bottom:-28px; width:150px; height:150px; pointer-events:none; opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%234a6b00'%3E%3Crect x='6.82' y='19.5' width='13' height='5' rx='2.5'/%3E%3Crect x='8.2' y='29.5' width='9.5' height='5' rx='2.5'/%3E%3Crect x='9.57' y='39.5' width='6' height='5' rx='2.5'/%3E%3Cpath d='M22 50V14h10l7 13 7-13h10v36h-8.5V31l-6.5 11.5h-4L30.5 31v19z' transform='skewX(-12) translate(6.5 0)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.inv-stat { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:18px 0 6px; }
.inv-stat > div { background:var(--sfondo); border-radius:16px; padding:14px 10px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.inv-stat .inv-premio { background:var(--lime); color:var(--su-lime); }
.inv-n { font:800 clamp(30px, 6vw, 44px)/1 "Bricolage", system-ui, sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.inv-stat span { font-size:13px; } .inv-stat > div:not(.inv-premio) span { color:var(--tenue); }
.inv-strada { margin:10px 0 4px; }
.inv-barra { height:8px; border-radius:999px; background:var(--oliva-t); overflow:hidden; margin-bottom:8px; }
.inv-barra i { display:block; height:100%; background:var(--oliva); border-radius:999px; transform-origin:left center; transform:scaleX(.02);
  transition:transform .8s var(--esce) .15s; }
.inv-festa { position:relative; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--lime); color:var(--su-lime); font-size:15px; margin:8px 0; }
.inv-festa .anello { position:absolute; inset:0; border-radius:14px; box-shadow:0 0 0 2px var(--lime); animation:inv-anello .9s var(--esce) 1 both; pointer-events:none; }
@keyframes inv-anello { from { transform:scale(1); opacity:.9; } to { transform:scale(1.08, 1.35); opacity:0; } }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .gauge i, .inv-barra i { transition:none; } .inv-festa .anello { animation:none; opacity:0; } }
.inv-festa[hidden] { display:none; }
.inv-stat .inv-n span { font-size:inherit; color:inherit; }

/* ---------- 28/10: scheda di stile del cliente (Profilo → Stile dei tuoi video, e al primo accesso) ---------- */
.stile-card-t { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stile-card .q { margin:8px 0 0; color:var(--tenue); font-size:16px; }
body.wiz-aperto { overflow:hidden; }
.wiz { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:var(--sfondo);
  padding:calc(14px + env(safe-area-inset-top, 0px)) 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
.wiz[hidden] { display:none; }
.wiz-testa { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.wiz-punti { display:flex; gap:6px; }
.wiz-punti span { width:8px; height:8px; border-radius:99px; background:var(--linea); transition:width .3s var(--esce), background .3s; }
.wiz-punti span.fatto { background:var(--oliva); }
.wiz-punti span.ora { width:24px; background:var(--lime); }
.wiz-corpo { flex:1; min-height:0; overflow:auto; display:grid; gap:18px; align-content:start; padding:8px 0 16px; }
.wiz-anteprima { display:flex; justify-content:center; }
.wiz-tel { position:relative; width:min(46vw, 190px); aspect-ratio:9/16; border-radius:22px; overflow:hidden;
  box-shadow:var(--ombra-md); background:#1b1a17; }
.wiz-scena { position:absolute; inset:0; background:
  radial-gradient(60% 40% at 50% 34%, rgba(255,214,170,.55), transparent 70%),
  radial-gradient(70% 50% at 30% 80%, rgba(120,140,160,.45), transparent 70%),
  linear-gradient(160deg, #6b5d52, #2b2622 70%); }
.wiz-scena::before { content:""; position:absolute; left:37%; top:24%; width:26%; aspect-ratio:1; border-radius:50%;
  background:rgba(34,28,24,.62); }                       /* una sagoma: «chi parla in camera» */
.wiz-scena::after { content:""; position:absolute; left:18%; right:18%; top:44%; bottom:-6%; border-radius:46% 46% 0 0;
  background:rgba(34,28,24,.62); }
.wiz-sub { position:absolute; left:8%; right:8%; bottom:24%; text-align:center; text-transform:uppercase; line-height:1.05;
  font-size:min(5.4vw, 22px); color:var(--t, #fff); -webkit-text-stroke:3px var(--b, #000); paint-order:stroke fill; letter-spacing:.01em; }
.wiz-sub.centro { bottom:auto; top:46%; }
.wiz-sub span { display:none; }
.wiz-sub span.on { display:inline; }
.wiz-sub.frase span { display:inline; color:var(--t, #fff); }
.wiz-sub.frase span.on { color:var(--e); }
.wiz-sub[hidden] { display:none; }
.wiz-cerchio { position:absolute; left:6%; bottom:6%; width:34%; height:9%; border-radius:50%; border:3px solid var(--c); }
.wiz-cerchio[hidden] { display:none; }
.wiz-nota { position:absolute; left:8px; right:8px; top:10px; font:600 12px/1.2 "Figtree", system-ui; color:#fff; opacity:.9; text-align:center; }
.wiz-passo { margin:0; font-size:14px; color:var(--tenue); font-weight:600; }
.wiz-domanda h1 { margin:2px 0 4px; font:800 30px/1.1 "Bricolage", system-ui, sans-serif; letter-spacing:-.01em; }
.wiz-aiuto { margin:0 0 14px; color:var(--tenue); font-size:16px; }
.wiz-scelte { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.wiz-sc { min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px;
  border-radius:16px; border:2px solid transparent; background:var(--carta); color:var(--testo); box-shadow:var(--ombra-sm);
  font:600 17px/1.2 "Figtree", system-ui; cursor:pointer; touch-action:manipulation; transition:transform .16s var(--esce), border-color .16s; }
.wiz-sc:active { transform:scale(.97); }
.wiz-sc.on { border-color:var(--oliva); background:color-mix(in srgb, var(--lime) 14%, var(--carta)); }
.wiz-sc small { font-size:13px; color:var(--tenue); font-weight:600; }
.wiz-font { font-size:24px; line-height:1; }
.wiz-campione { font:800 30px/1 "Bricolage", system-ui; }
.wiz-mini { margin:18px 0 8px; font-size:14px; font-weight:700; color:var(--tenue); display:block; }
.wiz-pallini, .wiz-righe { display:flex; flex-wrap:wrap; gap:10px; }
.wiz-pallino { width:44px; height:44px; border-radius:50%; background:var(--c); border:3px solid var(--carta);
  box-shadow:0 0 0 1px var(--linea); cursor:pointer; transition:transform .16s var(--esce); }
.wiz-pallino.on { box-shadow:0 0 0 3px var(--oliva); }
.wiz-pallino:active { transform:scale(.94); }
.wiz-chip { min-height:44px; padding:0 16px; border-radius:999px; border:2px solid transparent; background:var(--carta);
  box-shadow:var(--ombra-sm); font:600 16px "Figtree", system-ui; color:var(--testo); cursor:pointer; }
.wiz-chip.on { border-color:var(--oliva); }
.wiz textarea { width:100%; box-sizing:border-box; font:400 18px/1.4 "Figtree", system-ui; padding:12px 14px; border-radius:14px;
  border:1px solid var(--linea); background:var(--carta); color:var(--testo); resize:vertical; }
.wiz-piede { display:flex; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--linea); }
.wiz-piede .btn { min-height:54px; flex:1; max-width:260px; }
@media (min-width:900px) {
  .wiz-corpo { grid-template-columns:minmax(220px, 300px) minmax(0, 640px); justify-content:center; align-items:center; gap:56px; }
  .wiz-tel { width:260px; }
  .wiz-sub { font-size:26px; }
  .wiz-domanda h1 { font-size:42px; }
  .wiz-piede { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) { .wiz-punti span, .wiz-sc { transition:none; } }

/* 28/10 sera: voci della guida «Come registrare», usate da /guida e dalla scheda nella dashboard */
  .g-lista { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
  .g-voce { display:flex; gap:16px; align-items:flex-start; padding:18px; border-radius:20px; background:var(--carta); box-shadow:var(--ombra-sm);
    opacity:0; transform:translateY(10px); animation:g-entra .5s cubic-bezier(.23,1,.32,1) forwards; }
  .g-ic { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--lime); color:#141210; }
  .g-ic svg { width:24px; height:24px; }
  .g-voce h3 { margin:2px 0 4px; font-size:19px; line-height:1.25; }
  .g-voce p { margin:0; font-size:16.5px; line-height:1.5; color:var(--tenue); }
  .g-voce .g-perche { margin-top:8px; font-size:15px; color:var(--testo); border-left:3px solid var(--lime); padding-left:10px; }
  .g-fine { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  @keyframes g-entra { to { opacity:1; transform:none; } }
  .g-voce:nth-child(1) { animation-delay:0ms; } .g-voce:nth-child(2) { animation-delay:45ms; } .g-voce:nth-child(3) { animation-delay:90ms; } .g-voce:nth-child(4) { animation-delay:135ms; } .g-voce:nth-child(5) { animation-delay:180ms; } .g-voce:nth-child(6) { animation-delay:225ms; } .g-voce:nth-child(7) { animation-delay:270ms; } .g-voce:nth-child(8) { animation-delay:315ms; } .g-voce:nth-child(9) { animation-delay:360ms; } .g-voce:nth-child(10) { animation-delay:405ms; } .g-voce:nth-child(11) { animation-delay:450ms; } 
  @media (prefers-reduced-motion: reduce) { .g-voce { animation:none; opacity:1; transform:none; } }
  @media (min-width:900px) { .g-lista { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } .g-voce { padding:22px; } }
  @media (min-width:1400px) { .g-lista { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.g-sotto { font-size:19px; color:var(--tenue); margin:0 0 28px; text-wrap:pretty; }
.stretta-testo { max-width:720px; }
#v-come-registrare .g-sotto { margin-top:-4px; }
/* barra in basso del telefono: sei voci */
.app-tab { grid-template-columns:repeat(6, 1fr); }
.app-tab a { font-size:11.5px; }
@media (max-width:370px) { .app-tab a { font-size:10.5px; } .app-tab a svg { width:22px; height:22px; } }

/* 28/10 sera: intestazione delle pagine pubbliche per chi ha gia' fatto l'accesso (la scrive il server) */
.testa-dentro { gap:10px; }
.testa-dentro .saldo-mini { min-height:38px; padding:0 12px; font-size:14px; background:var(--lime); color:var(--su-lime); box-shadow:var(--ombra-sm); }
.testa-dentro .saldo-mini b { color:var(--su-lime); font-size:16px; }
.mia-area { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:4px 14px 4px 4px; border-radius:999px; background:var(--carta);
  box-shadow:var(--ombra-sm); text-decoration:none; color:var(--testo); font-weight:700; font-size:15px; touch-action:manipulation; transition:transform .16s cubic-bezier(.23,1,.32,1); }
.mia-area:active { transform:scale(.97); }
.mia-area .avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:#141210; font:800 17px "Bricolage", system-ui, sans-serif; }
@media (max-width:420px) { .mia-area span:not(.avatar) { display:none; } .mia-area { padding:4px; } }
@media (max-width:340px) { .testa-dentro .saldo-mini { display:none; } }