/* Omissify — home (7 novembre 2026, quarta versione).
   Ricreata sulla struttura di pillar.it, chiesto da Stefano:
   fondo grigio chiaro, etichette spaziate colorate, titoli grandi in maiuscolo,
   cornice bianca col prodotto, righe alternate testo/scheda, elenco apribile delle
   funzioni, fascia scura con i numeri, domande al centro, piede scuro con bagliore.
   Inter per tutto, come il sito di prima (Stefano, 7 novembre 2026); Geist Mono
   per i segnaposti. Tutti in locale. Le altre pagine usano ancora tokens.css e site.css. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-medium-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #f3f3f2;
  --fondo-2: #fafaf9;
  --bianco: #ffffff;
  --scuro: #1f2125;
  --scuro-2: #2a2d32;
  --testo: #1f2125;
  --testo-2: #45474c;
  --tenue: #6d6f74;
  --bordo: #e6e6e3;
  --bordo-2: #d9d9d5;
  --accento: #b8341f;        /* il rosso della censura, per etichette e link */
  --evid: #ffe15a;

  --serif: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;   /* Inter come oggi su omissify.com (Stefano, 7 novembre 2026) */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --larga: 1260px;
  --gutter: clamp(16px, 5vw, 90px);
  --r-card: 24px;
  --r-tasto: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --strappo: polygon(.18em 0, calc(100% - .14em) 0, 100% 18%, calc(100% - .2em) 41%, calc(100% - .04em) 63%, calc(100% - .22em) 82%, calc(100% - .08em) 100%, .1em 100%, 0 79%, .2em 57%, .03em 36%, .16em 17%);
  --strappo-fine: polygon(.06em 0, calc(100% - .05em) 0, 100% 18%, calc(100% - .07em) 41%, calc(100% - .015em) 63%, calc(100% - .08em) 82%, calc(100% - .03em) 100%, .04em 100%, 0 79%, .07em 57%, .01em 36%, .05em 17%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1.1875rem/1.55 var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--scuro); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--scuro); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: 12px; z-index: 200; transform: translateY(-200%); background: var(--scuro); color: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-family: var(--sans); }
.skip-link:focus { transform: none; }
.larga { width: min(100% - 2 * var(--gutter), var(--larga)); margin-inline: auto; }

/* ---------- Pezzi ---------- */
.etichetta { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); }
.ph { display: inline-block; font-family: var(--mono); font-size: .74em; font-weight: 500; line-height: 1.6; letter-spacing: -.02em; background: var(--scuro); color: #fff; padding: 0 .5em; clip-path: var(--strappo); white-space: nowrap; vertical-align: .1em; }
.evid { background: linear-gradient(transparent 8%, var(--evid) 8%, var(--evid) 92%, transparent 92%); padding: 0 .1em; }

.tasto { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r-tasto); border: 1px solid transparent; font: 500 1rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.tasto--scuro { background: var(--scuro); color: #fff; }
.tasto--scuro:hover { background: #000; }
.tasto--grande { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; }
.tasto--bordo { background: transparent; border-color: var(--bordo-2); color: var(--testo); min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.tasto--bordo:hover { border-color: var(--testo); background: var(--bianco); }
.tasto--chiaro { background: #fff; color: var(--scuro); }
.tasto--piccolo { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.tasto .freccia { transition: transform .2s var(--ease); }
.tasto:hover .freccia { transform: translateX(3px); }

.maiuscolo { font-family: var(--serif); font-weight: 600; text-transform: uppercase; letter-spacing: -.012em; line-height: .98; }
.titolo-sezione { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.6rem); text-align: center; max-width: 13em; margin: 18px auto 0; }
.sottolineato { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.015em; font-weight: 500; }
.h3 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 500; }
.sotto { color: var(--testo-2); }
.centro { text-align: center; }
.sezione { padding-block: clamp(80px, 10vw, 140px); }

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bordo); font-family: var(--sans); }
.testata__riga { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.testata__sx { display: flex; align-items: center; gap: 40px; }
.testata__logo img { height: 30px; width: auto; }
.testata__menu { display: flex; gap: 30px; font-size: .9375rem; }
.testata__menu a { text-decoration: none; color: var(--testo); }
.testata__menu a:hover { color: var(--accento); }
.testata__dx { display: flex; align-items: center; gap: 22px; font-size: .9375rem; }
.testata__accedi { text-decoration: none; color: var(--testo-2); }
.testata__accedi:hover { color: var(--testo); }
@media (max-width: 960px) { .testata__menu { display: none; } }
@media (max-width: 440px) { .testata__accedi { display: none; } .testata__logo img { height: 25px; } }

/* ---------- Apertura ---------- */
.apertura { text-align: center; padding-top: clamp(72px, 10vw, 128px); }
.apertura__titolo { font-size: clamp(2.8rem, .8rem + 6.4vw, 5.8rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; max-width: 12.5em; margin: 22px auto 0; }
.coperta { position: relative; display: inline-block; }
.coperta::after { content: ""; position: absolute; left: -.04em; right: -.05em; top: .06em; bottom: .02em; background: var(--scuro); clip-path: var(--strappo-fine); transform-origin: left; }
.coperta--lunga { padding-inline: .32em .38em; margin-left: -.06em; }
/* Nastro del titolo: la parola sotto ("Omissify") serve solo a dare la lunghezza, non si vede */
.nastro-titolo { position: relative; display: inline-block; color: transparent; user-select: none; }
.nastro-titolo::after { content: ""; position: absolute; left: -.02em; right: -.02em; top: .08em; bottom: .04em; background: var(--scuro); clip-path: var(--strappo-fine); transform-origin: left; }
.piede__motto .nastro-titolo::after { background: var(--fondo); }
.anima-ok .nastro-titolo::after { animation: nastro .9s var(--ease) .8s both; }
.anima-ok .coperta::after { animation: nastro .9s var(--ease) 1s both; }
@keyframes nastro { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.apertura__sotto { max-width: 34em; margin: 26px auto 0; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4rem); color: var(--testo-2); line-height: 1.5; }
.apertura__azioni { margin-top: 36px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.garanzie { margin-top: clamp(56px, 7vw, 80px); background: var(--fondo-2); border-block: 1px solid var(--bordo); font-family: var(--sans); font-size: .9375rem; }
.garanzie ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 0; padding-block: 16px; }
.garanzie li { padding-inline: 18px; position: relative; }
.garanzie li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--tenue); }
.garanzie b { font-weight: 600; }

/* La cornice con il prodotto */
.cornice-zona { padding-top: clamp(96px, 12vw, 176px); }
.cornice { max-width: 1040px; margin-inline: auto; background: var(--bianco); border: 1px solid var(--bordo); border-radius: 28px; padding: 10px; box-shadow: 0 30px 80px -40px rgba(20, 22, 26, .25); text-align: left; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) 290px; border-radius: 20px; overflow: hidden; border: 1px solid var(--bordo); font-family: var(--sans); min-height: 480px; }
@media (max-width: 820px) { .app { grid-template-columns: 1fr; } .pannello { display: none; } }
.app__chat { display: flex; flex-direction: column; background: var(--bianco); }
.app__barra { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--bordo); font-size: .9375rem; font-weight: 500; }
.app__barra span:last-child { font-family: var(--mono); font-size: .75rem; color: var(--tenue); font-weight: 400; }
.app__messaggi { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px clamp(16px, 2.6vw, 28px); font-size: .9375rem; line-height: 1.6; }
.msg { max-width: 88%; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.msg.su { opacity: 1; transform: none; }
.msg--tu { align-self: flex-end; background: #ececea; border-radius: 16px; padding: 12px 16px; }
.msg--ai { align-self: flex-start; }
.msg--ai p + p { margin-top: 8px; }
.puntini { display: inline-flex; gap: 4px; padding: 6px 0; }
.puntini i { width: 6px; height: 6px; border-radius: 50%; background: var(--tenue); animation: puntini 1s infinite; }
.puntini i:nth-child(2) { animation-delay: .15s; } .puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes puntini { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.app__campo { position: relative; margin: 0 14px 14px; border: 1px solid var(--bordo-2); border-radius: 14px; padding: 12px 54px 12px 14px; min-height: 70px; font-size: .9375rem; line-height: 1.7; }
.app__vuoto { color: #9a9b9f; }
.app__invia { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 8px; background: var(--scuro); color: #fff; display: grid; place-items: center; font-size: .85rem; }

/* Il pannello di Omissify accanto alla chat */
.pannello { background: var(--fondo-2); border-left: 1px solid var(--bordo); display: flex; flex-direction: column; }
.pannello__testa { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--bordo); }
.pannello__testa img { height: 15px; width: auto; }
.stato { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--testo-2); }
.stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 3px rgba(47,158,91,.15); }
.pannello__corpo { padding: 16px; display: grid; gap: 10px; align-content: start; flex: 1; }
.pannello__titoletto { font-size: .75rem; color: var(--tenue); letter-spacing: .06em; text-transform: uppercase; }
.riga-dato { display: grid; gap: 4px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; font-size: .8125rem; opacity: 0; transform: translateX(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.riga-dato.su { opacity: 1; transform: none; }
.riga-dato s { color: var(--tenue); }
.riga-dato .ph { font-size: .74rem; justify-self: start; }
.pannello__piede { padding: 14px 16px; border-top: 1px solid var(--bordo); font-size: .8125rem; color: var(--testo-2); }
.pannello__piede b { font-weight: 600; color: var(--testo); }

/* Dati nella dimostrazione */
.dato { position: relative; isolation: isolate; white-space: nowrap; }
.dato::before { content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; top: .12em; bottom: .04em; background: var(--scuro); clip-path: var(--strappo); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.dato.coperto::before { transform: scaleX(1); }
.dato.coperto .dato__vero { color: transparent; transition: color .05s .25s; }
.dato__ph { display: none; font-family: var(--mono); font-size: .8em; font-weight: 500; color: #fff; padding: 0 .45em; }
.dato.sostituito .dato__vero { display: none; }
.dato.sostituito .dato__ph { display: inline; }
.dato.lampo .dato__vero { background: rgba(255, 225, 90, .85); }
.rip__vero { display: none; }
.rip.tornato .rip__ph { display: none; }
.rip.tornato .rip__vero { display: inline; background: linear-gradient(transparent 8%, var(--evid) 8%, var(--evid) 92%, transparent 92%) no-repeat; padding: 0 .1em; animation: evidenzia .55s var(--ease); }
@keyframes evidenzia { from { background-size: 0 100%; } to { background-size: 100% 100%; } }

.didascalia-demo { margin-top: 20px; text-align: center; font: 500 1rem/1.4 var(--sans); color: var(--testo-2); min-height: 1.4em; }

/* Striscia "funziona con" */
.funziona-con { padding-block: clamp(64px, 8vw, 96px); text-align: center; }
.funziona-con p.etichetta { color: var(--tenue); }
.marchi { margin-top: 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px clamp(32px, 6vw, 80px); font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 500; color: #8e8f93; letter-spacing: -.01em; }

/* ---------- Il prodotto: righe alternate ---------- */
.righe-prodotto { display: grid; gap: clamp(72px, 9vw, 120px); margin-top: clamp(56px, 7vw, 96px); }
.riga-prodotto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.riga-prodotto--inversa .riga-prodotto__testo { order: 2; }
@media (max-width: 900px) { .riga-prodotto { grid-template-columns: 1fr; } .riga-prodotto--inversa .riga-prodotto__testo { order: 0; } }
.riga-prodotto__testo .h3 { margin-top: 14px; }
.riga-prodotto__testo p.sotto { margin-top: 18px; max-width: 30em; }
.riga-prodotto__testo .tasto { margin-top: 26px; }
.scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--r-card); padding: clamp(18px, 2.6vw, 28px); font-family: var(--sans); font-size: .9375rem; line-height: 1.65; }
.scheda__titoletto { font-size: .75rem; color: var(--tenue); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.scheda__blocco { border: 1px solid var(--bordo); border-radius: 14px; padding: 14px 16px; }
.scheda__blocco + .scheda__blocco { margin-top: 12px; }
.scheda__blocco--grigio { background: #f6f6f5; }
.scheda__barrato { color: var(--tenue); text-decoration: line-through; }
.avviso { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .8125rem; background: var(--scuro); color: #fff; border-radius: 999px; padding: 6px 12px; }
.avviso::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5ed38f; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--bordo-2); border-radius: 999px; padding: 6px 12px; font-size: .875rem; background: #f6f6f5; }

/* Revisione allegato */
.revisione { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
.revisione__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bordo); flex-wrap: wrap; }
.revisione__nome { font-family: var(--mono); font-size: .8125rem; }
.revisione__nome .ph { font-size: .74rem; }
.revisione__pulsante { font-size: .8125rem; background: var(--scuro); color: #fff; border-radius: 6px; padding: 6px 10px; }
.revisione__fondo { background: #ececea; padding: 22px; }
.revisione__foglio { background: #fff; border-radius: 4px; padding: 22px 24px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.3); font-family: var(--serif); font-size: 1rem; line-height: 1.7; }
.revisione__foglio p + p { margin-top: 8px; }

/* Cursore prima / dopo */
.schede-doc { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--sans); }
.schede-doc button { border: 1px solid var(--bordo-2); background: transparent; border-radius: 999px; padding: 7px 14px; font-size: .875rem; cursor: pointer; min-height: 36px; }
.schede-doc button[aria-selected="true"] { background: var(--scuro); color: #fff; border-color: var(--scuro); }
.confronto { position: relative; overflow: hidden; --x: 50%; user-select: none; padding: 0; border-radius: var(--r-card); background: var(--bianco); border: 1px solid var(--bordo); }
.confronto__strato { padding: 52px clamp(20px, 3vw, 32px) 28px; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.85; }
.confronto__strato p + p { margin-top: .6em; }
.confronto__strato .doc-titolo { font-weight: 600; font-size: 1.15em; }
.confronto .x { white-space: nowrap; }
@media (max-width: 560px) { .confronto__strato { font-size: .9375rem; } }
.confronto__sopra { position: absolute; inset: 0; background: var(--bianco); clip-path: inset(0 0 0 var(--x)); }
.confronto__sopra .x { position: relative; color: transparent; }
.confronto__sopra .x::before { content: ""; position: absolute; left: -.06em; right: -.06em; top: .18em; bottom: .06em; background: var(--scuro); clip-path: var(--strappo); }
.confronto__sopra .x::after { content: attr(data-ph); position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: .62em; font-weight: 500; color: #fff; white-space: nowrap; }
.confronto__linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--scuro); pointer-events: none; }
.confronto__maniglia { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--scuro); color: #fff; display: grid; place-items: center; font: .8rem var(--sans); letter-spacing: -.1em; }
.confronto input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.confronto:focus-within .confronto__maniglia { outline: 3px solid var(--evid); outline-offset: 2px; }
.confronto__etichette { position: absolute; z-index: 2; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; pointer-events: none; font: .72rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }

/* ---------- Funzioni: elenco apribile ---------- */
.funzioni { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .funzioni { grid-template-columns: 1fr; } }
.funzioni .h2 { margin-top: 14px; }
.funzioni p.sotto { margin-top: 18px; max-width: 26em; }
.link-accento { display: inline-block; margin-top: 18px; font: 500 .9375rem var(--sans); letter-spacing: .02em; color: var(--accento); text-decoration: none; }
.link-accento:hover { text-decoration: underline; }
.voce { border-bottom: 1px solid var(--bordo-2); }
.voce summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 22px 8px; font-size: 1.25rem; font-weight: 500; }
.voce summary::-webkit-details-marker { display: none; }
.voce summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--tenue); border-bottom: 1.5px solid var(--tenue); transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); margin-right: 6px; }
.voce[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.voce__segno { width: 26px; height: 11px; background: var(--scuro); clip-path: polygon(8% 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%, 0 0); }
.voce p { padding: 0 8px 24px 54px; color: var(--testo-2); font-size: 1.0625rem; }

/* ---------- Fascia scura con i numeri ---------- */
.fascia { background: var(--scuro); color: #fff; padding-block: clamp(72px, 9vw, 110px); }
.fascia .h2 { color: #fff; text-align: center; max-width: 16em; margin-inline: auto; }
.numeri { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .numeri { grid-template-columns: 1fr; } }
.numero { background: var(--scuro-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); padding: 30px 20px; text-align: center; }
.numero b { display: block; font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.numero span { display: block; margin-top: 12px; font: .9375rem/1.4 var(--sans); letter-spacing: .02em; color: #c9cacd; }
.fascia__nota { margin: 36px auto 0; max-width: 46em; text-align: center; font-size: 1rem; color: #a9abaf; }

/* ---------- Per tutto quello che incolli ---------- */
.esempi-zona { background: var(--fondo-2); }
.esempi { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .esempi { grid-template-columns: 1fr; } }
.esempio { background: var(--bianco); border-radius: var(--r-card); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--bordo); }
.esempio__testo { font-size: 1.25rem; line-height: 1.5; font-style: italic; }
.esempio__testo .ph { font-style: normal; }
.esempio__chi { display: flex; align-items: center; gap: 12px; margin-top: auto; font-family: var(--sans); }
.esempio__icona { width: 40px; height: 40px; border-radius: 50%; background: #f1f1ef; border: 1px solid var(--bordo); display: grid; place-items: center; }
.esempio__icona i { width: 18px; height: 7px; background: var(--scuro); clip-path: polygon(8% 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%, 0 0); }
.esempio__chi b { display: block; font-size: .9375rem; font-weight: 600; }
.esempio__chi span { font-size: .8125rem; color: var(--tenue); letter-spacing: .02em; }

/* ---------- Prezzi ---------- */
.periodo { display: inline-flex; margin-top: 28px; padding: 4px; border-radius: 10px; background: #e8e8e6; font-family: var(--sans); }
.periodo button { border: 0; background: transparent; border-radius: 7px; padding: 9px 16px; cursor: pointer; font-size: .9375rem; min-height: 38px; }
.periodo button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.periodo small { font-size: .75rem; color: var(--accento); margin-left: 6px; }
.piani { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
/* Al lancio due schede, Gratuito e Pro (Stefano, 8 novembre 2026). */
.piani--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
@media (max-width: 960px) { .piani { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.piano { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--r-card); padding: 32px 30px; display: flex; flex-direction: column; }
.piano--pro { background: var(--scuro); color: #fff; border-color: var(--scuro); }
.piano__testa { display: flex; justify-content: space-between; align-items: center; }
.piano__nome { font-size: 1.75rem; font-weight: 500; }
.piano__bollino { font: 500 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #ffb4a6; }
.piano__per { margin-top: 6px; color: var(--tenue); font-size: 1.0625rem; }
.piano--pro .piano__per, .piano--pro .piano__nota { color: #b9bbbf; }
.piano__prezzo { margin-top: 24px; display: flex; align-items: baseline; gap: 8px; }
.piano__prezzo b { font-size: 3.4rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.piano__prezzo span { font: .9375rem var(--sans); color: var(--tenue); }
.piano--pro .piano__prezzo span { color: #b9bbbf; }
.piano__nota { margin-top: 8px; font: .875rem var(--sans); color: var(--tenue); min-height: 1.3em; }
.piano .tasto { margin-top: 24px; width: 100%; }
.piano__voci { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--bordo); display: grid; gap: 11px; font: .9375rem/1.45 var(--sans); }
.piano--pro .piano__voci { border-top-color: rgba(255,255,255,.12); }
.piano__voci li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.piano__voci li::before { content: ""; width: 14px; height: 6px; margin-top: .5em; background: currentColor; clip-path: polygon(10% 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 10% 50%, 0 0); }
.piano__voci li.titoletto { display: block; color: var(--tenue); }
.piano--pro .piano__voci li.titoletto { color: #b9bbbf; }
.piano__voci li.titoletto::before { display: none; }
@media (min-width: 961px) { .piano { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; align-content: start; } .piano__prezzo { align-self: end; } .piano__voci { align-content: start; } }   /* le stesse righe delle tre schede alla stessa altezza (Stefano, 7 novembre 2026) */
.presto { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accento); margin-left: 6px; }
.prezzi__note { margin-top: 26px; text-align: center; color: var(--tenue); font-size: 1rem; }

/* ---------- Domande ---------- */
.domande { max-width: 780px; margin: 44px auto 0; }
.domande .voce summary { grid-template-columns: 1fr auto; font-size: 1.1875rem; padding: 22px 6px; }
.domande .voce p { padding: 0 6px 24px; }

/* ---------- Chiusura e piede ---------- */
.piede { position: relative; overflow: hidden; background: var(--scuro); color: #fff; font-family: var(--sans); }
.piede::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 520px; background: radial-gradient(50% 60% at 25% 100%, rgba(184, 52, 31, .55), transparent 70%), radial-gradient(45% 55% at 85% 100%, rgba(255, 225, 90, .22), transparent 70%); pointer-events: none; }
.piede > * { position: relative; z-index: 1; }
.chiusura { text-align: center; padding-top: clamp(80px, 10vw, 130px); }
.chiusura__titolo { font-size: clamp(2.6rem, 1rem + 5.6vw, 5.4rem); color: #fff; max-width: 12em; margin: 18px auto 0; }
.chiusura__titolo .coperta::after { background: #fff; }
.chiusura p { margin: 22px auto 0; max-width: 30em; font-family: var(--serif); font-size: 1.3rem; color: #c9cacd; }
.chiusura .tasto { margin-top: 32px; }
.piede__filo { height: 1px; margin-top: clamp(72px, 9vw, 110px); background: linear-gradient(90deg, rgba(184, 52, 31, .9), rgba(255, 225, 90, .5) 55%, transparent); }
.piede__riga { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-block: 56px 40px; }
.piede__logo img { height: 30px; width: auto; }
.piede__motto { margin-top: 18px; font-size: 1.0625rem; }
.piede__colonne { display: flex; gap: clamp(36px, 7vw, 110px); flex-wrap: wrap; font-size: .9375rem; }
.piede__colonne p { color: #ff9b88; font-size: .8125rem; margin-bottom: 14px; }
.piede__colonne a { display: block; text-decoration: none; padding: 4px 0; letter-spacing: .02em; }
.piede__colonne a:hover { text-decoration: underline; }
.piede__legale { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 0 40px; color: #a9abaf; font-size: .8125rem; }

/* ---------- Pagina Scarica ---------- */
.scarica-apertura { padding-bottom: 0; }
.store { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin-inline: auto; }
@media (max-width: 760px) { .store { grid-template-columns: 1fr; } }
.store__scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--r-card); padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.store__scheda .h3 { margin-top: 2px; }
.store__scheda .sotto { flex: 1; }   /* i pulsanti delle due schede restano alla stessa altezza (Stefano, 7 novembre 2026) */
.store__tasto { margin-top: 14px; align-self: flex-start; }
.store__tasto.is-presto { background: #e8e8e6; color: var(--tenue); cursor: default; pointer-events: none; }
.passi-scarica { margin-top: clamp(80px, 10vw, 130px); }
.passi-scarica__lista { margin: 44px auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; }
@media (max-width: 860px) { .passi-scarica__lista { grid-template-columns: 1fr; } }
.passi-scarica__lista li { border-top: 1px solid var(--bordo-2); padding-top: 22px; }
.passi-scarica__lista b { font: 600 .875rem var(--sans); color: var(--accento); letter-spacing: .1em; }
.passi-scarica__lista h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; margin-top: 10px; }
.passi-scarica__lista p { margin-top: 8px; color: var(--testo-2); }
.testata__menu a[aria-current="page"] { color: var(--accento); }

/* ---------- Apparizioni ---------- */
.anima [data-anima] { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: var(--ritardo, 0ms); }
.anima [data-anima].in-vista { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}