/* Evaluation.it — design system del sito pubblico.
   Costruito SOLO sui token di tokens.css: nessun colore, font o raggio fuori da quella lista.
   Ordine: base → tipografia → pulsanti → header → hero → sezioni home → dati →
           scheda societa' → form e stati → responsive.
   Riferimento: docs/design_handoff_evaluation_it/README.md */

/* ============================================================ 1. BASE ===== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg { max-width: 100%; }

/* Skip-link: primo elemento del body, visibile solo al focus da tastiera. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-primary-900);
  color: var(--color-neutral-50);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-xs);
  color: var(--color-neutral-50);
}

.container { max-width: var(--container); margin: 0 auto; }

.section { padding: 64px var(--space-xl); }
.section--hero { padding: var(--space-3xl) var(--space-xl) 0; }
.section--paper { background: var(--color-neutral-50); }
.section--surface { background: var(--color-surface); }
.section--dark { background: var(--color-primary-900); color: var(--color-neutral-50); }
/* Divisore fra sezioni chiare consecutive. */
.section--divided { border-top: 1px solid var(--color-neutral-200); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le sole utility ammesse: spaziatura verticale sulla scala a 4.
   Servono a non riaprire stili inline nelle pagine. */
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: 28px; }
.u-mt-2xl { margin-top: 40px; }

/* =================================================== 2. TIPOGRAFIA ======== */

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 3.75rem;           /* 60px */
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  margin: 0;
}

.h1-page {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 3.25rem;           /* 52px */
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
}

.h2-section {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.375rem;          /* 38px */
  line-height: 1.1;
  margin: 0;
}
.h2-section--sm { font-size: 2rem; line-height: var(--leading-heading); }

.h3-block {
  font-family: var(--font-sans);
  font-size: var(--text-h4);    /* 19px */
  font-weight: 600;
  color: var(--color-primary-800);
  margin: 0;
}

.lead {
  font-size: 1.1875rem;         /* 19px */
  line-height: 1.55;
  max-width: 54ch;
  text-wrap: pretty;
  margin: 22px 0 0;
}

.dek { font-size: 1rem; line-height: var(--leading-body); color: var(--color-neutral-600); margin: 8px 0 0; }
.dek--wide { max-width: 70ch; }

.overline {
  font-size: var(--text-overline);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.overline--on-dark { color: #8FA3B8; }

.mono { font-family: var(--font-mono); }

/* Testi su fondo scuro: la coppia usata dal design per il corpo su primary-900. */
.on-dark-body { color: #C3CFDB; }
.on-dark-muted { color: #8FA3B8; }

.link-underlined {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-primary-700);
  border-bottom: 1px solid var(--color-neutral-400);
  padding-bottom: 2px;
  display: inline-block;
}

/* Variazioni: segno + triangolo, mai solo colore (leggibili in scala di grigi). */
.delta { font-variant-numeric: tabular-nums; font-weight: 500; }
.delta--up { color: var(--color-success); }
.delta--down { color: var(--color-error); }
.delta--flat { color: var(--color-neutral-600); }
.delta--on-dark.delta--up,
.delta--on-dark.delta--down { color: var(--color-accent-300); }

.value-accent { color: var(--color-accent-700); }

/* ====================================================== 3. PULSANTI ======= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.2;
  padding: 12px 18px;
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn--lg { font-size: 1rem; padding: 14px 24px; min-height: 48px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-primary-900);   /* mai bianco su ambra: contrasto 7,1:1 */
}
.btn--primary:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); color: var(--color-primary-900); }
.btn--primary:disabled { background: var(--color-neutral-100); border-color: var(--color-neutral-200); color: var(--color-neutral-500); cursor: not-allowed; }

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-primary-700);
  color: var(--color-primary-800);
}
.btn--secondary:hover { background: var(--color-primary-100); color: var(--color-primary-800); }

/* Variante header: bordo neutro, meno peso della secondaria piena. */
.btn--quiet {
  background: var(--color-surface);
  border-color: var(--color-neutral-300);
  color: var(--color-primary-800);
  padding: 9px 14px;
}
.btn--quiet:hover { background: var(--color-neutral-50); color: var(--color-primary-800); }

/* Su fondo scuro: outline chiaro, nessun riempimento. */
.btn--outline-dark {
  background: transparent;
  border-color: var(--color-primary-400);
  color: var(--color-neutral-50);
}
.btn--outline-dark:hover { background: var(--color-primary-800); border-color: #8FA3B8; color: var(--color-neutral-50); }

/* ======================================================== 4. HEADER ======= */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-neutral-200);
  position: relative;
  z-index: 40;
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* Marchio segnaposto: quadrato 28x28 + wordmark. Da sostituire con il logo SVG reale. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { color: inherit; }
.brand__mark {
  width: 28px; height: 28px;
  border: 1.5px solid var(--color-accent-700);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-accent-700);
  flex: 0 0 auto;
}
.brand__word { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-primary-800); }

.site-nav { display: flex; gap: 2px; align-items: center; }
.site-nav__link,
.site-nav__trigger {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-primary-800);
  background: transparent;
  border: 0;
  padding: 10px 12px;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover,
.site-nav__trigger:hover { color: var(--color-primary-800); }
.site-nav__link[aria-current="page"],
.site-nav__trigger[data-section-current="true"] { border-bottom-color: var(--color-accent-500); }
.site-nav__divider { width: 1px; height: 22px; background: var(--color-neutral-200); margin: 0 10px; }

/* Mega-menu: pannello full-width sotto l'header, tre colonne. */
.megamenu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--color-surface);
  border-top: 1px solid var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-300);
  box-shadow: var(--shadow-2);
  z-index: 30;
}
.megamenu[hidden] { display: none; }
.megamenu__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.megamenu__col { padding: var(--space-lg) var(--space-xl); border-right: 1px solid var(--color-neutral-200); }
.megamenu__col--feature { background: var(--color-neutral-50); border-right: 0; }
.megamenu__list { display: grid; gap: 14px; margin-top: 14px; }
.megamenu__entry { display: grid; gap: 3px; }
.megamenu__entry-title { font-size: 1rem; font-weight: 500; color: var(--color-primary-800); }
.megamenu__entry-desc { font-size: 0.875rem; color: var(--color-neutral-600); line-height: 1.45; }
.megamenu__feature-title { font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.25; color: var(--color-primary-800); margin-top: 14px; }
.megamenu__feature-body { font-size: 0.875rem; color: var(--color-neutral-600); line-height: 1.5; margin-top: var(--space-xs); }
.megamenu__col--feature .btn { margin-top: var(--space-md); }

/* Hamburger e menu mobile: nascosti sopra 1024px. */
.nav-toggle {
  display: none;
  width: var(--tap-min); height: var(--tap-min);
  background: transparent;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}
.nav-toggle__bars { display: grid; gap: 4px; justify-items: center; }
.nav-toggle__bars span { display: block; width: 18px; height: 2px; background: var(--color-primary-800); }

.header-actions { display: none; align-items: center; gap: var(--space-xs); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-surface);
  overflow-y: auto;
  padding: var(--space-md) 20px var(--space-2xl);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.mobile-menu__close {
  min-width: var(--tap-min); min-height: var(--tap-min);
  background: transparent; border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 1.25rem; color: var(--color-primary-800);
}
.mobile-menu details { border-top: 1px solid var(--color-neutral-200); padding: var(--space-sm) 0; }
.mobile-menu summary {
  font-size: var(--text-h4); font-weight: 600; color: var(--color-primary-800);
  min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer;
}
.mobile-menu__group { display: grid; gap: var(--space-2xs); padding: var(--space-xs) 0 var(--space-md); }
.mobile-menu__group a { min-height: var(--tap-min); display: flex; align-items: center; color: var(--color-primary-800); }
.mobile-menu__actions { display: grid; gap: 10px; margin-top: var(--space-lg); }

/* ========================================================== 5. HERO ======= */

.hero__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-2xl);
  align-items: center;
}
.hero .lead { color: #C3CFDB; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* Cornice browser dell'hero. Da sostituire con screenshot reale di Step 3+. */
.mockup {
  border: 1px solid var(--color-primary-600);
  background: var(--color-primary-800);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.mockup__bar {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 10px 14px;
  background: var(--color-primary-700);
  border-bottom: 1px solid var(--color-primary-600);
}
.mockup__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-primary-400); }
.mockup__url { font-family: var(--font-mono); font-size: 0.75rem; color: #C3CFDB; margin-left: 10px; }
.mockup__body { padding: 18px; display: grid; gap: 14px; background: var(--color-neutral-50); }
.mockup__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.mockup__title { font-size: 1rem; font-weight: 500; color: var(--color-primary-800); }
.mockup__caption { font-size: 0.75rem; color: var(--color-neutral-500); }

/* Proof strip: riutilizzabile sotto ogni hero. */
.proof-strip {
  max-width: var(--container);
  margin: 56px auto 0;
  padding: 20px 0;
  border-top: 1px solid var(--color-primary-600);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: var(--text-small);
  color: #C3CFDB;
  font-variant-numeric: tabular-nums;
}
.proof-strip__sep { color: var(--color-primary-600); }

/* ================================================= 6. KPI E CARD ========= */

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }

.kpi-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-sm);
}
.kpi-tile--accent { border-color: var(--color-accent-500); }
.kpi-tile__label {
  font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.kpi-tile--accent .kpi-tile__label { color: var(--color-accent-700); }
.kpi-tile__value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-primary-800);
  font-variant-numeric: tabular-nums;
}
.kpi-tile--accent .kpi-tile__value { color: var(--color-accent-700); }
.kpi-tile__value--plain { font-family: var(--font-sans); font-weight: 500; }

/* Card di scelta pubblico: l'intera card e' cliccabile, i pulsanti sono destinazioni distinte. */
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.audience-card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.audience-card:hover { border-color: var(--color-accent-500); box-shadow: var(--shadow-1); }
.audience-card__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: var(--leading-heading);
  color: var(--color-primary-800);
  margin: 0;
  font-weight: 400;
}
.audience-card__title a { color: inherit; }
/* Il titolo copre l'intera card come link; i pulsanti restano sopra. */
.audience-card__title a::after { content: ""; position: absolute; inset: 0; }
.audience-card p { font-size: 1rem; line-height: var(--leading-body); color: var(--color-neutral-700); margin: 0; }
.audience-card__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: auto; padding-top: 10px;
  position: relative; z-index: 1;
}

/* Due colonne generiche (performance, blocchi affiancati). */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); align-items: start; }
.grid-2--spaced { margin-top: 28px; }

/* Perche' Evaluation.it */
.valueprops { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-xl); margin-top: 40px; }
.valueprop { border-top: 2px solid var(--color-primary-800); padding-top: 18px; }
.valueprop--accent { border-top-color: var(--color-accent-500); }
.valueprop__title { font-size: var(--text-h4); font-weight: 600; color: var(--color-primary-800); }
.valueprop p { font-size: 1rem; line-height: var(--leading-body); color: var(--color-neutral-700); margin: 10px 0 0; }

/* Card societa' */
.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-md); }
.company-card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: 20px;
  display: block;
  color: inherit;
}
.company-card:hover { border-color: var(--color-neutral-300); box-shadow: var(--shadow-1); color: inherit; }
.company-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.company-card__name { font-size: 1.125rem; font-weight: 500; color: var(--color-primary-800); }
.company-card__ticker { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-neutral-500); }
.company-card__sector { font-size: var(--text-caption); color: var(--color-neutral-600); margin-top: var(--space-2xs); }
.company-card__figures {
  display: flex; align-items: flex-end; gap: var(--space-md);
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--color-neutral-100);
}
.company-card__figure-label {
  font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500);
}
.company-card__figure-value {
  white-space: nowrap;
  font-family: var(--font-serif); font-size: 1.3125rem; color: var(--color-neutral-900); font-variant-numeric: tabular-nums;
}
.company-card__figure-value--accent { color: var(--color-accent-700); }
.company-card__figure--end { margin-left: auto; text-align: right; }
.company-card__figure--end .company-card__figure-value { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 500; }

/* ================================================== 7. CONTENUTI ========== */

.badge {
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius-xs);
  display: inline-block;
}
.badge--sm { font-size: 0.6875rem; padding: 4px 8px; }
.badge--weeklypick { background: var(--color-primary-100); color: var(--color-primary-800); }
.badge--news { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.badge--ipo,
.badge--editorial,
.badge--damodaran { background: var(--color-accent-50); color: #6B460A; }
.badge--sector { background: var(--color-success-bg); color: var(--color-success); }
.badge--premium { background: var(--color-accent-700); color: var(--color-accent-50); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-lg); }
.content-side { display: grid; gap: var(--space-sm); align-content: start; }

.article-feature {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  color: inherit;
}
.article-feature:hover { color: inherit; border-color: var(--color-neutral-300); }
/* Segnaposto immagine: sostituire con le immagini societa' gia' presenti sul sito attuale. */
.article-feature__media {
  height: 200px;
  background: var(--color-primary-100);
  border-bottom: 1px solid var(--color-neutral-200);
  display: grid; place-items: center;
  color: var(--color-primary-400);
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-md);
}
.article-feature__body { padding: 26px; display: flex; flex-direction: column; gap: var(--space-sm); }
.article-feature__title { font-family: var(--font-serif); font-size: 1.875rem; line-height: 1.2; color: var(--color-primary-800); }
.article-feature__dek { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-neutral-700); margin: 0; }
.article-feature__foot {
  font-size: 0.875rem; color: var(--color-primary-700);
  padding-top: var(--space-xs); border-top: 1px solid var(--color-neutral-200);
}
.article-feature__foot strong { font-weight: 500; }

.article-card {
  border: 1px solid var(--color-neutral-200);
  background: var(--color-surface);
  padding: 18px;
  display: grid;
  gap: var(--space-xs);
  color: inherit;
}
.article-card:hover { border-color: var(--color-neutral-300); color: inherit; }
.article-card__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.article-card__date { font-size: var(--text-caption); color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.article-card__title { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.22; color: var(--color-primary-800); }
.article-card__dek { font-size: var(--text-small); line-height: 1.5; color: var(--color-neutral-700); }

/* Testimonianze e fondatori */
.split-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.split-grid > div > .h2-section { margin-bottom: var(--space-lg); }
/* Nota di servizio sotto un blocco (es. "citazioni segnaposto"). */
.note-muted { font-size: var(--text-caption); color: var(--color-neutral-500); margin: 18px 0 0; }
/* La nota può contenere più capoversi (indice società): ereditano corpo e colore. */
.note-muted p { font-size: inherit; color: inherit; line-height: var(--leading-body); margin: 0 0 var(--space-sm); max-width: 90ch; }
.note-muted p:last-child { margin-bottom: 0; }
.note-muted strong { color: var(--color-neutral-700); }
.link-underlined--spaced { margin-top: 20px; }
.quotes { display: grid; gap: var(--space-md); }
.quote { margin: 0; border-left: 2px solid var(--color-neutral-300); padding: var(--space-2xs) 0 var(--space-2xs) 20px; }
.quote--accent { border-left-color: var(--color-accent-500); }
.quote p { font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.4; color: var(--color-primary-800); margin: 0; }
.quote footer { font-size: 0.875rem; color: var(--color-neutral-600); margin-top: var(--space-sm); }

.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-md); }
.founder { border: 1px solid var(--color-neutral-200); background: var(--color-neutral-50); }
.founder__photo {
  aspect-ratio: 4 / 3;
  background: var(--color-neutral-100);
  display: grid; place-items: center;
  color: var(--color-neutral-400);
  font-size: var(--text-overline);
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--color-neutral-200);
  width: 100%;
}
.founder__body { padding: var(--space-md); }
.founder__name { font-size: var(--text-body); font-weight: 500; color: var(--color-primary-800); }
.founder__bio { font-size: 0.875rem; color: var(--color-neutral-600); line-height: 1.5; margin-top: var(--space-2xs); }

/* ======================================== 8. GRAFICI E TABELLE DATI ======= */

.panel { background: var(--color-surface); border: 1px solid var(--color-neutral-200); padding: var(--space-lg); }
.panel__head {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-md);
}
.panel__note { font-size: 0.875rem; color: var(--color-neutral-600); margin: 4px 0 18px; }

.chart-legend { display: flex; gap: var(--space-md); font-size: 0.875rem; color: var(--color-neutral-700); flex-wrap: wrap; }
.chart-legend span { display: flex; align-items: center; gap: var(--space-xs); }
.chart-legend__swatch { width: 18px; height: 2px; display: block; }
.chart-legend__swatch--price { background: var(--color-primary-800); }
.chart-legend__swatch--fv { background: var(--color-accent-500); }

.chart { width: 100%; height: auto; display: block; }
.chart__axis {
  display: flex; justify-content: space-between;
  font-size: var(--text-overline); color: var(--color-neutral-500);
  margin: var(--space-xs) 0 18px;
  font-variant-numeric: tabular-nums;
}

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.data-table--wide { min-width: 560px; }
.data-table caption {
  text-align: left;
  padding: 14px 0;
  font-size: var(--text-caption);
  color: var(--color-neutral-600);
}
.data-table thead tr { background: var(--color-neutral-50); border-bottom: 1px solid var(--color-neutral-300); }
.data-table th {
  text-align: left;
  padding: 11px var(--space-sm);
  font-size: var(--text-overline);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  font-weight: 600;
}
.data-table td { padding: 11px var(--space-sm); color: var(--color-neutral-700); }
.data-table tbody tr { border-bottom: 1px solid var(--color-neutral-100); }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table .row--total { background: var(--color-neutral-50); }
.data-table .row--total td { font-weight: 600; color: var(--color-neutral-900); }
.data-table .row--current { background: var(--color-neutral-50); }
.data-table .row--current td { font-weight: 600; }
.data-table .cell--fv { color: var(--color-accent-700); }
.data-table .cell--name { color: var(--color-primary-800); }
/* Intestazione di riga: resta <th scope="row"> per l'accessibilita', ma si legge come una cella. */
.data-table th.cell--rowhead {
  font-weight: 400;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-neutral-700);
}

/* Tabella boxata: usata dove la tabella e' il contenuto del riquadro. */
.table-boxed { background: var(--color-surface); border: 1px solid var(--color-neutral-200); overflow-x: auto; }
.table-boxed caption { padding: 14px 18px; border-bottom: 1px solid var(--color-neutral-200); }
.table-boxed th, .table-boxed td { padding-left: 18px; padding-right: 18px; }

/* Pagella: il voto numerico resta sempre visibile, il colore non e' l'unico veicolo. */
/* Deviazione dal design: minmax 176px invece di 180px. Con container 1240, sidebar 320
   e padding del pannello, a 180px la pagella rompe su due righe per 4px. */
.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 20px; }
.score__head { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--color-neutral-700); margin-bottom: 6px; }
.score__value { font-variant-numeric: tabular-nums; font-weight: 500; }
.score__bar { height: 8px; background: var(--color-neutral-100); border-radius: var(--radius-pill); overflow: hidden; }
.score__fill { height: 100%; border-radius: var(--radius-pill); display: block; }
.score__fill--positive { background: var(--color-success); }
.score__fill--neutral { background: var(--color-primary-600); }
.score__fill--caution { background: var(--color-warning); }
.score__note { font-size: var(--text-caption); color: var(--color-neutral-600); line-height: 1.45; margin-top: var(--space-xs); }

/* =============================================== 9. SCHEDA SOCIETA' ======= */

.breadcrumb {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 10px var(--space-xl);
}
.breadcrumb ol {
  max-width: var(--container); margin: 0 auto; padding: 0;
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs);
  font-size: var(--text-caption); color: var(--color-neutral-600);
}
.breadcrumb a { color: var(--color-neutral-600); }
.breadcrumb li + li::before { content: "/"; color: var(--color-neutral-300); margin-right: var(--space-xs); }
.breadcrumb [aria-current="page"] { color: var(--color-neutral-900); }

.company-hero { background: var(--color-primary-900); color: var(--color-neutral-50); padding: 40px var(--space-xl); }
.company-hero__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl); align-items: end;
}
.company-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center;
  font-size: 0.875rem; color: #8FA3B8;
}
.company-hero__meta .mono { color: #C3CFDB; }
.company-hero__meta .sep { color: var(--color-primary-600); }
.company-hero__abstract { font-size: var(--text-body); line-height: var(--leading-body); color: #C3CFDB; margin: 14px 0 0; max-width: 60ch; }

/* Tris KPI scuro: le fughe di 2px su primary-600 fanno da divisori. */
.kpi-dark { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 2px; background: var(--color-primary-600); }
.kpi-dark__tile { background: var(--color-primary-800); padding: 18px; }
.kpi-dark__tile--accent { border-top: 2px solid var(--color-accent-500); }
.kpi-dark__label { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: #8FA3B8; }
.kpi-dark__tile--accent .kpi-dark__label { color: var(--color-accent-300); }
.kpi-dark__value {
  font-family: var(--font-serif); font-size: 2rem; color: var(--color-neutral-50);
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.kpi-dark__tile--accent .kpi-dark__value { color: var(--color-accent-300); }
.kpi-dark__note { font-size: var(--text-caption); color: #8FA3B8; margin-top: var(--space-2xs); font-variant-numeric: tabular-nums; }

.company-body {
  max-width: var(--container); margin: 0 auto;
  padding: 40px var(--space-xl) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-xl); align-items: start;
}
.company-main { display: grid; gap: 28px; }
.company-aside { display: grid; gap: var(--space-md); align-content: start; position: sticky; top: 72px; }

.aside-box { background: var(--color-surface); border: 1px solid var(--color-neutral-200); padding: 20px; }
.aside-box--dark { background: var(--color-primary-900); border: 0; padding: 22px; }
.aside-box__title { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; color: var(--color-neutral-50); margin-top: 10px; }
.aside-box--dark p { font-size: 0.875rem; line-height: 1.55; color: #C3CFDB; margin: var(--space-xs) 0 0; }
.aside-box--dark .btn { margin-top: var(--space-md); }
.aside-box--note { background: var(--color-neutral-50); font-size: var(--text-caption); line-height: var(--leading-body); color: var(--color-neutral-600); }

.keyfacts { display: grid; gap: 10px; margin-top: 14px; font-size: var(--text-small); }
.keyfacts__row {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-neutral-50);
}
.keyfacts__label { color: var(--color-neutral-600); }
.keyfacts__value { font-variant-numeric: tabular-nums; color: var(--color-neutral-900); font-weight: 500; }

.related { display: grid; gap: 14px; margin-top: 14px; }
.related__item { display: grid; gap: var(--space-2xs); }
.related__kind { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-800); }
.related__title { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.25; color: var(--color-primary-800); }

/* Blocco premium. Il contenuto sotto l'overlay e' un estratto segnaposto reso dal server:
   disattivare il CSS non rivela l'analisi completa. */
.premium {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  position: relative;
  overflow: hidden;
  /* L'overlay e' assoluto: senza un'altezza minima il blocco collassa
     sull'estratto e le CTA finiscono fuori dal riquadro. */
  min-height: 300px;
}
.premium__teaser { padding: var(--space-lg); filter: blur(4px); opacity: .5; user-select: none; }
.premium__teaser p { font-size: 1rem; line-height: var(--leading-body); color: var(--color-neutral-700); margin: 0 0 var(--space-sm); font-variant-numeric: tabular-nums; }
.premium__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.98) 60%);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--space-sm); padding: var(--space-xl);
}
.premium__headline { font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.2; color: var(--color-primary-800); max-width: 30ch; }
.premium__price { font-size: var(--text-small); color: var(--color-neutral-700); }
.premium__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-2xs); }

/* Barra sticky mobile della scheda: solo sotto 768px. */
.sticky-cta { display: none; }

/* ================================================== 10. NEWSLETTER ======== */

.newsletter { background: var(--color-primary-900); padding: 56px var(--space-xl); }
.newsletter__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl); align-items: center;
}
.newsletter__title { font-family: var(--font-serif); font-weight: 400; font-size: 2.125rem; line-height: var(--leading-heading); color: var(--color-neutral-50); margin: 0; }
.newsletter__dek { font-size: 1rem; line-height: var(--leading-body); color: #C3CFDB; margin: var(--space-sm) 0 0; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__note { font-size: var(--text-caption); color: #8FA3B8; margin-top: 10px; }

.input-dark {
  font-family: inherit; font-size: 1rem;
  flex: 1 1 200px;
  padding: 13px 14px;
  border: 1px solid var(--color-primary-600);
  border-radius: var(--radius-sm);
  background: var(--color-primary-800);
  color: var(--color-neutral-50);
  min-height: 48px;
}
.input-dark::placeholder { color: #8FA3B8; }

/* ====================================================== 11. FOOTER ======== */

.site-footer { background: var(--color-primary-800); color: #C3CFDB; padding: 56px var(--space-xl) 28px; }
.site-footer__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-xl);
}
.site-footer__brand { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-neutral-50); }
.site-footer__address { font-size: 0.875rem; line-height: 1.7; margin-top: var(--space-sm); }
.site-footer__legal { font-size: var(--text-caption); line-height: 1.7; margin-top: var(--space-sm); color: #8FA3B8; font-variant-numeric: tabular-nums; }
.site-footer__links { display: grid; gap: 9px; margin-top: 14px; font-size: var(--text-small); }
.site-footer__links a { color: #C3CFDB; }
.site-footer__links a:hover { color: var(--color-accent-300); }
.site-footer__bar {
  max-width: var(--container); margin: 36px auto 0;
  padding-top: 20px; border-top: 1px solid var(--color-primary-600);
  display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between;
  font-size: var(--text-caption); color: #8FA3B8;
}
.site-footer__bar a { color: #8FA3B8; }
.site-footer__bar a:hover { color: var(--color-accent-300); }
.site-footer__bar-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ============================================ 12. FORM, STATI, BANNER ===== */

.field { display: grid; gap: 6px; }
.field__label { font-size: var(--text-small); font-weight: 500; color: var(--color-neutral-700); }
.field__input {
  font-family: inherit; font-size: 1rem;
  padding: 12px 14px; min-height: var(--tap-min);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-neutral-900);
}
.field__input:disabled { background: var(--color-neutral-100); color: var(--color-neutral-400); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__error { font-size: var(--text-caption); color: var(--color-error); }
.field__hint { font-size: var(--text-caption); color: var(--color-neutral-500); }

.empty-state {
  border: 1px solid var(--color-neutral-200);
  background: var(--color-surface);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
}

.skeleton-row { display: grid; gap: var(--space-sm); }
.skeleton-bar {
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 50%, var(--color-neutral-100) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: -200px 0; } to { background-position: 200px 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; background: var(--color-neutral-100); } }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--color-surface);
  border-top: 1px solid var(--color-neutral-300);
  box-shadow: var(--shadow-2);
  padding: var(--space-md) var(--space-xl);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: space-between;
}
.cookie-banner p { margin: 0; font-size: var(--text-small); color: var(--color-neutral-700); max-width: 70ch; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ============================================ 13. PREZZI E PIANI ========== */

/* Riquadro pricing: tab prodotto + toggle fatturazione + card piani. */
.pricing { border: 1px solid var(--color-neutral-200); background: var(--color-neutral-50); padding: 28px; }
.pricing__bar {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}

/* Tab prodotto: link veri, la tab attiva è riflessa nell'URL (?prodotto=step). */
.tabs { display: flex; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.tabs__tab {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  padding: 11px 18px;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  border: 0;
  background: var(--color-surface);
  color: var(--color-primary-800);
  cursor: pointer;
}
.tabs__tab + .tabs__tab { border-left: 1px solid var(--color-neutral-300); }
.tabs__tab[aria-selected="true"] { background: var(--color-primary-800); color: var(--color-neutral-50); }

/* Toggle mensile/annuale: <button role="switch">, 52x28 con pallina da 22. */
.billing-toggle { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.billing-toggle__label { font-size: var(--text-small); color: var(--color-neutral-700); }
.switch {
  width: 52px; height: 28px; min-height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary-700);
  background: var(--color-surface);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(12, 28, 44, .3);
  transition: left .16s ease;
}
.switch[aria-checked="true"] { background: var(--color-primary-700); }
.switch[aria-checked="true"] .switch__knob { left: 26px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-md); }
.plan {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.plan--recommended { border-color: var(--color-accent-500); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 24px; }
.plan__name { font-size: var(--text-h4); font-weight: 600; color: var(--color-primary-800); }
.plan__price { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.plan__amount { font-family: var(--font-serif); font-size: 2.625rem; line-height: 1; color: var(--color-primary-800); }
.plan__unit { font-size: var(--text-small); color: var(--color-neutral-600); }
.plan__billing { font-size: var(--text-caption); color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.plan__audience { font-size: var(--text-small); color: var(--color-neutral-700); line-height: 1.5; }
.plan__features { display: grid; gap: var(--space-xs); margin: var(--space-2xs) 0 0; padding: 0; list-style: none; }
.plan__features li { display: flex; gap: var(--space-xs); font-size: var(--text-small); color: var(--color-neutral-700); line-height: 1.45; }
.plan__check { color: var(--color-success); font-weight: 600; }
.plan .btn { margin-top: auto; }

/* Prezzi alternativi: entrambi nell'HTML, il JS scambia solo la visibilita'.
   Senza JavaScript resta visibile il mensile.
   L'ordine di queste regole conta: le ultime devono poter vincere a parita' di
   specificita', percio' il caso "annuale attivo" sta in fondo. */
[data-billing="annual"] { display: none; }
.plan__price[data-billing="monthly"] { display: flex; }

.billing-annual [data-billing="annual"] { display: block; }
.billing-annual .plan__price[data-billing="annual"] { display: flex; }
.billing-annual [data-billing="monthly"] { display: none; }

/* Tabella comparativa delle funzioni. */
.feature-matrix th[scope="rowgroup"] {
  background: var(--color-neutral-100);
  color: var(--color-primary-800);
  text-align: left;
}
.feature-matrix td { text-align: center; }
.feature-matrix td:first-of-type { text-align: left; }
.feature-matrix .is-missing { color: var(--color-neutral-400); }

/* =================================================== 14. FAQ E CTA ======== */

.faq { display: grid; gap: 0; border-top: 1px solid var(--color-neutral-200); }
.faq__item { border-bottom: 1px solid var(--color-neutral-200); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 18px 0;
  min-height: var(--tap-min);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-primary-800);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-neutral-500);
  line-height: 1;
}
.faq__item[open] summary::after { content: "–"; }
.faq__answer { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-neutral-700); margin: 0 0 20px; max-width: 80ch; }

/* Banda CTA di chiusura pagina. */
.cta-band { background: var(--color-primary-900); color: var(--color-neutral-50); padding: 56px var(--space-xl); }
.cta-band__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl); align-items: center;
}
.cta-band__title { font-family: var(--font-serif); font-weight: 400; font-size: 2.125rem; line-height: var(--leading-heading); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ============================================ 15. CONTENUTI DI PAGINA ===== */

/* Griglia delle funzioni di prodotto: stesso pattern dei tratti distintivi. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }
.feature { border-top: 2px solid var(--color-primary-800); padding-top: 18px; }
.feature__title { font-size: var(--text-h4); font-weight: 600; color: var(--color-primary-800); }
.feature p { font-size: 1rem; line-height: var(--leading-body); color: var(--color-neutral-700); margin: 10px 0 0; }

/* Passi del metodo: numerati, schematici, senza illustrazioni decorative. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); counter-reset: step; }
.step {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-lg);
  display: grid; gap: var(--space-xs); align-content: start;
}
.step__num {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-accent-700);
  letter-spacing: .08em;
}
.step__title { font-size: var(--text-h4); font-weight: 600; color: var(--color-primary-800); }
.step p { font-size: var(--text-small); line-height: 1.55; color: var(--color-neutral-700); margin: 0; }

/* Elenco casi d'uso e vantaggi: testo corrente, nessun bullet grafico. */
.checklist { display: grid; gap: var(--space-sm); padding: 0; margin: 0; list-style: none; }
.checklist li { display: flex; gap: var(--space-sm); font-size: var(--text-body); line-height: 1.55; color: var(--color-neutral-700); }
.checklist li::before { content: "✓"; color: var(--color-success); font-weight: 600; flex: 0 0 auto; }

/* Blocco di codice della pagina API. */
.code-block {
  background: var(--color-primary-900);
  color: var(--color-neutral-50);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}
.code-block .tok-key { color: var(--color-accent-300); }
.code-block .tok-str { color: #C3CFDB; }

/* Card corso. */
.course {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.course__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--text-caption); color: var(--color-neutral-500); }
.course__title { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; color: var(--color-primary-800); margin: 0; font-weight: 400; }
.course__price { font-family: var(--font-serif); font-size: 1.75rem; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.course__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: var(--space-xs); }

/* ======================================= 16. INDICE SOCIETA' E ARCHIVI ==== */

.filters {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}
.filters__actions { display: flex; gap: var(--space-xs); align-items: end; }
.field__select {
  font-family: inherit; font-size: 1rem;
  padding: 12px 14px; min-height: var(--tap-min);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-neutral-900);
  width: 100%;
}

/* Intestazione ordinabile: freccia e peso 600 sulla colonna attiva. */
.data-table th a { color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.data-table th[aria-sort] { font-weight: 600; color: var(--color-neutral-900); }
.data-table tbody tr:hover { background: var(--color-neutral-50); }

.grade {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-primary-800);
  background: var(--color-primary-100);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* Invito allo screener: non è un paywall sui dati, che restano in tabella.
   Tono da nota informativa, non da blocco: stesso peso visivo di .note-muted. */
.screener-gate {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-400);
  border-radius: var(--radius-md);
}
.screener-gate__main {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: space-between;
}
/* Secondo livello: separato da una riga, non concorrente della CTA principale. */
.screener-gate__upsell {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-primary-400);
  font-size: var(--text-small);
  color: var(--color-neutral-700);
  max-width: 78ch;
}
.screener-gate__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-primary-800);
  margin: 0 0 var(--space-2xs);
}
.screener-gate__body {
  font-size: var(--text-small);
  color: var(--color-neutral-700);
  max-width: 62ch;
  margin: 0;
}
.screener-gate__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Barra di ordinamento per mobile: nasce nascosta, compare quando la tabella diventa
   schede e le intestazioni spariscono (sezione 19). */
.sort-bar { display: none; }
.sort-bar__label { font-size: var(--text-small); color: var(--color-neutral-600); }
.chip--locked { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-neutral-600); }

/* Intestazione di colonna riservata: stesso posto e stessa altezza di una ordinabile,
   così la tabella non si muove quando l'utente si registra. */
.th--locked a { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.th__lock { flex: none; opacity: .7; }

.results-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: baseline; justify-content: space-between;
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: var(--text-small);
  color: var(--color-neutral-600);
}

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); align-items: center; }
.pagination a, .pagination span {
  min-width: var(--tap-min); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
}
.pagination [aria-current="page"] { border-color: var(--color-primary-700); font-weight: 600; color: var(--color-primary-800); }
/* Il salto fra due intervalli di pagine non è un bersaglio: niente bordo, niente riquadro. */
.pagination__gap { border: 0; background: none; min-width: 0; padding: 0 var(--space-2xs); color: var(--color-neutral-500); }

/* Empty state: bordo tratteggiato, come nel design system. */
.empty-state { border-style: dashed; border-color: var(--color-neutral-300); background: var(--color-neutral-50); }
.empty-state__title { font-family: var(--font-serif); font-size: 1.3125rem; color: var(--color-primary-800); }

/* Chip dei filtri rubrica. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding: 8px 14px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-small);
  color: var(--color-primary-800);
}
.chip[aria-current="true"] { background: var(--color-primary-800); border-color: var(--color-primary-800); color: var(--color-neutral-50); }

/* ================================================= 17. ARTICOLO =========== */

/* Avviso di analisi superata: informativo, non allarmante. Sta prima del titolo,
   dove viene letto, non in coda. */
.dated-notice {
  background: var(--color-neutral-100);
  border-left: 3px solid var(--color-neutral-400);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.dated-notice p { font-size: var(--text-small); line-height: var(--leading-body); color: var(--color-neutral-700); margin: 0 0 var(--space-xs); }
.dated-notice p:last-child { margin-bottom: 0; }
.dated-notice strong { color: var(--color-neutral-800); }

/* Storico delle analisi su una società. */
.series-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); }
.series-list__item {
  display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: var(--text-small);
}
.series-list__item time { color: var(--color-neutral-500); font-variant-numeric: tabular-nums; min-width: 9ch; }
.series-list__current { color: var(--color-neutral-600); font-weight: 600; }

.article-layout {
  max-width: var(--container); margin: 0 auto;
  padding: 40px var(--space-xl) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-xl); align-items: start;
}
.article-head { max-width: 72ch; }
.article-head__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }
.article-head__title { font-family: var(--font-serif); font-weight: 400; font-size: 2.75rem; line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: var(--color-primary-800); }
.article-head__dek { font-size: 1.1875rem; line-height: 1.55; color: var(--color-neutral-600); margin: var(--space-md) 0 0; }
.article-head__byline { font-size: var(--text-caption); color: var(--color-neutral-500); margin-top: var(--space-md); font-variant-numeric: tabular-nums; }

/* Tipografia editoriale: misura di riga corta, serif nei titoli interni. */
.prose { max-width: 72ch; }
.prose p { font-size: var(--text-body); line-height: 1.7; color: var(--color-neutral-700); margin: 0 0 var(--space-md); }
.prose h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--color-primary-800); margin: var(--space-xl) 0 var(--space-sm); }
.prose blockquote {
  margin: var(--space-lg) 0;
  border-left: 2px solid var(--color-accent-500);
  padding-left: 20px;
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.4;
  color: var(--color-primary-800);
}
.prose ul { padding-left: 20px; margin: 0 0 var(--space-md); }
.prose li { font-size: var(--text-body); line-height: 1.7; color: var(--color-neutral-700); margin-bottom: var(--space-xs); }

/* ============================================ 18. PAGINE DI SISTEMA ======= */

/* Colonna stretta centrata: login, registrazione, checkout, conferme. */
.narrow { max-width: 560px; margin: 0 auto; }
.narrow--wide { max-width: 760px; }

.card-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-md);
}

.form-grid { display: grid; gap: var(--space-md); }
.form-grid--two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Passi del checkout. */
.stepper { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); padding: 0; list-style: none; }
.stepper li {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-neutral-500);
}
.stepper li + li::before { content: "›"; color: var(--color-neutral-300); margin-right: var(--space-xs); }
.stepper [aria-current="step"] { color: var(--color-primary-800); font-weight: 600; }

/* Riepilogo ordine / abbonamento. */
.summary-box { background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.summary-row--total { border-top: 1px solid var(--color-neutral-200); padding-top: var(--space-sm); font-size: var(--text-h4); font-weight: 600; color: var(--color-neutral-900); }

/* Avviso in pagina: neutro, senza colori d'allarme se non serve. */
.notice {
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  padding: var(--space-md);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-neutral-700);
}
.notice--warning { border-color: var(--color-warning); }
.notice strong { color: var(--color-neutral-900); }

/* ================================================== 19. RESPONSIVE ========
   Le griglie usano repeat(auto-fit, minmax(Xpx, 1fr)) e reggono senza media query:
   qui sotto solo header/nav, tabelle e scala tipografica. */

@media (max-width: 1279px) {
  .company-body { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 1023px) {
  .site-nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .header-actions { display: flex; }
  .header-actions .btn { font-size: var(--text-caption); padding: 10px 12px; }
  .site-header__inner { padding: var(--space-sm) 20px; gap: var(--space-sm); }
  .company-body,
  .article-layout { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) 20px 64px; }
  .company-aside { position: static; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .company-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 767px) {
  .section { padding: var(--space-xl) 20px; }
  .section--hero { padding: var(--space-xl) 20px 0; }
  .newsletter { padding: 28px 20px; }
  .site-footer { padding: var(--space-lg) 20px; }
  .company-hero { padding: var(--space-lg) 20px; }
  .breadcrumb { padding: 10px 20px; }

  .display { font-size: 2.375rem; line-height: 1.06; }
  .h1-page { font-size: 2.125rem; line-height: 1.06; }
  .h2-section { font-size: 1.5rem; }
  .h2-section--sm { font-size: 1.5rem; }
  .lead { font-size: 1rem; }
  .newsletter__title { font-size: 1.5rem; }

  .hero__actions { display: grid; gap: 10px; margin-top: var(--space-lg); }
  .hero__actions .btn { width: 100%; }
  .proof-strip { margin-top: var(--space-lg); display: grid; gap: var(--space-xs); font-size: 0.875rem; }
  .proof-strip__sep { display: none; }

  .audience-card { padding: 20px; gap: 10px; }
  .audience-card__title { font-size: 1.5rem; line-height: 1.15; }
  .audience-card__actions .btn + .btn { display: none; }

  .article-feature__media { height: 140px; }
  .article-feature__title { font-size: 1.5rem; }
  .article-feature__body { padding: 18px; }

  .panel { padding: var(--space-md); }
  .kpi-dark__value { font-size: 1.375rem; }
  .kpi-dark__tile { padding: 14px 10px; }
  .kpi-dark__label { font-size: 0.625rem; }

  .newsletter__form { display: grid; }
  .newsletter__form .btn { width: 100%; }

  /* Card societa' compatte: i tre valori in griglia a 3 colonne. */
  .company-card__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); align-items: start; }
  .company-card__figure--end { margin-left: 0; text-align: left; }
  .company-card__figure-value { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; }
  .company-card__figure--end .company-card__figure-value { font-size: 1rem; }

  /* Con le intestazioni nascoste l'ordinamento passa da qui. */
  .sort-bar {
    display: flex; flex-direction: column; gap: var(--space-xs);
    margin-bottom: var(--space-md);
  }

  /* Tabelle a 4+ colonne → una scheda per riga (README, scheda societa' mobile).
     Il markup resta una <table> semantica con thead e th scope: cambia solo la
     presentazione. Ogni riga diventa una griglia a 3 colonne; l'intestazione di riga
     occupa tutta la larghezza e la variazione le sta accanto, a destra. */
  .data-table--cards,
  .data-table--cards tbody { display: block; width: 100%; min-width: 0; }
  /* In una table resa a blocchi il caption torna shrink-to-fit e va a capo di continuo. */
  .data-table--cards caption { display: block; }
  .data-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--cards tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-xs);
    border: 1px solid var(--color-neutral-200);
    margin-bottom: 10px;
    padding: var(--space-sm);
    background: var(--color-surface);
  }
  .data-table--cards tr.row--total,
  .data-table--cards tr.row--current { background: var(--color-neutral-50); }
  .data-table--cards td,
  .data-table--cards th { display: block; padding: var(--space-xs) 0 0; text-align: left; }

  /* Riga 1: nome della voce e, a destra, la variazione. Riga 2: i valori.
     Le posizioni sono esplicite, così l'ordine non dipende dal flusso automatico. */
  .data-table--cards th[scope="row"] {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0 0 var(--space-xs);
    border-bottom: 1px solid var(--color-neutral-100);
    font-weight: 600;
    color: var(--color-neutral-900);
  }
  .data-table--cards tr:has(.cell--var) th[scope="row"] { grid-column: 1 / span 2; }
  .data-table--cards td:not(.cell--var) { grid-row: 2; }

  .data-table--cards td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
  }
  .data-table--cards td.num { text-align: left; }
  /* La variazione resta in alto a destra, accanto al nome della voce. */
  .data-table--cards td.cell--var {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    padding: 0 0 var(--space-xs);
    border-bottom: 1px solid var(--color-neutral-100);
  }
  .data-table--cards td.cell--var::before { display: none; }
  .data-table--cards td.cell--last { font-weight: 500; color: var(--color-neutral-900); }

  /* Tris KPI della scheda: tre colonne piene, senza minimo che sfori i 390px. */
  .kpi-dark { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .table-boxed th, .table-boxed td { padding-left: var(--space-sm); padding-right: var(--space-sm); }

  .premium__overlay { padding: 20px; }
  .premium__headline { font-size: 1.375rem; }

  /* Barra sticky in fondo sulla scheda societa'. */
  .sticky-cta {
    display: flex;
    position: sticky; bottom: 0; z-index: 50;
    background: var(--color-surface);
    border-top: 1px solid var(--color-neutral-300);
    padding: var(--space-xs) var(--space-md);
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
  }
  .sticky-cta__figures { display: flex; gap: var(--space-md); font-variant-numeric: tabular-nums; }
  .sticky-cta__label { font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
  .sticky-cta__value { font-size: 1rem; font-weight: 500; color: var(--color-accent-700); }
  .sticky-cta .btn { min-height: 48px; }

  .split-grid { gap: var(--space-lg); }
  .site-footer__bar { flex-direction: column; gap: var(--space-xs); }

  /* Prezzi, articolo e pagine di sistema su colonna singola. */
  .pricing { padding: var(--space-md); }
  .pricing__bar { gap: var(--space-md); }
  .tabs { width: 100%; }
  .tabs__tab { flex: 1 1 0; justify-content: center; }
  .plan__amount { font-size: 2.25rem; }
  .cta-band { padding: var(--space-xl) 20px; }
  .cta-band__title { font-size: 1.5rem; }
  .cta-band__actions .btn { width: 100%; }
  .article-head__title { font-size: 2rem; }
  .article-head__dek { font-size: 1rem; }
  .prose h2 { font-size: 1.5rem; }
  .card-panel { padding: var(--space-md); }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .filters__actions .btn { flex: 1 1 0; }
  .feature-matrix { font-size: var(--text-caption); }
}

/* Indirizzi: <address> senza il corsivo di default del browser. */
address { font-style: normal; }
.contact-address { font-size: 0.875rem; line-height: 1.7; margin-top: var(--space-sm); color: var(--color-neutral-700); }

/* Campo esca dei moduli: fuori dallo schermo, non display:none — alcuni bot ignorano
   i campi nascosti in quel modo, e chi naviga da tastiera non ci finisce (tabindex="-1"). */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Formule negli articoli (Damodaran, Formazione).
   Prima che KaTeX intervenga — o se non arriva — il blocco mostra il sorgente LaTeX:
   monospazio e scorrimento orizzontale, perché una formula lunga non deve allargare la
   pagina. A composizione avvenuta il carattere torna quello di KaTeX. */
.math {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--color-neutral-50);
  border-left: 2px solid var(--color-neutral-300);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-neutral-700);
  overflow-x: auto;
}
.math--rendered {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-neutral-800);
}
/* KaTeX in display mode ha già i propri margini. */
.math--rendered .katex-display { margin: 0; }

/* Area di amministrazione: una fascia scura che la distingue a colpo d'occhio dal sito
   pubblico, perché qui si pubblica e non si legge. */
.admin-bar { background: var(--color-primary-900); color: var(--color-neutral-100); }
.admin-bar__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-xs); padding-bottom: var(--space-xs);
  font-size: var(--text-small);
}
.admin-bar a { color: var(--color-neutral-100); }
.admin-bar__user { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-primary-400); }
.admin-bar__user .btn--quiet { color: var(--color-neutral-100); border-color: var(--color-primary-600); }

/* Due form affiancati in una cella di tabella (sospendi / elimina). */
.inline-form { display: inline; }

/* Pulsante piccolo: azioni di riga in tabella, dove uno da 44px spezzerebbe la riga.
   Resta comunque sopra la soglia di tocco grazie al padding verticale. */
.btn--sm { min-height: 36px; padding: 6px 12px; font-size: var(--text-caption); }

/* Separatore dentro un modulo lungo. */
.rule { border: 0; border-top: 1px solid var(--color-neutral-200); margin: var(--space-lg) 0; }

/* Fascia promozionale, sopra l'intestazione. Ambra: la palette la riserva alle CTA e ai
   dati chiave, e una promozione a tempo e' una CTA a tutti gli effetti. */
.promo-bar { background: var(--color-accent-50); border-bottom: 1px solid var(--color-accent-500); }
.promo-bar__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-xs); padding-bottom: var(--space-xs);
}
.promo-bar__text { margin: 0; font-size: var(--text-small); color: var(--color-neutral-800); }
.promo-bar__text strong { color: var(--color-accent-700); }
.promo-bar__body { margin-left: var(--space-2xs); }
.promo-bar__deadline { margin-left: var(--space-2xs); color: var(--color-neutral-600); }

/* Etichetta della promozione sulla card di un piano. */
.plan__promo {
  display: inline-flex; align-items: center;
  margin-left: var(--space-2xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-500);
  color: var(--color-primary-900);
  font-size: var(--text-caption); font-weight: 600;
}

/* --------------------------------------------------------------- avvertenze
   Blocco normativo in fondo alle pagine che pubblicano valutazioni. Chiuso è una
   riga sola: deve esserci, non deve prendersi la pagina. Il <details> è nativo,
   quindi funziona senza JavaScript e resta leggibile dai crawler anche chiuso. */
.avvertenze {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-neutral-200);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--color-neutral-600);
}

/* Il conflitto di interessi non è richiudibile: è la sola parte che cambia da
   un'analisi all'altra, e chi legge deve vederla senza aprire niente. */
.avvertenze__conflict {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-accent-500);
  background: var(--color-neutral-50);
  color: var(--color-neutral-700);
}

.avvertenze__conflict strong { color: var(--color-primary-900); }

.avvertenze__summary {
  cursor: pointer;
  padding: var(--space-xs) 0;
  color: var(--color-neutral-600);
  font-weight: 500;
  /* Il marcatore di default resta: è il segnale che il blocco si apre. */
}

.avvertenze__summary:hover { color: var(--color-primary-800); }
.avvertenze__summary:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 3px; }

.avvertenze__body { margin-top: var(--space-xs); max-width: 72ch; }
.avvertenze__body p { margin: 0 0 var(--space-sm); }
.avvertenze__more a { color: var(--color-primary-700); }

@media print {
  /* In stampa le avvertenze vanno mostrate per intero: è il caso in cui un'analisi
     esce dal sito e viaggia da sola. */
  .avvertenze__details > .avvertenze__body { display: block !important; }
}

/* ------------------------------------------------ contenuti dell'archivio
   Tabelle, elenchi e immagini che arrivano dai testi redazionali. L'HTML è
   ripulito lato server (Services/HtmlContent) e non porta con sé stili, quindi
   l'aspetto lo decide qui il design system, come per le tabelle native. */
.article-html { margin: 0 0 var(--space-md); overflow-x: auto; }

.article-html table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.article-html tr:first-child { background: var(--color-neutral-50); }
.article-html tr:first-child td, .article-html th {
  font-weight: 600; color: var(--color-primary-800); text-align: left;
}

.article-html td, .article-html th {
  padding: 10px var(--space-sm);
  border-bottom: 1px solid var(--color-neutral-100);
  color: var(--color-neutral-700);
  vertical-align: top;
}

/* I testi dell'archivio mettono un <p> dentro ogni cella: qui non deve
   diventare un paragrafo con i suoi margini. */
.article-html td p, .article-html th p { margin: 0; font-size: inherit; }

.article-html ul, .article-html ol { margin: 0 0 var(--space-md); padding-left: 20px; }
.article-html li { margin-bottom: var(--space-xs); color: var(--color-neutral-700); }

/* Le immagini dell'archivio sono grafici e formule: larghezza piena fin dove
   serve, mai oltre la loro dimensione naturale. */
.article-html img { max-width: 100%; height: auto; display: block; margin: var(--space-sm) auto; }

.article-html a { color: var(--color-primary-700); }

/* ------------------------------------------------ navigazione fra le analisi
   Precedente e successiva nella stessa rubrica. I correlati portano sempre ai
   contenuti recenti: questi due link sono l'unico modo di percorrere
   l'archivio all'indietro. */
.article-nav {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-neutral-200);
}

.article-nav__link {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-md);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
}

.article-nav__link:hover { border-color: var(--color-primary-400); background: var(--color-neutral-50); }
.article-nav__link--next { text-align: right; }

.article-nav__dir {
  font-size: var(--text-caption); font-weight: 600;
  color: var(--color-neutral-500); letter-spacing: 0.02em;
}

.article-nav__title { font-weight: 500; color: var(--color-primary-800); line-height: var(--leading-heading); }
.article-nav__date { font-size: var(--text-caption); color: var(--color-neutral-500); }

.article-nav__all {
  grid-column: 1 / -1;
  font-size: var(--text-small);
  color: var(--color-primary-700);
}

/* Dati dell'analisi nel riquadro laterale: etichetta sopra, valore sotto, perché
   "Valore per azione · DCF" e tre importi non stanno su una riga sola. */
.keyfacts__row--stacked { flex-direction: column; align-items: flex-start; gap: 2px; }
.keyfacts__row--stacked dd { margin: 0; }
.keyfacts__note { display: block; font-size: var(--text-caption); color: var(--color-neutral-500); font-weight: 400; }

/* --------------------------------------------- grafico comparato di settore
   SVG costruito dal server: nessuna libreria, nessuno script. Le serie si
   distinguono per colore e per tratteggio, così restano leggibili anche a chi
   non percepisce le differenze di colore. */
.comparison-chart { margin: 0 0 var(--space-sm); }
.comparison-chart svg { width: 100%; height: auto; display: block; }

.comparison-chart__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0 0; padding: 0; list-style: none;
  font-size: var(--text-caption); color: var(--color-neutral-600);
}

.comparison-chart__key { display: flex; align-items: center; gap: var(--space-2xs); }

/* La data sotto il valore, nella tabella equivalente. */
.cell__note { display: block; font-size: var(--text-caption); color: var(--color-neutral-500); font-weight: 400; }