/* ============================================================
   MFX // FLOW — COMPONENTI
   ============================================================ */

/* ------------------------------------------------------------
   NAV
   Trasparente sulla hero, con blur e hairline dopo lo scroll.
------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--t-state) var(--ease),
    border-color var(--t-state) var(--ease);
}
.nav.is-scrolled {
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  font-size: 0.8125rem;   /* 13px */
  font-weight: 500;
  letter-spacing: var(--tracking-logo);
  text-transform: uppercase;
  color: var(--text);
}
.logo span { color: var(--faint); }

.nav__links { display: none; }

@media (min-width: 900px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--s-7);
  }
  .nav__toggle { display: none; }
}

.nav__link {
  font-size: var(--fs-sm);
  color: var(--muted);
  position: relative;
  padding-block: var(--s-2);
  transition: color var(--t-hover) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-state) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }

/* Toggle menu mobile: due hairline, non un'icona hamburger generica */
.nav__toggle {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  margin-right: -8px;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1px;
  background: var(--text);
  transition: transform var(--t-state) var(--ease), opacity var(--t-hover) var(--ease);
}
.nav__toggle span + span { margin-top: 6px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Overlay menu mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--bg);
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-state) var(--ease), visibility var(--t-state);
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li + li { margin-top: var(--s-5); }
.menu__list a {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.1;
}
.menu__foot { display: flex; gap: var(--s-5); }
.menu__foot a { font-size: var(--fs-sm); color: var(--muted); }

@media (min-width: 900px) { .menu { display: none; } }

/* ------------------------------------------------------------
   BOTTONI
------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-hi);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color var(--t-hover) var(--ease),
    background var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}
.btn:hover {
  border-color: var(--accent);
  background: var(--accent-ghost);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); }

/* Freccia: si sposta di 3px all'hover, unica micro-interazione */
.btn__arrow {
  width: 14px; height: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--t-hover) var(--ease);
}
.btn__arrow::after {
  content: "";
  position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Variante piena: usata una sola volta per pagina */
.btn--solid {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn--solid:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--bg);
}

/* Variante testuale */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  position: relative;
  padding-block: var(--s-2);
  transition: color var(--t-hover) var(--ease);
}
.btn-ghost::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--hairline-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-state) var(--ease);
}
.btn-ghost:hover { color: var(--text); }
.btn-ghost:hover::after { transform: scaleX(1); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
}

/* ------------------------------------------------------------
   ELEMENTO FIRMA — PROFILO
   Distribuzione astratta ispirata al Volume Profile.
   Non è un grafico reale e non rappresenta dati: è grammatica visiva.
   La riga di accento marca il livello di massimo interesse.
------------------------------------------------------------ */
.profile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  pointer-events: none;
}
.profile span {
  display: block;
  height: 1px;
  background: var(--hairline-hi);
  width: var(--w, 40%);
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.profile.is-visible span { transform: scaleX(1); }
.profile span.is-poc { background: var(--accent); }

/* Nella hero il profilo è ancorato a destra, ambientale */
.profile--hero {
  align-items: flex-end;
  max-width: 300px;
  gap: 9px;
}
/* Nella hero il tratto deve leggersi come intenzionale, non come artefatto */
.profile--hero span { background: rgba(245, 245, 245, 0.26); }
.profile--hero span.is-poc { background: var(--accent); }

/* Divisore compresso fra le sezioni */
.profile--rule {
  flex-direction: row;
  align-items: flex-end;
  gap: 5px;
  height: 26px;
  max-width: 180px;
}
.profile--rule span {
  width: 1px;
  height: var(--w, 40%);
  transform-origin: bottom;
  transform: scaleY(0);
}
.profile--rule.is-visible span { transform: scaleY(1); }

/* ------------------------------------------------------------
   CARD
------------------------------------------------------------ */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition:
    border-color var(--t-state) var(--ease),
    background var(--t-state) var(--ease),
    transform var(--t-state) var(--ease);
}
a.card:hover {
  border-color: var(--hairline-hi);
  background: var(--surface-hi);
  transform: translateY(-4px);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.card__text { color: var(--muted); font-size: var(--fs-sm); }
.card__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color var(--t-hover) var(--ease);
}
a.card:hover .card__foot { color: var(--text); }
a.card:hover .btn__arrow { transform: translateX(3px); }

@media (min-width: 700px) {
  .card { padding: var(--s-7); }
  .card--wide {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-8);
    min-height: 260px;
  }
  .card--wide .card__body { max-width: 46ch; }
  .card--wide .card__foot { margin: 0; padding: 0; }
}

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) {
  .grid { gap: var(--s-5); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   COPERTINA GUIDA
   Tipografica, coerente con i PDF pubblicati. Nessuna immagine.
------------------------------------------------------------ */
.cover {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #131315 0%, #0A0A0B 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
.cover__eyebrow {
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.cover__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.cover__foot {
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------
   RIGA EDITORIALE (metodo, percorsi)
------------------------------------------------------------ */
.row-list { border-top: 1px solid var(--hairline); }
.row {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--hairline);
}
.row__mark {
  width: 28px; height: 1px;
  background: var(--accent);
  margin-top: 14px;
}
.row__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; }
.row__text { color: var(--muted); font-size: var(--fs-sm); }

@media (min-width: 800px) {
  .row {
    grid-template-columns: 60px 1fr 1.2fr;
    align-items: start;
    gap: var(--s-6);
    padding-block: var(--s-7);
  }
}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-8) var(--s-7);
}
.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}
.footer__sign {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__links a { font-size: var(--fs-sm); color: var(--muted); transition: color var(--t-hover) var(--ease); }
.footer__links a:hover { color: var(--text); }
.footer__bottom {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--faint);
}

@media (min-width: 800px) {
  .footer__top { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ============================================================
   v2 — COMPONENTI DASHBOARD
   Aggiunti nella semplificazione. Nessun valore fuori dai token.
   ============================================================ */

/* ------------------------------------------------------------
   PRINCIPI NUMERATI
   Qui la numerazione porta informazione: comprensione, struttura
   e autonomia sono una progressione, non un elenco.
------------------------------------------------------------ */
.principles {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.principle {
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.principle__n {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.principle__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin: 0 0 var(--s-2);
}
.principle__text { color: var(--muted); font-size: var(--fs-sm); }

@media (min-width: 800px) {
  .principles { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

/* ------------------------------------------------------------
   CARD PERCORSO
------------------------------------------------------------ */
.tracks {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.track-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: border-color var(--t-state) var(--ease);
}
.track-card:hover { border-color: var(--hairline-hi); }

/* Private: evidenza contenuta, un bordo appena più definito */
.track-card--featured { border-color: var(--accent-soft); }

.track-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin: 0;
}
.track-card__sub { color: var(--muted); font-size: var(--fs-sm); }

.track-card__list {
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-3);
}
.track-card__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.track-card__list li::before {
  content: "";
  width: 10px; height: 1px;
  background: var(--hairline-hi);
  margin-top: 13px;
}
.track-card__actions {
  margin-top: auto;
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

@media (min-width: 900px) {
  .tracks { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .track-card { padding: var(--s-7); }
}

/* ------------------------------------------------------------
   CONFRONTO
   Tre blocchi affiancati sul desktop, impilati su smartphone.
   Nessuna matrice, nessuno scorrimento orizzontale.
------------------------------------------------------------ */
.compare {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.compare__col {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.compare__name {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.compare__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
}
.compare__list li::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  border: 1px solid var(--hairline-hi);
}
/* Incluso */
.compare__list .is-in { color: var(--text); }
.compare__list .is-in::before {
  background: var(--accent);
  border-color: var(--accent);
}
/* Non incluso */
.compare__list .is-out { color: var(--faint); }
/* Da definire */
.compare__list .is-tbd { color: var(--muted); }
.compare__list .is-tbd::before { border-style: dashed; }

@media (min-width: 900px) {
  .compare { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .compare__col { padding: var(--s-6); }
}

/* ------------------------------------------------------------
   TILE — ecosistema
------------------------------------------------------------ */
.tiles { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.tile:hover { border-color: var(--hairline-hi); background: var(--surface-hi); }
.tile__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; margin: 0; }
.tile__text { color: var(--muted); font-size: var(--fs-sm); margin: var(--s-1) 0 0; }
.tile__go { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.tile:hover .tile__go { color: var(--text); }
.tile:hover .btn__arrow { transform: translateX(3px); }

@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tile { flex-direction: column; align-items: flex-start; gap: var(--s-6); padding: var(--s-6); } }

/* ------------------------------------------------------------
   BOTTONI — stati aggiuntivi
------------------------------------------------------------ */
.btn { min-height: var(--tap); }

/* Sotto i 480px i controlli occupano la riga intera */
@media (max-width: 479px) {
  .btn { width: 100%; justify-content: space-between; }
  .btn-row { gap: var(--s-3); }
}

/* ============================================================
   v3 — HUB
   La home orienta. Ogni card è una porta, non un riassunto.
   ============================================================ */

.hub {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 168px;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition:
    border-color var(--t-state) var(--ease),
    background var(--t-state) var(--ease),
    transform var(--t-state) var(--ease);
}
.hub-card:hover {
  border-color: var(--hairline-hi);
  background: var(--surface-hi);
  transform: translateY(-4px);
}
.hub-card:hover .btn__arrow { transform: translateX(3px); }

.hub-card__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.hub-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.hub-card__text {
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 42ch;
}
.hub-card__go {
  margin-top: auto;
  padding-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color var(--t-hover) var(--ease);
}
.hub-card:hover .hub-card__go { color: var(--text); }

/* La card primaria occupa la riga intera e ha l'accento */
.hub-card--primary { border-color: var(--accent-soft); }
.hub-card--primary .hub-card__label { color: var(--accent); }

@media (min-width: 760px) {
  .hub { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .hub-card { min-height: 220px; padding: var(--s-7); }
  .hub-card--primary { grid-column: 1 / -1; min-height: 240px; }
}

/* ------------------------------------------------------------
   FAQ
   <details> nativo: funziona senza JavaScript e da tastiera.
------------------------------------------------------------ */
.faq { border-top: 1px solid var(--hairline); margin-top: var(--s-6); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) var(--s-7) var(--s-5) 0;
  position: relative;
  font-size: var(--fs-body);
  color: var(--text);
  transition: color var(--t-hover) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
/* Segno + che diventa − all'apertura */
.faq__q::after,
.faq__q::before {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  background: var(--muted);
  transition: transform var(--t-state) var(--ease);
}
.faq__q::before { width: 13px; height: 1px; margin-top: -0.5px; }
.faq__q::after  { width: 1px; height: 13px; margin: -6.5px 6px 0 0; }
.faq__item[open] .faq__q::after { transform: rotate(90deg); }
.faq__a {
  padding: 0 var(--s-7) var(--s-6) 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   BLOCCO NOTA — distinzione fra aree che si confondono
------------------------------------------------------------ */
.note {
  padding: var(--s-5) var(--s-6);
  border-left: 1px solid var(--accent);
  background: var(--accent-ghost);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.note p { color: var(--muted); font-size: var(--fs-sm); }
.note p + p { margin-top: var(--s-3); }

/* Card di chiusura della dashboard: piena larghezza, nessun accento.
   L'accento resta un privilegio della card principale. */
@media (min-width: 760px) {
  .hub-card--closing { grid-column: 1 / -1; min-height: 180px; }
}

/* ============================================================
   MARCHIO
   Il marchio precede sempre il wordmark e non lo sostituisce.
   currentColor: eredita il colore del contesto, nessun file duplicato.
   ============================================================ */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer .logo__img { width: 34px; }

/* ------------------------------------------------------------
   RETICOLO
   Tre primitive: nodo (informazione), connessione (relazione),
   snodo a 45° o 90° (decisione). Due linee non si incrociano mai
   senza un nodo dichiarato nel punto di intersezione.
------------------------------------------------------------ */
.mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.mesh svg { width: 100%; height: 100%; }
.mesh line, .mesh path { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mesh circle { fill: var(--text); }
.mesh .is-decision { fill: var(--accent); }

/* Intensità: mai oltre 0.12 dietro il testo */
.mesh--hero   { opacity: .12; }
.mesh--header { opacity: .08; }

/* Le connessioni si disegnano al caricamento, poi si fermano */
.js .mesh--hero path,
.js .mesh--hero line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: mesh-draw 1800ms var(--ease) forwards;
}
.js .mesh--hero circle { opacity: 0; animation: mesh-node 600ms var(--ease) forwards 1200ms; }
@keyframes mesh-draw { to { stroke-dashoffset: 0; } }
@keyframes mesh-node { to { opacity: 1; } }

/* Alone viola: profondità senza gradienti animati sul testo */
.glow {
  position: absolute;
  width: 70vw; height: 70vw;
  max-width: 720px; max-height: 720px;
  right: -12vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(139,92,246,.16) 0%, rgba(139,92,246,0) 68%);
  pointer-events: none;
  z-index: 0;
  animation: glow-drift 20s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-18px, -14px); }
}

/* Il contenuto sta sopra i piani grafici */
.hero, .page-hero { position: relative; }
.hero > .container, .page-hero > .container { position: relative; z-index: 1; }

/* Divisore: un segmento di reticolo, non una riga piena */
.mesh-rule { display: block; width: 180px; height: 12px; color: var(--muted); opacity: .45; margin-bottom: var(--s-5); }

/* ------------------------------------------------------------
   NODO IN HOVER SULLE CARD
   A riposo la card è pulita. In hover si accende un nodo
   nell'angolo e si disegnano due connessioni verso l'interno.
------------------------------------------------------------ */
.hub-card, .track-card, .tile, .card { position: relative; overflow: hidden; }

.hub-card__node {
  position: absolute;
  top: 0; right: 0;
  width: 104px; height: 104px;
  color: var(--text);
  opacity: 0;
  transform: translate(8px, -8px);
  transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease);
  pointer-events: none;
}
.hub-card:hover .hub-card__node { opacity: .55; transform: none; }
.hub-card--primary .hub-card__node { color: var(--accent); }
.hub-card--primary:hover .hub-card__node { opacity: .9; }

/* ------------------------------------------------------------
   MARCHI D'AREA
   Sei segni costruiti con le stesse primitive del reticolo.
   Nessuna icona di libreria.
------------------------------------------------------------ */
.area-mark {
  width: 26px; height: 26px;
  color: var(--muted);
  margin-bottom: var(--s-4);
  transition: color var(--t-state) var(--ease);
}
.hub-card:hover .area-mark { color: var(--text); }
.hub-card--primary .area-mark,
.hub-card--primary:hover .area-mark { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .js .mesh--hero path, .js .mesh--hero line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js .mesh--hero circle { opacity: 1; animation: none; }
}

/* L'alone e il reticolo non devono generare scroll orizzontale:
   la hero fa da contenitore di ritaglio per entrambi i piani grafici. */
.hero, .page-hero { overflow: hidden; }

/* ============================================================
   v5 — LOGO UFFICIALE
   Sostituisce il monogramma. Il reticolo resta come decorazione
   secondaria e non compete mai con il marchio.
   ============================================================ */
.logo__img { width: 30px; height: auto; flex: none; display: block; }

/* Logo della hero: primo elemento, molto spazio intorno */
.hero-logo {
  display: block;
  width: clamp(150px, 34vw, 260px);
  height: auto;
  margin: 0 auto var(--s-7);
}

/* ------------------------------------------------------------
   HOME EDITORIALE
   Logo, definizione, cinque righe. Nient'altro.
------------------------------------------------------------ */
.intro {
  text-align: center;
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-9);
  position: relative;
  overflow: hidden;
}
/* p ha max-width 62ch: senza margin auto il testo centrato resta a sinistra */
.intro p, .intro ul { margin-inline: auto; }

.intro__wordmark {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.intro__wordmark span { color: var(--faint); }
.intro__eyebrow { margin-top: var(--s-5); }
.intro__lines {
  list-style: none;
  margin: var(--s-6) auto 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.intro__lines .is-key { font-style: italic; color: var(--accent); }

/* ------------------------------------------------------------
   RIGHE DI SEZIONE
   Non card: righe editoriali a piena larghezza.
------------------------------------------------------------ */
.rows { border-top: 1px solid var(--hairline); }

.row-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: padding-left var(--t-state) var(--ease);
}
/* Filo di accento che entra da sinistra in hover */
.row-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: width var(--t-state) var(--ease);
}
.row-link:hover { padding-left: var(--s-6); }
.row-link:hover::before { width: var(--s-4); }
.row-link:hover .row-link__title { color: var(--text); }
.row-link:hover .row-link__arrow { transform: translateX(4px); color: var(--text); }

.row-link__n {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 6px;
  transition: color var(--t-state) var(--ease);
}
.row-link:hover .row-link__n { color: var(--accent); }

.row-link__title,
.row-link__sub { display: block; }

.row-link__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  transition: color var(--t-hover) var(--ease);
}
.row-link__sub {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: var(--s-2) 0 0;
}
.row-link__arrow {
  color: var(--muted);
  transition: transform var(--t-state) var(--ease), color var(--t-state) var(--ease);
}

/* Su smartphone la freccia scende sotto il testo per lasciare respiro */
@media (max-width: 639px) {
  .row-link {
    grid-template-columns: auto 1fr;
    min-height: 96px;
    align-content: center;
  }
  .row-link__arrow { grid-column: 2; justify-self: start; margin-top: var(--s-3); }
  .row-link:hover { padding-left: var(--s-5); }
}

@media (min-width: 900px) {
  .row-link { grid-template-columns: 64px 1fr auto; padding: var(--s-7) 0; }
}

/* Confronto a due colonne: elenco di specifiche, non matrice di pallini */
.compare--two { grid-template-columns: 1fr; }
@media (min-width: 760px) { .compare--two { grid-template-columns: repeat(2, 1fr); } }

.spec { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.spec dt {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--faint);
  padding-top: var(--s-4);
}
.spec dd {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.spec dd:last-child { border-bottom: 0; padding-bottom: 0; }

/* Occhiello della riga: fra titolo e descrizione, in accento discreto */
.row-link__kicker {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.row-link__sub { margin-top: var(--s-2); max-width: 54ch; }

/* Con tre sole righe c'è spazio: respirano di più */
.rows--three .row-link { padding-block: var(--s-7); }
@media (min-width: 900px) { .rows--three .row-link { padding-block: var(--s-8); } }

/* ============================================================
   COPY PERCORSI — componenti editoriali
   Nessun redesign: derivano dai token e dai pattern esistenti.
   ============================================================ */

/* Frase evidenziata: serif, filo di accento a sinistra */
.pullquote {
  margin: var(--s-7) 0 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  border-left: 1px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 38ch;
}
.pullquote--center { margin-inline: auto; }

/* Elenco di ciò che il percorso include.
   Editoriale, non pricing table: nessun check, nessun colore di stato. */
.includes {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.includes li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
}
.includes li::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--accent);
  opacity: .6;
  transform: translateY(-4px);
}
@media (min-width: 760px) {
  .includes { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); }
}

/* Microcopy sotto una CTA */
.btn-note {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 46ch;
}

/* Blocco di orientamento finale del confronto */
.choose { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.choose__item { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.choose__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-2);
}
.choose__text { color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 760px) { .choose { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } }

/* Micro-label metodologica sotto l'occhiello della home.
   Secondaria: non compete con il claim. */
.intro__method {
  margin-top: var(--s-4);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.intro__method span { color: var(--accent); }

/* Con due sole modalità la griglia a tre colonne lascerebbe un vuoto a destra */
@media (min-width: 900px) {
  .tracks:has(> .track-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* La voce che descrive COME viene erogata la formazione non è
   allo stesso livello di quelle che descrivono cosa contiene:
   occupa la riga intera e ha il trattamento del testo primario. */
.includes li.is-primary {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  padding-block: var(--s-5);
}
.includes li.is-primary::before { opacity: 1; transform: translateY(-7px); }
@media (min-width: 760px) { .includes li.is-primary { grid-column: 1 / -1; } }

/* Secondo paragrafo introduttivo: stessa famiglia, peso minore */
.lead--minor { margin-top: var(--s-4); font-size: var(--fs-sm); }

/* Enfasi testuale dentro un lead: nessun colore nuovo, solo contrasto */
.lead strong { color: var(--text); font-weight: 400; }