/* «Come funziona ToBePolo», /come-funziona/ (kit come-funziona-13-10, CEO 13/10/2026).
 *
 * I componenti sono quelli di «Hobbisti ToBePolo», «Professionisti verificati» e «Insegna su ToBePolo»:
 * css/tbp-verificati.css si carica prima di questo foglio e fa apertura, passi, tre colonne con la linea, righe con il
 * titolo a sinistra, invito verde, nota, temi chiaro, scuro e ToBePolo. Qui c'è SOLO quello che là non esiste:
 * il riquadro dei quattro numeri in apertura, le righe con la linea, il conto, i collegamenti in fondo a una riga.
 * Stessi gettoni (--ver-*), stessi spazi (4-8-12-16-24-32-48), stessi raggi (24), caratteri del sito.
 * Niente bordi colorati di lato o in alto, niente ombre, niente gradienti, nessun JavaScript. */

/* Ancore sotto la testata che resta in alto. */
html body .tbp-ver.tbp-comefun :is(#imparare, #se-va-storto, #insegnare, #regole) { scroll-margin-top: 96px; }

/* ---------- Apertura: a destra i quattro numeri che contano, al posto della foto. Un riquadro solo, righe con una
   linea: il numero nel carattere dei titoli, un gradino sopra il testo (niente numeri giganti), e mezza riga accanto. ---------- */
html body .tbp-ver.tbp-comefun .tbp-comefun__numeri { padding: 24px 20px; border-radius: 24px; background: var(--ver-scheda); }
html body .tbp-ver.tbp-comefun .tbp-comefun__eti { margin: 0 0 12px; color: var(--ver-nota); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
html body .tbp-ver.tbp-comefun dl.tbp-comefun__fatti { margin: 0; }
html body .tbp-ver.tbp-comefun .tbp-comefun__fatti > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-comefun .tbp-comefun__fatti > div:last-child { padding-bottom: 0; }
html body .tbp-ver.tbp-comefun .tbp-comefun__fatti dt {
	margin: 0;
	color: var(--ver-titolo);
	font-family: var(--tbp-font-titoli, var(--tbp-font, sans-serif));
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
	white-space: nowrap;
}
html body .tbp-ver.tbp-comefun .tbp-comefun__fatti dd { margin: 0; color: var(--ver-testo); font-size: .9375rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; }

/* ---------- Titoli delle righe e delle tre colonne: un gradino sopra il testo ---------- */
html body .tbp-ver.tbp-comefun .tbp-ver__capo h2 { margin-bottom: 8px; }
html body .tbp-ver.tbp-comefun .tbp-ver__capo:has(> h2:only-child) h2 { margin-bottom: 0; }

/* ---------- Righe con il titolo a sinistra e il testo a destra, una linea fra l'una e l'altra ---------- */
html body .tbp-ver.tbp-comefun .tbp-comefun__righe { border-bottom: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-comefun .tbp-comefun__riga { padding: 20px 0 24px; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-comefun .tbp-comefun__riga > h3 { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.3; }
html body .tbp-ver.tbp-comefun .tbp-comefun__primi { font-weight: 700; color: var(--ver-titolo); }

/* ---------- Il conto: righe con una linea, importi a destra. Niente riquadro. ---------- */
html body .tbp-ver.tbp-comefun dl.tbp-comefun__conto { max-width: 65ch; margin: 0 0 16px; border-bottom: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-comefun .tbp-comefun__voce { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-comefun .tbp-comefun__voce:first-child { border-top: 0; padding-top: 0; }
html body .tbp-ver.tbp-comefun .tbp-comefun__voce dt { margin: 0; color: var(--ver-testo); font-size: 1rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; }
html body .tbp-ver.tbp-comefun .tbp-comefun__come { display: block; color: var(--ver-nota); font-size: .8125rem; line-height: 1.4; letter-spacing: 0; text-transform: none; }
html body .tbp-ver.tbp-comefun .tbp-comefun__voce dd { margin: 0; color: var(--ver-testo); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: nowrap; }
html body .tbp-ver.tbp-comefun .tbp-comefun__voce--netto :is(dt, dd) {
	color: var(--ver-titolo);
	font-family: var(--tbp-font-titoli, var(--tbp-font, sans-serif));
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
html body .tbp-ver.tbp-comefun .tbp-comefun__voce--netto .tbp-comefun__come { font-family: var(--tbp-font, sans-serif); font-weight: 400; }

/* ---------- Collegamenti in fondo a una riga o a una sezione: alti 44 px per il dito ---------- */
html body .tbp-ver.tbp-comefun .tbp-comefun__azione { margin-top: 8px; }
html body .tbp-ver.tbp-comefun .tbp-comefun__azione--bottone { margin-top: 20px; }
html body .tbp-ver.tbp-comefun .tbp-comefun__azione--bottone .tbp-ver__cta { width: 100%; }
html body .tbp-ver.tbp-comefun .tbp-comefun__collegamenti { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
html body .tbp-ver.tbp-comefun .tbp-ver__livello h3 { margin-bottom: 6px; }

/* ---------- Invito finale: i due recapiti e la firma ---------- */
html body .tbp-ver.tbp-comefun .tbp-comefun__recapiti { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
html body .tbp-ver.tbp-comefun .tbp-comefun__recapiti a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }
html body .tbp-ver.tbp-comefun .tbp-comefun__firma { margin-top: 4px; font-weight: 700; }
html body .tbp-ver.tbp-comefun .tbp-ver__nota a { padding: 14px 0; }

/* Tema «ToBePolo» (chiaro): lì i riquadri sono bianchi su fondo bianco e non si distinguono. Un filo da 1 px,
   come in «Insegna su ToBePolo» nello stesso tema. */
html[data-tbp-theme="tobepolo"] body .tbp-ver.tbp-comefun :is(.tbp-comefun__numeri, .tbp-ver__passi-sezione) { box-shadow: inset 0 0 0 1px var(--ver-linea); }

/* ---------- Da 640 px ---------- */
@media (min-width: 640px) {
	html body .tbp-ver.tbp-comefun .tbp-comefun__azione--bottone .tbp-ver__cta { width: auto; }
}

/* ---------- Da 850 px ---------- */
@media (min-width: 850px) {
	html body .tbp-ver.tbp-comefun .tbp-comefun__numeri { padding: 32px; }
	html body .tbp-ver.tbp-comefun .tbp-comefun__fatti > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
	html body .tbp-ver.tbp-comefun .tbp-comefun__fatti dt { font-size: 1.25rem; }
	html body .tbp-ver.tbp-comefun .tbp-comefun__riga { padding: 28px 0 32px; }
	html body .tbp-ver.tbp-comefun .tbp-comefun__riga > h3 { margin: 0; }
}

/* ---------- Temi: nello stesso strato di tbp-appearance.css, che colora testi e collegamenti con !important ---------- */
@layer tbp-appearance {
	/* Testo dei bottoni oro: #052B18, la regola del 30/9 (5,0:1 anche sul lato scuro dell'oro). */
	html body #tbp-come-funziona.tbp-comefun a.tbp-btn.tbp-btn--premium:not(:disabled) {
		color: #052B18 !important;
		-webkit-text-fill-color: #052B18 !important;
	}
	/* Dentro l'invito verde i collegamenti e la firma sono bianchi come il testo, in tutti i temi. */
	html body .tbp-ver.tbp-comefun .tbp-ver__invito :is(a:not(.tbp-btn), .tbp-comefun__firma) {
		color: var(--ver-invito-testo) !important;
		-webkit-text-fill-color: var(--ver-invito-testo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-comefun :is(.tbp-comefun__fatti dd, .tbp-comefun__voce dt, .tbp-comefun__voce dd) {
		color: var(--ver-testo) !important;
		-webkit-text-fill-color: var(--ver-testo) !important;
	}
	/* Dopo la regola qui sopra, che ha lo stesso peso: il totale del conto prende il colore dei titoli. */
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-comefun :is(.tbp-comefun__fatti dt, .tbp-comefun__primi, .tbp-comefun__voce--netto dt, .tbp-comefun__voce--netto dd) {
		color: var(--ver-titolo) !important;
		-webkit-text-fill-color: var(--ver-titolo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-comefun :is(.tbp-comefun__eti, .tbp-comefun__come) {
		color: var(--ver-nota) !important;
		-webkit-text-fill-color: var(--ver-nota) !important;
	}
}