/*
 * Mentora — le pagine prodotto.
 *
 * Mappa materiali della skill: «pagina prodotto = scatola grande + LCD
 * per changelog/versioni». L'intestazione è la scatola; l'LCD arriva
 * allo Step 6, con il changelog.
 */

/* ------------------------------------------------------------------ *
 * Ritorno all'archivio
 * ------------------------------------------------------------------ */
.m-briciola {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-bottom: 8px;
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--m-ink-2);
	text-decoration: none;
}

.m-briciola:hover {
	color: var(--m-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * La scatola
 * ------------------------------------------------------------------ */
.m-prodotto__scatola {
	overflow: hidden;
	border-radius: var(--m-r-lg);
}

.m-prodotto__corpo {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 32px;
}

/*
 * Il pozzetto dell'icona: più grande di quello delle card, perché qui
 * l'icona è il segno del prodotto, non un'etichetta in una griglia.
 */
.m-prodotto__pozzetto {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: var(--m-r-lg);
	background: linear-gradient(180deg, #ECEAE5, #FBF9F5);
	box-shadow: var(--m-well);
	color: var(--m-link);
}

.m-prodotto__pozzetto svg {
	width: 42px;
	height: 42px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.m-prodotto__testo {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.m-prodotto__testo > * {
	margin-block: 0;
}

.m-prodotto__titolo {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.5rem);
}

.m-prodotto__sommario {
	max-width: 56ch;
	font-size: 1.0625rem;
	color: var(--m-ink-2);
}

.m-prodotto__avanzamento {
	width: min(100%, 360px);
}

.m-prodotto__nota {
	margin: 6px 0 0;
	font-size: 0.875rem;
	color: var(--m-ink-2);
}

/*
 * La prima frase guida: piu' grande e con l'inchiostro pieno, cosi'
 * l'occhio sa da dove cominciare. Il resto resta secondario.
 */
.m-prodotto__sommario--guida {
	margin-bottom: 10px;
	font-size: clamp(1.1875rem, 2.2vw, 1.375rem);
	line-height: 1.45;
	color: var(--m-ink);
}

/*
 * Il prezzo era grigio e piccolo quanto una nota: e' la seconda cosa
 * che si cerca dopo il nome. Ora e' inchiostro pieno, piu' grande, e
 * la cifra ha il peso.
 */
.m-prodotto__prezzo {
	font-size: 1.0625rem;
	color: var(--m-ink);
}

.m-prodotto__prezzo strong {
	font-family: var(--m-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.m-prodotto__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.m-prodotto__wporg {
	font-size: 0.875rem;
}

.m-prodotto__wporg a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ------------------------------------------------------------------ *
 * «In questa pagina»
 *
 * Stesso binario incassato della navigazione in alto: è lo stesso
 * gesto, e vale la pena che abbia lo stesso aspetto.
 * ------------------------------------------------------------------ */
.m-sezioni {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-top: 20px;
	padding: 4px;
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #DCD9D3, #EFEDE8);
	box-shadow: var(--m-well);
	width: fit-content;
	max-width: 100%;
}

.m-sezioni__voce {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--m-r-sm);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--m-ink-2);
	text-decoration: none;
	transition:
		color var(--m-dur-fast) var(--m-ease-soft),
		background-color var(--m-dur-fast) var(--m-ease-soft);
}

.m-sezioni__voce:hover {
	color: var(--m-ink);
	background: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------------ *
 * Il contenuto della pagina
 * ------------------------------------------------------------------ */
.m-prodotto__contenuto {
	padding-block-start: 0;
}

/*
 * Lo stacco fra una sezione e l'altra lo dà il titolo, non un margine
 * uniforme: così il salto da «In questa pagina» atterra sul titolo
 * giusto e non a metà del testo precedente.
 */
.m-prodotto__contenuto h2 {
	margin-top: var(--wp--preset--spacing--70);
	/* Il titolo non finisce sotto la barra in alluminio quando si salta. */
	scroll-margin-top: 24px;
}

@media (max-width: 600px) {

	.m-prodotto__corpo {
		padding: 22px 18px;
		gap: 20px;
	}

	.m-prodotto__pozzetto {
		width: 68px;
		height: 68px;
	}

	.m-prodotto__pozzetto svg {
		width: 32px;
		height: 32px;
	}
}

/* ------------------------------------------------------------------ *
 * Segnaposto per i dati che mancano
 *
 * Stessa logica di [PREZZO]: si dichiara cosa manca invece di
 * mostrare un pulsante che non porta da nessuna parte. Sparisce da
 * solo appena il dato c'è.
 * ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ *
 * L'AVVISO COL BIGLIETTO
 *
 * Nella mappa materiali della skill il supporto e' un biglietto, e qui
 * si chiede una cosa a una persona invece di premere un comando del
 * prodotto.
 *
 * Senza le mezzelune laterali del biglietto pieno: il loro ritaglio e'
 * dipinto col colore della pagina, e questo sta dentro la scatola di
 * carta, che e' un altro colore. Si vedrebbero due morsi del tono
 * sbagliato, e la linea di strappo basta a dire «biglietto».
 * ------------------------------------------------------------------ */

.m-avviso {
	max-width: min(56ch, 100%);
	margin: 0;
	padding: 12px 18px 14px;
	border-radius: var(--m-r-sm);
}

/* La targhetta: mono maiuscolo, come tutte le etichette tecniche. */
.m-avviso__targa {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 2px dashed rgba(90, 74, 44, .45);
	font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-ink-3);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.m-avviso__corpo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.m-avviso__testo {
	flex: 1 1 18ch;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--m-ink);
}

.m-avviso__azione {
	flex: 0 0 auto;
}

.m-prodotto__mancante {
	/*
	 * `min()` e non solo `52ch`: 52 caratteri sono 459px, che su un
	 * telefono da 375 sbordano e fanno comparire lo scroll orizzontale.
	 * Misurato dentro il box di acquisto, dove il contenitore non
	 * stringe il figlio.
	 */
	max-width: min(52ch, 100%);
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed rgba(90, 80, 65, .4);
	border-radius: var(--m-r-sm);
	font-size: 0.875rem;
	color: var(--m-ink-2);
}

/* ================================================================== *
 * FUNZIONI
 *
 * Schermo e testo affiancati. Le righe pari si invertono, così una
 * pagina con cinque funzioni non diventa una colonna di rettangoli
 * tutti uguali.
 * ================================================================== */

.m-funzione {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 32px;
	align-items: center;
	margin-block: var(--wp--preset--spacing--70);
}

.m-funzione:nth-of-type(even) .m-funzione__schermo {
	order: 2;
}

.m-funzione__testo > * {
	margin-block: 0;
}

.m-funzione__testo {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.m-funzione__titolo {
	margin: 0;
	font-size: 1.5rem;
}

/* Lo screenshot dentro la cornice dello schermo spento. */
.m-funzione__schermo .wp-block-image {
	margin: 0;
	padding: 6px;
	border-radius: var(--m-r-md);
	background-color: #1E1C1A;
	background-image: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 40%);
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, .8),
		0 10px 20px rgba(0, 0, 0, .25);
}

.m-funzione__schermo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* ================================================================== *
 * SCREENSHOT IN FILA
 * ================================================================== */

.m-screenshots {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-block: var(--wp--preset--spacing--50);
}

.m-screenshots .m-mini img {
	display: block;
	max-width: 260px;
	height: auto;
}

@media (max-width: 600px) {

	.m-funzione {
		gap: 20px;
		margin-block: var(--wp--preset--spacing--60);
	}

	.m-screenshots .m-mini img {
		max-width: 100%;
	}
}

/*
 * Lo schermo senza immagine.
 *
 * Un `<figure>` vuoto è alto zero, e la cornice scura diventerebbe una
 * striscia di dodici pixel: sembra un difetto. Con una proporzione
 * dichiarata resta uno schermo spento in attesa, che è la verità.
 */
.m-funzione__schermo .wp-block-image:not(:has(img)) {
	aspect-ratio: 16 / 10;
}

/*
 * Il segnaposto dentro lo schermo, finché non c'è l'immagine.
 */
.m-funzione__attesa {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	margin: 0;
	padding: 6px;
	border-radius: var(--m-r-md);
	background-color: #1E1C1A;
	background-image: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 40%);
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, .8),
		0 10px 20px rgba(0, 0, 0, .25);
	font-family: var(--m-font-mono);
	font-size: 0.8125rem;
	text-align: center;
	/* 5.2:1 sul fondo dello schermo spento. */
	color: #9A948A;
}

/* ================================================================== *
 * PIANI
 * ================================================================== */

/* Il comando a segmenti non e' nel markup: lo costruisce mentora.js. */
.m-piani__tab {
	margin-bottom: 16px;
}

/*
 * Quale pannello si vede lo decide `hidden`, che lo mette il JS: non
 * c'e' nessuna regola che ne nasconda uno in attesa dello script.
 * Qui si nascondeva il secondo finche' il JS non lo collegava, e senza
 * JavaScript il piano Pro non si poteva raggiungere. Niente display
 * su .m-piani__pannello, altrimenti batte il `[hidden]` del browser:
 * una regola del tema vince per origine, non per specificita'.
 *
 * Il titolo del riquadro — «Free», «Pro» — serve a chi legge la pagina
 * senza JavaScript e a chi la modifica nell'editor. Quando i tab ci
 * sono, il JS lo toglie: l'etichetta e' finita sul tasto. L'aspetto
 * glielo da' `.m-label`, la stessa targhetta del resto del sito:
 * niente regola qui, o batterebbe quella — product.css viene dopo.
 */

.m-piani__pannello {
	padding: 26px;
	border-radius: var(--m-r-lg);
}

.m-piani__pannello > * {
	margin-block: 0;
}

.m-piani__pannello > * + * {
	margin-top: 14px;
}

.m-prezzo {
	font-family: var(--m-font-display);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.m-piani__nota {
	font-size: 0.9375rem;
	color: var(--m-ink-2);
}

.m-piani__elenco {
	margin: 0;
	padding-left: 1.2em;
}

.m-piani__elenco li {
	margin-block: 6px;
	line-height: 1.5;
}

/* ================================================================== *
 * BOX DI ACQUISTO
 * ================================================================== */

.m-acquisto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 20px;
	padding: 20px 24px;
	border-radius: var(--m-r-md);
}

.m-acquisto__testo {
	flex: 1 1 260px;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--m-ink-2);
}

.m-acquisto__azione {
	/*
	 * `flex-shrink: 1` e `min-width: 0`: senza, un contenuto largo —
	 * per esempio il segnaposto quando manca il link — non si lascia
	 * stringere e sfonda il box.
	 */
	flex: 0 1 auto;
	min-width: 0;
}

.m-acquisto__azione .m-prodotto__mancante {
	margin: 0;
}

/*
 * Il badge di Freemius.
 *
 * Le loro regole dicono: mai sotto i 100px di larghezza, niente
 * contorni, niente deformazioni. 220px con l'altezza automatica
 * rispetta tutte e tre.
 */
.m-acquisto__badge {
	/*
	 * `flex: 0 0 auto` e non `1 1 100%`: con `flex-grow: 1` la larghezza
	 * dichiarata viene ignorata e il badge si stira per tutta la riga —
	 * misurato, 1048px invece di 220. Un marchio altrui deformato in
	 * larghezza viola anche le loro regole d'uso.
	 */
	flex: 0 0 auto;
	width: 220px;
	height: auto;
	max-width: 100%;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Il rimando a Freemius nel footer
 * ------------------------------------------------------------------ */
/* ================================================================== *
 * FAQ
 *
 * Il cassetto lo disegna già interactive.css. Qui c'è solo quello che
 * serve perché la domanda, che resta dentro un titolo, non porti con
 * sé la dimensione di un titolo dentro il pulsante.
 * ================================================================== */

.m-faq > :where(h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--m-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

/*
 * Senza JavaScript il gruppo resta titoli e paragrafi: si legge tutto.
 * Un po' d'aria perché non sembri un muro.
 */
.m-faq > :where(h2, h3, h4, h5, h6) + * {
	margin-top: 6px;
}

/* ================================================================== *
 * CHANGELOG SU LCD
 * ================================================================== */

.m-changelog {
	padding: 22px 24px;
	font-size: 0.875rem;
}

.m-changelog__elenco {
	margin: 10px 0 0;
	padding-left: 1.4em;
	line-height: 1.9;
}

.m-changelog__elenco li {
	margin: 0;
}

/* Il pallino dell'elenco sul display è un trattino da terminale. */
.m-changelog__elenco {
	list-style: none;
	padding-left: 0;
}

.m-changelog__elenco li::before {
	content: "> ";
}

/* ================================================================== *
 * RIMANDO ALLA DOCUMENTAZIONE
 * ================================================================== */

.m-docs-rimando {
	margin-block: var(--wp--preset--spacing--60);
	max-width: 520px;
}

.m-docs-rimando .m-quaderno__testo > * {
	margin-block: 0;
}

/* 32px e non 12: un rigo intero, se no il testo scivola fra le righe. */
.m-docs-rimando .m-quaderno__testo > * + * {
	margin-top: 32px;
}

/* ================================================================== *
 * «IN ARRIVO»
 * ================================================================== */

.m-roadmap {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding-left: 1.3em;
}

.m-roadmap li {
	margin-block: 8px;
	line-height: 1.55;
}

.m-attesa {
	position: relative;
	padding: 28px;
	border-radius: var(--m-r-xl);
}

.m-attesa > :not(.m-viti) {
	position: relative;
	z-index: 1;
}

.m-attesa__titolo {
	margin: 0;
	font-family: var(--m-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.m-attesa__sommario {
	margin: 6px 0 0;
	color: var(--m-ink-2);
}

.m-attesa__campo {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-top: 18px;
}

.m-attesa__campo .m-campo {
	flex: 1 1 220px;
}

.m-attesa__nota {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--m-ink-2);
}

/* ------------------------------------------------------------------ *
 * Archivio dei plugin
 * ------------------------------------------------------------------ */
.m-archivio__intro {
	max-width: 58ch;
	margin: 10px 0 var(--wp--preset--spacing--60);
	font-size: 1.0625rem;
	color: var(--m-ink-2);
}

/*
 * Una riga sola per la frase che presenta i plugin, come chiesto.
 * La misura normale e' 58ch — 622px, misurati — e quella frase ne
 * vuole 760, clonata senza a capo. Qui il tetto sale a 820:
 * abbastanza per starci, poco abbastanza da non distendere una frase
 * sola su tutto uno schermo largo.
 *
 * Sotto gli 820 va a capo lo stesso, ed e' giusto: `nowrap` sarebbe
 * scorrimento orizzontale sul telefono.
 *
 * E sta in QUESTO foglio, non fra i componenti, dove l'avevo scritta
 * la prima volta senza effetto: `.m-archivio__intro` e' qui sopra, e
 * `product.css` si carica dopo `components.css`. Stessa specificita',
 * vince l'ultimo. E' la terza regola di CSS scritta in CLAUDE.md, e
 * l'ho ripetuta lo stesso.
 */
.m-archivio__intro--larga {
	max-width: 820px;
}

/* ================================================================== *
 * DOCUMENTAZIONE
 *
 * L'indice e l'intestazione di una guida. Il materiale è il quaderno,
 * che è già quello del rimando sulla scheda prodotto: la
 * documentazione si legge, non si aziona.
 * ================================================================== */

.m-docs-indice {
	display: flex;
	flex-direction: column;
	/*
	 * 28px e non meno: i fogli del quaderno hanno quattro ombre piatte
	 * che sporgono di 9px in basso a destra, e due gruppi vicini si
	 * accavallerebbero.
	 */
	gap: 28px;
}

/*
 * Ogni altezza e ogni distacco qui dentro e' un multiplo di 32: e' il
 * passo dei righi del foglio. Un solo valore fuori misura — 4px di
 * margine, un bordo da 1px — e da quel punto in giu' il testo non
 * torna piu' sui righi.
 */
.m-docs-gruppo__titolo {
	margin: 0 0 32px;
	font-family: var(--m-font-display);
	font-size: 1.375rem;
	line-height: 32px;
	letter-spacing: -.01em;
}

.m-docs-gruppo__titolo a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m-docs-elenco {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Un rigo vuoto fra una voce e l'altra, al posto del filetto: su un
 * foglio a righe la separazione la fanno i righi, e un bordo da 1px
 * sposterebbe tutto il resto di un pixel per voce.
 */
.m-docs-voce + .m-docs-voce {
	margin-top: 32px;
}

.m-docs-voce__titolo {
	margin: 0;
	font-family: var(--m-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 32px;
}

.m-docs-voce__titolo a {
	color: var(--m-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m-docs-voce__titolo a:hover {
	color: var(--m-link-hover);
	text-decoration-thickness: 2px;
}

.m-docs-voce__testo {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 32px;
	color: var(--m-ink-2);
}

/*
 * Il segnaposto di una sezione ancora senza guide. Interlinea 32px
 * come tutto il quaderno: qualunque altro valore scrive fuori dai
 * righi, e si vede subito.
 */
.m-docs-vuoto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 32px;
	color: var(--m-ink-2);
}

/*
 * Il bersaglio da 44px senza uscire dal rigo.
 *
 * `min-height: 44px` sul link rispetta il bersaglio e rompe il foglio:
 * 44 non e' un multiplo di 32, e da li' in giu' il testo scivola fra
 * le righe. Qui la riga resta alta 32 e l'area cliccabile la allarga
 * uno pseudo-elemento: il bersaglio e' davvero alto 44px — si misura
 * col puntatore, non e' una dichiarazione — e il testo resta scritto
 * sul rigo.
 *
 * 48 e non 44 di stretta misura: cosi' il bersaglio resta sopra la
 * soglia anche se un giorno il corpo del testo cala. Le aree non si
 * accavallano — fra un link e il successivo ci sono almeno 96px,
 * contro gli 8 di sporgenza per parte.
 */
.m-docs-gruppo__titolo a,
.m-docs-voce__titolo a {
	position: relative;
	display: inline-block;
	line-height: 32px;
}

.m-docs-gruppo__titolo a {
	color: inherit;
	text-decoration: none;
}

.m-docs-gruppo__titolo a::after,
.m-docs-voce__titolo a::after {
	content: "";
	position: absolute;
	inset: -8px 0;
}

/* --- L'intestazione di una guida --- */

.m-doc-testa__sommario {
	max-width: 62ch;
	margin: 10px 0 0;
	font-size: 1.0625rem;
	color: var(--m-ink-2);
}

/* ================================================================== *
 * PRESENTAZIONE — il riquadro sotto la testata del prodotto
 *
 * Due colonne: il testo a sinistra, i canali a destra. Sotto i 912px
 * vanno in colonna, e il testo resta primo perche' e' quello che si
 * legge; i canali sono dove si va dopo averlo letto.
 *
 * La colonna dei canali non scende sotto i 300px: il marchio Freemius
 * non si puo' mostrare sotto i 100px di larghezza — e' una regola
 * loro, scritta in `assets/img/freemius/LEGGIMI.md` — e sotto quella
 * misura il marchio e il testo accanto non ci stanno piu'.
 * ================================================================== */
.m-presentazione {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: var(--wp--preset--spacing--60);
}

@media (min-width: 912px) {
	.m-presentazione {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	}
}

.m-presentazione__sottotitolo {
	margin: 0 0 14px;
	font-family: var(--m-font-mono);
	font-size: 0.8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--m-ink-2);
}

.m-presentazione__canali {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.m-presentazione__titoletto {
	margin: 0;
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-ink-2);
}

/* Un canale: marchio a sinistra, cosa ci trovi a destra. */
.m-canale {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #FBF9F5, #F1EEE7);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 1px 2px rgba(70, 55, 35, .14);
}

/*
 * Il metallo del piano: argento il gratuito, oro il Pro. Muto per le
 * tecnologie assistive, perche' il titolo accanto dice gia' quale dei
 * due e'.
 */
.m-canale__metallo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/*
 * Il marchio di chi distribuisce, sopra il titolo e non accanto al
 * metallo: quello di Freemius **non si puo' mostrare sotto i 100px**
 * — e' una regola loro — e accanto a un metallo da 56, in una colonna
 * da 380, non ci starebbe senza stringerlo sotto il minimo.
 */
.m-canale__marchio {
	display: block;
	height: auto;
	margin-bottom: 8px;
}

.m-canale__testo {
	min-width: 0;
}

.m-canale__titolo {
	margin: 0;
	font-weight: 700;
}

.m-canale__nota {
	margin: 4px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--m-ink-2);
}

/*
 * Il download, sotto la nota. E' un'azione e non una descrizione,
 * quindi pesa piu' della nota che ha sopra: chi scorre la colonna deve
 * vedere che li' si clicca.
 */
.m-canale__scarica {
	margin: 8px 0 0;
	font-size: 0.875rem;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * LA COPERTINA, IN CIMA ALLA SCHEDA
 *
 * Sta dentro la scatola e ne prende i due angoli alti: la scatola ha
 * gia' `overflow: hidden`, quindi il raggio lo da' lei e qui non serve
 * ripeterlo.
 *
 * `aspect-ratio` dichiarato uguale all'immagine — 1544x500 — cosi' lo
 * spazio e' riservato prima che l'immagine arrivi e la pagina non
 * salta sotto il dito di chi sta gia' leggendo.
 * ------------------------------------------------------------------ */
.m-prodotto__copertina {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1544 / 500;
	object-fit: cover;
}

/* Il marchio vero nel pozzetto: piu' grande del segno disegnato, che
 * e' un'icona a tratto, mentre questo e' un marchio e vuole respiro. */
/* Come nell'archivio: col 10% d'aria dentro il file, 80 su un pozzetto
 * da 92 lascia il disegno a 67px invece che a 60. */
.m-prodotto__pozzetto--marchio img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* ================================================================== *
 * LA TARGA DEGLI INVESTITORI
 *
 * Ottone avvitato, che nella mappa materiali e' «Progetti & ricerca /
 * bandi»: il materiale dei soldi che arrivano da fuori. Una scatola di
 * carta avrebbe detto «altro contenuto»; questa dice «e' un'altra
 * conversazione».
 *
 * Il testo e' `--m-brass-ink` su ottone: 8,9:1, misurato sul tono
 * medio del gradiente.
 * ================================================================== */

.m-investitori {
	position: relative;
	padding: 36px 32px 32px;
	border-radius: var(--m-r-lg);
}

.m-investitori__etichetta {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(42, 31, 12, .72);
}

.m-investitori__titolo {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--m-brass-ink);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.m-investitori__testo {
	max-width: 62ch;
	margin: 0 0 24px;
	color: var(--m-brass-ink);
}

/*
 * Tre porte in fila, e sotto ognuna la riga che dice a chi parla:
 * senza, tre pulsanti vicini sembrerebbero tre modi di fare la stessa
 * cosa invece di tre interlocutori diversi.
 */
.m-investitori__porte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.m-investitori__porta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.m-investitori__nota {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(42, 31, 12, .82);
}