/*
 * Studio Arfia · studio.css · v0.4.0 · 27/09/2026
 * /studio/ riscritta dalla parte del cliente (Rami, 27/09: «il cliente deve
 * sentirsi coccolato, trovare fiducia, vedere tutti i vantaggi… il processo
 * deve sembrare un processo, immersivo, con schermate vere»). I componenti:
 * i VANTAGGI (mosaico di card coi disegnini vivi), COME NASCE IL TUO SITO
 * (la finestra del browser con le sei schermate di un progetto di esempio),
 * i DOCUMENTI (il fascicolo), ANCHE DOPO (il pannello del sito), le DOMANDE.
 * Il movimento è in motion.js; senza JS ogni pezzo è intero e fermo, con i
 * disegni già nel loro stato finale (regola 4).
 */

.as-studio__testo { margin-top: var(--as-sp-5); max-width: 52ch; color: var(--as-muted); }
/* La foto d'apertura (la stretta di mano): già nella finestra stretta si vedono le mani. */
.as-studio .as-finestra__foto img { object-position: 50% 32%; transform-origin: 50% 36%; }
/* v0.120.3 (Rami, 06/11: la seconda frase della lede «a capo»): da computer la riga è larga quanto la frase, così sta intera su una riga */
@media (min-width: 900px) { .as-studio .as-finestra__lede { max-width: 62ch; } }
.as-vantaggi__titolo em, .as-processo__titolo em, .as-studio__rete h2 em, .as-fascicolo__titolo em, .as-domande h2 em { font-style: normal; color: var(--as-grigio-display); }

/* La spunta tonda e le animazioni comuni (as-battito, as-su, as-dentro) stanno in base.css (v0.33.2). */
@keyframes as-scrive { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
@keyframes as-puntini { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes as-cursore { 50% { opacity: 0; } }

/* ── I VANTAGGI: otto card a «bento» (v0.38, 29/09) ────────────────────────
   Rami, 28/09: «i mockup sono ancora molto AI slop». In alto la schermata
   vera, a tutta card, ancorata in alto e sfumata dove si taglia (niente più
   adesivo centrato nel grigio); sotto titolo e riga, alla stessa altezza in
   ogni riga perché il disegno ha un'altezza fissa (--vd-h). Da telefono la
   griglia diventa una fila che scorre col dito, a scatto, con la card dopo
   che si intravede e il contatore sotto (DIREZIONE-MOBILE: «fila scorrevole»). */
.as-vantaggi {
	--vd-h: 360px;
	--vd-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--vd-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
	--vd-bordeaux: #6E1F2B;
	--vd-blu: #0A84FF;
	--vd-pad: clamp(22px, 2vw, 30px);
}
.as-vantaggi__testa { display: grid; gap: var(--as-sp-5); margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
	.as-vantaggi__testa { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; column-gap: var(--as-sp-8); }
}
.as-vantaggi__titolo { margin: 0; max-width: 13ch; }
.as-vantaggi__sotto { margin: 0; max-width: 38ch; color: var(--as-muted); }
.as-vantaggi__griglia { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .as-vantaggi__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
	.as-vantaggi__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.as-vantaggio--1, .as-vantaggio--6, .as-vantaggio--7, .as-vantaggio--8 { grid-column: span 2; }
}
.as-vantaggio {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--vd-pad);
	border-radius: calc(24px * var(--as-brm));
	background: var(--as-sup);
	overflow: hidden;
	transition: transform .6s var(--as-ease-out), box-shadow .6s var(--as-ease-out);
}
@supports (corner-shape: squircle) { .as-vantaggio { corner-shape: squircle; } }
@media (hover: hover) {
	.as-vantaggio:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35); }
}
/* Il riquadro del disegno: la sua larghezza decide telefono o computer (container query). */
.as-vantaggio__disegno {
	position: relative;
	flex: none;
	height: var(--vd-h);
	margin-bottom: 22px;
	overflow: hidden;
	container-type: inline-size;
	-webkit-mask-image: linear-gradient(#000 calc(100% - 52px), transparent);
	mask-image: linear-gradient(#000 calc(100% - 52px), transparent);
}
.as-vantaggio__titolo { margin: 0; padding-inline: var(--vd-pad); font-size: clamp(21px, 1.6vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.as-vantaggio__testo { margin: 10px 0 0; padding-inline: var(--vd-pad); max-width: calc(42ch + 2 * var(--vd-pad)); font-size: 16px; line-height: 1.5; color: var(--as-muted); }
/* Vivo (motion.js): da computer la card sale entrando (.is-entrata) e il suo
   disegno parte quando si vede quasi tutto (.is-vivo). */
@media (min-width: 700px) {
	.as-vantaggi--vivo .as-vantaggio { opacity: 0; transform: translateY(46px); transition: opacity .7s var(--as-ease-out), transform .9s var(--as-ease-out), box-shadow .6s var(--as-ease-out); }
	.as-vantaggi--vivo .as-vantaggio.is-entrata { opacity: 1; transform: none; }
}
@media (min-width: 700px) and (hover: hover) {
	.as-vantaggi--vivo .as-vantaggio.is-entrata:hover { transform: translateY(-4px); }
}
/* Da telefono: la fila che scorre col dito. La card è l'84% dello schermo,
   quella dopo si vede per un dito; il contatore dice dove sei. */
.as-vantaggi__conta { display: none; }
@media (max-width: 699px) {
	.as-vantaggi { --vd-h: 350px; }
	.as-vantaggi__griglia {
		display: flex;
		gap: 12px;
		margin-inline: calc(-1 * var(--as-gutter));
		padding-inline: var(--as-gutter);
		scroll-padding-inline: var(--as-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.as-vantaggi__griglia::-webkit-scrollbar { display: none; }
	.as-vantaggio { flex: 0 0 min(84vw, 360px); scroll-snap-align: start; }
	.as-vantaggio__titolo { font-size: 22px; }
	.as-vantaggi--vivo .as-vantaggi__conta { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; color: var(--as-muted); font-variant-numeric: tabular-nums; }
	.as-vantaggi__n { color: var(--as-carbone); }
	.as-vantaggi__barra { position: relative; flex: 0 1 140px; height: 2px; overflow: hidden; background: var(--as-line); }
	.as-vantaggi__barra i { position: absolute; inset: 0; background: var(--as-carbone); transform: scaleX(var(--p, .125)); transform-origin: left; transition: transform .35s var(--as-ease-out); }
}

/* ── I disegni (v0.38). Ognuno parte 24px sotto il bordo alto, centrato, e
   scende oltre il riquadro: si taglia nella sfumatura. Dentro, le app vere
   col loro font (di sistema, Arial per Google, Roboto per PageSpeed), i loro
   colori e testi mai sotto gli 11px. Di base (senza JS) nello stato finale. */
.as-vd { position: absolute; top: 24px; left: 0; right: 0; display: flex; justify-content: center; font: 13px/1.3 var(--vd-sys); letter-spacing: 0; color: #000; text-align: left; -webkit-font-smoothing: antialiased; }
.as-vd p, .as-vd ul, .as-vd dl, .as-vd dd { margin: 0; }
.as-vd ul { list-style: none; padding: 0; }
.as-vd img { max-width: none; }
.as-vd b { font-weight: 600; }

/* Il telefono (v0.39, 29/09): l'iPhone del kit (inc/dispositivi.php), col suo telaio, l'isola,
   la barra di stato e la barra di chiusura; lo schermo è largo quanto il vecchio telefono
   disegnato qui. Dentro, l'app riempie lo schermo e parte sotto la barra di stato del kit
   (--sa-su); i testi restano quelli delle app, in px veri (13px di base). */
.as-vd-kit { --scala: calc(min(100cqw - 44px, 290px) / 19); }
.as-vd-kit .as-disp__app { font: 13px/1.3 var(--vd-sys); letter-spacing: 0; color: #000; }
.as-vd-kit .as-disp__app > * { position: absolute; inset: 0; overflow: hidden; padding-top: var(--sa-su); background: #fff; }
.as-vd-kit .as-disp__app > .as-vd-wp { background: linear-gradient(#1D2327 var(--sa-su), #F0F0F1 0); }
/* Su una card larga (≥ 500px) Messaggi, Mail e WordPress sono finestre del Mac: l'iPhone si
   scioglie (display: contents) e resta l'app, con le regole «larga» di ognuna più sotto. */
@container (min-width: 500px) {
	.as-vd-kit.is-mac, .as-vd-kit.is-mac .as-disp__schermo, .as-vd-kit.is-mac .as-disp__app { display: contents; }
	.as-vd-kit.is-mac :is(.as-iphone__tasto, .as-iphone__telaio, .as-disp__stato, .as-iphone__isola, .as-iphone__home, .as-disp__riflesso, .as-disp__spento, .as-disp__ombra) { display: none; }
	.as-vd-kit.is-mac .as-disp__app > * { position: relative; inset: auto; flex: none; height: 620px; padding-top: 0; }
	.as-vd-kit.is-mac .as-disp__app > .as-vd-wp { background: #F0F0F1; }
}
/* La finestra del Mac, in secondo piano: i semafori sono grigi (così niente giallo) e la
   barra è quella di Safari compatta, col dominio al centro come lo scrive Safari. */
.as-vd-fin { position: relative; flex: none; width: min(calc(100cqw - 40px), 560px); height: 620px; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .06), 0 26px 50px -26px rgba(0, 0, 0, .42); }
.as-vd-fin__barra { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: #F6F6F6; border-bottom: 1px solid #DCDCDC; }
.as-vd-fin__luci { display: flex; flex: none; gap: 7px; }
.as-vd-fin__luci i { width: 11px; height: 11px; border-radius: 50%; background: #DCDCDC; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15); }
.as-vd-fin__frecce { display: flex; flex: none; gap: 8px; }
.as-vd-fin__frecce svg, .as-vd-fin__azioni svg { width: 14px; height: 14px; fill: none; stroke: #7A7A7E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.as-vd-fin__frecce svg + svg { stroke: #C7C7CC; }
.as-vd-fin__url { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; background: rgba(0, 0, 0, .055); font-size: 12px; color: #1D1D1F; white-space: nowrap; overflow: hidden; }
.as-vd-fin__url svg { flex: none; width: 10px; height: 10px; fill: #7A7A7E; color: #7A7A7E; }
.as-vd-fin__azioni { flex: none; }
@container (max-width: 360px) {
	.as-vd-fin__frecce, .as-vd-fin__azioni { display: none; }
}
/* Le card strette da computer tra 1100 e 1400px (230-300px): la schermata non si
   stringe (le app vere non lo fanno), si rimpicciolisce tutta insieme con zoom,
   come uno screenshot messo in scala. Il JS del puntatore ne tiene conto. */
@container (max-width: 299px) {
	.as-vd { zoom: .86; }
	.as-vd-kit { --scala: calc((100cqw - 36px) / .86 / 19); }
	.as-vd > .as-vd-fin, .as-vd > .as-vd-foglio { width: calc((100cqw - 32px) / .86); }
}
@container (max-width: 259px) {
	.as-vd { zoom: .76; }
	.as-vd-kit { --scala: calc((100cqw - 32px) / .76 / 19); }
	.as-vd > .as-vd-fin, .as-vd > .as-vd-foglio { width: calc((100cqw - 28px) / .76); }
}
/* Il puntatore del Mac o il tocco del dito (motion.js lo porta sui bersagli). */
.as-vd-mano { position: absolute; top: 0; left: 0; z-index: 6; display: none; pointer-events: none; will-change: transform; }
.as-vantaggi--vivo .as-vd-mano { display: block; }
.as-vd-mano__freccia { width: 15px; height: 22px; fill: #000; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); transform-origin: 2px 2px; transition: transform .12s; }
.as-vd-mano.is-clic .as-vd-mano__freccia { transform: scale(.82); }
.as-vd-mano__tocco { position: absolute; top: -22px; left: -22px; display: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(60, 60, 67, .3); opacity: 0; }
.as-vd-mano.is-tocco .as-vd-mano__freccia { display: none; }
.as-vd-mano.is-tocco .as-vd-mano__tocco { display: block; }
.as-vd-mano.is-tocco.is-clic .as-vd-mano__tocco { animation: as-vd-tocco .55s ease-out; }
@keyframes as-vd-tocco { 0% { opacity: 0; transform: scale(.55); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
/* Il cursore di testo. */
.as-vd-cursore { display: none; width: 1.5px; height: 1.1em; margin: 0 -1.5px -.18em 0; background: var(--vd-blu); }
.as-vantaggio.is-vivo .as-vd-cursore { display: inline-block; animation: as-vd-accendi .01s var(--tc, 0s) both, as-cursore 1s var(--tc, 0s) steps(1) infinite; }
/* I cambi di stato a tempo, --t dall'accensione della card. Senza JS resta lo
   stato finale; col JS, prima di partire, lo stato iniziale (mai un vuoto). */
.as-vd-scambio { display: inline-grid; vertical-align: top; }
.as-vd-scambio > * { grid-area: 1 / 1; }
.as-vd-scambio > .is-prima { visibility: hidden; }
.as-vantaggi--vivo .as-vantaggio:not(.is-vivo) .as-vd-scambio > .is-prima { visibility: visible; }
.as-vantaggi--vivo .as-vantaggio:not(.is-vivo) .as-vd-scambio > .is-dopo { visibility: hidden; }
.as-vantaggio.is-vivo .as-vd-scambio > .is-prima { animation: as-vd-spegni .01s var(--t, 0s) both; }
.as-vantaggio.is-vivo .as-vd-scambio > .is-dopo { animation: as-vd-accendi .3s var(--t, 0s) cubic-bezier(.2, .8, .2, 1) both; }
.as-vantaggi--vivo .as-vantaggio:not(.is-vivo) .as-vd-arriva { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; }
.as-vantaggio.is-vivo .as-vd-arriva { animation: as-vd-arriva .42s var(--t, 0s) cubic-bezier(.2, .8, .2, 1) both; }
.as-vantaggi--vivo .as-vantaggio:not(.is-vivo) .as-vd-compare { opacity: 0; }
.as-vantaggio.is-vivo .as-vd-compare { animation: as-vd-compare .45s var(--t, 0s) both; }
@keyframes as-vd-spegni { from { visibility: visible; } to { visibility: hidden; } }
@keyframes as-vd-accendi { from { visibility: hidden; opacity: 0; transform: scale(.86); } 1% { visibility: visible; } to { visibility: visible; opacity: 1; transform: none; } }
@keyframes as-vd-arriva { from { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: scale(.72); } 55% { opacity: 1; } to { max-height: 140px; opacity: 1; transform: none; } }
@keyframes as-vd-compare { from { opacity: 0; } to { opacity: 1; } }
@keyframes as-vd-via { to { font-size: 0; } }
@keyframes as-vd-lampo { 0% { visibility: visible; opacity: 0; } 10%, 82% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } }

/* 1 · Messaggi. Stretta: l'iPhone di Rami. Larga: Messaggi del Mac, con l'elenco. */
.as-vd-mess { display: flex; }
.as-vd-mess__lato { display: none; }
.as-vd-mess__chat { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.as-vd-mess__testa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 12px 8px; border-bottom: .5px solid rgba(60, 60, 67, .29); background: #F9F9F9; }
.as-vd-mess__indietro { display: flex; align-items: center; gap: 3px; font-size: 15px; color: var(--vd-blu); }
.as-vd-mess__indietro svg { width: 9px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.as-vd-mess__chi { display: grid; justify-items: center; gap: 3px; }
.as-vd-mess__chi img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.as-vd-mess__chi b { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 400; }
.as-vd-mess__chi b svg { width: 5px; height: 8px; fill: none; stroke: #8E8E93; stroke-width: 1.6; }
.as-vd-mess__video { justify-self: end; }
.as-vd-mess__video svg { width: 24px; height: 15px; fill: none; stroke: var(--vd-blu); stroke-width: 1.6; stroke-linejoin: round; }
/* La conversazione è appoggiata in basso: arrivando, i messaggi spingono su quelli di prima. */
.as-vd-mess__vista { display: flex; flex-direction: column; justify-content: flex-end; height: calc(var(--vd-h) - 24px - 16 * var(--u, 0px) - var(--sa-su, 40px) - 63px - 44px); overflow: hidden; } /* v0.39: sotto il telaio e la barra di stato del kit */
.as-vd-mess__flusso { display: grid; gap: 2px; padding: 8px 14px 6px; }
.as-vd-mess__data { justify-self: center; margin: 8px 0 4px !important; font-size: 11px; color: #8E8E93; }
.as-vd-mess__f { position: relative; z-index: 0; max-width: 78%; padding: 6px 11px 7px; border-radius: 17px; font-size: 13.5px; line-height: 1.28; }
.as-vd-mess__f.is-loro { justify-self: start; background: #E9E9EB; transform-origin: 0 100%; }
.as-vd-mess__f.is-mio { justify-self: end; background: var(--vd-blu); color: #fff; transform-origin: 100% 100%; }
.as-vd-mess__f.is-cambio { margin-top: 8px; }
.as-vd-mess__f.is-coda::before, .as-vd-mess__f.is-coda::after { content: ""; position: absolute; bottom: 0; z-index: -1; height: 17px; }
.as-vd-mess__f.is-mio.is-coda::before { right: -7px; width: 20px; background: var(--vd-blu); border-bottom-left-radius: 16px 14px; }
.as-vd-mess__f.is-mio.is-coda::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.as-vd-mess__f.is-loro.is-coda::before { left: -7px; width: 20px; background: #E9E9EB; border-bottom-right-radius: 16px 14px; }
.as-vd-mess__f.is-loro.is-coda::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }
.as-vd-mess__letto { justify-self: end; margin: 1px 4px 0 !important; font-size: 11px; color: #8E8E93; }
.as-vd-mess__coda { display: grid; margin-top: 8px; transform-origin: 0 100%; }
.as-vd-mess__coda > .as-vd-scambio { display: grid; justify-items: start; }
.as-vd-mess__f.is-scrive { display: flex; gap: 4px; padding: 10px 12px; }
.as-vd-mess__f.is-scrive i { width: 7px; height: 7px; border-radius: 50%; background: #8E8E93; animation: as-puntini 1.1s infinite; }
.as-vd-mess__f.is-scrive i:nth-child(2) { animation-delay: .18s; }
.as-vd-mess__f.is-scrive i:nth-child(3) { animation-delay: .36s; }
@container (min-width: 500px) {
	.as-vd-mess { width: min(calc(100cqw - 56px), 600px); border-radius: 12px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .06), 0 26px 50px -26px rgba(0, 0, 0, .42); }
	.as-vd-mess::before, .as-vd-mess .as-vd-stato { display: none; }
	.as-vd-mess__lato { display: block; flex: 0 0 max(36%, 204px); max-width: 220px; padding: 12px 8px; background: #EAEAEA; border-right: 1px solid #D6D6D6; }
	.as-vd-mess__lato .as-vd-fin__luci { margin: 1px 0 12px 5px; }
	.as-vd-mess__cerca { display: flex; align-items: center; gap: 5px; height: 24px; margin: 0 4px 10px !important; padding: 0 8px; border-radius: 6px; background: rgba(0, 0, 0, .06); font-size: 12px; color: #86868B; }
	.as-vd-mess__cerca svg { width: 11px; height: 11px; fill: none; stroke: #86868B; stroke-width: 1.6; stroke-linecap: round; }
	.as-vd-mess__lato li { display: flex; gap: 8px; padding: 8px; border-radius: 8px; }
	.as-vd-mess__lato li.is-on { background: #D5D5D7; }
	.as-vd-mess__lato li img, .as-vd-mess__iniz { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
	.as-vd-mess__iniz { display: grid; place-items: center; background: linear-gradient(#A9A9AF, #86868C); color: #fff; font-size: 13px; font-weight: 500; }
	.as-vd-mess__lato li > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-content: center; flex: 1; min-width: 0; }
	.as-vd-mess__lato b { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
	.as-vd-mess__lato small { font-size: 11px; color: #86868B; }
	.as-vd-mess__lato em { grid-column: 1 / -1; display: block; min-width: 0; overflow: hidden; font-size: 11.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; color: #6E6E73; }
	.as-vd-mess__lato em.as-vd-scambio { display: grid; }
	.as-vd-mess__lato em.as-vd-scambio > span { overflow: hidden; text-overflow: ellipsis; }
	.as-vd-mess__testa { padding: 9px 14px; background: #fff; }
	.as-vd-mess__indietro { visibility: hidden; }
	.as-vd-mess__chi { display: flex; align-items: center; gap: 7px; }
	.as-vd-mess__chi img { width: 24px; height: 24px; }
	.as-vd-mess__chi b { font-size: 13px; font-weight: 600; }
	.as-vd-mess__chi b svg { display: none; }
	.as-vd-mess__video svg { stroke: #86868B; }
	.as-vd-mess__vista { height: calc(var(--vd-h) - 24px - 43px - 44px); }
	.as-vd-mess__f { max-width: 72%; font-size: 13px; }
}

/* 2 · Il sito della villa su iPhone, in Safari con la barra in alto. */
.as-vd-safari { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; height: 30px; margin: 2px 10px 6px !important; padding: 0 10px; border-radius: 10px; background: #EEEEF0; font-size: 12px; transform-origin: 50% 0; }
.as-vd-safari__aa { font-size: 11px; }
.as-vd-safari__aa b { font-size: 14px; font-weight: 500; }
.as-vd-safari__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.as-vd-safari__url svg { width: 9px; height: 9px; fill: #3C3C43; color: #3C3C43; }
.as-vd-safari__ric { width: 13px; height: 13px; fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.as-vd-oste__vista { position: absolute; top: calc(var(--sa-su, 40px) + 38px); right: 0; bottom: 0; left: 0; overflow: hidden; } /* sotto la barra di stato del kit e quella di Safari */
.as-vd-oste { font-family: var(--vd-serif); color: #1C1917; }
.as-vd-oste__eroe { position: relative; height: 158px; background: #5B544D 54% 50% / cover no-repeat; }
.as-vd-oste__eroe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .62)); }
.as-vd-oste__testa { position: absolute; top: 10px; right: 14px; left: 14px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; font-size: 12.5px; line-height: 1.02; color: #fff; }
.as-vd-oste__burger { display: grid; gap: 4px; padding-top: 4px; }
.as-vd-oste__burger i { width: 17px; height: 1.6px; border-radius: 2px; background: #fff; }
.as-vd-oste__h { position: absolute; right: 14px; bottom: 11px; left: 14px; z-index: 1; font-size: 22px; line-height: 1.05; color: #fff; }
.as-vd-oste__aperto { display: flex; align-items: center; gap: 6px; margin: 12px 14px 0 !important; font: 11.5px var(--vd-sys); color: #3A3A3C; }
.as-vd-oste__aperto i { width: 7px; height: 7px; border-radius: 50%; background: #1E9E4A; }
.as-vd-oste__aperto b { color: #1E7B45; }
.as-vd-oste__btn { display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px; margin: 10px 14px 0 !important; font-family: var(--vd-sys); }
.as-vd-oste__btn span { display: grid; place-items: center; height: 38px; border-radius: 9px; font-size: 12px; font-weight: 600; }
.as-vd-oste__btn span:first-child { background: var(--vd-bordeaux); color: #fff; }
.as-vd-oste__btn span + span { box-shadow: inset 0 0 0 1.2px var(--vd-bordeaux); color: var(--vd-bordeaux); }
.as-vd-oste__sez { margin: 22px 14px 4px !important; font-size: 18px; line-height: 1.1; }
.as-vd-oste__menu { margin: 0 14px !important; }
.as-vd-oste__menu li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ECE8E2; font-size: 14px; }
.as-vd-oste__menu b { font: 400 12.5px var(--vd-sys); font-variant-numeric: tabular-nums; color: #3A3A3C; }
/* Il pollice: scende al menù con l'inerzia, la barra di Safari si fa piccola, poi si torna su. */
.as-vantaggio.is-vivo .as-vd-oste { animation: as-vd-pollice 4.6s .5s both; }
.as-vantaggio.is-vivo .as-vd-safari { animation: as-vd-safari 4.6s .5s both; }
.as-vantaggio.is-vivo .as-vd-safari__aa, .as-vantaggio.is-vivo .as-vd-safari__ric { animation: as-vd-safari-via 4.6s .5s both; }
@keyframes as-vd-pollice { 0% { transform: none; animation-timing-function: cubic-bezier(.2, .75, .25, 1); } 30%, 68% { transform: translateY(-186px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 100% { transform: none; } }
@keyframes as-vd-safari { 0%, 100% { transform: none; background-color: #EEEEF0; } 14%, 72% { transform: translateY(-4px) scale(.86); background-color: rgba(238, 238, 240, 0); } }
@keyframes as-vd-safari-via { 0%, 100% { opacity: 1; } 10%, 76% { opacity: 0; } }

/* 3 · PageSpeed Insights, vista «Dispositivi mobili». */
@property --vv { syntax: '<number>'; inherits: false; initial-value: 0; }
.as-vd-psi { padding: 12px 14px 0; font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; color: #202124; }
.as-vd-psi__cerca { display: flex; gap: 6px; }
.as-vd-psi__cerca span { flex: 1; min-width: 0; display: flex; align-items: center; height: 28px; padding: 0 9px; border: 1px solid #DADCE0; border-radius: 4px; overflow: hidden; font-size: 11.5px; white-space: nowrap; color: #3C4043; }
.as-vd-psi__cerca b { flex: none; display: grid; place-items: center; height: 28px; padding: 0 11px; border-radius: 4px; background: #1A73E8; font-size: 11.5px; font-weight: 500; color: #fff; }
.as-vd-psi__schede { display: flex; gap: 16px; margin-top: 12px !important; border-bottom: 1px solid #E0E0E0; font-size: 11.5px; white-space: nowrap; color: #5F6368; }
.as-vd-psi__schede span { display: flex; align-items: center; gap: 5px; padding-bottom: 7px; }
.as-vd-psi__schede svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.as-vd-psi__schede .is-on { color: #1A73E8; box-shadow: inset 0 -2px #1A73E8; }
.as-vd-psi__voti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.as-vd-psi__voti p { display: grid; justify-items: center; align-content: start; gap: 6px; font-size: 11px; line-height: 1.2; text-align: center; }
.as-vd-psi__c { --vv: var(--v); display: grid; place-items: center; width: min(52px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #E6F8EE calc(100% - 4.5px), transparent calc(100% - 4px)), conic-gradient(#0C6 calc(var(--vv) * 1%), #E6F8EE 0); }
.as-vd-psi__c b { min-width: 1ch; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: #080; }
.as-vantaggi--vivo .as-vantaggio:not(.is-vivo) .as-vd-psi__c { --vv: 0; }
.as-vantaggio.is-vivo .as-vd-psi__c { transition: --vv 1.2s .25s cubic-bezier(.2, .8, .2, 1); }
.as-vantaggio.is-vivo .as-vd-psi__voti p:nth-child(2) .as-vd-psi__c { transition-delay: .35s; }
.as-vantaggio.is-vivo .as-vd-psi__voti p:nth-child(3) .as-vd-psi__c { transition-delay: .45s; }
.as-vantaggio.is-vivo .as-vd-psi__voti p:nth-child(4) .as-vd-psi__c { transition-delay: .55s; }
.as-vd-psi__h { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px !important; padding-bottom: 8px; border-bottom: 1px solid #E0E0E0; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #5F6368; }
.as-vd-psi__h span + span { font-weight: 400; letter-spacing: 0; text-transform: none; color: #1A73E8; }
.as-vd-psi__metriche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 10px; }
.as-vd-psi__metriche p { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; column-gap: 7px; font-size: 11px; line-height: 1.25; }
.as-vd-psi__metriche i { width: 8px; height: 8px; border-radius: 50%; background: #0C6; }
.as-vd-psi__metriche b { grid-column: 2; margin-top: 3px; font-size: 18px; font-weight: 400; color: #080; }
.as-vd-psi__piede { margin-top: 14px !important; font-size: 11px; color: #5F6368; }

/* 4 · Google da telefono: gli stessi colori e la stessa densità della SERP grande (demo.css). */
.as-vd-g { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #202124; } /* v0.39: il telefono è quello del kit */
.as-vd-g__testa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 36px; padding: 0 14px; }
.as-vd-g__testa svg { width: 17px; height: 17px; fill: none; stroke: #5F6368; stroke-width: 1.8; stroke-linecap: round; }
.as-vd-g__testa span { font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: #5F6368; }
.as-vd-g__testa i { justify-self: end; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1E6F5C; font-size: 13px; font-style: normal; color: #fff; }
.as-vd-g__barra { display: flex; align-items: center; gap: 10px; height: 44px; margin: 6px 12px 0 !important; padding: 0 14px; border-radius: 24px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); font-size: 14px; }
.as-vd-g__barra span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-vd-g__barra svg { flex: none; width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; }
.as-vd-g__barra .is-lente { stroke: #9AA0A6; }
.as-vd-g__barra .is-x { width: 15px; stroke: #70757A; }
.as-vd-g__schede { display: flex; gap: 18px; margin: 8px 0 0 !important; padding: 0 16px !important; overflow: hidden; border-bottom: 1px solid #EBEBEB; font-size: 13px; white-space: nowrap; color: #5F6368; }
.as-vd-g__schede li { flex: none; padding: 9px 1px 10px; }
.as-vd-g__schede li.is-on { color: #202124; box-shadow: inset 0 -3px #202124; }
.as-vd-g__ris { position: relative; padding: 16px 16px 12px; border-bottom: 1px solid #EBEBEB; }
.as-vd-g__sito { display: flex; align-items: center; gap: 10px; }
.as-vd-g__sito > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.as-vd-g__sito b { font-size: 14px; font-weight: 400; }
.as-vd-g__sito small { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: #4D5156; }
.as-vd-g__sito > svg { flex: none; width: 4px; height: 14px; fill: #70757A; }
.as-vd-g__fav { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F1F3F4; box-shadow: inset 0 0 0 1px #DADCE0; font: 11px var(--vd-serif); color: var(--vd-bordeaux); }
.as-vd-g__fav.is-altro { font: 700 11px Arial, sans-serif; color: #5F6368; }
.as-vd-g__tit { margin-top: 8px !important; font-size: 18px; line-height: 1.3; color: #1A0DAB; }
.as-vd-g__desc { margin-top: 5px !important; font-size: 14px; line-height: 1.5; color: #4D5156; }
.as-vd-g__link { margin-top: 8px !important; }
.as-vd-g__link li { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 10px 0; border-top: 1px solid #EBEBEB; font-size: 14px; color: #1A0DAB; }
.as-vd-g__link li::after { content: ""; width: 7px; height: 7px; border: solid #70757A; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); }
.as-vd-g__ris.is-altro { opacity: .4; }
/* L'unica annotazione, posata sopra lo screenshot come nella SERP grande. */
.as-vd-g__tu { position: absolute; top: 18px; right: 12px; padding: 4px 10px; border-radius: 999px; background: var(--as-arancio); font: 600 11.5px/1.2 var(--as-font); color: var(--as-carbone); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); }
.as-vd-g__ris:has(.as-vd-g__tu) .as-vd-g__sito { padding-right: 78px; }
.as-vd-g__ris:has(.as-vd-g__tu) .as-vd-g__sito > svg { display: none; }
.as-vantaggio.is-vivo .as-vd-g__tit span { animation: as-vd-visitato .01s .85s both; }
@keyframes as-vd-visitato { to { color: #681DA8; } }

/* 5 · Il pannello di chi registra i domini. */
.as-vd-reg { padding: 12px 16px 0; color: #1F2328; }
.as-vd-reg__bc { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; color: #59636E; }
.as-vd-reg__bc span { color: #0969DA; }
.as-vd-reg__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px !important; }
.as-vd-reg__h b { font-size: 16px; letter-spacing: -.01em; }
.as-vd-reg__h span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #1A7F37; }
.as-vd-reg__h i { width: 7px; height: 7px; border-radius: 50%; background: #1A7F37; }
.as-vd-reg dl { margin: 0; border-top: 1px solid #D1D9E0; }
.as-vd-reg dl > div { padding: 7px 0 8px; border-bottom: 1px solid #D1D9E0; }
.as-vd-reg dt { font-size: 11px; color: #59636E; }
.as-vd-reg dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px !important; font-size: 13px; }
.as-vd-reg__rinnovo { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #59636E; }
.as-vd-reg__rinnovo i { position: relative; width: 24px; height: 14px; border-radius: 999px; background: #1F883D; }
.as-vd-reg__rinnovo i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.as-vd-reg code { padding: 2px 6px; border-radius: 5px; background: #F6F8FA; box-shadow: inset 0 0 0 1px #D1D9E0; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.as-vd-reg__link { position: relative; font-size: 12px; color: #0969DA; }
.as-vd-reg__copiato { position: absolute; bottom: calc(100% + 7px); left: 50%; padding: 3px 7px; border-radius: 5px; background: #1F2328; font-size: 11px; white-space: nowrap; color: #fff; transform: translateX(-50%); visibility: hidden; }
.as-vd-reg__copiato::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #1F2328; }
.as-vantaggio.is-vivo .as-vd-reg__copiato { animation: as-vd-lampo 1.7s 1.95s both; }
.as-vd-reg__nota { margin-top: 8px !important; font-size: 11px; color: #59636E; }

/* 6 · Il preventivo su carta intestata (qui il font del sito è giusto: è la carta dello studio). */
.as-vd-foglio { flex: none; width: min(calc(100cqw - 44px), 520px); padding: 18px 22px 24px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04), 0 24px 48px -26px rgba(0, 0, 0, .35); font: 11px/1.4 var(--as-font); color: #1C1C1A; }
.as-vd-foglio small { font-size: 11px; color: #707070; }
.as-vd-foglio__testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #E8E8E8; }
.as-vd-foglio__studio { display: flex; align-items: center; gap: 9px; }
.as-vd-foglio__studio img { width: 22px; height: auto; }
.as-vd-foglio__studio span, .as-vd-foglio__n { display: grid; }
.as-vd-foglio__studio b { font-size: 13px; letter-spacing: -.01em; }
.as-vd-foglio__n { text-align: right; }
.as-vd-foglio__n b { font-size: 12px; }
.as-vd-foglio__a { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 10px !important; }
.as-vd-foglio__tab { width: 100%; margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.as-vd-foglio__tab th { padding: 0 0 4px; border-bottom: 1px solid #1C1C1A; font-size: 11px; font-weight: 500; text-align: left; color: #707070; }
.as-vd-foglio__tab td { padding: 4px 0; border-bottom: 1px solid #EFEFEF; vertical-align: top; }
.as-vd-foglio__tab th:last-child, .as-vd-foglio__tab td:last-child { padding-left: 12px; text-align: right; white-space: nowrap; }
.as-vd-foglio__piede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 16px; margin-top: 12px; }
.as-vd-foglio__firma p { color: #707070; }
.as-vd-foglio__firma svg { width: 110px; height: 34px; margin-top: 2px; border-bottom: 1px solid #C8C8C8; fill: none; stroke: #22358A; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.as-vd-foglio__firma small { display: block; margin-top: 3px; }
.as-vd-foglio__conti p { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.as-vd-foglio__conti b { font-weight: 400; }
.as-vd-foglio__conti .is-totale b { font-weight: 600; }
.as-vd-foglio__conti .is-totale { margin-top: 3px !important; padding-top: 5px; border-top: 1px solid #1C1C1A; font-size: 12.5px; font-weight: 600; }
.as-vd-foglio__cond { margin-top: 12px !important; color: #707070; }
.as-vantaggi--vivo .as-vantaggio:not(.is-vivo) .as-vd-foglio__firma path { stroke-dashoffset: 1; }
.as-vantaggio.is-vivo .as-vd-foglio__firma path { animation: as-vd-firma 1.3s .45s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes as-vd-firma { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@container (max-width: 499px) {
	.as-vd-foglio { padding: 16px 16px 20px; }
	.as-vd-foglio__studio small, .as-vd-foglio__a > span:first-child { display: none; }
	.as-vd-foglio__tab { margin-top: 10px; }
	.as-vd-foglio__piede { gap: 12px; }
}

/* 7 · La mail a Marco. Stretta: Mail dell'iPhone. Larga: Mail del Mac. */
.as-vd-mail .as-vd-fin__luci, .as-vd-mail__strum, .as-vd-mail__invia .is-mac { display: none; }
.as-vd-mail__barra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 14px 10px; }
.as-vd-mail__annulla { font-size: 13.5px; color: var(--vd-blu); }
.as-vd-mail__titolo { overflow: hidden; font-size: 13.5px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.as-vd-mail__invia { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vd-blu); }
.as-vd-mail__invia svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-vd-mail__campo { padding: 9px 14px; overflow: hidden; border-top: .5px solid rgba(60, 60, 67, .29); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.as-vd-mail__campo span { margin-right: 6px; color: #8E8E93; }
.as-vd-mail__campo b { font-weight: 400; color: var(--vd-blu); }
.as-vd-mail__corpo { display: grid; gap: 9px; padding: 12px 14px; border-top: .5px solid rgba(60, 60, 67, .29); font-size: 13.5px; line-height: 1.42; }
.as-vd-mail__corpo u { text-decoration: underline dotted #FF3B30; text-decoration-thickness: 1.6px; text-underline-offset: 3px; }
.as-vd-mail__gergo { display: none; }
.as-vantaggi--vivo .as-vd-mail__gergo { display: inline; }
.as-vantaggio.is-vivo .as-vd-mail__gergo { background: linear-gradient(#B4D5FE, #B4D5FE) 0 0 / 0% 100% no-repeat; animation: as-vd-seleziona .6s .45s ease-out forwards, as-vd-via .01s 1.3s forwards; }
@keyframes as-vd-seleziona { to { background-size: 100% 100%; } }
.as-vd--mail .as-vd-cursore { --tc: 1.3s; }
@container (min-width: 500px) {
	.as-vd-mail { width: min(calc(100cqw - 56px), 600px); border-radius: 10px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .06), 0 26px 50px -26px rgba(0, 0, 0, .42); }
	.as-vd-mail::before, .as-vd-mail .as-vd-stato, .as-vd-mail__annulla, .as-vd-mail__invia .is-ios { display: none; }
	.as-vd-mail .as-vd-fin__luci, .as-vd-mail__invia .is-mac { display: flex; }
	.as-vd-mail__strum { display: flex; align-items: center; gap: 12px; color: #6E6E73; }
	.as-vd-mail__strum svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
	.as-vd-mail__strum b { font-size: 13px; font-weight: 500; }
	.as-vd-mail__barra { grid-template-columns: auto auto minmax(0, 1fr) auto; height: 40px; padding: 0 14px; background: #F6F6F6; border-bottom: 1px solid #DCDCDC; }
	.as-vd-mail__invia { order: 2; width: auto; height: auto; background: none; }
	.as-vd-mail__invia svg { width: 16px; height: 16px; stroke: #6E6E73; stroke-width: 1.4; }
	.as-vd-mail__titolo { order: 3; font-size: 13px; color: #3C3C43; }
	.as-vd-mail__strum { order: 4; }
	.as-vd-mail__campo { padding: 8px 16px; font-size: 12.5px; }
	.as-vd-mail__corpo { padding: 14px 16px; font-size: 13px; }
	.as-vd-cursore { background: #000; }
}

/* 8 · La bacheca di WordPress (i colori veri di wp-admin), da telefono o nel browser del Mac. */
.as-vd-wp { background: #F0F0F1; color: #1D2327; }
.as-vd-wp .as-vd-stato { background: #1D2327; color: #fff; }
.as-vd-wp .as-vd-fin__barra, .as-vd-wp__lato, .as-vd-wp__piu, .as-vd-wp__ciao, .as-vd-wp__box-h, .as-vd-wp__riga.is-testa, .as-vd-wp__box.is-pubblica { display: none; }
.as-vd-wp__admin { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: #1D2327; font-size: 13px; color: #F0F0F1; }
.as-vd-wp__menu { display: grid; gap: 3px; }
.as-vd-wp__menu i { width: 16px; height: 2px; background: #A7AAAD; }
.as-vd-wp__casa { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.as-vd-wp__casa svg { width: 15px; height: 15px; fill: none; stroke: #A7AAAD; stroke-width: 1.4; stroke-linejoin: round; }
.as-vd-wp__main { padding: 12px; }
.as-vd-wp__titolo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.as-vd-wp__h1 { font-size: 19px; line-height: 1.3; }
.as-vd-wp__agg span { display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 3px; background: #2271B1; font-size: 12.5px; color: #fff; }
.as-vd-wp__avviso { margin-top: 10px !important; padding: 8px 10px; background: #fff; border-left: 4px solid #00A32A; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); font-size: 12.5px; }
.as-vd-wp__colonne { display: grid; gap: 12px; margin-top: 10px; }
.as-vd-wp__box { background: #fff; border: 1px solid #C3C4C7; }
.as-vd-wp__riga { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 12px 12px; }
.as-vd-wp__giorno { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.as-vd-wp__campo { display: grid; gap: 3px; }
.as-vd-wp__campo small { font-size: 11px; color: #50575E; }
.as-vd-wp__in { display: block; height: 30px; padding: 0 8px; overflow: hidden; border: 1px solid #8C8F94; border-radius: 4px; background: #fff; font-size: 12.5px; line-height: 28px; white-space: nowrap; color: #2C3338; }
.as-vd-wp__chiuso { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #50575E; }
.as-vd-wp__chiuso i { position: relative; width: 24px; height: 14px; border-radius: 999px; background: #C3C4C7; }
.as-vd-wp__chiuso i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.as-vd-wp__mod { padding: 8px 12px 0; font-size: 11px; color: #50575E; }
.as-vd-wp__box.is-pubblica .as-vd-wp__agg { padding: 10px 12px 12px; }
.as-vd-wp__box.is-pubblica .as-vd-wp__agg span { display: flex; width: max-content; margin-left: auto; }
/* Marco seleziona «24:00», scrive «23:00», tocca «Aggiorna»: l'avviso verde. */
.as-vd-wp__vecchio { display: none; }
.as-vantaggi--vivo .as-vd-wp__vecchio { display: inline; }
.as-vantaggio.is-vivo .as-vd-wp__vecchio { animation: as-vd-sel .01s 1.1s forwards, as-vd-via .01s 1.45s forwards; }
.as-vantaggio.is-vivo .as-vd-wp__in.is-attivo { animation: as-vd-fuoco .01s .95s both; }
.as-vantaggio.is-vivo .as-vd-wp__agg span { animation: as-vd-premi .35s 2.82s both; }
.as-vd--wp .as-vd-cursore { --tc: 1.45s; background: #1D2327; }
@keyframes as-vd-sel { to { background: #B4D5FE; } }
@keyframes as-vd-fuoco { to { border-color: #2271B1; box-shadow: 0 0 0 1px #2271B1; } }
@keyframes as-vd-premi { 50% { background: #135E96; transform: scale(.96); } }
@container (max-width: 499px) {
	.as-vd--wp .as-vd-mano__freccia { display: none; }
	.as-vd--wp .as-vd-mano__tocco { display: block; }
	/* Da telefono, sotto gli orari, anche il lunedì chiuso e le ferie: la schermata è piena
	   come la bacheca vera, niente fondo grigio vuoto (Rami, 28/09: «riquadri vuoti»). */
	.as-vd-wp__riga + .as-vd-wp__riga { border-top: 1px solid #F0F0F1; }
	.as-vd-wp__riga.is-lun { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.as-vd-wp__riga.is-lun .as-vd-wp__giorno { grid-column: auto; }
	.as-vd-wp__chiuso + .as-vd-wp__chiuso { display: none; }
	.as-vd-wp__in.is-lungo { grid-column: 1 / -1; }
}
@container (min-width: 500px) {
	.as-vd-wp { width: min(calc(100cqw - 56px), 600px); border-radius: 10px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .06), 0 26px 50px -26px rgba(0, 0, 0, .42); }
	.as-vd-wp::before, .as-vd-wp .as-vd-stato, .as-vd-wp__menu, .as-vd-wp__agg.is-su { display: none; }
	.as-vd-wp .as-vd-fin__barra, .as-vd-wp__box-h { display: flex; }
	.as-vd-wp__lato, .as-vd-wp__box.is-pubblica { display: block; }
	.as-vd-wp__riga.is-testa, .as-vd-wp__riga.is-lun, .as-vd-wp__riga.is-ferie { display: grid; }
	.as-vd-wp__admin { gap: 16px; height: 28px; font-size: 12px; }
	.as-vd-wp__piu { display: block; }
	.as-vd-wp__ciao { display: flex; align-items: center; gap: 6px; margin-left: auto; }
	.as-vd-wp__ciao img { width: 16px; height: 16px; object-fit: cover; }
	.as-vd-wp__corpo { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
	.as-vd-wp__lato { min-height: 540px; padding-top: 6px; background: #1D2327; }
	.as-vd-wp__lato li { position: relative; padding: 7px 10px; font-size: 12px; color: #F0F0F1; }
	.as-vd-wp__lato li.is-on { background: #2271B1; }
	.as-vd-wp__lato li.is-on::after { content: ""; position: absolute; top: 50%; right: 0; margin-top: -7px; border: 7px solid transparent; border-right-color: #F0F0F1; }
	.as-vd-wp__main { padding: 12px 14px; }
	.as-vd-wp__h1 { font-size: 18px; }
	.as-vd-wp__colonne { grid-template-columns: minmax(0, 1fr) 118px; align-items: start; }
	.as-vd-wp__box-h { padding: 7px 10px; border-bottom: 1px solid #C3C4C7; font-size: 12.5px; font-weight: 600; }
	.as-vd-wp__riga { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid #F0F0F1; }
	.as-vd-wp__riga.is-testa { padding-block: 5px; border-top: 0; font-size: 11px; color: #50575E; }
	.as-vd-wp__riga.is-ferie { grid-template-columns: 78px minmax(0, 1fr); }
	.as-vd-wp__giorno { grid-column: auto; font-size: 12px; }
	.as-vd-wp__campo small { display: none; }
	.as-vd-wp__in { height: 28px; padding: 0 7px; font-size: 12px; line-height: 26px; }
	.as-vd-wp__in.is-lungo { max-width: 150px; }
}
/* Larga ma non abbastanza (card da 500-620px, computer tra 1100 e 1400px): «Aggiorna» sale
   accanto al titolo e la tabella degli orari prende tutta la riga. */
@container (min-width: 500px) and (max-width: 620px) {
	.as-vd-wp__box.is-pubblica { display: none; }
	.as-vd-wp__agg.is-su { display: block; }
	.as-vd-wp__agg.is-su span { height: 28px; font-size: 12px; }
	.as-vd-wp__colonne { grid-template-columns: minmax(0, 1fr); }
	.as-vd-wp__corpo { grid-template-columns: 104px minmax(0, 1fr); }
}


/* ── COME NASCE IL TUO SITO («6 passi. Nessuna sorpresa.», v0.119, 06/11) ───────────
   Carbone, goccia in testa. Di base (touch, senza JS) i passi in colonna, ognuno con la sua scena sotto; da telefono una
   fila che si sfoglia col dito. .as-processo--viva (puntatore, ≥ 900px, motion.js): la pagina scorre, i passi a sinistra si
   accendono al centro, la vetrina a destra resta appiccicata e cambia scena.
   Le SCENE (template-parts/site/processo.php, .as-p6): un palco con la luce colorata della ricetta del 02/11, i dispositivi
   fotografici del kit (immagini, schermate ferme) e, in vetro, la cosa che succede nel passo. Misure in cqw del palco
   (1cqw = 1% della sua larghezza): largo (> 560px) le scene da computer, stretto le scene da telefono. I vetri hanno un corpo
   loro (clamp in px), così il testo resta leggibile anche nel palco piccolo. Niente drop-shadow: le ombre sono immagini. */
.as-processo {
	position: relative;
	overflow: clip;
	padding-top: var(--as-sect);
	--as-goccia: 0px;
	border-radius: 50% 50% 0 0 / var(--as-goccia) var(--as-goccia) 0 0;
	--p6-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif;
}
.as-processo__testa { display: grid; gap: var(--as-sp-5); }
@media (min-width: 1000px) {
	.as-processo__testa { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; column-gap: var(--as-sp-8); }
}
.as-processo__titolo { margin: 0; max-width: 15ch; }
.as-processo__sotto-box { display: grid; gap: 14px; }
.as-processo__sotto { margin: 0; max-width: 38ch; color: var(--as-muted); }
.as-processo__nota { margin: 0; color: var(--as-muted); }
.as-processo__palco { padding-block: clamp(56px, 7vw, 110px) var(--as-sect); }
.as-processo__vetrina, .as-processo__conta-tel { display: none; }
.as-processo__passi { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 9vw, 110px); }
.as-processo__n { display: inline-block; margin-right: .55em; font-size: .36em; letter-spacing: .08em; vertical-align: .95em; color: var(--as-arancio); font-variant-numeric: tabular-nums; }
.as-processo__nome { margin: 0; font-size: clamp(30px, 2.8vw, 46px); font-weight: 400; line-height: 1.06; letter-spacing: -.028em; }
.as-processo__testo { margin: 16px 0 0; max-width: 44ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--as-muted); }
.as-processo__schermo-colonna { margin-top: 28px; max-width: 820px; }

/* ══ IL PALCO ══ */
.as-pr-schermo { container-type: inline-size; }
.as-p6 {
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: calc(28px * var(--as-brm, 1));
	font-family: var(--p6-sys);
	color: #1C1C1E;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	/* la luce: pesca, rosa, cielo, lavanda, menta (niente gialli) */
	background:
		radial-gradient(38% 52% at 8% 84%, rgba(255, 186, 160, .6), rgba(255, 186, 160, 0) 70%),
		radial-gradient(34% 46% at 40% 4%, rgba(255, 168, 204, .5), rgba(255, 168, 204, 0) 70%),
		radial-gradient(40% 54% at 94% 14%, rgba(146, 196, 255, .58), rgba(146, 196, 255, 0) 70%),
		radial-gradient(42% 52% at 76% 98%, rgba(188, 168, 255, .55), rgba(188, 168, 255, 0) 70%),
		radial-gradient(34% 44% at 48% 64%, rgba(160, 228, 200, .4), rgba(160, 228, 200, 0) 70%),
		#F2EFF1;
}
@supports (corner-shape: squircle) { .as-p6 { corner-shape: squircle; } }
/* ogni passo sposta un po' la luce: stessa famiglia, scene diverse */
.as-p6--2, .as-p6--5 { background-position: 0 0; background-color: #EFEEF3; }
.as-p6--3 { background-color: #F3EEEF; }
.as-p6--4 { background-color: #F0F0F3; }
.as-p6 p, .as-p6 ol, .as-p6 figure { margin: 0; }

/* I dispositivi fotografici: l'immagine nel flusso del figure (il rapporto lo dà lei) e dietro la sua ombra. */
.as-p6__disp { position: absolute; z-index: 1; margin: 0; }
.as-p6__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-width: none; }
.as-p6__ombra { position: absolute; z-index: 0; left: var(--ol, -5%); width: var(--ow, 110%); top: -7.2%; height: 119.6%; max-width: none; pointer-events: none; }
.as-p6__disp.is-mac { --ol: -5.079%; --ow: 110.159%; }
.as-p6__disp.is-ipad { --ol: -5.788%; --ow: 111.576%; }
.as-p6__disp.is-ipad-v { --ol: -11.056%; --ow: 122.111%; }
.as-p6__disp.is-tel-fronte { --ol: -16.327%; --ow: 132.653%; }
.as-p6__disp.is-tel-intero { --ol: -18.605%; --ow: 137.209%; }

/* I vetri: bianco col filo chiaro, squircle, un corpo loro. */
.as-p6-v {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	font-size: clamp(7px, 1cqw, 9.4px);
	line-height: 1.3;
	padding: 1.5em 1.7em;
	border-radius: calc(2.1em * var(--as-brm, 1));
	background: rgba(255, 255, 255, .94); /* quasi pieno: senza sfocatura, sopra un dispositivo il vetro chiaro lo farebbe trasparire */
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), 0 1.8em 3.8em -1.8em rgba(40, 30, 70, .38);
}
@supports (corner-shape: squircle) { .as-p6-v { corner-shape: squircle; } }
.as-p6-ic { display: block; flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-p6-toro { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: #0B0B0B; overflow: hidden; }
.as-p6-toro .as-lg { display: block; width: 62%; height: auto; }
.as-p6-toro .as-lg img { display: block; width: 100%; height: auto; }

/* 1 · il primo incontro: l'invito nel Calendario di iOS (v0.120); in vetro «Irene ha accettato» e la copia del sito vecchio */
.as-p6--1 .is-tel-cinema { right: 4cqw; bottom: 0; width: 45cqw; }
.as-p6-accetta { left: 6cqw; top: 13cqw; display: flex; align-items: center; gap: 1em; padding: .9em 1.1em .9em .9em; border-radius: 3em; }
.as-p6-accetta img { flex: none; width: 3.2em; height: 3.2em; border-radius: 50%; object-fit: cover; }
.as-p6-accetta b { display: block; font-size: 1.6em; font-weight: 600; letter-spacing: -.01em; }
.as-p6-accetta small { display: block; margin-top: .2em; font-size: 1.3em; color: #6E6E73; }
.as-p6-accetta i { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; margin-left: .6em; border-radius: 50%; background: #34C759; color: #fff; }
.as-p6-accetta i .as-p6-ic { width: 1.25em; height: 1.25em; stroke-width: 2.8; }
.as-p6-copia { left: 9cqw; top: 30cqw; display: flex; align-items: center; gap: 1em; padding: 1.2em 1.6em 1.2em 1.2em; }
.as-p6-copia__v { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #F37022; color: #fff; }
.as-p6-copia__v .as-p6-ic { width: 1.4em; height: 1.4em; stroke-width: 2.8; }
.as-p6-copia b { display: block; font-size: 1.6em; font-weight: 600; letter-spacing: -.01em; }
.as-p6-copia small { display: block; margin-top: .2em; font-size: 1.3em; color: #6E6E73; }

/* 2 · la mappa: la lavagna collaborativa sul Mac, ferma (v0.121). Il commento in vetro c'è solo da telefono (.as-p6-mcom),
   dove il Mac intero è piccolo. */
.as-p6--2 .is-mac { left: 5cqw; top: 5.5cqw; width: 90cqw; }
.as-p6-mcom { display: none; }
.as-p6-mcom__ok { display: flex; align-items: center; gap: .5em; margin-top: 1.1em !important; padding-top: 1em; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 1.45em; font-weight: 600; color: #2F6F3E; }
.as-p6-mcom__ok .as-p6-ic { width: 1.15em; height: 1.15em; stroke-width: 2.8; }

/* 3 · la proposta di palette, ferma (v0.121): l'iPad orizzontale; quello verticale è del telefono */
.as-p6--3 .is-oriz { left: 8cqw; top: 3.4cqw; width: 84cqw; }
.as-p6--3 .is-ipad-v { display: none; }
.as-p6-com__chi { display: flex; align-items: center; gap: .6em; margin-bottom: .55em !important; font-size: 1.45em; }
.as-p6-com__chi img { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }
.as-p6-com__chi b { font-weight: 600; }
.as-p6-com__chi small { color: #8E8E93; font-size: .9em; }
.as-p6-com__t { font-size: 1.75em; line-height: 1.3; letter-spacing: -.01em; }
.as-p6-com__risp { display: flex; align-items: center; gap: .7em; margin-top: 1.1em !important; padding-top: 1.1em; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 1.55em; line-height: 1.3; }
.as-p6-com__risp .as-p6-toro { width: 2.2em; height: 2.2em; }
.as-p6-com__risp > span:not(.as-p6-toro) { flex: 1; }
.as-p6-com__risp > span b { display: block; font-weight: 600; }

/* 4 · le date: il Calendario in diagonale; l'invito e le tappe */
.as-p6--4 .is-tel-diagonale { right: 0; bottom: 0; width: 60cqw; }
.as-p6-invito { left: 5.5cqw; top: 9cqw; width: 44cqw; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2em; row-gap: 1.2em; align-items: center; }
.as-p6-invito__g { display: grid; justify-items: center; width: 4.4em; padding: .45em 0 .55em; border-radius: calc(1em * var(--as-brm, 1)); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); line-height: 1; }
.as-p6-invito__g small { font-size: 1.05em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #FF3B30; }
.as-p6-invito__g b { margin-top: .12em; font-size: 2.6em; font-weight: 300; letter-spacing: -.02em; }
.as-p6-invito__c b { display: block; font-size: 1.95em; font-weight: 650; letter-spacing: -.02em; line-height: 1.12; }
.as-p6-invito__c small { display: block; margin-top: .3em; font-size: 1.45em; color: #5E5E63; }
.as-p6-invito__b { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.as-p6-invito__b i { display: grid; place-items: center; height: 3.4em; border-radius: 1.7em; background: rgba(28, 28, 30, .06); font-size: 1.4em; font-style: normal; font-weight: 600; color: #3A3A3C; }
.as-p6-invito__b i.is-si { position: relative; background: #1C1C1E; color: #fff; }
.as-p6-invito__b i.is-si span { display: flex; align-items: center; gap: .35em; }
.as-p6-invito__b i.is-si .as-p6-ic { width: 1.1em; height: 1.1em; stroke-width: 2.8; }
.as-p6-invito__b .is-prima { position: absolute; inset: 0; justify-content: center; opacity: 0; }
.as-p6 .as-p6-tappe { left: 5.5cqw; top: 36cqw; width: 37cqw; list-style: none; padding: .7em 1.7em; } /* due classi: ol[class] del tema (Errori 1.85) */
.as-p6-tappe li { display: flex; flex-direction: column; gap: .2em; padding: .9em 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.as-p6-tappe li:first-child { border-top: 0; }
.as-p6-tappe b { font-size: 1.6em; font-weight: 600; letter-spacing: -.01em; }
.as-p6-tappe span { font-size: 1.35em; color: #6E6E73; }

/* 5 · l'anteprima: il Mac e, davanti, l'iPhone coi Messaggi */
.as-p6--5 .is-mac { left: 2.5cqw; top: 8cqw; width: 74cqw; }
.as-p6--5 .is-tel-fronte { right: 5cqw; top: 5cqw; width: 28cqw; z-index: 2; }

/* 6 · online, e non resti solo (v0.120): la chat WhatsApp dopo la messa online; in vetro il sito online e la cura di ogni giorno */
.as-p6--6 .is-tel-intero { right: 12cqw; top: 3.5cqw; width: 26.5cqw; }
.as-p6-online { left: 7cqw; top: 13cqw; display: flex; align-items: center; gap: 1.1em; padding: 1em 1.9em 1em 1em; border-radius: 2.3em; }
.as-p6-online__f { flex: none; width: 5em; height: 5em; border-radius: calc(1.3em * var(--as-brm, 1)); background-size: cover; background-position: 50% 58%; }
.as-p6-online b { display: block; font-size: 1.85em; font-weight: 650; letter-spacing: -.02em; }
.as-p6-online small { display: flex; align-items: center; gap: .5em; margin-top: .3em; font-size: 1.4em; color: #5E5E63; }
.as-p6-online small i { flex: none; width: .8em; height: .8em; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 .3em rgba(52, 199, 89, .2); }
.as-p6 .as-p6-cura { left: 7cqw; top: 30cqw; width: 36cqw; list-style: none; padding: .5em 1.7em; } /* due classi: ul[class] del tema (Errori 1.85) */
.as-p6-cura li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9em; padding: 1em 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.as-p6-cura li:first-child { border-top: 0; }
.as-p6-cura i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #F37022; color: #fff; }
.as-p6-cura i .as-p6-ic { width: 1.25em; height: 1.25em; stroke-width: 2.8; }
.as-p6-cura b { font-size: 1.6em; font-weight: 600; letter-spacing: -.01em; }
.as-p6-cura span { font-size: 1.4em; color: #6E6E73; font-variant-numeric: tabular-nums; }

/* Da telefono (il palco stretto): un palco più alto, i dispositivi più grandi e tagliati dal bordo, i vetri sopra. */
@container (max-width: 560px) {
	.as-p6 { aspect-ratio: 4 / 5; border-radius: calc(22px * var(--as-brm, 1)); }
	.as-p6--1 .is-tel-cinema { right: 0; bottom: 0; width: 74cqw; }
	.as-p6-accetta { left: 5cqw; top: 5cqw; }
	.as-p6-copia { left: 5cqw; top: auto; bottom: 6cqw; } /* in basso, sulle righe di Calendario: il titolo dell'evento resta libero */
	/* v0.121 (Rami, 07/11: «da mobile troppo zoomato, fai che si veda tutto»): il Mac e l'iPad interi */
	.as-p6--2 .is-mac { left: 4cqw; top: 7cqw; width: 92cqw; }
	.as-p6-mcom { display: block; left: 5cqw; right: 5cqw; top: auto; bottom: 5cqw; width: auto; }
	.as-p6--3 .is-oriz { display: none; }
	.as-p6--3 .is-ipad-v { display: block; left: 10.5cqw; top: 6cqw; width: 79cqw; }
	.as-p6--4 .is-tel-diagonale { width: 104cqw; }
	.as-p6-invito { left: 5cqw; top: 5cqw; width: 78cqw; }
	.as-p6-tappe { display: none; }
	.as-p6--5 .is-mac { left: 4cqw; top: 7cqw; width: 92cqw; }
	.as-p6--5 .is-tel-fronte { right: 5cqw; top: 38cqw; width: 40cqw; }
	.as-p6--6 .is-tel-intero { right: 3cqw; top: 2cqw; width: 45cqw; }
	.as-p6-online { left: 4cqw; top: 38cqw; }
	.as-p6 .as-p6-cura { left: 4cqw; top: auto; bottom: 3cqw; width: 70cqw; } /* sotto la chat: la risposta «Fatto, è già online» resta libera */
}

/* Viva: la scena prende vita quando arriva in vetrina (fermo = stato finale, regola 4). */
.as-processo--viva .as-pr-pagina.is-attiva :is(.as-p6-accetta, .as-p6-invito, .as-p6-online) { animation: as-p6-su .65s .25s var(--as-ease-out) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-accetta i { animation: as-p6-spunta .45s .95s cubic-bezier(.34, 1.56, .64, 1) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-copia { animation: as-p6-su .6s .85s var(--as-ease-out) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-copia__v { animation: as-p6-spunta .45s 1.5s cubic-bezier(.34, 1.56, .64, 1) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-invito__b .is-prima { animation: as-p6-via 1.7s steps(1) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-invito__b .is-dopo { animation: as-p6-arriva 1.7s steps(1) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-tappe li { animation: as-p6-su .45s var(--as-ease-out) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-tappe li:nth-child(1) { animation-delay: 1.9s; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-tappe li:nth-child(2) { animation-delay: 2.15s; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-tappe li:nth-child(3) { animation-delay: 2.4s; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6--5 .is-tel-fronte { animation: as-p6-sale .9s .3s var(--as-ease-out) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-online small i { animation: as-p6-pulsa 1.6s .9s 2; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-cura { animation: as-p6-su .6s .8s var(--as-ease-out) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-cura i { animation: as-p6-spunta .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-cura li:nth-child(1) i { animation-delay: 1.35s; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-cura li:nth-child(2) i { animation-delay: 1.65s; }
.as-processo--viva .as-pr-pagina.is-attiva .as-p6-cura li:nth-child(3) i { animation-delay: 1.95s; }
@keyframes as-p6-su { from { opacity: 0; transform: translate3d(0, 1.6em, 0); } }
@keyframes as-p6-sale { from { opacity: 0; transform: translate3d(0, 6cqw, 0); } }
@keyframes as-p6-spunta { from { opacity: 0; transform: scale(.4); } }
@keyframes as-p6-via { from { opacity: 1; } to { opacity: 0; } }
@keyframes as-p6-arriva { from { opacity: 0; } to { opacity: 1; } }
@keyframes as-p6-pulsa { 50% { box-shadow: 0 0 0 .6em rgba(52, 199, 89, 0); } }

/* Con un puntatore, da 900px: i passi scorrono, la vetrina resta appiccicata (motion.js). */
@media (min-width: 900px) {
	.as-processo--viva .as-processo__griglia { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
	.as-processo--viva .as-processo__schermo-colonna, .as-processo--viva .as-processo__n { display: none; }
	.as-processo--viva .as-processo__passi { gap: 0; }
	.as-processo--viva .as-processo__passo { min-height: min(62svh, 600px); display: flex; flex-direction: column; justify-content: center; opacity: .26; transition: opacity .45s var(--as-ease-out); }
	.as-processo--viva .as-processo__passo.is-attivo { opacity: 1; }
	.as-processo--viva .as-processo__vetrina { display: block; }
	.as-processo__stato { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
	/* la vetrina alta quanto il palco, ma mai più dello schermo (meno il contatore) */
	.as-processo__schermi { position: relative; width: min(100%, calc((100svh - 150px) * 16 / 11)); aspect-ratio: 16 / 11; }
	.as-pr-pagina { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(34px) scale(.985); transition: opacity .5s var(--as-ease-out), transform .7s var(--as-ease-out), visibility 0s .7s; }
	.as-pr-pagina.is-attiva { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .12s var(--as-ease-out), transform .7s .12s var(--as-ease-out), visibility 0s; }
	.as-pr-pagina.is-passata { transform: translateY(-34px) scale(.985); }
}
.as-processo__conta { font-size: 13px; letter-spacing: .08em; color: var(--as-muted); font-variant-numeric: tabular-nums; }
.as-processo__tacche { display: flex; gap: 6px; }
.as-processo__tacche i { position: relative; width: 30px; height: 2px; overflow: hidden; background: var(--as-line); }
.as-processo__tacche i::after { content: ""; position: absolute; inset: 0; background: var(--as-arancio); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--as-ease-out); }
.as-processo__tacche i.is-fatta::after { transform: none; }

/* Da telefono: la fila che si sfoglia col dito. Ogni passo è una card larga l'84% dello schermo (la successiva si
   intravede): in cima la sua scena, SOTTO il titolo e il testo (v0.121, Rami 07/11: «i testi sotto le card, non sopra»);
   il contatore sta sopra la fila, in alto a destra. */
@media (max-width: 699px) {
	.as-processo__testa { gap: 16px; }
	.as-processo__palco { padding-block: 36px var(--as-sect); }
	.as-processo .as-processo__passi {
		display: flex;
		align-items: stretch;
		gap: 12px;
		margin-inline: calc(-1 * var(--as-gutter));
		padding-inline: var(--as-gutter);
		scroll-padding-inline: var(--as-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.as-processo__passi::-webkit-scrollbar { display: none; }
	.as-processo__passo { flex: 0 0 min(84vw, 360px); display: flex; flex-direction: column; scroll-snap-align: start; }
	.as-processo__nome { font-size: 22px; line-height: 1.18; letter-spacing: -.02em; }
	.as-processo__n { font-size: 13px; vertical-align: .3em; }
	.as-processo__testo { margin-top: 10px; font-size: 15px; line-height: 1.5; }
	.as-processo__schermo-colonna { order: -1; flex: none; margin: 0 0 18px; padding: 0; }
	.as-processo--fila .as-processo__conta-tel { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 14px; padding-inline: var(--as-gutter); font-size: 13px; letter-spacing: .06em; color: var(--as-muted); font-variant-numeric: tabular-nums; }
	.as-processo__conta-tel span { color: var(--as-ink); }
	.as-processo__conta-tel i { position: relative; flex: 0 1 96px; height: 2px; overflow: hidden; background: var(--as-line); }
	.as-processo__conta-tel b { position: absolute; inset: 0; background: var(--as-arancio); transform: scaleX(.1667); transform-origin: left; transition: transform .35s var(--as-ease-out); }
}


/* ── I DOCUMENTI: il fascicolo (v0.39, 29/09) ─────────────────────────────
   Carbone. Fogli A4 veri sulla carta intestata dello studio, testo leggibile.
   Di base (touch, senza JS) una fila che si sfoglia col dito: la didascalia
   (nome e riga del documento) sopra, il foglio sotto, tagliato a 460px.
   .as-fascicolo--viva (puntatore, ≥ 900px): l'indice a sinistra scorre, la
   pila a destra resta appiccicata e si sfoglia (motion.js). */
.as-fascicolo {
	position: relative;
	overflow: clip;
	--as-goccia: 0px;
	--as-goccia2: 0px;
	/* cupola in testa (data-as-goccia) e pancia in fondo (data-as-contro-goccia) */
	border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) var(--as-goccia2) var(--as-goccia2);
}
.as-fascicolo__palco { padding-block: var(--as-sect); }
.as-fascicolo__griglia { display: grid; gap: var(--as-sp-7); }
.as-fascicolo__titolo { margin: 0; max-width: 14ch; text-wrap: balance; }
.as-fascicolo__sotto { margin-top: var(--as-sp-5); max-width: 34ch; color: var(--as-muted); }
.as-fascicolo__indice { display: none; list-style: none; margin: 0; padding: 0; }
.as-fascicolo__chiusa { margin: var(--as-sp-6) 0 0; max-width: 24ch; font-size: clamp(20px, 1.75vw, 27px); line-height: 1.3; letter-spacing: -.01em; color: var(--as-ink); }
.as-fascicolo .as-fascicolo__pila {
	list-style: none;
	display: flex;
	gap: 14px;
	margin: 0 calc(-1 * var(--as-gutter));
	padding: 0 var(--as-gutter);
	scroll-padding-inline: var(--as-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.as-fascicolo__pila::-webkit-scrollbar { display: none; }
.as-fascicolo__doc { flex: 0 0 min(84vw, 380px); display: flex; flex-direction: column; scroll-snap-align: start; }
.as-fascicolo__didascalia { margin-bottom: 18px; }
.as-foglio__nome { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: var(--as-ink); }
.as-foglio__nome span { margin-right: .55em; font-size: 13px; letter-spacing: .08em; vertical-align: .2em; color: var(--as-arancio); font-variant-numeric: tabular-nums; }
.as-foglio__riga { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--as-muted); }
.as-foglio {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 460px;
	margin-top: auto;
	padding: 26px 22px 0;
	border-radius: 2px;
	background: #fff;
	color: #1C1C1A;
	overflow: hidden;
	font-size: 11.5px;
	line-height: 1.5;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 30px 60px -30px rgba(0, 0, 0, .7);
	-webkit-mask-image: linear-gradient(#000 calc(100% - 60px), transparent);
	mask-image: linear-gradient(#000 calc(100% - 60px), transparent);
}
.as-foglio p, .as-foglio ul, .as-foglio dl, .as-foglio dd { margin: 0; }
.as-foglio ul { list-style: none; padding: 0; }
.as-foglio b { font-weight: 600; }
.as-foglio__intesta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.8em !important; padding-bottom: .9em; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: .88em; color: rgba(0, 0, 0, .5); }
.as-foglio__intesta > span:first-child { display: inline-flex; align-items: center; gap: .5em; font-size: 1.2em; font-weight: 500; letter-spacing: -.01em; color: #1C1C1A; }
.as-foglio__intesta .as-logo__toro { width: auto; height: 1.3em; }
.as-foglio__corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.as-foglio__tit { margin-bottom: .8em !important; font-size: 1.42em; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.as-foglio__p { margin-bottom: .8em !important; }
.as-foglio__grigio { color: rgba(0, 0, 0, .55); }
.as-foglio__art { position: relative; margin-bottom: .65em !important; }
.as-foglio__art b { display: block; }
.as-foglio__art.is-segnato::before { content: ""; position: absolute; top: .2em; bottom: .2em; left: -.9em; width: 2px; background: var(--as-arancio); }
.as-foglio__luogo { margin: 1.1em 0 .4em !important; color: rgba(0, 0, 0, .6); }
.as-foglio__firme { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; }
.as-foglio__firme > span { display: grid; gap: .3em; }
.as-foglio__firme svg { width: 100%; max-width: 11em; height: 2.8em; fill: none; stroke: #1B2A4A; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.as-foglio__firme i { font-size: .82em; font-style: normal; color: rgba(0, 0, 0, .55); }
.as-foglio__scheda { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); }
.as-foglio__scheda dt, .as-foglio__scheda dd { padding: .45em 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.as-foglio__scheda dt { font-size: .86em; color: rgba(0, 0, 0, .5); }
.as-foglio__campioni { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; }
.as-foglio__campioni i { width: 1.1em; height: 1.1em; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.as-foglio__campioni span { margin-left: .3em; font: .86em ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(0, 0, 0, .55); }
.as-foglio__avanza { display: flex; align-items: center; gap: .8em; margin-bottom: 1em !important; }
.as-foglio__avanza i { flex: 1; height: .45em; border-radius: 999px; background: linear-gradient(90deg, #1C1C1A calc(var(--p) * 100%), rgba(0, 0, 0, .1) 0); }
.as-foglio__avanza span { font-size: .9em; font-weight: 600; font-variant-numeric: tabular-nums; }
.as-foglio__sez { margin: .8em 0 .35em !important; font-weight: 600; }
.as-foglio__caselle { display: grid; gap: .3em; }
.as-foglio__caselle li { display: flex; align-items: center; gap: .6em; }
.as-foglio__caselle i { flex: none; width: 1em; height: 1em; border-radius: 2px; box-shadow: inset 0 0 0 1.3px rgba(0, 0, 0, .4); }
.as-foglio__caselle li.is-fatta i { background: #1C1C1A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.3 2.8 2.8 6.2-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; box-shadow: none; }
.as-foglio__caselle small { margin-left: auto; font-size: .86em; color: rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
.as-foglio__prossimo { margin-top: 1em !important; padding: .6em .8em; border-radius: 3px; background: #F4F2EE; }
.as-foglio__storico li { display: flex; align-items: flex-start; gap: .7em; padding: .6em 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.as-foglio__avatar { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #3A3A3C; color: #fff; font-size: .72em; font-weight: 600; }
.as-foglio__cosa { flex: 1; min-width: 0; display: grid; gap: .1em; }
.as-foglio__cosa em { justify-self: start; padding: .05em .5em; border-radius: 3px; background: rgba(0, 0, 0, .07); font-size: .82em; font-style: normal; }
.as-foglio__cosa > span { color: rgba(0, 0, 0, .7); }
.as-foglio__ripristina { flex: none; padding: .2em .55em; border-radius: 3px; font-size: .86em; color: #1B4F9C; }
.as-foglio__storico li.is-scelta .as-foglio__ripristina { background: #E8F0FB; }
.as-foglio__chiavi { width: 100%; border-collapse: collapse; font-size: .9em; }
.as-foglio__chiavi th { padding: .4em .3em .4em 0; border-bottom: 1px solid rgba(0, 0, 0, .25); font-size: .9em; font-weight: 600; text-align: left; }
.as-foglio__chiavi td { padding: .5em .3em .5em 0; border-bottom: 1px solid rgba(0, 0, 0, .08); vertical-align: top; }
.as-foglio__chiavi td:nth-child(2) { color: rgba(0, 0, 0, .55); }
.as-foglio__chiavi td:last-child { letter-spacing: .05em; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.as-foglio__pw { display: grid; }
.as-foglio__pw > span { grid-area: 1 / 1; }
.as-foglio__pw > span + span { opacity: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0; color: #1C1C1A; }
.as-foglio__mano { margin-top: 1.3em !important; font: 1.35em/1.2 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; color: #1B2A4A; transform: rotate(-2deg); transform-origin: left; }
.as-foglio__piede { flex: none; display: flex; justify-content: space-between; gap: 1em; margin-top: 1.2em !important; padding: .9em 0 1.1em; border-top: 1px solid rgba(0, 0, 0, .1); font-size: .8em; color: rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
/* Viva, da 900px: l'indice scorre, la pila resta appiccicata (motion.js). */
@media (min-width: 900px) {
	.as-fascicolo--viva .as-fascicolo__griglia { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: var(--as-sp-8); align-items: start; }
	.as-fascicolo--viva .as-fascicolo__indice { display: block; margin-top: var(--as-sp-5); }
	.as-fascicolo--viva .as-fascicolo__indice li { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: min(44svh, 400px); opacity: .28; transition: opacity .4s var(--as-ease-out); }
	.as-fascicolo--viva .as-fascicolo__indice li.is-aperto { opacity: 1; }
	.as-fascicolo__indice li span { font-size: 13px; letter-spacing: .08em; color: var(--as-arancio); font-variant-numeric: tabular-nums; }
	.as-fascicolo__indice li b { font-size: clamp(26px, 2.2vw, 34px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: var(--as-ink); }
	.as-fascicolo__indice li em { max-width: 36ch; font-size: 17px; font-style: normal; line-height: 1.5; color: var(--as-muted); }
	.as-fascicolo--viva .as-fascicolo__pila { position: relative; display: block; height: min(76svh, 660px); margin: 0; padding: 0; overflow: visible; }
	.as-fascicolo--viva .as-fascicolo__doc { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; will-change: transform, opacity; }
	.as-fascicolo--viva .as-fascicolo__didascalia { display: none; }
	.as-fascicolo--viva .as-foglio {
		height: 100%;
		aspect-ratio: 1 / 1.414;
		margin: 0 auto;
		padding: 8% 8% 0;
		font-size: calc(min(76svh, 660px) / 1.414 / 41);
		-webkit-mask-image: none;
		mask-image: none;
	}
	/* il foglio che arriva in cima fa una cosa viva */
	.as-fascicolo--viva .is-sopra .as-foglio__firme path { stroke-dasharray: 1; animation: as-fs-firma 1.1s .35s ease-out both; }
	.as-fascicolo--viva .is-sopra .as-foglio__firme span + span path { animation-delay: 1.2s; }
	.as-fascicolo--viva .is-sopra .as-foglio__compila span { animation: as-fs-compila .7s .4s steps(10) both; }
	.as-fascicolo--viva .is-sopra .as-foglio__caselle li.is-ultima i { animation: as-fs-spunta .3s .6s both; }
	.as-fascicolo--viva .is-sopra .as-foglio__storico li.is-scelta .as-foglio__ripristina { animation: as-fs-evidenzia 1.4s .5s both; }
	.as-fascicolo--viva .is-sopra .as-foglio__pw > span:first-child { animation: as-fs-pw-a 2.4s .5s both; }
	.as-fascicolo--viva .is-sopra .as-foglio__pw > span + span { animation: as-fs-pw-b 2.4s .5s both; }
}
@keyframes as-fs-firma { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes as-fs-compila { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes as-fs-spunta { from { background-color: transparent; background-size: 0; box-shadow: inset 0 0 0 1.3px rgba(0, 0, 0, .4); } }
@keyframes as-fs-evidenzia { from { background: #E8F0FB; } 40% { background: #CFE0F7; } to { background: #E8F0FB; } }
@keyframes as-fs-pw-a { 0%, 10% { opacity: 1; } 18%, 78% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes as-fs-pw-b { 0%, 10% { opacity: 0; } 18%, 78% { opacity: 1; } 86%, 100% { opacity: 0; } }
@media (max-width: 699px) {
	.as-fascicolo__griglia { gap: 28px; }
	.as-foglio__chiavi th:nth-child(2), .as-foglio__chiavi td:nth-child(2) { display: none; }
	/* v0.39: sulla carta da telefono niente testo sotto gli 11px veri (le note in piccolo erano a 9-10px). */
	.as-foglio :is(.as-foglio__intesta, .as-foglio__firme i, .as-foglio__piede, .as-foglio__scheda dt, .as-foglio__campioni span, .as-foglio__avanza span, .as-foglio__caselle small, .as-foglio__cosa em, .as-foglio__ripristina, .as-foglio__chiavi, .as-foglio__chiavi th) { font-size: 11px; }
}

/* ── ANCHE DOPO, CI PENSO IO: in base.css dalla v0.36 (serve anche ai servizi). */

/* ── LA RETE ─────────────────────────────────────────────────────────── */
.as-studio__rete h2 { max-width: 16ch; }

/* ── LE DOMANDE ──────────────────────────────────────────────────────────── */
.as-domande .as-display-sm { max-width: 20ch; }
.as-domande .as-domande__a { max-width: 62ch; }