/*
Theme Name: TPG — The Prop Guy
Description: Same engine as the TSC theme, English site for thepropguy.me.
Version: 1.0.0
Author: The Prop Guy
Text Domain: tpg
*/

/* ── Font: Helvetica ─────────────────────────────────────────────────────
   Tolti i due @font-face di Geist (variabili, ~120 KB) l'08/08/2026: si usa
   Helvetica di sistema, quindi nessun file da scaricare e nessuno sfarfallio
   al caricamento.
   La catena scende con ordine: Helvetica Neue (Mac), Helvetica, poi Arial —
   che è metricamente compatibile — e infine il sans di sistema. Su Windows,
   dove Helvetica di norma non c'è, atterra su Arial: è la sostituzione
   corretta, non un ripiego.
   `Geist Mono` spariva insieme, quindi anche --font-mono ora è Helvetica:
   dove serviva il monospazio era per allineare numeri, non per far vedere
   codice — e per quello ci sono le cifre tabulari qui sotto. */

/* ── Design token (globals.css / Impostazioni sito Payload) ─────────────── */
:root {
  --background: oklch(100% 0 0deg);
  --foreground: #1d1d1f;          /* nero-non-nero: meno duro del #000 sul bianco */
  --card: oklch(96.5% 0.005 265deg);
  --card-foreground: oklch(14.5% 0 0deg);
  --popover: oklch(100% 0 0deg);
  --popover-foreground: oklch(14.5% 0 0deg);
  /* Il colore dell'AZIONE è un celeste (scelta di Mark, 10/08/2026), non il
     rosso del marchio: il rosso resta la firma — logo e «Senza cazzate.» — e
     smette di competere con i pulsanti. Due rossi con due significati diversi
     nella stessa schermata si annullano a vicenda.
     ⚠️ Il celeste è scelto scuro abbastanza da reggere il testo bianco: #0071e3
     fa 4,6:1 col bianco, appena sopra il minimo di 4,5. Un celeste più chiaro
     (tipo #4db8ff) scende sotto 3:1 e il testo del pulsante diventa illeggibile.
     Stati come li fa Apple: fondo, hover più scuro, premuto ancora più scuro. */
  --primary: #0071e3;
  --primary-hover: #0064c8;
  --primary-active: #0058b0;
  --primary-foreground: #ffffff;
  --secondary: oklch(97% 0 0deg);
  --secondary-foreground: oklch(20.5% 0 0deg);
  /* Grigio di sezione e testo secondario in stile Apple (valori presi dal loro
     CSS l'08/08/2026): #f5f5f7 per i fondi, #6e6e73 per il testo di supporto.
     Il grigio è appena più caldo del neutro puro — è quello che fa sembrare le
     sezioni «poggiate» invece che tagliate. */
  --muted: #f5f5f7;
  --muted-foreground: #6e6e73;
  --accent: oklch(97% 0 0deg);
  --accent-foreground: oklch(20.5% 0 0deg);
  --destructive: oklch(57.7% 0.245 27.325deg);
  --border: #d2d2d7;              /* divisori appena percettibili */
  --input: oklch(92.2% 0 0deg);
  --ring: oklch(70.8% 0 0deg);
  --success: oklch(78% 0.08 200deg);
  --warning: oklch(89% 0.1 75deg);
  --error: oklch(75% 0.15 25deg);

  --radius: 0.625rem;               /* 10px */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 6px);
  /* Pulsanti a pillola: arrotondamento massimo (scelta di Mark, 08/08/2026).
     Sta in una variabile e non scritto 999px in dieci posti, così se un giorno
     si torna indietro si cambia qui e cambiano tutti insieme. */
  --radius-pill: 999px;

  /* Larghezze: due, e solo due (10/08/2026).
       · piena   1200px — sezioni, griglie, confronti
       · stretta  700px — qualsiasi cosa si legga come testo
     Prima ce n'erano tre quasi uguali (734 e 692 oltre a 1068): differenze
     invisibili a occhio ma che facevano disallineare i bordi fra una sezione
     e l'altra. `--content-width` e `--section-mid` restano come nomi perché
     mezzo foglio di stile li usa, ma puntano tutti e due alla stretta.
     Il respiro verticale viene dal padding di sezione (120px), non dalle
     larghezze: è la spaziatura, non i colori, a dare l'aria. */
  --page-width: 1200px;
  --narrow-width: 700px;
  --content-width: var(--narrow-width);
  --section-mid: var(--narrow-width);
  --section-padding: 120px;
  --section-gap: 28px;
  --space-s: 20px;
  --space-m: 60px;
  --space-l: 120px;

  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif, var(--font-emoji);
  --font-mono: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif, var(--font-emoji);

  /* Scala tipografica in stile Apple: 56 / 40 / 28, corpo 17px.
     Il salto fra titolo e corpo è netto — non ci sono misure intermedie che
     litigano fra loro. */
  /* La scala dei titoli è RESPONSIVA nei token, non nelle singole regole.
     Il difetto che ha costretto a rifarla: `.t-h1` aveva un clamp suo e i
     titoli di sezione una misura fissa, così su telefono l'h1 scendeva a 32px
     mentre l'h2 restava a 40 — il titolo dell'hero diventava più piccolo di
     quello della sezione sotto.
     Con i clamp nei token la gerarchia regge a OGNI larghezza:
       telefono  40 / 28 / 22     desktop  64 / 40 / 28 */
  --h1-size: clamp(2.5rem, 5.6vw, 4rem);      /* 40 → 64 */
  --h2-size: clamp(1.75rem, 3.4vw, 2.5rem);   /* 28 → 40 */
  --h3-size: clamp(1.375rem, 2.2vw, 1.75rem); /* 22 → 28 */
  /* 16px, come nelle lezioni (scelta di Mark, 08/08/2026).
     Prima il corpo del sito stava a 18px mentre dentro la lezione — dove si
     legge davvero, e dove il testo era già stato sistemato — era 1rem: due
     misure per la stessa cosa. Ora il sito ha una misura sola. */
  --text-size: 1.0625rem; /* 17px, come il corpo di Apple */
  /* La scala completa dei testi: SETTE gradini, non venticinque.
     Prima il tema aveva 25 misure diverse (13px, .84rem, .95rem, .9375rem…):
     differenze da mezzo pixel che non comunicano niente e che affiancate si
     leggono come sciatteria. Questi sono i gradini di Apple. */
  --text-xs: .75rem;      /* 12px — note legali, etichette minime */
  --text-sm: .875rem;     /* 14px — meta, contatori, didascalie */
  --text-lg: 1.1875rem;   /* 19px — testo di rilievo */
  --text-lead: 1.3125rem; /* 21px — sottotitoli */
  /* Altezza dell'intestazione appiccicata in alto: 1rem di padding sopra e
     sotto + il contenuto. Serve a chi si deve fermare sotto di lei — oggi la
     barra laterale della lezione. Tenerla qui evita che i due numeri si
     scollino, che è quello che era successo. */
  --header-h: 4.5rem;
  --text-leading: 1.6;
  --pill-size: 0.8125rem; /* 13px */

  /* verdi stato (light) */
  --green-badge-bg: #dcfce7;      /* green-100 */
  --green-badge-fg: #166534;      /* green-800 */
  --green-text: #16a34a;          /* green-600 */
  --green-bar: #22c55e;           /* green-500 */
  --rosso-tsc: #ff002f;           /* il rosso del logo, risorse/brand/tsc-svg */
}
[data-theme='dark'] {
  --background: oklch(14.5% 0 0deg);
  --foreground: oklch(98.5% 0 0deg);
  --card: oklch(17% 0 0deg);
  --card-foreground: oklch(98.5% 0 0deg);
  --popover: oklch(14.5% 0 0deg);
  --popover-foreground: oklch(98.5% 0 0deg);
  --primary: oklch(98.5% 0 0deg);
  --primary-foreground: oklch(20.5% 0 0deg);
  --secondary: oklch(26.9% 0 0deg);
  --secondary-foreground: oklch(98.5% 0 0deg);
  --muted: oklch(26.9% 0 0deg);
  --muted-foreground: oklch(70.8% 0 0deg);
  --accent: oklch(26.9% 0 0deg);
  --accent-foreground: oklch(98.5% 0 0deg);
  --destructive: oklch(39.6% 0.141 25.723deg);
  --border: oklch(26.9% 0 0deg);
  --input: oklch(26.9% 0 0deg);
  --ring: oklch(43.9% 0 0deg);
  --success: oklch(28% 0.1 200deg);
  --warning: oklch(35% 0.08 70deg);
  --error: oklch(45% 0.1 25deg);

  --green-badge-bg: rgba(34, 197, 94, .2);
  --green-badge-fg: #86efac;
  --green-text: #22c55e;
}

/* (l'anti-FOUC è inline in functions.php: qui romperebbe il canvas dell'editor) */

/* ── Reset/base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  background: var(--background);
  color: var(--foreground);
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
::selection { background: var(--foreground); color: var(--background); }

.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: 1.25rem;   /* su mobile: un po' di respiro ai lati */
}
@media (min-width: 768px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1200px) { .container { padding-inline: 2.75rem; } }

.t-muted { color: var(--muted-foreground); }
.t-muted-sm { color: var(--muted-foreground); font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); }
.w-full { width: 100%; }

/* ── Wrapper blocchi (RenderBlocks) ─────────────────────────────────────── */
.t-block { scroll-margin-top: 7rem; }
.t-block.bg-muted40 { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.t-block.bg-dark { background: #0a0a0a; color: #fff; }
/* Hero verde con testo bianco (scelta di Mark, 08/08/2026).
   Tre verdi sovrapposti — profondo in basso a destra, più acceso in alto a
   sinistra — su una base scura: il fondo deve restare abbastanza cupo da
   reggere il bianco pieno del titolo. Il verde più chiaro usato qui (#047857)
   dà comunque oltre 6:1 di contrasto col bianco. */
.t-block.bg-gradient {
  position: relative; isolation: isolate; overflow: hidden;
  /* Gradiente lineare e basta: una sola diagonale, niente vignetta.
     ⚠️ I valori NON sono arbitrari: il verde al centro (#08805e, dove sta il
     testo) tiene 4,9:1 di contrasto col bianco, appena sopra il minimo di 4,5.
     Schiarirlo ancora rende il sottotitolo illeggibile — se serve più luce,
     schiarire l'angolo in alto a sinistra, dove testo non ce n'è. */
  background: linear-gradient(145deg, #10b981 0%, #0b9c70 30%, #08805e 62%, #056048 100%);
}
/* Dentro l'hero va tutto bianco: titolo, sottotitolo e pulsante. Il pulsante si
   inverte — fondo bianco, testo verde scuro — perché su un fondo colorato è la
   forma che si stacca di più, e resta l'unica azione della sezione. */
.t-block.bg-gradient .t-title,
.t-block.bg-gradient .t-subtitle { color: #fff; }
.t-block.bg-gradient .t-btn-dark {
  background: #fff; color: #04332a;
}
.t-block.bg-gradient .t-btn-dark:hover {
  background: color-mix(in oklab, #fff 90%, #10b981);
}
/* Le candele: grandi, su tutta l'altezza dell'hero, e passano anche dietro al
   titolo — scelta di Mark. Regge solo perché l'opacità è bassissima: è un
   «vedo non vedo», una texture, non un'illustrazione. Il titolo è nero pieno e
   a questi valori non perde contrasto.
   ⚠️ Se un giorno si alza l'opacità, si ricontrolla il contrasto del titolo. */
.t-block.bg-gradient::before {
  content: ''; position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  /* 100% 100%, non «cover»: con cover il disegno veniva ingrandito e ritagliato,
     e sullo schermo restavano due candele giganti invece del grafico intero. */
  background: url(assets/img/hero-onda.svg) center / 100% 100% no-repeat;
  opacity: .2;
}
@media (max-width: 640px) {
  /* Su schermo stretto le candele si allargano fino a diventare macchie: si
     alleggeriscono un po'. */
  .t-block.bg-gradient::before { opacity: .14; }
}
@media (prefers-reduced-motion: no-preference) {
  .t-block.bg-gradient::before { transition: opacity .3s; }
}
.t-block.has-sep { border-bottom: 1px solid var(--border); }
.t-block.pt-none { padding-top: 0; } .t-block.pb-none { padding-bottom: 0; }
.t-block.pt-s { padding-top: var(--space-s); } .t-block.pb-s { padding-bottom: var(--space-s); }
.t-block.pt-m { padding-top: var(--space-m); } .t-block.pb-m { padding-bottom: var(--space-m); }
.t-block.pt-l { padding-top: var(--space-l); } .t-block.pb-l { padding-bottom: var(--space-l); }
.t-block.is-fullpage { padding: 0; }

/* ── Sezione ────────────────────────────────────────────────────────────── */
.t-section-inner { display: flex; flex-direction: column; gap: var(--section-gap); margin-inline: auto; }
.t-section-inner.gap-s { gap: var(--space-s); }
.t-section-inner.gap-m { gap: var(--space-m); }
.t-section-inner.gap-l { gap: var(--space-l); }
/* Le tre vecchie classi restano per non rompere il markup già scritto, ma
   ora sono due larghezze sole: w-mid e w-content sono la stretta, w-wide la
   piena. Per il markup nuovo usare `.w-narrow` / `.w-full`, che dicono
   quello che fanno. */
.t-section-inner.w-mid,
.t-section-inner.w-content,
.w-narrow { max-width: var(--narrow-width); margin-inline: auto; }
.t-section-inner.w-wide,
.w-full { max-width: var(--page-width); margin-inline: auto; }
.t-section-inner.align-center { align-items: center; text-align: center; }

/* ── Blocchi builder ────────────────────────────────────────────────────── */
.t-pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--background);
  padding: .25rem 1rem;
  color: var(--muted-foreground);
  font-size: var(--pill-size);
  font-weight: 600;
}
/* Titoli stretti di crenatura e con interlinea corta: è ciò che dà l'aria
   «Apple» insieme allo spazio attorno, non il colore. */
.t-title { max-width: 100%; letter-spacing: -0.015em; line-height: 1.07; font-weight: 700; }
/* Il pezzo di titolo scritto fra *asterischi*: gradiente del marchio dentro le
   lettere. `background-clip: text` ritaglia lo sfondo sulla forma del testo, e
   il colore trasparente lo lascia vedere.
   ⚠️ `color` serve come ripiego: se un browser non ritaglia, il testo resta
   rosso pieno invece di sparire. */
.t-grad {
  color: var(--rosso-tsc);
  background: linear-gradient(100deg, #ff002f 0%, #ff5470 46%, #c2002a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-grad { -webkit-text-fill-color: currentColor; }
}
.t-h1 { font-size: var(--h1-size); }   /* il clamp sta nel token */
.t-h2 { font-size: var(--h2-size); }
.t-h3 { font-size: var(--h3-size); font-weight: 600; }
/* Sottotitolo: stessa misura del corpo (quella delle lezioni) e **nero come il
   titolo**, non grigio — scelta di Mark. È la riga che dice cosa NON facciamo,
   cioè la promessa del brand: in grigio si leggeva come una didascalia. */
.t-subtitle {
  max-width: 42rem;
  color: var(--foreground);
  font-size: var(--text-lead);   /* 21px: il gradino sotto il titolo nella scala Apple */
  line-height: 1.4;
  letter-spacing: .01em;
}
.t-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.t-buttons.align-center { justify-content: center; }
.t-buttons.align-right { justify-content: flex-end; }

.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Pulsante grande, misure di Apple: testo 17px, non 14. Un pulsante col
     testo più piccolo del corpo della pagina sembra un ripensamento. */
  height: 3.25rem;                /* 52px */
  padding-inline: 1.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-size);    /* 17px */
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.t-btn-dark { background: var(--foreground); color: var(--background); }
.t-btn-dark:hover { background: #272729; }
.t-btn-dark:active { background: #18181a; }
.t-btn-light { border-color: var(--border); background: var(--background); color: var(--foreground); }
.t-btn-light:hover { background: var(--muted); }
.t-btn-primary { background: var(--primary); color: var(--primary-foreground); }
.t-btn-primary:hover { background: var(--primary-hover); }
.t-btn-primary:active { background: var(--primary-active); }
.t-btn-review { background: var(--green-text); color: #fff; }
.t-btn-review:hover { background: color-mix(in oklab, var(--green-text) 88%, black); }
.t-btn[disabled], .t-btn.is-loading { opacity: .6; pointer-events: none; }

.t-callout {
  margin-inline: auto;
  max-width: var(--content-width);
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  padding: 1rem 1.25rem;
  text-align: left;
}
.t-callout.dashed { border-style: dashed; }
.t-callout p + p { margin-top: .5em; }

/* `--content-width` (734px) ≈ 75 caratteri per riga: la misura in cui un
   paragrafo si legge senza che l'occhio perda il capo riga. */
.t-richtext { margin-inline: auto; width: 100%; max-width: var(--content-width); text-align: left; }

/* Il centrato vale SOLO in homepage, dove i paragrafi sono corti e fanno da
   manifesto. Dentro le lezioni si legge per imparare, e lì il centrato stanca e
   rende gli elenchi illeggibili — era il difetto segnalato il 10/08. */
.home .t-richtext { text-align: center; }
.home .t-richtext ul, .home .t-richtext ol { text-align: left; display: inline-block; }
.t-richtext h1 { font-size: clamp(2rem, 5vw, 2.5rem); letter-spacing: -0.025em; margin: 0 0 .6em; line-height: 1.15; }
.t-richtext h2 { font-size: var(--h2-size); margin: 1.6em 0 .5em; letter-spacing: -0.02em; line-height: 1.2; }
.t-richtext h3 { font-size: var(--h3-size); margin: 1.4em 0 .4em; font-weight: 600; }
.t-richtext h4 { font-size: var(--text-lead); margin: 1.2em 0 .4em; font-weight: 600; }
.t-richtext p { margin: .8em 0; }
.t-richtext ul, .t-richtext ol { margin: .8em 0; padding-left: 1.4em; }
.t-richtext li { margin: .35em 0; }
.t-richtext a { text-decoration: underline; text-underline-offset: 2px; }
.t-richtext blockquote { border-left: 3px solid var(--border); margin: 1em 0; padding-left: 1em; color: var(--muted-foreground); }
.t-richtext hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
/* Unica eccezione: il codice dentro un testo resta a spaziatura fissa —
   lì il monospazio non è uno stile, è quello che rende leggibile il codice. */
.t-richtext code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--muted); border-radius: 4px; padding: .1em .35em; }

.t-content-cols { display: grid; gap: 2rem; grid-template-columns: repeat(12, 1fr); max-width: var(--content-width); margin-inline: auto; }
.t-col { grid-column: span 12; }
@media (min-width: 768px) {
  .t-col-half { grid-column: span 6; }
  .t-col-oneThird { grid-column: span 4; }
  .t-col-twoThirds { grid-column: span 8; }
}

.t-icons { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; text-align: left; max-width: var(--page-width); margin-inline: auto; }
@media (min-width: 640px) { .t-icons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .t-icons.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .t-icons.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Icona a SINISTRA del testo e senza riquadro (scelta di Mark, 08/08/2026):
   il quadratino col bordo faceva sembrare i tre punti forti dei pulsanti. */
.t-icon-item { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 1rem 1.1rem; }
.t-icon-item h3, .t-icon-item p { grid-column: 2; }
.t-icon-badge {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none; padding: 0;
}
/* Il gradiente si applica allo STROKE dell'icona, che è disegnata a tratto:
   `background-clip: text` qui non servirebbe a niente. */
.t-icon-badge svg { width: 100%; height: 100%; stroke: url(#tsc-grad); stroke-width: 1.75; }
/* I tre punti forti sono un messaggio, non una didascalia: titolo e testo più
   grandi del corpo normale (scelta di Mark, 08/08/2026). */
.t-icon-item h3 { font-size: var(--h3-size); font-weight: 700; letter-spacing: -0.01em; }
.t-icon-item p { color: var(--muted-foreground); font-size: var(--text-lg); line-height: 1.6; }

.t-video-wrap { max-width: var(--content-width); margin-inline: auto; }
.t-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.t-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.t-header { position: sticky; top: 0; z-index: 30; width: 100%; border-bottom: 1px solid var(--border); background: var(--background); }
.t-header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.t-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; font-size: var(--text-lg); }
.t-logo img { width: 34px; height: 34px; }
.t-header-actions { display: flex; align-items: center; gap: .5rem; }
.t-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  line-height: 0;
}
.t-icon-btn:hover { background: var(--muted); }
/* le icone stanno in uno <span> inline: senza questo l'SVG si allinea alla baseline
   (spazio per i discendenti sotto) e sembra spostato in alto nel tasto */
.t-icon-btn > span { display: inline-flex; align-items: center; justify-content: center; }
.t-icon-btn svg { display: block; }
[data-theme='light'] .t-theme-dark-icon { display: none; }
[data-theme='dark'] .t-theme-light-icon { display: none; }
.t-header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding-inline: 1.375rem; border-radius: var(--radius-pill);
  background: var(--foreground); color: var(--background);
  font-size: var(--text-sm); font-weight: 500; text-decoration: none;
}
.t-header-btn:hover { background: color-mix(in oklab, var(--foreground) 90%, transparent); }
.t-header-btn.is-ghost { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.t-header-btn.is-ghost:hover { background: var(--muted); }

/* --- Selettore di lingua -------------------------------------------------
   È un <details>: l'apertura è nativa, quindi funziona da tastiera e anche
   senza JavaScript. Sta in alto a destra, accanto al tasto del menu.
   Le misure sono quelle di .t-icon-btn perché i due tasti stanno affiancati:
   altezze diverse si notano subito. */
.t-lang { position: relative; }
.t-lang > summary {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 2.5rem; padding-inline: .7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer; user-select: none;
  list-style: none;
}
/* il triangolino di default di <details>: va tolto in due modi, i browser si dividono */
.t-lang > summary::-webkit-details-marker { display: none; }
.t-lang > summary::marker { content: ''; }
.t-lang > summary:hover { background: var(--muted); }
.t-lang > summary svg { display: block; flex: none; }
.t-lang[open] > summary { background: var(--muted); }
.t-lang[open] > summary > svg:last-child { transform: rotate(180deg); }
.t-lang-cur { line-height: 1; }

.t-lang-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  min-width: 11rem; margin: 0; padding: .35rem; list-style: none;
  background: var(--background); border: 1px solid var(--border);
  border-radius: .75rem; box-shadow: 0 10px 30px rgb(0 0 0 / .12);
}
.t-lang-menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: .5rem;
  color: var(--foreground); text-decoration: none; font-size: var(--text-sm);
}
.t-lang-menu a:hover { background: var(--muted); }
.t-lang-menu a.is-active { font-weight: 600; }
.t-lang-code {
  flex: none; min-width: 1.9rem; font-variant-numeric: tabular-nums;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted-foreground);
}
.t-lang-menu a.is-active .t-lang-code { color: var(--foreground); }
.t-lang-name { flex: 1 1 auto; }
.t-lang-menu svg { flex: none; }

/* Su schermo stretto la sigla basta: il nome nel tasto ruberebbe spazio al menu. */
@media (max-width: 420px) {
  .t-lang > summary { padding-inline: .5rem; gap: .2rem; }
}

.t-banner { width: 100%; border-bottom: 1px solid var(--border); background: var(--muted); padding-block: .375rem; text-align: center; font-size: var(--text-sm); }
.t-banner a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

.t-menu-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--background);
  display: none; flex-direction: column; padding: 1rem;
}
.t-menu-overlay.is-open { display: flex; }
.t-menu-top { display: flex; align-items: center; justify-content: space-between; }
.t-menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .25rem; width: 100%; max-width: 20rem; margin-inline: auto; text-align: center; }
/* solo i link di navigazione diretti: NON i bottoni Dashboard/Logout in .t-menu-cta */
.t-menu-links > a { padding-block: .75rem; font-size: var(--text-lg); font-weight: 500; text-decoration: none; border-radius: var(--radius-md); }
.t-menu-links > a:hover { background: var(--muted); }
.t-menu-cta { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.t-footer { margin-top: auto; border-top: 1px solid var(--border); background: #000; color: #fff; }
[data-theme='dark'] .t-footer { background: var(--card); }
.t-footer-inner { padding-block: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.t-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.t-footer-brand { font-size: var(--text-lead); font-weight: 800; text-decoration: none; }
.t-footer-sep { border: 0; border-top: 1px solid rgba(255,255,255,.2); margin: 0; width: 100%; }
.t-footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: var(--text-sm); }
.t-footer-nav a { color: #fff; text-decoration: none; }
.t-footer-nav a:hover { text-decoration: underline; }
.t-footer-legal { display: flex; flex-direction: column; gap: .6rem; }
.t-footer-legal p { font-size: var(--text-xs); color: rgba(255,255,255,.55); }
.t-footer-copy { font-size: var(--text-sm); color: rgba(255,255,255,.7); }

/* ── Vetrina corsi ──────────────────────────────────────────────────────── */
/* Intestazione della vetrina centrata: la griglia sotto è simmetrica e la riga
   dei totali con il pulsante pure, quindi un titolo allineato a sinistra era
   l'unica cosa fuori asse in tutta la sezione. */
.t-courses-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; margin-bottom: 3.5rem; }
.t-courses-head .t-muted { font-size: var(--text-lead); line-height: 1.4; max-width: 34rem; }
.t-h2-plain { font-size: var(--h2-size); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.t-viewall { display: none; font-size: var(--text-sm); font-weight: 500; text-decoration: underline; flex-shrink: 0; }
@media (min-width: 640px) { .t-viewall { display: block; } }
/* Sotto la griglia: quanta roba c'è in tutto, e il pulsante per entrare.
   È un pulsante e non un link di testo perché è l'unica azione rimasta in
   fondo alla sezione — il form di registrazione qui sotto non c'è più. */
.t-courses-more {
  margin: 2.25rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.t-courses-more p { margin: 0; text-align: center; font-size: var(--text-size); color: var(--muted-foreground); }
.t-courses-more strong { color: var(--foreground); font-weight: 700; }
.t-courses-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .t-courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .t-courses-grid { grid-template-columns: repeat(3, 1fr); } }

.t-course-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--background);
  text-decoration: none; transition: box-shadow .2s;
}
.t-course-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
.t-course-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1f2937, #0a0a0a); overflow: hidden; }
.t-course-cover img { width: 100%; height: 100%; object-fit: cover; }
.t-cover-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; color: #fff; font-weight: 700; font-size: var(--text-lead); text-align: center; }
.t-cover-overlay {
  position: absolute; left: 1rem; right: 1rem; bottom: .7rem; z-index: 1;
  color: #fff; font-weight: 800; font-size: var(--h3-size); letter-spacing: -0.02em; line-height: 1.1;
  text-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
.t-course-cover:has(.t-cover-overlay)::after {
  content: ''; position: absolute; inset: 30% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / .65));
}
.t-course-card-body { display: flex; flex: 1; flex-direction: column; gap: .65rem; padding: 1.6rem 1.6rem 1.75rem; }
.t-course-excerpt {
  color: var(--muted-foreground); font-size: var(--text-sm);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.t-course-more { margin-top: .5rem; font-size: var(--text-sm); font-weight: 500; }
/* I numeri del corso al posto di «Scopri il corso →»: cifre a larghezza fissa
   così le card affiancate non ballano, e in fondo alla card per restare
   allineate fra card di altezza diversa. */
.t-course-stats {
  margin: auto 0 0; padding-top: .75rem; font-size: var(--text-sm); font-weight: 500;
  color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}

/* ── Card del catalogo corsi, modello Classroom ─────────────────────────────
   Il titolo è tornato a essere testo sotto la copertina invece che scritta
   sopra l'immagine: si legge su qualunque copertina, anche chiara. */
.t-course-title {
  margin: 0; font-size: var(--text-size); font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em;
}
.t-archive-grid .t-course-excerpt { -webkit-line-clamp: 2; }

/* La barra spinge in fondo alla card, così resta allineata fra card di
   altezza diversa. */
.t-archive-grid .t-progress-card { margin-top: auto; }
/* La percentuale sta ACCANTO alla barra, non dentro.
   Prima, quando la barra era abbastanza lunga, il numero ci finiva sopra in
   bianco: bianco su #22c55e fa 2,28:1 di contrasto, contro i 4,5:1 minimi —
   cioè non si leggeva. Fuori, in testo scuro, si legge sempre e a qualunque
   percentuale. */
.t-progress-card {
  max-width: none; height: .625rem; background: #e3e5e9;
  flex: 1; min-width: 0;
}
.t-progress-card .t-progress-bar { min-width: .5rem; }  /* a 0% resta un accenno */
.t-progress-riga { display: flex; align-items: center; gap: .6rem; }
.t-progress-pct {
  flex-shrink: 0;
  font-size: var(--text-sm); font-weight: 700; color: var(--foreground);
}

/* La dashboard usa la stessa griglia del catalogo, e le card sono tutte
   uguali. Il corso in cui sei non ha più il bordo nero: lo dice già la barra
   di avanzamento, e una card marcata in mezzo alle altre sembrava un errore
   più che un'indicazione. */

.t-badge-updating {
  display: inline-block; width: fit-content;
  border-radius: 9999px; padding: .1rem .6rem;
  background: var(--warning); color: var(--foreground);
  font-size: var(--text-xs); font-weight: 600;
}
.t-badge-free {
  display: inline-block; width: fit-content;
  border-radius: 9999px; padding: .1rem .6rem;
  background: var(--green-badge-bg); color: var(--green-badge-fg);
  font-size: var(--text-xs); font-weight: 600;
}
.t-badge-start {
  display: inline-block; width: fit-content;
  border-radius: 9999px; padding: .15rem .65rem;
  background: var(--foreground); color: var(--background);
  font-size: var(--text-xs); font-weight: 600;
}
.t-chip {
  display: inline-block; border: 1px solid var(--border); border-radius: 9999px;
  padding: .12rem .6rem; font-size: var(--text-xs); color: var(--muted-foreground);
  background: var(--background);
}

/* ── Pagina /corsi ──────────────────────────────────────────────────────── */
.t-archive { padding-block: 3rem 6rem; }
.t-archive-head { margin-bottom: 3rem; }
.t-archive-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; letter-spacing: -0.025em; }
.t-archive-head p { margin-top: .5rem; color: var(--muted-foreground); }
.t-archive-grid { display: grid; gap: 2rem; }      /* era 1.5rem */
@media (min-width: 640px) { .t-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .t-archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .t-archive-grid { gap: 2.25rem; } }
/* Le copertine sono 1920×1080, cioè 16:9: forzarle a 16/10 le tagliava sopra
   e sotto. Stesso rapporto ovunque — catalogo, dashboard, pagina corso. */
.t-archive-grid .t-course-cover { aspect-ratio: 16 / 9; }
.t-archive-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.t-cat-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  border-radius: 9999px; background: var(--background); color: var(--foreground);
  border: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: 600; padding: .18rem .7rem;
}
.t-course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }
.t-course-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.t-freebox {
  margin-top: 2.5rem; border: 1px dashed var(--border); border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  padding: 1.5rem; text-align: center;
}
.t-freebox h2 { font-size: var(--text-lead); font-weight: 700; }
.t-freebox p { margin: .4rem 0 1rem; color: var(--muted-foreground); font-size: var(--text-sm); }

/* ── Dettaglio corso ────────────────────────────────────────────────────── */
.t-course-page { max-width: var(--content-width); margin-inline: auto; padding-block: 2.5rem 5rem; }
@media (min-width: 768px) { .t-course-page { padding-top: 3.5rem; } }
.t-backlink { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; margin-bottom: 1.5rem; }
.t-backlink:hover { color: var(--foreground); }
.t-backbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--muted); padding: .4rem .9rem;
  font-size: var(--text-sm); text-decoration: none; margin-bottom: 1.5rem;
}
.t-backbtn:hover { background: var(--border); }
.t-course-hero { display: grid; gap: 2rem; margin-bottom: 3.5rem; }
@media (min-width: 768px) { .t-course-hero { grid-template-columns: 1fr 360px; align-items: start; } }
.t-course-hero h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.t-course-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.t-course-hero .t-course-meta { margin-bottom: 1rem; }
.t-course-hero-excerpt { font-size: var(--text-lg); color: var(--muted-foreground); }
.t-course-cta { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.t-course-cta .t-btn { height: auto; padding: .875rem 1.5rem; }
.t-noaccess {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 40%, transparent); padding: 1.25rem;
}
.t-noaccess p { font-size: var(--text-sm); }
.t-noaccess a { font-weight: 600; }
/* Nota sotto il bottone d'acquisto: sta al servizio del bottone, non gli fa
   concorrenza — senza questa regola eredita --text-size (18px) e pesa quanto la CTA. */
.t-buy-note { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 46ch; margin: 0; }

/* ── Sezioni del catalogo ────────────────────────────────────────────────
   La divisione è il messaggio: gratis sopra, a pagamento sotto e dichiarato.
   La sezione premium si stacca con una linea e un fondo appena diverso —
   non con un riquadro pubblicitario, che si riconosce e si salta. */
.t-sezione { margin-top: 3.5rem; }
.t-sezione:first-of-type { margin-top: 2rem; }
.t-sezione-head h2 { font-size: var(--h3-size); margin: 0 0 .35rem; }
.t-sezione-head p { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0 0 1.5rem; }
.t-sezione-premium {
  border-top: 1px solid var(--border); padding-top: 2.5rem; margin-top: 4rem;
}
/* Il prezzo prende il posto della barra di avanzamento, stessa riga, stesso peso. */
.t-price { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.t-price-free { color: var(--muted-foreground); font-weight: 500; }
.t-course-card-premium .t-price { color: var(--rosso-tsc); }
.t-course-media {
  position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--border);   /* le copertine sono 16:9 */
  border-radius: var(--radius-2xl); background: var(--muted); overflow: hidden;
}
.t-course-media img { width: 100%; height: 100%; object-fit: cover; }
.t-course-media .t-cover-title { color: var(--foreground); }
.t-course-media .t-cat-badge { position: absolute; top: .75rem; left: .75rem; }

/* La traccia era `var(--muted)`, cioè oklch 97%: su fondo bianco non si
   distingueva, e una barra al 20% sembrava vuota. Ora è un grigio vero, e il
   pieno resta verde: si vede a colpo d'occhio quanto manca. */
.t-progress { width: 100%; max-width: 320px; height: .5rem; border-radius: 9999px; background: #e3e5e9; overflow: hidden; }
/* `display: block` è indispensabile: nella barra laterale questo elemento è
   uno <span>, e su un inline larghezza e altezza non si applicano — la barra
   restava tutta grigia anche al 75%. Nelle card è un <div> e funzionava, ed è
   il motivo per cui il difetto si vedeva in un posto solo.
   Prima era `position: absolute`, che blockificava e nascondeva il problema. */
.t-progress-bar { display: block; height: 100%; border-radius: 9999px; background: var(--green-bar); transition: width .3s; }
.t-progress-label { font-size: var(--text-sm); color: var(--muted-foreground); font-family: var(--font-mono); }

.t-program-title { font-size: var(--h3-size); font-weight: 700; letter-spacing: -0.02em; }
.t-program-sub { color: var(--muted-foreground); font-size: var(--text-sm); margin: .3rem 0 1.5rem; }
.t-module-head { display: flex; align-items: center; gap: .9rem; margin: 2rem 0 .9rem; }
.t-module-name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.t-module-line { height: 1px; flex: 1; background: var(--border); }
.t-module-count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; }
.t-lessons-list { display: flex; flex-direction: column; gap: .6rem; }

.t-lesson-row {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--background); padding: 1rem;
  text-decoration: none; transition: border-color .15s, background .15s;
}
a.t-lesson-row:hover { border-color: var(--ring); }
a.t-lesson-row:hover .t-lesson-arrow { transform: translateX(3px); opacity: 1; }
.t-lesson-row.is-locked { background: color-mix(in oklab, var(--card) 50%, transparent); opacity: .75; }
.t-lesson-row.is-current { border-color: var(--foreground); }
.t-lesson-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }
.t-lesson-title { flex: 1; font-size: var(--text-sm); font-weight: 500; }
.t-lesson-dur { display: none; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }
@media (min-width: 640px) { .t-lesson-dur { display: block; } }
.t-lesson-arrow { opacity: .35; transition: transform .15s, opacity .15s; flex-shrink: 0; }
.t-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 9999px; flex-shrink: 0; }
.t-dot.sm { width: .95rem; height: .95rem; }
.t-dot.done { background: var(--green-bar); color: #fff; }
.t-dot.current { border: 2px solid var(--foreground); }
.t-dot.todo { border: 2px solid var(--border); }
.t-dot-lock { color: var(--muted-foreground); flex-shrink: 0; }
.t-tag-preview {
  display: inline-block; margin-left: .4rem; border-radius: 9999px;
  background: var(--green-badge-bg); color: var(--green-badge-fg);
  font-size: var(--text-xs); font-weight: 600; padding: .05rem .5rem; vertical-align: middle;
}
.t-nextstep {
  margin-top: 3rem; border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: var(--card); padding: 1.75rem;
}
.t-nextstep h3 { font-size: var(--text-lg); font-weight: 700; }
.t-nextstep p { color: var(--muted-foreground); font-size: var(--text-sm); margin-top: .3rem; }
.t-nextstep a { font-weight: 600; }

/* ── Pagina lezione ─────────────────────────────────────────────────────── */
/* ── Pagina lezione — barra laterale piatta + contenuto in card ──────────
   La barra laterale non ha più un riquadro attorno: sta sul fondo della
   pagina, e l'unico elemento con bordo è la card del contenuto. È quello a
   dare la gerarchia — prima si guarda la lezione, poi dove sei nel corso. */
body:has(.t-lesson-page) { background: var(--muted); }

.t-lesson-page { display: grid; gap: 2.5rem; padding-block: 2rem 6rem; }
@media (min-width: 1024px) { .t-lesson-page { grid-template-columns: 320px 1fr; align-items: start; } }

.t-program { background: transparent; }
/* Quando «Lista lezioni» porta qui, il browser allinea il bordo alto della
   barra col bordo alto della finestra — e il titolo del corso finisce sotto
   l'intestazione appiccicata. `scroll-margin-top` gli dice di fermarsi più
   in basso, così il titolo si legge. Usa la stessa variabile della posizione
   sticky, quindi i due valori non possono scollarsi. */
.t-program { scroll-margin-top: calc(var(--header-h) + 1rem); }
/* Si ferma SOTTO l'intestazione, non sotto un numero scritto a mano: con
   `top: 5.5rem` il titolo del corso finiva coperto appena si scorreva. */
@media (min-width: 1024px) {
  .t-program { position: sticky; top: calc(var(--header-h) + 1.25rem); max-height: calc(100dvh - var(--header-h) - 2.5rem); overflow-y: auto; }
}

/* La testa è un <button>: azzero gli stili nativi e la rendo a piena larghezza */
.t-program-head {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: 0 0 1.25rem; border: 0; background: transparent;
  color: inherit; text-align: left; font: inherit;
}
.t-program-head-text { display: block; flex: 1; min-width: 0; width: 100%; }
/* Il titolo del corso si scrive come sta nel titolo: niente maiuscoletto
   forzato — «Orderflow Revolution» non è «ORDERFLOW REVOLUTION». */
.t-program-course {
  display: block; margin-bottom: .6rem;
  font-size: var(--text-size); font-weight: 700; letter-spacing: -0.01em;
  color: var(--foreground);
}
.t-program-meta { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }
/* Larga quanto la colonna: il tetto di 220px la lasciava a metà strada. */
.t-program-head .t-progress-riga { width: 100%; }
.t-program-head .t-progress-card { max-width: none; }
.t-program-chev { flex-shrink: 0; color: var(--muted-foreground); transition: transform .2s; }

/* Mobile: programma collassato, solo la testa visibile; click per espandere */
.t-program-head { cursor: pointer; }
.t-program-body { display: none; }
.t-program.is-open .t-program-body { display: block; }
.t-program.is-open .t-program-chev { transform: rotate(180deg); }

/* Desktop: sempre aperto, testa non cliccabile, niente freccia */
@media (min-width: 1024px) {
  .t-program-head { cursor: default; }
  .t-program-body { display: block; }
  .t-program-chev { display: none; }
}

/* Moduli: nessuna riga divisoria, la freccia sta a destra e ruota */
.t-program-module { border: 0; }
.t-program-module summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  list-style: none; cursor: pointer;
  padding: .7rem .25rem; font-size: var(--text-sm); font-weight: 700;
}
.t-program-module summary::-webkit-details-marker { display: none; }
.t-program-module[open] .t-chev { transform: rotate(180deg); }
.t-chev { transition: transform .15s; color: var(--muted-foreground); flex-shrink: 0; }

.t-program-lessons { display: flex; flex-direction: column; gap: .1rem; padding: 0 0 .5rem; }
.t-program-lesson {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border-radius: var(--radius-lg); padding: .6rem .9rem;
  font-size: var(--text-sm); text-decoration: none; color: var(--foreground);
}
a.t-program-lesson:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
/* La lezione che stai guardando. Skool la fa ambra; qui si usa il rosso del
   marchio (#ff002f) molto diluito, con una barretta piena sul bordo sinistro:
   il colore è riconoscibile come nostro, ma resta un fondo su cui il testo
   nero si legge. */
/* Solo il fondo, niente grassetto: il colore basta a dire dove sei, e il peso
   in più faceva ballare la riga rispetto alle altre dell'elenco. */
.t-program-lesson.is-current {
  background: #ffd6de;
}
a.t-program-lesson.is-current:hover { background: #ffc4d0; }
.t-program-lesson.is-locked { color: var(--muted-foreground); }
.t-lesson-nome { min-width: 0; }
.t-lesson-lock { flex-shrink: 0; color: var(--muted-foreground); }

/* Spunta verde: nell'elenco e, più grande, in cima alla lezione aperta */
.t-lesson-check {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--green-bar, oklch(72% 0.19 145deg)); color: #fff;
}
.t-lesson-check svg { stroke-width: 3.5; }
.t-lesson-check.is-big { width: 28px; height: 28px; }

.t-program-foot { padding-top: 1rem; margin-top: .75rem; border-top: 1px solid var(--border); }
.t-program-foot a { color: var(--muted-foreground); text-decoration: none; }
.t-program-foot a:hover { color: var(--foreground); }

/* ── La card del contenuto ─────────────────────────────────────────────── */
.t-lesson-card {
  background: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 2rem 2.25rem 2.25rem;
}
/* Su mobile la card va a tutta larghezza: niente bordi laterali, niente angoli
   arrotondati, niente margini. Su uno schermo stretto quel riquadro mangiava
   2rem di larghezza per non dire nulla.
   La soglia è 767px perché è la stessa del `.container`, che sotto i 768px ha
   `padding-inline: 1.25rem`: il margine negativo qui sotto lo annulla esatto.
   ⚠️ I due numeri devono restare uguali — se cambia il padding del container,
/* Titolo a sinistra, stato/azione in alto a destra. Il pulsante non si
   restringe e va a capo sotto il titolo solo se lo spazio non basta. */
.t-lesson-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Non un pulsante ma una scritta cliccabile: completare una lezione è una
   spunta che metti tu, non un'azione da mettere in evidenza con un rettangolo
   colorato accanto al titolo. */
.t-completa {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .25rem; padding: 0; border: 0; background: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--muted-foreground);
  cursor: pointer;
}
.t-completa svg { flex-shrink: 0; }
.t-completa:hover:not(:disabled) { color: var(--foreground); }
.t-completa.is-done, .t-completa:disabled {
  color: var(--green-badge-fg); cursor: default;
}
.t-completa.is-done svg { color: var(--green-bar); stroke-width: 2.5; }
.t-lesson-card .t-lesson-h1 { margin-top: 0; }
/* Video e copertina vanno da bordo a bordo della card, anche su desktop: il
   margine negativo annulla il padding orizzontale della card (2.25rem). Un
   video incorniciato dentro un riquadro già incorniciato perde larghezza per
   ripetere un bordo che c'è già. */
.t-lesson-card .t-player,
.t-lesson-card .t-lesson-copertina {
  margin-inline: -2.25rem; width: auto;
  border-radius: 0; border-left: 0; border-right: 0;
}

/* Copertina generata per le lezioni senza video: stessa forma del player, con
   il titolo al centro. Le due tinte arrivano da PHP come variabili. */
.t-lesson-copertina {
  margin-top: 1.25rem; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-xl); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem clamp(1.5rem, 8vw, 5rem);
  background:
    radial-gradient(120% 120% at 15% 15%, hsl(var(--tinta2) 85% 62% / .95), transparent 60%),
    linear-gradient(135deg, hsl(var(--tinta) 72% 42%), hsl(var(--tinta2) 68% 26%));
  position: relative;
}
/* Una velatura scura in basso: tiene il testo leggibile qualunque tinta esca. */
.t-lesson-copertina::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, rgb(0 0 0 / .35));
}
/* Nota redazionale: una correzione a quello che dice il video. Colore
   d'attenzione, non d'allarme — il contenuto della lezione resta valido. */
.t-nota {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--radius-lg);
  background: oklch(96% 0.05 85deg); border: 1px solid oklch(85% 0.09 85deg);
}
.t-nota svg { flex-shrink: 0; margin-top: .15rem; color: oklch(52% 0.12 70deg); }
.t-nota p { margin: 0; font-size: var(--text-sm); line-height: 1.6; }

/* Blocco di testo da copiare: si legge e si prende, non si scarica. */
.t-blocco-testo { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--muted); }
.t-blocco-testo-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: var(--background);
}
.t-blocco-testo-testa h2 { font-size: var(--text-size); font-weight: 700; margin: 0; }
.t-blocco-testo pre {
  margin: 0; padding: 1rem; max-height: 22rem; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.t-copia {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .4rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--background); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.t-copia:hover { border-color: var(--foreground); }
.t-copia-dopo { display: none; align-items: center; gap: .3rem; color: var(--green-badge-fg); }
.t-copia.is-copied .t-copia-prima { display: none; }
.t-copia.is-copied .t-copia-dopo { display: inline-flex; }
.t-copia.is-copied > svg { display: none; }

.t-lesson-copertina span {
  position: relative; z-index: 1;
  color: #fff; text-align: center; text-wrap: balance;
  font-size: clamp(1.4rem, 4.2vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  text-shadow: 0 2px 12px rgb(0 0 0 / .35);
}

   va cambiato anche il margine qui, se no la card sborda o resta rientrata. */
@media (max-width: 767px) {
  .t-lesson-card {
    margin-inline: -1.25rem;       /* deve pareggiare il padding del .container */
    border-left: 0; border-right: 0;
    border-radius: 0;
    /* Il testo però non tocca i bordi: 1,25rem di respiro dentro la card.
       A tutta larghezza senza padding le righe finivano contro lo schermo. */
    padding: 1.5rem 1.25rem 2rem;
  }
  .t-lesson-page { gap: 1.75rem; }

  /* Il video e la copertina vanno invece da bordo a bordo: il margine negativo
     annulla il padding della card, così l'immagine usa tutto lo schermo mentre
     il testo resta rientrato. Su un telefono un video incorniciato perde
     larghezza proprio dove serve. */
  .t-lesson-card .t-player,
  .t-lesson-copertina {
    margin-inline: -1.25rem;
    width: auto;
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
}

/* Le due frecce sotto il video: indietro a sinistra, avanti a destra. */
.t-lesson-vai {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
/* Stesso raggio di tutti gli altri pulsanti del sito (--radius-md): lo usano
   .t-btn, .t-icon-btn, .t-header-btn, .t-prop-go e gli altri.
   Questi due erano gli unici a pillola, ed è per quello che stonavano accanto
   a «Segna come completata».
   Resta a pillola solo .t-chip, che non è un pulsante ma un'etichetta. */
.t-vai {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  color: var(--foreground); background: var(--muted);
}
.t-vai:hover { background: color-mix(in oklab, var(--foreground) 10%, transparent); }
.t-vai svg { flex-shrink: 0; transition: transform .15s; }
.t-vai-indietro:hover svg { transform: translateX(-2px); }
.t-vai-avanti:hover svg { transform: translateX(2px); }
/* Avanti è l'azione che ci si aspetta di fare: pesa di più */
.t-vai-avanti { background: var(--primary); color: var(--primary-foreground); }
.t-vai-avanti:hover { background: color-mix(in oklab, var(--primary) 85%, #fff); }
/* «Lista lezioni» serve solo dove il programma è chiuso, cioè sotto i 1024px.
   Su desktop la barra laterale è già lì aperta: il pulsante sparisce e la
   riga resta con la sola freccia avanti, allineata a destra. */
.t-lesson-vai-sx { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .t-vai-indietro.js-apri-programma { display: none; }
}
button.t-vai { border: 0; font-family: inherit; }

/* Il ritorno alla dashboard chiude la barra laterale */
.t-program-foot .t-vai { width: 100%; justify-content: center; }
@media (max-width: 520px) {
  .t-vai-indietro span { display: none; }   /* resta la freccia, il testo no */
}

/* Il consiglio sulle prop in fondo alla lezione: è testo, non un riquadro
   pubblicitario. Solo una riga sopra a separarlo, e i link in evidenza. */
/* Niente margin-top: il contenitore `.t-lesson-content` è un flex con gap 2rem,
   quindi il margine si sommava e fra la fine dei punti chiave e la linea di
   separazione c'erano 4,5rem di vuoto. Resta solo lo spazio SOTTO la linea. */
.t-consiglio { padding-top: 2.5rem; border-top: 1px solid var(--border); }
.t-consiglio p { margin-bottom: .85rem; }
.t-consiglio-prop { margin: .35rem 0 0; padding-left: 1.3em; font-size: var(--text-size); line-height: 1.65; }
.t-consiglio-prop li { margin-bottom: .5rem; }
.t-consiglio-prop li:last-child { margin-bottom: 0; }
.t-consiglio a {
  color: var(--foreground); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 2px; text-decoration-color: var(--rosso-tsc, #ff002f);
}
.t-consiglio a:hover { color: var(--rosso-tsc, #ff002f); }

.t-lesson-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }
.t-lesson-h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; margin-top: .4rem; line-height: 1.15; }
.t-player {
  margin-top: 1.25rem; aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: #000; overflow: hidden;
}
.t-player iframe { width: 100%; height: 100%; border: 0; }
/* Il vecchio `.t-complete-btn` (~10 righe) è stato tolto l'08/08/2026: il
   completamento ora è `.t-completa`, una scritta cliccabile in alto a destra
   nella testata della lezione, e nessun template usava più quella classe.
   L'animazione della spunta viveva lì: se la si rivuole, va rimessa su
   `.t-completa.is-done`. */

/* Ritmo verticale della lezione: tutte le sezioni — punti chiave, testo,
   blocco da copiare, risorse, consiglio — sono distanziate uguale da questo
   `gap`, e nessuna si porta margini propri. Un solo numero da cambiare. */
.t-lesson-content { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }

/* ── PropBlock (banner affiliate sotto le lezioni) ─────────────────────── */
.t-propblock { overflow: hidden; border: 1px solid var(--foreground); border-radius: var(--radius-2xl); }
.t-propblock-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem;
  background: var(--foreground); color: var(--background); padding: 1rem 1.25rem;
}
.t-propblock-head h3 { font-size: var(--text-size); font-weight: 800; }
.t-propblock-note { font-family: var(--font-mono); font-size: var(--text-xs); color: color-mix(in oklab, var(--background) 60%, transparent); }
.t-propblock-body { background: var(--background); padding: .5rem 1.25rem 1.25rem; }
.t-prop-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  border-top: 1px solid var(--border); padding: .875rem 0;
}
.t-prop-offer:first-child { border-top: 0; }
.t-prop-offer-info { flex: 1; min-width: 220px; }
.t-prop-offer-name { font-size: var(--text-sm); font-weight: 700; }
.t-prop-offer-name .plan { font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.t-prop-offer-deal { margin-top: .1rem; font-size: var(--text-sm); font-weight: 600; color: var(--green-text); }
.t-prop-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  background: var(--background); color: var(--foreground);
  padding: .55rem .75rem; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em;
  transition: border-color .15s, color .15s;
}
.t-prop-chip:hover { border-color: var(--foreground); }
.t-prop-chip .hint { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; }
.t-prop-chip .hint svg { width: 12px; height: 12px; }
.t-prop-chip .hint-copiato { display: none; }
.t-prop-chip.is-copied { border-color: var(--green-text); color: var(--green-text); }
.t-prop-chip.is-copied .hint-copia { display: none; }
.t-prop-chip.is-copied .hint-copiato { display: inline-flex; align-items: center; gap: .25rem; }
.t-prop-go {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: .4rem;
  border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-foreground);
  padding: .55rem 1rem; font-size: var(--text-sm); font-weight: 600;
}
.t-prop-go:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.t-prop-go .go-label { display: inline-flex; align-items: center; gap: .4rem; }
.t-prop-go .go-done { display: none; align-items: center; gap: .4rem; }
.t-prop-go.is-going .go-label { display: none; }
.t-prop-go.is-going .go-done { display: inline-flex; }
.t-propblock-checkout { margin-top: .625rem; font-size: var(--text-xs); color: var(--muted-foreground); }
.t-completed-prop { margin-top: 2.5rem; text-align: left; }
/* banner sotto la navigazione prev/successiva nella pagina lezione */
.t-lesson-main > .t-propblock { margin-top: 2rem; }
/* Titoli e corpo dei blocchi dentro la lezione — «Punti chiave», «Risorse»,
   «Un consiglio». Erano tre misure diverse: il titolo a 1.05rem, il corpo dei
   punti a .95rem (15,2px) e il consiglio a 18px, cioè il testo base del sito.
   Su un'unica card la differenza si vedeva e sembrava un errore.
   Ora: titoli 1.25rem, corpo 1rem per tutti e tre. */
.t-summary h2,
.t-resources h2,
.t-consiglio h2 { font-size: var(--text-lead); font-weight: 700; margin-bottom: .7rem; letter-spacing: -0.01em; }
.t-summary .t-richtext,
.t-consiglio p { font-size: var(--text-size); line-height: 1.65; }
.t-summary .t-richtext li { margin: .5em 0; }
/* Elenco di risorse: icona + testo cliccabile, niente riquadri.
   `.t-resources-box`, `.t-resources-grid` e `.t-resource` (i vecchi riquadri
   con bordo) sono stati tolti l'08/08/2026 con il markup che li usava. */
.t-risorse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.t-risorse li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Il codice è testo da selezionare, non un comando: nessun link, nessun hover. */
.t-risorsa-codice { font-size: var(--text-sm); color: var(--muted-foreground); }
.t-risorsa-codice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; color: var(--foreground);
  background: var(--muted); border-radius: 4px; padding: .1em .4em;
  user-select: all;    /* un tocco solo seleziona tutto il codice */
}
.t-risorsa {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .35rem 0; font-size: var(--text-size); font-weight: 600;
  color: var(--foreground); text-decoration: none;
}
.t-risorsa span {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 2px; text-decoration-color: var(--rosso-tsc);
}
.t-risorsa:hover { color: var(--rosso-tsc); }
.t-risorsa svg { flex-shrink: 0; color: var(--muted-foreground); }
.t-risorsa:hover svg { color: var(--rosso-tsc); }
/* Il download è un'azione diversa dal «vai a vedere»: resta un pulsante. */
.t-risorsa.is-download {
  padding: .5rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--muted); align-self: flex-start; margin: .25rem 0;
}
.t-risorsa.is-download span { text-decoration: none; }
.t-risorsa.is-download:hover { border-color: var(--foreground); color: var(--foreground); }
.t-transcript summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.t-transcript pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); margin-top: .8rem; }
.t-lesson-nav { display: grid; gap: .8rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .t-lesson-nav { grid-template-columns: repeat(2, 1fr); } }
.t-lesson-nav-card {
  display: flex; flex-direction: column; gap: .15rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); padding: 1rem 1.125rem; text-decoration: none;
}
.t-lesson-nav-card:hover { border-color: var(--ring); }
.t-lesson-nav-card .dir { font-size: var(--text-xs); color: var(--muted-foreground); }
.t-lesson-nav-card .name { font-size: var(--text-sm); font-weight: 600; }
.t-lesson-nav-card.is-next { text-align: right; align-items: flex-end; }
.t-locked-box {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); padding: 2rem; text-align: center;
}
.t-locked-box h2 { font-size: var(--text-lead); margin-bottom: .4rem; }
.t-locked-box p { color: var(--muted-foreground); font-size: var(--text-sm); margin-bottom: 1rem; }
.t-locked-box .t-auth-actions { max-width: 300px; margin-inline: auto; }

/* Pagina modulo/corso completato */
.t-completed { max-width: 620px; margin-inline: auto; padding-block: 4rem 6rem; text-align: center; }
.t-completed .emoji { font-size: 3rem; }
.t-completed h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; margin: .6rem 0; }
.t-completed p { color: var(--muted-foreground); margin-bottom: 1.6rem; }
.t-completed .t-auth-actions { max-width: 340px; margin-inline: auto; }

/* ── Pagina modulo/corso completato (replica Payload) ──────────────────── */
.t-completed2 { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: 2rem; padding-block: 3rem 5rem; }
.t-completed-back { font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: none; }
.t-completed-back:hover { color: var(--foreground); }
.t-completed-back-bottom { text-align: center; }
.t-completed-confirm { text-align: center; }
.t-completed-check {
  margin-inline: auto; display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 9999px;
  background: var(--green-badge-bg); color: var(--green-badge-fg);
}
.t-completed-check svg { stroke-width: 3; }
.t-completed-eyebrow { margin-top: 1.25rem; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .15em; color: var(--muted-foreground); }
.t-completed-title { margin-top: .5rem; font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.t-completed-meta { margin-top: .5rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }

.t-completed-progress { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); padding: 1.25rem; }
.t-completed-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.t-completed-progress-head .label { font-size: var(--text-sm); font-weight: 600; }
.t-completed-progress-head .count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); }
.t-completed-progress .t-progress { margin-top: .75rem; max-width: none; height: .5rem; }
.t-completed-modules { margin-top: 1rem; display: grid; gap: .5rem; }
.t-completed-mod { display: flex; align-items: center; gap: .625rem; }
.t-completed-mod-dot {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1rem; height: 1rem; border-radius: 9999px; border: 1.5px solid var(--border);
}
.t-completed-mod.is-done .t-completed-mod-dot { border: 0; background: var(--green-badge-bg); color: var(--green-badge-fg); }
.t-completed-mod-dot svg { stroke-width: 3; }
.t-completed-mod-title { display: none; font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-completed-mod.is-done .t-completed-mod-title { color: var(--foreground); }
.t-completed-mod-bar { height: .375rem; flex: 1; border-radius: 9999px; background: var(--muted); }
.t-completed-mod.is-done .t-completed-mod-bar { background: var(--green-bar); }
@media (min-width: 640px) {
  .t-completed-mod-title { display: block; }
  .t-completed-mod-bar { display: none; }
}

.t-completed-next { border: 2px solid var(--foreground); border-radius: var(--radius-2xl); padding: 1.25rem; }
.t-completed-next-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.t-completed-next-title { margin-top: .375rem; font-size: var(--text-lead); font-weight: 700; letter-spacing: -0.015em; }
.t-completed-next-desc { margin-top: .5rem; font-size: var(--text-sm); line-height: 1.6; color: var(--muted-foreground); }
.t-completed-next-lessons { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.t-completed-next-lessons li { display: flex; align-items: center; gap: .625rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.t-completed-next-lessons .num { font-family: var(--font-mono); font-size: var(--text-xs); color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.t-completed-next-lessons .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-completed-next-lessons .more { padding-left: 26px; font-size: var(--text-sm); color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.t-completed-cta { margin-top: 1.25rem; height: auto; padding: .875rem 1.5rem; gap: .5rem; }

/* ── Dashboard "Il tuo percorso" (Area iscritto) — replica Payload ──────── */
/* Era bloccata a 820px: con tre card in griglia diventavano una colonna
   stretta in mezzo allo schermo. Ora usa la larghezza del sito. */
.t-dashboard { padding-top: 2.75rem; padding-bottom: 6rem; }
.t-dash-h1 { font-size: clamp(1.6rem, 4vw, 2.125rem); font-weight: 800; letter-spacing: -0.025em; }
.t-dash-stats { margin-top: .5rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted-foreground); }
.t-dash-stats span { display: inline-flex; align-items: center; gap: .375rem; }
.t-dash-pending { max-width: 28rem !important; padding-block: 2rem; text-align: center; }
.t-dash-pending .emoji { font-size: 3rem; margin-bottom: 1rem; }
.t-dash-pending h2 { font-size: var(--h3-size); font-weight: 700; margin-bottom: .5rem; }
.t-dash-pending p { color: var(--muted-foreground); }

.t-newhere { margin-top: 1.5rem; font-size: var(--text-sm); line-height: 1.6; color: var(--muted-foreground); }
.t-newhere strong { color: var(--foreground); }

/* Percorso / stepper */
.t-path { padding-top: 1.75rem; }
.t-path-title { font-size: var(--text-lead); font-weight: 800; letter-spacing: -0.02em; }
.t-path-sub { margin: .25rem 0 1.5rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.t-path-empty { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; color: var(--muted-foreground); }
.t-path-empty a { text-decoration: underline; }

/* Lo stepper numerato della dashboard è stato sostituito dalla griglia di card
   l'08/08/2026. Le ~66 righe di CSS che lo disegnavano sono state tolte qui:
   nessun template le usava più, e CSS morto che 'forse serve' invecchia male.
   Se serve rivederlo, sta nella storia di questo file. */


/* ── Auth ───────────────────────────────────────────────────────────────── */
.t-auth-shell {
  display: flex; min-height: 100dvh; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem; gap: 1.1rem;
}
.t-auth-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-size: var(--text-lead); font-weight: 700; }
/* Selettore lingua nelle pagine di accesso: qui non c'è l'intestazione del sito,
   quindi senza questo blocco non esisterebbe alcun modo di cambiare lingua. */
.t-auth-lang { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; }
.t-auth-shell { position: relative; }
.t-auth-card {
  width: 100%; max-width: 400px;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: var(--background); padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.t-auth-card h1 { font-size: var(--h3-size); font-weight: 700; margin-bottom: .25rem; }
.t-auth-sub { font-size: var(--text-sm); color: var(--muted-foreground); margin-bottom: 1.25rem; }
.t-auth-footer { font-size: var(--text-sm); color: var(--muted-foreground); }
.t-auth-footer a { color: var(--foreground); }
.t-auth-tail { font-size: var(--text-sm); color: var(--muted-foreground); }
.t-auth-tail a { color: var(--muted-foreground); text-decoration: none; }
.t-auth-tail a:hover { color: var(--foreground); text-decoration: underline; }
.t-auth-mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); opacity: .7; }
.t-auth-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }

.t-register-card {
  margin-inline: auto; width: 100%; max-width: 400px; scroll-margin-top: 6rem;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: var(--background); padding: 2rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  text-align: left;
}
.t-register-card h2 { font-size: var(--h3-size); font-weight: 700; margin-bottom: .25rem; }
.t-register-card .t-muted-sm { margin-bottom: 1.5rem; }

.t-form form { display: flex; flex-direction: column; gap: 1rem; }
.t-field { display: flex; flex-direction: column; gap: .35rem; }
.t-field label { font-size: var(--text-sm); font-weight: 500; }
.t-field input {
  height: 2.5rem; border: 1px solid var(--input); border-radius: var(--radius-md);
  background: var(--background); padding-inline: .75rem; font-size: var(--text-sm);
  width: 100%;
}
.t-field input:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--ring); }
.t-field input[disabled] { background: var(--muted); color: var(--muted-foreground); }
.t-hint { font-size: var(--text-sm); color: var(--muted-foreground); }
.t-label-row { display: flex; align-items: center; justify-content: space-between; }
.t-link-sm { font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
.t-password-wrap { position: relative; }
.t-password-wrap input { padding-right: 2.6rem; }
.t-eye {
  position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-foreground);
}
.t-eye svg:last-child { display: none; }
.t-eye.is-visible svg:first-child { display: none; }
.t-eye.is-visible svg:last-child { display: block; }
.t-check { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); }
.t-check input { width: 1rem; height: 1rem; accent-color: var(--foreground); }
.t-form-error {
  font-size: var(--text-sm); color: #dc2626;
  border: 1px solid color-mix(in oklab, #dc2626 30%, transparent);
  background: color-mix(in oklab, #dc2626 6%, transparent);
  border-radius: var(--radius-md); padding: .6rem .8rem;
}
[data-theme='dark'] .t-form-error { color: #f87171; }
.t-form-error a { font-weight: 600; }
.t-form-success { text-align: center; padding-block: .8rem; }
.t-form-success h2 { font-size: var(--text-lg); margin: .6rem 0 .3rem; }
.t-form-success p { font-size: var(--text-sm); color: var(--muted-foreground); }
.t-success-icon { color: var(--green-text); }

.t-btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; height: 2.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--background); color: var(--foreground);
  font-size: var(--text-sm); font-weight: 500; text-decoration: none;
}
.t-btn-google:hover { background: var(--muted); }
.t-divider { display: flex; align-items: center; gap: .8rem; margin-block: 1rem; color: var(--muted-foreground); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.t-divider::before, .t-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }

.t-migration {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  margin-bottom: 1.1rem; overflow: hidden;
}
.t-migration-head {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .6rem;
  border: 0; background: transparent; padding: .7rem .9rem;
  font-size: var(--text-sm); text-align: left; color: var(--foreground);
}
.t-migration-chev { transition: transform .15s; flex-shrink: 0; color: var(--muted-foreground); }
.t-migration.is-open .t-migration-chev { transform: rotate(180deg); }
.t-migration-body { padding: 0 .9rem .8rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.t-migration-body ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.t-migration-body a { color: var(--foreground); }

/* ── Prop firm card ─────────────────────────────────────────────────────── */
.t-firm-card {
  margin-inline: auto; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  padding: 1.5rem; text-align: left; background: var(--background);
}
@media (min-width: 640px) { .t-firm-card { padding: 2rem; } }
.t-firm-card.w-narrow { max-width: 32rem; }
.t-firm-card.w-mid { max-width: 42rem; }
.t-firm-card.is-highlight { border: 2px solid var(--foreground); }
.t-firm-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.t-firm-badge-reco {
  border-radius: 9999px; background: var(--foreground); color: var(--background);
  font-size: var(--text-xs); font-weight: 600; padding: .2rem .7rem;
}
.t-firm-badge-discount {
  border: 1px dashed var(--green-text); border-radius: 9999px;
  color: var(--green-text); font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 600; padding: .2rem .7rem;
}
.t-firm-name { font-size: var(--h3-size); font-weight: 700; }
.t-firm-plan { margin-top: .1rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.t-firm-desc { margin: .7rem 0 1rem; color: var(--muted-foreground); }
.t-firm-bestfor {
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  padding: .6rem .8rem; font-size: var(--text-sm); margin-bottom: 1rem;
}
.t-firm-bestfor .label { font-weight: 600; }
.t-firm-lists { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .t-firm-lists { grid-template-columns: 1fr 1fr; } }
.t-firm-lists ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.t-firm-lists li { display: flex; align-items: baseline; gap: .5rem; font-size: var(--text-sm); }
.t-firm-pros svg { color: var(--green-text); flex-shrink: 0; transform: translateY(2px); }
.t-firm-cons svg { color: #dc2626; flex-shrink: 0; transform: translateY(2px); }
.t-firm-platforms { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.t-firm-cta { display: flex; align-items: center; gap: .8rem; }
.t-copy-feedback { font-size: var(--text-sm); color: var(--green-text); font-weight: 600; }

/* ── Sticky CTA ─────────────────────────────────────────────────────────── */
.t-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  border-top: 1px solid var(--border); background: var(--background);
  box-shadow: 0 -4px 12px rgb(0 0 0 / .06);
}
.t-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.t-sticky-text { display: flex; flex-direction: column; font-size: var(--text-sm); }
.t-sticky-discount { color: var(--green-text); font-family: var(--font-mono); font-size: var(--text-sm); }
.t-sticky-cta .t-btn { height: 2.4rem; padding-inline: 1.1rem; flex-shrink: 0; }

/* ── Blog ───────────────────────────────────────────────────────────────── */
.t-blog { max-width: var(--content-width); margin-inline: auto; padding-block: 2.5rem 5rem; }
.t-blog-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .t-blog-grid { grid-template-columns: repeat(2, 1fr); } }
.t-post-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: box-shadow .2s; background: var(--background); }
.t-post-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
.t-post-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.t-post-card h2 { font-size: var(--text-lg); font-weight: 700; }
.t-pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; font-size: var(--text-sm); }
.t-page-range { text-align: center; margin-top: 1rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.t-article { max-width: var(--content-width); margin-inline: auto; padding-block: 2.5rem 5rem; }
.t-article-head h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: .6rem; }
.t-article-meta { font-size: var(--text-sm); color: var(--muted-foreground); margin-bottom: 2rem; }

/* ── Cookie banner (barra a tutta larghezza come Payload) ──────────────── */
.t-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  border-top: 1px solid var(--border); background: var(--background);
  box-shadow: 0 -4px 16px rgb(0 0 0 / .08);
  font-size: var(--text-sm);
}
.t-cookie-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.5rem; padding-block: .9rem;
}
.t-cookie p { flex: 1 1 420px; color: var(--foreground); }
.t-cookie a { text-decoration: underline; text-underline-offset: 2px; }
.t-cookie .actions { display: flex; gap: .6rem; flex-shrink: 0; }
.t-cookie .t-btn { height: 2.4rem; padding-inline: 1.1rem; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.t-404 { max-width: 560px; margin-inline: auto; text-align: center; padding-block: 6rem; }
.t-404 h1 { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; }
.t-404 p { color: var(--muted-foreground); margin: .8rem 0 1.6rem; }
.t-404 .t-buttons { justify-content: center; }

/* ── Pagina generica con blocchi ────────────────────────────────────────── */
/* Un respiro prima del footer, non i 6rem di prima.
   La striscia bianca segnalata l'08/08 nasceva quando l'ultimo blocco aveva un
   fondo colorato: 96px di bianco fra il colore e il footer si leggevano come un
   buco. Ora che i blocchi sono tutti bianchi il problema non si pone, ma senza
   niente il testo finiva appiccicato al footer nero. 60px = --space-m, cioè lo
   stesso passo che separa le sezioni: il ritmo resta uno solo.
   ⚠️ Se un blocco tornerà ad avere un fondo colorato, questo spazio ricomparirà
   come striscia bianca — in quel caso va spostato dentro il blocco. */
.t-page-article { padding-bottom: var(--space-m); }
.t-page-article.is-auth { padding-bottom: 0; }

/* ── Landing di vendita di un corso a pagamento ─────────────────────────────
   La vede solo chi è iscritto al sito e non ha comprato quel corso. È una
   pagina di vendita, non un indice: titolo grande, una promessa, il prezzo, e
   il programma come prova di sostanza — non come sommario da leggere. */
.t-landing-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.t-landing-occhiello {
  margin: 0; font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary);
}
.t-landing-hero .t-subtitle { margin: 0; max-width: 34rem; }
.t-landing-cta { display: flex; justify-content: center; }
.t-landing-hero .t-buy-note { text-align: center; margin-inline: auto; }
.t-landing-chiuse { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
/* Lista d'attesa: segue l'avviso di chiusura, che ha margin 0. Il testo spiega
   che non è un impegno, quindi deve leggersi prima del bottone — non sotto. */
/* «In più, nella versione LAB»: non una scheda con le spunte come il programma
   qui sopra, ma punti in fila, ognuno con la riga che dice perché esiste.
   Si stacca dal corso base con una linea, non con un riquadro: è un seguito
   del discorso, non un box promozionale a lato. */
.t-landing-piu { border-top: 1px solid var(--border); padding-top: 1.75rem; }
.t-landing-piu > h3 { margin: 0 0 1.25rem; }
.t-landing-voce + .t-landing-voce { margin-top: 1.25rem; }
.t-landing-voce h4 { margin: 0 0 .3rem; font-size: var(--text-base); }
/* Nessun tetto in `ch` qui: la larghezza la decide il contenitore stretto,
   se no si sommano due limiti e il testo diventa una colonna da giornale. */
.t-landing-voce p {
  margin: 0; font-size: var(--text-sm); line-height: 1.65;
  color: var(--muted-foreground);
}
/* La riga che spiega («non è un impegno») sta SOTTO il bottone: chi aveva già
   deciso clicca, chi ha un dubbio la trova lì sotto ad aspettarlo. */
.t-waitlist { margin-top: 1rem; }
.t-waitlist-testo {
  margin: .75rem 0 0; font-size: var(--text-sm); line-height: 1.6;
  color: var(--muted-foreground);
}
/* La conferma sta fra il bottone e la spiegazione, in grassetto: è la sola
   riga che cambia dopo il clic, e deve trovarsi al primo sguardo. */
.t-waitlist-esito:empty { display: none; }
.t-waitlist-esito {
  margin: .75rem 0 0; font-size: var(--text-sm);
  font-weight: 600; color: var(--foreground);
}
.t-waitlist-esito + .t-waitlist-testo { margin-top: .35rem; }
/* Stesso bottone, due stati: da cliccare è pieno come ogni altra azione della
   pagina; fatto diventa grigio e spento — si legge ancora, ma non chiede più
   niente. `disabled` toglie anche il cursore e il focus. */
.t-waitlist-btn { display: inline-flex; align-items: center; gap: .5rem; }
.t-waitlist-btn.is-fatto,
.t-waitlist-btn.is-fatto:hover {
  background: var(--muted); color: var(--muted-foreground);
  border-color: var(--border); cursor: default;
}
.t-waitlist-btn.is-fatto svg { flex-shrink: 0; }
.t-landing-testo { margin-inline: auto; }

/* Il programma: due colonne su schermo largo, elenco puntato con la spunta.
   Le lezioni NON sono link — di là non si entra finché non si compra. */
/* Una colonna sola, larghezza stretta. Erano due colonne quando le voci erano
   titoli spuntati: da quando ogni sessione ha la sua spiegazione, due colonne
   lasciavano ~340px per riga di testo — illeggibile. */
.t-landing-programma { display: grid; gap: 2.5rem; max-width: var(--narrow-width); margin-inline: auto; }
.t-landing-modulo h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: .85rem; }
.t-landing-modulo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.t-landing-modulo li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--text-size); }
.t-landing-modulo li svg { flex-shrink: 0; margin-top: .25rem; color: var(--primary); }

.t-landing-chiusura { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.t-landing-disclaimer { max-width: 34rem; font-size: var(--text-sm); color: var(--muted-foreground); }

/* ── Confronto fra i due livelli dello stesso prodotto ──────────────────────
   Due colonne affiancate: base a sinistra, LAB a destra ed evidenziato. La
   colonna cara sta a destra e ha il pulsante pieno — è l'àncora, e funziona
   solo perché quell'offerta esiste davvero. */
/* Larghezza piena: qui non si legge un testo, si confrontano due colonne
   affiancate. Con la larghezza stretta ogni colonna scendeva sotto i 340px e
   ogni voce dell'elenco andava a capo due volte. */
.t-tiers { display: grid; gap: 1.5rem; max-width: var(--page-width); margin-inline: auto; }
@media (min-width: 768px) { .t-tiers { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.t-tier {
  display: flex; flex-direction: column; gap: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  padding: 2rem 1.75rem;
  background: var(--background);
}
/* L'evidenziata non urla: bordo pieno e fondo appena diverso, come una card
   selezionata. Un badge «CONSIGLIATO» qui suonerebbe da comparatore di offerte. */
.t-tier.is-top { border-color: var(--foreground); background: var(--muted); }
.t-tier-occhiello {
  margin: 0; font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.t-tier-nome { margin: 0; font-size: var(--text-lead); font-weight: 700; letter-spacing: -0.01em; }
.t-tier-prezzo { margin: 0; font-size: var(--h3-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-tier-lista { list-style: none; margin: .25rem 0 auto; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.t-tier-lista li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--text-size); text-align: left; }
.t-tier-lista li svg { flex-shrink: 0; margin-top: .25rem; color: var(--primary); }
.t-tier .t-btn { width: 100%; margin-top: .5rem; }
.t-tiers-nota { text-align: center; margin-inline: auto; margin-top: 1.5rem; }

/* ── Il livello superiore dentro il corso ───────────────────────────────────
   Chi ha comprato il LAB trova le sue lezioni qui, in un blocco a parte in
   fondo alla barra laterale: il percorso del corso resta quello, questa è la
   parte in più. Marcato dal colore dell'azione, non da un badge. */
.t-program-tier { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 2px solid var(--primary); }
.t-program-tier-eyebrow {
  margin: 0 0 .5rem; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}

/* ── Avviso in cima a un corso (meta _tsc_avviso) ─────────────────────────
   Deve leggersi come un'informazione onesta, non come un errore: bordo
   ambra e fondo tenue, non rosso. Chi arriva su un corso senza video deve
   saperlo prima di cliccare la prima lezione, non dopo. */
.t-course-notice {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  margin: 1rem 0 0;
  padding: .75rem .875rem;
  border: 1px solid rgba(245, 158, 11, .45);
  border-left-width: 3px;
  border-radius: .5rem;
  background: rgba(245, 158, 11, .08);
  font-size: .9375rem;
  line-height: 1.5;
}
.t-course-notice-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }
.t-course-notice a { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  .t-course-notice { background: rgba(245, 158, 11, .12); }
}

/* ── Copertine generate ───────────────────────────────────────────────────
   Le variabili --cover-* arrivano inline da tsc_cover_style(), che le
   ricava dallo slug del corso: stessa copertina ogni volta, diversa per
   ogni corso, e un corso nuovo ce l'ha dal primo minuto senza che nessuno
   apra un editor grafico.

   Tre strati, dal fondo alla superficie:
     1. la sfumatura fra le due tinte del seme;
     2. un fascio di righe diagonali, con l'angolo anch'esso dal seme;
     3. una luce d'angolo, che toglie l'aria da fondale piatto.            */
.t-course-cover,
.t-course-media {
  background-image:
    radial-gradient(120% 100% at 12% 8%, color-mix(in srgb, var(--cover-luce, #6b7280) 42%, transparent), transparent 62%),
    repeating-linear-gradient(var(--cover-trama, 35deg),
      rgb(255 255 255 / .055) 0 2px,
      transparent 2px 13px),
    linear-gradient(var(--cover-angolo, 135deg), var(--cover-a, #1f2937), var(--cover-b, #0a0a0a));
}

/* Il titolo sulla copertina: Helvetica Bold.
   `Helvetica Neue` prima perché su macOS è quella davvero disegnata bene;
   Arial è il ripiego su Windows, metricamente compatibile. */
.t-cover-title,
.t-cover-overlay {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
.t-cover-title {
  font-size: clamp(1.15rem, 3.4vw, 1.9rem);
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / .35);
}

/* Nella pagina del corso la copertina è grande: il titolo può respirare. */
.t-course-media .t-cover-title {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  color: #fff;
}

/* Un'immagine caricata a mano vince sempre sullo sfondo generato: quando una
   copertina vera esiste, la trama sotto non deve trasparire dai bordi. */
.t-course-cover:has(img),
.t-course-media:has(img) { background-image: none; }

/* Visibile solo agli screen reader: usato per i titoli dei corsi, che sulla
   card sono già scritti sulla copertina. Toglierli del tutto avrebbe tolto
   anche il titolo dalla struttura della pagina. */
.t-solo-lettori {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Icona e titolo impilati al centro della copertina generata. */
.t-cover-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .55rem; padding: 1rem;
}
.t-cover-inner .t-cover-title { position: static; inset: auto; padding: 0; }
.t-cover-icona {
  display: inline-flex;
  color: #fff;
  opacity: .92;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / .35));
}
.t-cover-icona svg { display: block; }

/* Il logo è inline e usa currentColor: segue il colore del testo del brand,
   quindi funziona su fondo chiaro e scuro con un file solo. */
.t-logo-mark { display: block; flex: 0 0 auto; }