/* «Insegna il tuo mestiere su ToBePolo», /proponi-un-esperienza/ (kit insegna-pagina-12-10, CEO 12/10/2026).
 *
 * I componenti sono quelli di «Hobbisti ToBePolo» e «Professionisti verificati»: css/tbp-verificati.css si carica
 * prima di questo foglio e fa apertura, passi, riquadri «chi insegna», righe con il titolo a sinistra, invito verde,
 * nota, temi chiaro, scuro e ToBePolo. Qui c'è SOLO quello che su quelle due pagine non esiste:
 * l'elenco «Che cosa fa ToBePolo per te», il riquadro dei conti, i quattro momenti dei pagamenti, le domande.
 * Stessi gettoni (--ver-*), stessi spazi (4-8-12-16-24-32-48), stessi raggi (22, 24), caratteri del sito.
 * Niente bordi colorati di lato o in alto, niente ombre, niente gradienti, niente «·», nessun JavaScript. */

/* Ancore sotto la testata che resta in alto. */
html body .tbp-ver.tbp-ins :is(#quanto-costa, #come-si-comincia, #workshop, #pagamenti, #con-o-senza-partita-iva, #domande) { scroll-margin-top: 96px; }
html body .tbp-ver.tbp-ins .tbp-ins__ancora { display: block; height: 0; }

/* ---------- Apertura: la guida, accanto al bottone ---------- */
html body .tbp-ver.tbp-ins a.tbp-ins__guida { display: inline-block; min-height: 44px; padding: 10px 0; line-height: 1.5; }
html body .tbp-ver.tbp-ins .tbp-ins__peso { color: var(--ver-nota); font-weight: 400; white-space: nowrap; }

/* ---------- Che cosa fa ToBePolo per te: sei voci, senza schede ---------- */
html body .tbp-ver.tbp-ins ul.tbp-ins__voci { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
html body .tbp-ver.tbp-ins .tbp-ins__voce { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; }
html body .tbp-ver.tbp-ins .tbp-ins__voce > .tbp-ver__icona { grid-column: 1; grid-row: span 2; }
html body .tbp-ver.tbp-ins .tbp-ins__voce > :not(.tbp-ver__icona) { grid-column: 2; }
html body .tbp-ver.tbp-ins .tbp-ins__voce h3 { margin: 2px 0 4px; }
html body .tbp-ver.tbp-ins .tbp-ins__voce p { font-size: .9375rem; }

/* ---------- Quanto costa: un riquadro solo ---------- */
html body .tbp-ver.tbp-ins .tbp-ins__conti { display: grid; gap: 16px; padding: 24px 20px; border-radius: 24px; background: var(--ver-scheda); }
html body .tbp-ver.tbp-ins .tbp-ins__conti h2 { margin: 0 0 8px; }
html body .tbp-ver.tbp-ins .tbp-ins__frase {
	max-width: 16em;
	color: var(--ver-titolo);
	font-family: var(--tbp-font-titoli, var(--tbp-font, sans-serif));
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
html body .tbp-ver.tbp-ins .tbp-ins__conti-testo p { max-width: 62ch; }
html body .tbp-ver.tbp-ins .tbp-ins__esempio { display: grid; gap: 4px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-ins .tbp-ins__esempio-e { color: var(--ver-nota); font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
html body .tbp-ver.tbp-ins .tbp-ins__esempio strong {
	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;
}

/* ---------- Dalla prenotazione al bonifico: quattro momenti in fila, da leggere come una tabella ---------- */
html body .tbp-ver.tbp-ins ol.tbp-ins__momenti { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; counter-reset: none; }

/* ---------- Con o senza partita IVA: due riquadri, poche righe, il collegamento alla pagina che dice tutto ---------- */
html body .tbp-ver.tbp-ins .tbp-ins__eti { margin: 0 0 4px; color: var(--ver-nota); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
html body .tbp-ver.tbp-ins .tbp-ver__lato h3.tbp-ver__lato-t { margin-bottom: 8px; }
html body .tbp-ver.tbp-ins .tbp-ver__lato > p { max-width: 62ch; }
/* I due collegamenti alla stessa altezza, anche quando un riquadro ha una riga in più. */
html body .tbp-ver.tbp-ins .tbp-ver__lato { display: flex; flex-direction: column; }
html body .tbp-ver.tbp-ins .tbp-ins__lato-link { margin-top: auto; padding-top: 12px; }

/* ---------- Le domande: righe che portano alla risposta in /faq/ ---------- */
html body .tbp-ver.tbp-ins ul.tbp-ins__domande { max-width: 65ch; margin-bottom: 8px; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-ins .tbp-ins__domande li { border-bottom: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-ins .tbp-ins__domande a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 12px 40px 12px 0;
	color: var(--ver-titolo);
	font-weight: 700;
	text-decoration: none;
}
html body .tbp-ver.tbp-ins .tbp-ins__domande a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

/* ---------- Invito finale: i due recapiti, ognuno largo abbastanza per il dito ---------- */
html body .tbp-ver.tbp-ins .tbp-ins__recapiti { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
html body .tbp-ver.tbp-ins .tbp-ins__recapiti a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }

/* Collegamenti dentro la frase della nota in fondo: l'area che si tocca è alta 44 px, il testo non si sposta. */
html body .tbp-ver.tbp-ins .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 i campi di /per-le-aziende/ nello stesso tema. Solo in questa pagina: il foglio delle altre due non si tocca. */
html[data-tbp-theme="tobepolo"] body .tbp-ver.tbp-ins :is(.tbp-ins__conti, .tbp-ver__passi-sezione, .tbp-ver__lato) { box-shadow: inset 0 0 0 1px var(--ver-linea); }

@media (hover: hover) and (pointer: fine) {
	html body .tbp-ver.tbp-ins .tbp-ins__domande a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

/* ---------- Da 640 px ---------- */
@media (min-width: 640px) {
	html body .tbp-ver.tbp-ins ul.tbp-ins__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	html body .tbp-ver.tbp-ins ol.tbp-ins__momenti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* ---------- Da 850 px ---------- */
@media (min-width: 850px) {
	html body .tbp-ver.tbp-ins .tbp-ins__conti { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; padding: 40px; }
}

/* ---------- Da 1024 px: sei voci in tre colonne (due righe piene), quattro momenti in una riga ---------- */
@media (min-width: 1024px) {
	html body .tbp-ver.tbp-ins ul.tbp-ins__voci { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
	html body .tbp-ver.tbp-ins .tbp-ins__voce { display: block; }
	html body .tbp-ver.tbp-ins .tbp-ins__voce > .tbp-ver__icona { margin: 0 0 16px; }
	html body .tbp-ver.tbp-ins .tbp-ins__voce h3 { margin: 0 0 8px; }
	html body .tbp-ver.tbp-ins ol.tbp-ins__momenti { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

/* ---------- 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; con #084828 è 3,6:1). */
	html body #tbp-insegna.tbp-ins a.tbp-btn.tbp-btn--premium:not(:disabled) {
		color: #052B18 !important;
		-webkit-text-fill-color: #052B18 !important;
	}
	/* Dentro l'invito verde i collegamenti sono bianchi come il testo, in tutti i temi. */
	html body .tbp-ver.tbp-ins .tbp-ver__invito a:not(.tbp-btn) {
		color: var(--ver-invito-testo) !important;
		-webkit-text-fill-color: var(--ver-invito-testo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-ins :is(.tbp-ins__frase, .tbp-ins__esempio strong) {
		color: var(--ver-titolo) !important;
		-webkit-text-fill-color: var(--ver-titolo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-ins :is(.tbp-ins__eti, .tbp-ins__esempio-e, .tbp-ins__peso) {
		color: var(--ver-nota) !important;
		-webkit-text-fill-color: var(--ver-nota) !important;
	}
}