/*!
 * gm.css v1.2.1 · design system di giacomomelani.com
 * Fonte: DESIGN.md (North Star "La rivista di management").
 * Caricato su tutto il sito dal child theme di Avada e dalle pagine statiche.
 *
 * Regole (vedi CLAUDE.md, contratto CSS):
 * - i token si dichiarano SOLO qui, con prefisso --gm-
 * - ogni classe ha prefisso gm-, ogni regola sta sotto il wrapper .gm
 * - niente reset globali, niente regole su tag nudi fuori da .gm
 * - superfici piatte: niente ombre, niente gradienti
 * - !important solo in avada-overrides.css
 */

/* ============================================================
   1. Token
   ============================================================ */
:root {
  /* colori */
  --gm-navy-ink: #0F2B4C;
  --gm-petrol: #164E63;
  --gm-terracotta: #D97706;
  --gm-terracotta-deep: #B45309;
  --gm-sage: #10B981;
  --gm-sage-deep: #065F46;
  --gm-brass: #C9A84C;
  --gm-paper: #FFFFFF;
  --gm-paper-warm: #FAFAF8;
  --gm-stone: #F5F5F4;
  --gm-sand: #FEF7F0;
  --gm-mint: #F0FDF4;
  --gm-ink-body: #374151;
  --gm-ink-muted: #6B7280;
  --gm-rule: #E5E7EB;
  --gm-mist-on-navy: #B8C4CC;

  /* famiglie */
  --gm-serif: 'Gentium Book Plus', Georgia, 'Times New Roman', serif;
  --gm-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gm-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* font di sistema, solo prompt e formule */

  /* scala tipografica: solo questi otto gradini */
  --gm-fs-display: clamp(2.5rem, 5vw, 3.5rem);
  --gm-fs-headline: clamp(2rem, 4vw, 2.5rem);
  --gm-fs-title: clamp(1.5rem, 3vw, 2rem);
  --gm-fs-subtitle: 1.25rem;
  --gm-fs-body: 1.125rem;
  --gm-fs-small: 0.9375rem;
  --gm-fs-label: 0.8125rem;
  --gm-fs-figure: 2rem;

  /* spazi */
  --gm-sp-xs: 4px;
  --gm-sp-sm: 8px;
  --gm-sp-md: 16px;
  --gm-sp-lg: 24px;
  --gm-sp-xl: 32px;
  --gm-sp-2xl: 48px;
  --gm-sp-section: 80px;

  /* forme */
  --gm-r-sm: 4px;
  --gm-r-md: 8px;
  --gm-r-lg: 12px;
  --gm-r-pill: 999px;

  /* movimento */
  --gm-ease: cubic-bezier(0.2, 0, 0, 1);
  --gm-dur-quick: 150ms;
  --gm-dur-reveal: 220ms;
}

/* ============================================================
   2. Base del wrapper .gm
   ============================================================ */
.gm {
  font-family: var(--gm-sans);
  font-size: var(--gm-fs-body);
  line-height: 1.7;
  color: var(--gm-ink-body);
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
.gm *, .gm *::before, .gm *::after { box-sizing: border-box; }

.gm h1, .gm h2, .gm h3, .gm h4 { text-wrap: balance; margin: 0; }
.gm h1 { font-family: var(--gm-serif); font-size: var(--gm-fs-headline); font-weight: 700; line-height: 1.2; color: var(--gm-navy-ink); }
.gm h2 { font-family: var(--gm-serif); font-size: var(--gm-fs-title); font-weight: 700; line-height: 1.25; color: var(--gm-navy-ink); margin: var(--gm-sp-2xl) 0 var(--gm-sp-md); }
.gm h3 { font-family: var(--gm-sans); font-size: var(--gm-fs-subtitle); font-weight: 600; line-height: 1.4; color: var(--gm-petrol); margin: var(--gm-sp-xl) 0 var(--gm-sp-sm); }
.gm h4 { font-family: var(--gm-sans); font-size: var(--gm-fs-body); font-weight: 600; line-height: 1.4; color: var(--gm-navy-ink); margin: var(--gm-sp-lg) 0 var(--gm-sp-xs); }
.gm > :first-child, .gm-section > :first-child { margin-top: 0; }

.gm p { margin: 0 0 1.1em; }
.gm ul, .gm ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.gm li { margin-bottom: 0.4em; }
.gm li::marker { color: var(--gm-ink-muted); }
.gm strong { font-weight: 600; color: var(--gm-navy-ink); }

/* link nel testo: solo i link senza classe */
.gm a:not([class]) {
  color: var(--gm-terracotta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(217, 119, 6, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--gm-dur-quick) var(--gm-ease), text-decoration-color var(--gm-dur-quick) var(--gm-ease);
}
.gm a:not([class]):hover { color: var(--gm-terracotta-deep); text-decoration-color: currentColor; }

.gm :focus-visible { outline: 2px solid var(--gm-navy-ink); outline-offset: 2px; border-radius: 2px; }

.gm hr, .gm .gm-rule { border: 0; border-top: 1px solid var(--gm-rule); margin: var(--gm-sp-2xl) 0; }

.gm .gm-small { font-size: var(--gm-fs-small); }
.gm .gm-muted { color: var(--gm-ink-muted); }
.gm .gm-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   3. Lead paragraph
   ============================================================ */
.gm .gm-lead {
  font-size: var(--gm-fs-subtitle);
  font-weight: 500;
  line-height: 1.6;
  color: var(--gm-navy-ink);
  border-left: 4px solid var(--gm-terracotta);
  padding-left: var(--gm-sp-lg);
  margin: var(--gm-sp-xl) 0 var(--gm-sp-xl);
  max-width: 62ch;
}

/* ============================================================
   4. Callout: chiave, consiglio, dato, avvertenza, sintesi scura
   ============================================================ */
.gm .gm-callout {
  border-left: 4px solid var(--gm-terracotta);
  background: var(--gm-sand);
  border-radius: var(--gm-r-md);
  padding: 20px var(--gm-sp-lg);
  margin: var(--gm-sp-xl) 0;
  font-size: var(--gm-fs-small);
  line-height: 1.65;
}
.gm .gm-callout > :last-child { margin-bottom: 0; }
.gm .gm-callout__title { display: block; font-size: var(--gm-fs-body); font-weight: 600; color: var(--gm-navy-ink); margin: 0 0 var(--gm-sp-xs); }
.gm .gm-callout--tip { background: var(--gm-mint); border-left-color: var(--gm-sage); }
.gm .gm-callout--data { background: var(--gm-stone); border-left-color: var(--gm-petrol); }
.gm .gm-callout--warn { background: var(--gm-sand); border-left-color: var(--gm-terracotta-deep); }
.gm .gm-callout--dark { background: var(--gm-navy-ink); border-left-color: var(--gm-terracotta); color: var(--gm-mist-on-navy); }
.gm .gm-callout--dark .gm-callout__title, .gm .gm-callout--dark strong { color: var(--gm-paper); }

/* ============================================================
   5. Dati: stat card, formula, KPI, benchmark
   ============================================================ */
.gm .gm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gm-sp-md); margin: var(--gm-sp-xl) 0; }
.gm .gm-stat { background: var(--gm-navy-ink); border-radius: var(--gm-r-md); padding: var(--gm-sp-lg) 20px; display: flex; flex-direction: column; gap: var(--gm-sp-sm); }
.gm .gm-stat__num { font-family: var(--gm-serif); font-size: var(--gm-fs-figure); font-weight: 700; line-height: 1; color: var(--gm-terracotta); font-variant-numeric: tabular-nums; }
.gm .gm-stat__label { font-size: var(--gm-fs-small); line-height: 1.45; color: var(--gm-paper); }
.gm .gm-stat__source { font-size: var(--gm-fs-label); color: var(--gm-mist-on-navy); margin-top: auto; }

.gm .gm-formula { background: var(--gm-navy-ink); border-radius: var(--gm-r-md); padding: var(--gm-sp-xl) var(--gm-sp-lg); margin: var(--gm-sp-xl) 0; text-align: center; }
.gm .gm-formula__label { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-mist-on-navy); margin-bottom: var(--gm-sp-sm); }
.gm .gm-formula__eq { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-title); font-weight: 700; line-height: 1.3; color: var(--gm-paper); }
.gm .gm-formula__note { display: block; font-size: var(--gm-fs-small); color: var(--gm-mist-on-navy); margin-top: var(--gm-sp-sm); }

.gm .gm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: var(--gm-sp-md) 0; }
.gm .gm-kpi { background: var(--gm-paper-warm); border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); padding: 14px var(--gm-sp-md); }
.gm .gm-kpi__val { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-subtitle); font-weight: 700; color: var(--gm-navy-ink); font-variant-numeric: tabular-nums; }
.gm .gm-kpi__label { display: block; font-size: var(--gm-fs-label); color: var(--gm-ink-muted); line-height: 1.4; }
.gm .gm-kpi__delta { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-sage-deep); margin-top: var(--gm-sp-xs); }
/* nota neutra sotto un KPI: un confronto o un dettaglio, non un miglioramento (per quello c'è __delta) */
.gm .gm-kpi__note { display: block; font-size: var(--gm-fs-label); color: var(--gm-ink-muted); line-height: 1.4; margin-top: var(--gm-sp-xs); padding-top: var(--gm-sp-xs); border-top: 1px solid var(--gm-rule); }

/* al massimo tre per riga (sei settori = 3+3), mai sotto i 200px: 3, poi 2, poi 1 colonna */
.gm .gm-bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 2 * var(--gm-sp-md)) / 3)), 1fr)); gap: var(--gm-sp-md); margin: var(--gm-sp-xl) 0; }
.gm .gm-bench__item { border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); padding: 20px; }
.gm .gm-bench__sector { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-ink-muted); }
.gm .gm-bench__range { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-subtitle); font-weight: 700; color: var(--gm-navy-ink); margin: var(--gm-sp-xs) 0; font-variant-numeric: tabular-nums; }
.gm .gm-bench__unit { display: block; font-size: var(--gm-fs-small); color: var(--gm-ink-muted); }
/* soglia di allerta: terracotta bruciato perché non è un'azione */
.gm .gm-bench__alert { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta-deep); margin-top: var(--gm-sp-sm); padding-top: var(--gm-sp-sm); border-top: 1px solid var(--gm-rule); }

/* ============================================================
   6. Sequenze: passi, fasi di un piano, lezioni
   (numeri solo quando il contenuto è davvero una sequenza)
   ============================================================ */
.gm .gm-steps { list-style: none; padding: 0; margin: var(--gm-sp-xl) 0; display: grid; gap: 12px; counter-reset: gm-step; }
.gm .gm-step { counter-increment: gm-step; display: grid; grid-template-columns: 32px 1fr; gap: var(--gm-sp-md); padding: 20px; border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); background: var(--gm-paper); margin: 0; }
.gm .gm-step::before { content: counter(gm-step); width: 32px; height: 32px; border-radius: 50%; background: var(--gm-navy-ink); color: var(--gm-paper); font-family: var(--gm-serif); font-weight: 700; font-size: var(--gm-fs-small); display: grid; place-items: center; }
.gm .gm-step__body { min-width: 0; }
.gm .gm-step__title { display: block; font-size: var(--gm-fs-body); font-weight: 600; color: var(--gm-navy-ink); line-height: 1.4; margin-bottom: var(--gm-sp-xs); }
.gm .gm-step__text { font-size: var(--gm-fs-small); color: var(--gm-ink-body); line-height: 1.6; margin: 0; }
.gm .gm-code { display: block; margin-top: var(--gm-sp-sm); padding: 8px 12px; background: var(--gm-stone); border-radius: var(--gm-r-sm); font-family: var(--gm-mono); font-size: 0.875rem; color: var(--gm-navy-ink); font-variant-numeric: tabular-nums; overflow-x: auto; }

.gm .gm-plan { display: grid; gap: var(--gm-sp-md); margin: var(--gm-sp-xl) 0; }
.gm .gm-phase { border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); overflow: hidden; }
.gm .gm-phase__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gm-sp-sm) var(--gm-sp-md); background: var(--gm-paper-warm); border-bottom: 1px solid var(--gm-rule); padding: 14px 20px; }
.gm .gm-phase__num { font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta-deep); }
.gm .gm-phase__title { font-size: var(--gm-fs-body); font-weight: 600; color: var(--gm-navy-ink); flex: 1 1 auto; }
.gm .gm-phase__timing { font-size: var(--gm-fs-label); color: var(--gm-ink-muted); }
.gm .gm-phase__body { padding: var(--gm-sp-md) 20px; font-size: var(--gm-fs-small); }
.gm .gm-phase__body > :last-child { margin-bottom: 0; }

.gm .gm-lessons { list-style: none; padding: 0; margin: var(--gm-sp-xl) 0; border-top: 1px solid var(--gm-rule); }
.gm .gm-lesson { display: grid; grid-template-columns: 88px 1fr; gap: var(--gm-sp-md); padding: var(--gm-sp-md) 0; border-bottom: 1px solid var(--gm-rule); margin: 0; }
.gm .gm-lesson__day { font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta-deep); padding-top: 3px; }
.gm .gm-lesson__title { display: block; font-weight: 600; color: var(--gm-navy-ink); line-height: 1.4; }
.gm .gm-lesson__desc { display: block; font-size: var(--gm-fs-small); color: var(--gm-ink-muted); margin-top: 2px; }

/* framework: elementi di un modello, numerati solo se ordinati */
.gm .gm-framework { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gm-sp-lg); margin: var(--gm-sp-xl) 0; }
.gm .gm-framework__item { border-top: 2px solid var(--gm-navy-ink); padding-top: var(--gm-sp-md); }
.gm .gm-framework__key { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-figure); font-weight: 700; line-height: 1; color: var(--gm-terracotta); margin-bottom: var(--gm-sp-sm); }
.gm .gm-framework__title { display: block; font-weight: 600; color: var(--gm-navy-ink); margin-bottom: var(--gm-sp-xs); }
.gm .gm-framework__text { font-size: var(--gm-fs-small); margin: 0; }

/* ============================================================
   7. Caso studio
   ============================================================ */
.gm .gm-case { border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); overflow: hidden; margin: var(--gm-sp-xl) 0; }
.gm .gm-case__head { background: var(--gm-navy-ink); padding: var(--gm-sp-md) 20px; }
.gm .gm-case__title { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-subtitle); font-weight: 700; color: var(--gm-paper); line-height: 1.3; margin: 0; } /* anche su h3 */
.gm .gm-case__sub { display: block; font-size: var(--gm-fs-label); color: var(--gm-mist-on-navy); margin-top: 2px; }
.gm .gm-case__body { padding: 20px; font-size: var(--gm-fs-small); }
.gm .gm-case__body > :last-child { margin-bottom: 0; }
.gm .gm-case__results { display: flex; flex-wrap: wrap; gap: var(--gm-sp-sm); margin-top: var(--gm-sp-md); }

/* ============================================================
   8. Tabelle e tag
   ============================================================ */
.gm .gm-table-wrap { overflow-x: auto; margin: var(--gm-sp-xl) 0; border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); }
.gm .gm-table { width: 100%; border-collapse: collapse; font-size: var(--gm-fs-small); line-height: 1.5; font-variant-numeric: tabular-nums; }
.gm .gm-table th { background: var(--gm-navy-ink); color: var(--gm-paper); font-size: var(--gm-fs-label); font-weight: 600; text-align: left; padding: 12px 14px; white-space: nowrap; }
.gm .gm-table td { padding: 12px 14px; border-top: 1px solid var(--gm-rule); vertical-align: top; }
.gm .gm-table tbody tr:nth-child(even) td { background: var(--gm-paper-warm); }
.gm .gm-table td:first-child { font-weight: 600; color: var(--gm-navy-ink); }

.gm .gm-tag { display: inline-block; font-size: var(--gm-fs-label); font-weight: 600; line-height: 1.5; padding: 2px 10px; border-radius: var(--gm-r-pill); background: var(--gm-stone); color: var(--gm-ink-body); white-space: nowrap; }
.gm .gm-tag--pos { background: var(--gm-mint); color: var(--gm-sage-deep); }
.gm .gm-tag--warn { background: var(--gm-sand); color: var(--gm-terracotta-deep); }

/* ============================================================
   9. Navigazione nel contenuto: indice, articoli correlati, FAQ
   ============================================================ */
/* gli anchor si fermano sotto l'header fisso di Avada */
.gm [id] { scroll-margin-top: var(--gm-sp-section); }

/* indice: filetti sopra e sotto, nessun fondo, come il sommario di una rivista */
.gm .gm-toc { margin: var(--gm-sp-xl) 0 var(--gm-sp-2xl); padding: var(--gm-sp-md) 0; border-top: 1px solid var(--gm-rule); border-bottom: 1px solid var(--gm-rule); container-type: inline-size; }
.gm .gm-toc__title { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-ink-muted); margin-bottom: var(--gm-sp-sm); }
.gm .gm-toc__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gm-sp-xl); counter-reset: gm-toc; }
.gm .gm-toc__item { break-inside: avoid; counter-increment: gm-toc; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--gm-sp-sm); margin: 0; padding: var(--gm-sp-xs) 0; font-size: var(--gm-fs-small); line-height: 1.45; }
.gm .gm-toc__item::before { content: counter(gm-toc); color: var(--gm-ink-muted); font-variant-numeric: tabular-nums; }
.gm .gm-toc__link { color: var(--gm-navy-ink); font-weight: 500; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--gm-dur-quick) var(--gm-ease); }
.gm .gm-toc__link:hover { color: var(--gm-terracotta-deep); text-decoration-line: underline; }
/* due colonne solo se l'indice ha almeno 600px (circa 280px per colonna): con la sidebar di Avada
   la colonna articolo è 533px. La media query della sezione 14 resta per i browser senza container query. */
@container (max-width: 599px) {
  .gm .gm-toc__list { columns: 1; }
}

.gm .gm-related { margin: var(--gm-sp-2xl) 0; padding: var(--gm-sp-lg); background: var(--gm-paper-warm); border: 1px solid var(--gm-rule); border-radius: var(--gm-r-lg); }
.gm .gm-related__title { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-subtitle); font-weight: 700; color: var(--gm-navy-ink); margin-bottom: var(--gm-sp-md); }
.gm .gm-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.gm .gm-related__link { position: relative; display: block; padding: var(--gm-sp-md) 44px var(--gm-sp-md) 20px; background: var(--gm-paper); border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); text-decoration: none; transition: border-color var(--gm-dur-quick) var(--gm-ease); }
.gm .gm-related__link::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--gm-terracotta); border-right: 2px solid var(--gm-terracotta); transform: translateY(-50%) rotate(45deg); transition: right var(--gm-dur-quick) var(--gm-ease); }
.gm .gm-related__link:hover { border-color: var(--gm-navy-ink); }
.gm .gm-related__link:hover::after { right: 16px; }
.gm .gm-related__cat { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta-deep); }
.gm .gm-related__text { display: block; font-size: var(--gm-fs-body); font-weight: 600; color: var(--gm-navy-ink); line-height: 1.4; margin-top: var(--gm-sp-xs); }

.gm .gm-faq { margin: var(--gm-sp-xl) 0; border-top: 1px solid var(--gm-rule); }
.gm .gm-faq__item { border-bottom: 1px solid var(--gm-rule); }
.gm .gm-faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gm-sp-md); padding: 18px 0; font-weight: 600; color: var(--gm-navy-ink); line-height: 1.45; }
.gm .gm-faq__q::-webkit-details-marker { display: none; }
.gm .gm-faq__q::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 7px; border-right: 2px solid var(--gm-ink-muted); border-bottom: 2px solid var(--gm-ink-muted); transform: rotate(45deg); transition: transform var(--gm-dur-quick) var(--gm-ease); }
.gm .gm-faq__item[open] > .gm-faq__q::after { transform: rotate(-135deg); }
.gm .gm-faq__a { padding: 0 0 18px; font-size: var(--gm-fs-small); }
.gm .gm-faq__a > :last-child { margin-bottom: 0; }

/* ============================================================
   10. Media e citazioni
   ============================================================ */
.gm .gm-figure { margin: var(--gm-sp-xl) 0; }
.gm .gm-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); }
.gm .gm-figure figcaption { font-size: var(--gm-fs-small); color: var(--gm-ink-muted); margin-top: var(--gm-sp-sm); }
/* figura stretta: schemi circolari o quadrati che a tutta colonna diventano enormi */
.gm .gm-figure--narrow img, .gm .gm-figure--narrow figcaption { max-width: 480px; margin-inline: auto; }

.gm .gm-quote { margin: var(--gm-sp-2xl) 0; padding-left: var(--gm-sp-lg); border-left: 2px solid var(--gm-navy-ink); }
.gm .gm-quote p { font-family: var(--gm-serif); font-size: var(--gm-fs-subtitle); line-height: 1.5; color: var(--gm-navy-ink); margin: 0 0 var(--gm-sp-sm); }
.gm .gm-quote cite { font-style: normal; font-size: var(--gm-fs-small); color: var(--gm-ink-muted); }

.gm .gm-prompt { background: var(--gm-navy-ink); border-radius: var(--gm-r-md); padding: 20px var(--gm-sp-lg); margin: var(--gm-sp-xl) 0; }
.gm .gm-prompt__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-sp-md); border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 12px; margin-bottom: var(--gm-sp-md); }
.gm .gm-prompt__head .gm-prompt__label { margin: 0; }
.gm .gm-prompt__label { display: block; font-family: var(--gm-mono); font-size: var(--gm-fs-label); color: var(--gm-mist-on-navy); margin-bottom: var(--gm-sp-sm); }
.gm .gm-prompt__text { margin: 0; white-space: pre-wrap; font-family: var(--gm-mono); font-size: 0.875rem; line-height: 1.75; color: var(--gm-paper); }
.gm .gm-prompt__var { color: var(--gm-terracotta); font-weight: 600; }

.gm .gm-book { display: grid; grid-template-columns: 112px 1fr; gap: var(--gm-sp-lg); align-items: center; background: var(--gm-sand); border-radius: var(--gm-r-lg); padding: var(--gm-sp-lg); margin: var(--gm-sp-2xl) 0; }
.gm .gm-book__cover { display: block; width: 112px; height: auto; border-radius: var(--gm-r-sm); border: 1px solid rgba(15, 43, 76, 0.15); }
.gm .gm-book__body { min-width: 0; }
.gm .gm-book__kicker { display: block; font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta-deep); margin-bottom: var(--gm-sp-xs); }
.gm .gm-book__title { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-title); font-weight: 700; color: var(--gm-navy-ink); line-height: 1.2; }
.gm .gm-book__author { display: block; font-size: var(--gm-fs-small); color: var(--gm-ink-muted); margin: var(--gm-sp-xs) 0 12px; }
.gm .gm-book__text { font-size: var(--gm-fs-small); margin: 0 0 var(--gm-sp-md); }

/* ============================================================
   11. Azioni: bottoni, form, lead magnet
   ============================================================ */
.gm .gm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gm-sp-sm);
  font-family: var(--gm-sans); font-size: var(--gm-fs-label); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
  padding: 14px 28px; border-radius: var(--gm-r-md); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--gm-dur-quick) var(--gm-ease), color var(--gm-dur-quick) var(--gm-ease), border-color var(--gm-dur-quick) var(--gm-ease);
}
.gm .gm-btn--primary { background: var(--gm-terracotta); color: var(--gm-paper); }
.gm .gm-btn--primary:hover { background: var(--gm-terracotta-deep); color: var(--gm-paper); }
.gm .gm-btn--secondary { background: transparent; color: var(--gm-petrol); border-color: var(--gm-petrol); padding: 14px 26px; }
.gm .gm-btn--secondary:hover { background: var(--gm-petrol); color: var(--gm-paper); }
.gm .gm-btn--on-dark { background: transparent; color: var(--gm-paper); border-color: rgba(255, 255, 255, 0.35); }
.gm .gm-btn--on-dark:hover { border-color: var(--gm-paper); }
.gm .gm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--gm-sp-lg) 0; }

.gm .gm-form { display: flex; flex-wrap: wrap; gap: var(--gm-sp-sm); margin-top: var(--gm-sp-md); }
.gm .gm-input { flex: 1 1 220px; min-width: 0; font-family: var(--gm-sans); font-size: 1rem; color: var(--gm-ink-body); background: var(--gm-paper); border: 1px solid var(--gm-rule); border-radius: var(--gm-r-md); padding: 12px var(--gm-sp-md); transition: border-color var(--gm-dur-quick) var(--gm-ease), box-shadow var(--gm-dur-quick) var(--gm-ease); }
.gm .gm-input:hover { border-color: var(--gm-ink-muted); }
.gm .gm-input:focus-visible { outline: none; border-color: var(--gm-navy-ink); box-shadow: 0 0 0 2px rgba(15, 43, 76, 0.2); }
.gm .gm-form__note { flex-basis: 100%; font-size: var(--gm-fs-label); color: var(--gm-ink-muted); margin: 0; }

.gm .gm-magnet { background: var(--gm-navy-ink); border-radius: var(--gm-r-lg); padding: var(--gm-sp-xl); margin: var(--gm-sp-2xl) 0; color: var(--gm-mist-on-navy); }
.gm .gm-magnet__title { display: block; font-family: var(--gm-serif); font-size: var(--gm-fs-title); font-weight: 700; line-height: 1.25; color: var(--gm-paper); margin-bottom: var(--gm-sp-sm); }
.gm .gm-magnet__text { font-size: var(--gm-fs-small); margin: 0; max-width: 56ch; }
.gm .gm-magnet .gm-form__note { color: var(--gm-mist-on-navy); }
.gm .gm-magnet :focus-visible { outline-color: var(--gm-paper); }

/* ============================================================
   12. Card e griglie
   ============================================================ */
.gm .gm-grid { display: grid; gap: var(--gm-sp-lg); margin: var(--gm-sp-xl) 0; }
.gm .gm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm .gm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm .gm-card { position: relative; background: var(--gm-paper); border: 1px solid var(--gm-rule); border-radius: var(--gm-r-lg); padding: var(--gm-sp-xl) var(--gm-sp-lg) var(--gm-sp-lg); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gm .gm-card--warm { background: var(--gm-paper-warm); }
.gm .gm-card__meta { font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta-deep); }
.gm .gm-card__title { font-family: var(--gm-serif); font-size: var(--gm-fs-title); font-weight: 700; color: var(--gm-navy-ink); line-height: 1.2; margin: 0; }
.gm .gm-card__text { font-size: var(--gm-fs-small); margin: 0; }
.gm .gm-card__foot { margin-top: auto; padding-top: var(--gm-sp-md); }
.gm .gm-card__more { display: inline-flex; align-items: center; gap: var(--gm-sp-sm); font-size: var(--gm-fs-label); font-weight: 600; color: var(--gm-terracotta); }
.gm .gm-card__more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--gm-dur-quick) var(--gm-ease); }
.gm a.gm-card { text-decoration: none; color: inherit; transition: border-color var(--gm-dur-quick) var(--gm-ease); }
.gm a.gm-card:hover { border-color: var(--gm-navy-ink); }
.gm a.gm-card:hover .gm-card__more { color: var(--gm-terracotta-deep); }
.gm a.gm-card:hover .gm-card__more::after { transform: translateX(3px) rotate(45deg); }

/* ============================================================
   13. Sezioni (pagine statiche e landing)
   ============================================================ */
.gm .gm-section { padding-block: var(--gm-sp-section); }
.gm .gm-section--warm { background: var(--gm-paper-warm); }
.gm .gm-section--sand { background: var(--gm-sand); }
.gm .gm-section--navy { background: var(--gm-navy-ink); color: var(--gm-mist-on-navy); }
.gm .gm-section--navy h2, .gm .gm-section--navy h3, .gm .gm-section--navy strong { color: var(--gm-paper); }
.gm .gm-section--navy :focus-visible { outline-color: var(--gm-paper); }
.gm .gm-container { max-width: 1200px; margin-inline: auto; padding-inline: max(var(--gm-sp-lg), env(safe-area-inset-left, 0px)); }
.gm .gm-measure { max-width: 72ch; }
.gm .gm-display { font-family: var(--gm-serif); font-size: var(--gm-fs-display); font-weight: 700; line-height: 1.1; color: var(--gm-navy-ink); text-wrap: balance; margin: 0 0 var(--gm-sp-lg); }
.gm .gm-section--navy .gm-display { color: var(--gm-paper); }

/* ============================================================
   14. Responsive e accessibilità
   ============================================================ */
@media (max-width: 1024px) {
  .gm .gm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gm .gm-grid--2, .gm .gm-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .gm .gm-section { padding-block: var(--gm-sp-2xl); }
  .gm .gm-magnet { padding: var(--gm-sp-lg); }
  .gm .gm-lesson { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gm .gm-book { grid-template-columns: 80px 1fr; gap: var(--gm-sp-md); align-items: start; padding: 20px; }
  .gm .gm-book__cover { width: 80px; }
  .gm .gm-related { padding: var(--gm-sp-md); }
  .gm .gm-toc__list { columns: 1; }
  .gm .gm-btn { width: 100%; }
  .gm .gm-actions .gm-btn { width: auto; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gm *, .gm *::before, .gm *::after { transition-duration: 0.01ms !important; }
}
