/* ============================================================
   MFX // FLOW — PAGINE
   Stili di sezione. Nessuna sovrascrittura dei componenti.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — HOME
------------------------------------------------------------ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-9);
  position: relative;
}
.hero__inner {
  width: 100%;
  display: grid;
  gap: var(--s-7);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  margin: var(--s-5) 0 0;
}
.hero__title em { font-style: italic; color: var(--muted); }

/* Sottotitolo su righe separate: è un ritmo, non un paragrafo */
.hero__sub {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.55;
}
.hero__cta { margin-top: var(--s-7); }

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-9);
  }
  .hero__aside { padding-bottom: var(--s-3); }
}

/* Ingresso in tre tempi al caricamento */
.js .hero__intro { opacity: 0; transform: translateY(14px); }
.js .hero.is-ready .hero__intro {
  opacity: 1;
  transform: none;
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js .hero.is-ready .hero__intro:nth-child(1) { transition-delay: 60ms; }
.js .hero.is-ready .hero__intro:nth-child(2) { transition-delay: 200ms; }
.js .hero.is-ready .hero__intro:nth-child(3) { transition-delay: 340ms; }

/* ------------------------------------------------------------
   HERO — PAGINE INTERNE
------------------------------------------------------------ */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-8);
}
.page-hero h1 { margin-top: var(--s-5); letter-spacing: -0.025em; }
.page-hero p  { margin-top: var(--s-5); }

/* ------------------------------------------------------------
   MANIFESTO
   Blocco di puro testo. Il vuoto qui è contenuto.
------------------------------------------------------------ */
.manifesto { text-align: center; }
.manifesto__lines {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.5vw, 3rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
.manifesto__lines li + li { margin-top: var(--s-2); }
.manifesto__lines .is-key { font-style: italic; color: var(--accent); }
.manifesto__note {
  margin: var(--s-7) auto 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.manifesto .profile--rule { margin: var(--s-7) auto 0; }

/* ------------------------------------------------------------
   APPROCCIO
------------------------------------------------------------ */
.approach { display: grid; gap: var(--s-6); }
.approach p + p { margin-top: 0; }
@media (min-width: 900px) {
  .approach { grid-template-columns: 1fr 1.3fr; gap: var(--s-9); align-items: start; }
  .approach__body { display: grid; gap: var(--s-5); }
}

/* ------------------------------------------------------------
   CTA DI CHIUSURA
   Sezione quasi vuota: una frase, un bottone.
------------------------------------------------------------ */
.closer {
  text-align: center;
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-10);
}
.closer h2 { margin-inline: auto; max-width: 16ch; }
.closer p  { margin: var(--s-5) auto 0; max-width: 46ch; color: var(--muted); }
.closer .btn-row { justify-content: center; margin-top: var(--s-7); }

/* ------------------------------------------------------------
   GUIDE
------------------------------------------------------------ */
.guide-item { display: grid; gap: var(--s-5); align-items: start; }
.guide-item + .guide-item { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--hairline); }
.guide-item__body { display: grid; gap: var(--s-4); }
.guide-item__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: 0.8125rem; color: var(--faint);
}
.guide-item__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dot--soon { background: var(--faint); }

@media (min-width: 760px) {
  .guide-item { grid-template-columns: 220px 1fr; gap: var(--s-8); }
}

/* Passi della richiesta */
.steps { counter-reset: step; border-top: 1px solid var(--hairline); }
.step {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}
.step__n {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.step__text { color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 700px) {
  .step { grid-template-columns: 80px 1fr; gap: var(--s-6); align-items: baseline; }
}

/* ------------------------------------------------------------
   PERCORSI
------------------------------------------------------------ */
.track {
  padding-block: var(--s-8);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-5);
}
.track__label { display: flex; align-items: center; gap: var(--s-3); }
.track__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 300; letter-spacing: -0.02em; }
.track__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.track__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.track__list li::before {
  content: "";
  width: 12px; height: 1px;
  background: var(--hairline-hi);
  margin-top: 13px;
}

/* Private: unico blocco con superficie propria */
.track--private {
  background: var(--surface);
  border: 1px solid var(--hairline-hi);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-top: var(--s-8);
}
.track--private .track__list li::before { background: var(--accent-soft); }

@media (min-width: 900px) {
  .track { grid-template-columns: 1fr 1.4fr; gap: var(--s-9); align-items: start; }
  .track--private { padding: var(--s-9); }
}

/* ------------------------------------------------------------
   PAGINA LEGALE
------------------------------------------------------------ */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 500; margin-top: var(--s-7); }
.prose p, .prose ul { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-sm); }
.prose ul { padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }

/* ------------------------------------------------------------
   UTILITY DI PAGINA
   Sostituiscono gli stili inline: nessun CSS nel markup.
------------------------------------------------------------ */
.cards-sub { margin-top: var(--s-4); }

.approach__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Copertina di una guida non ancora pubblicata */
.cover--soon .cover__eyebrow,
.cover--soon .cover__title { color: var(--faint); }

.btn-row--tight { margin-top: var(--s-2); }

/* ============================================================
   v2 — HOME DASHBOARD
   ============================================================ */

/* Hero: il claim sostituisce il logotipo gigante.
   La prima cosa leggibile è perché esiste MFX, non come si chiama. */
.hero--v2 { min-height: auto; padding-top: calc(var(--nav-h) + var(--s-8)); padding-bottom: var(--s-9); }

.hero__claim {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.6rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: var(--s-5) 0 0;
}
.hero__claim em { font-style: italic; color: var(--accent); }

.hero__text {
  margin-top: var(--s-6);
  color: var(--muted);
  max-width: 58ch;
}

/* Firma visiva ridotta: presente, non protagonista */
@media (max-width: 899px) { .hero--v2 .hero__aside { display: none; } }
@media (min-width: 900px) { .hero--v2 .profile--hero { max-width: 200px; } }

/* Due colonne di testo */
.two-col { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* Sezione su superficie: separa i percorsi dal resto senza aggiungere vuoto */
.section--surface {
  background: #101011;
  border-block: 1px solid var(--hairline);
}

/* Chiusura del confronto */
.compare__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-5);
}
.compare__foot p { max-width: 52ch; color: var(--muted); }
@media (min-width: 900px) {
  .compare__foot { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-8); }
}

/* Sezione approfondita su percorsi.html */
.detail { padding-block: var(--s-8); border-top: 1px solid var(--hairline); scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.detail__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.detail__name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 300; letter-spacing: -0.02em; margin: 0; }
.detail__sub { color: var(--muted); }
.detail__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .detail__grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }

/* ============================================================
   v3 — HOME HUB
   ============================================================ */

/* Hero hub: compatta. Non deve occupare uno schermo intero
   perché la dashboard deve essere visibile quasi subito. */
.hero--hub {
  min-height: auto;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-7);
  display: block;
}
.hero--hub .hero__claim { margin-top: var(--s-4); }

/* Riga di posizionamento sotto il claim */
.hero__statement {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  max-width: 62ch;
}
.hero__statement strong { color: var(--text); font-weight: 400; }
.hero__statement p { color: var(--muted); }

/* Intestazione leggera sopra la dashboard */
.hub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

/* Pagine di approfondimento: elenco semplice di punti */
.points { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.point { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.point__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; margin: 0 0 var(--s-2); }
.point__text { color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 800px) { .points { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-8); } }