/* =========================================================================
   LANDING "Scopri su chi puoi contare" - versione Manuale (v2)
   Foglio separato da style.css: questa pagina ha una sua identita' (navy /
   oro / magenta, Archivo + Lato) e non deve ereditare nulla dal resto del
   sito. Tutte le classi hanno prefisso "mn-" per evitare collisioni con le
   regole ".lp-" della landing precedente.

   Regole non negoziabili (vedi documento di consegna):
   - nessuna icona decorativa, nessuna emoji, nessun gradiente
   - l'oro non si usa mai su fondo chiaro in corpo piccolo
   - la banda magenta e' l'unico punto di rottura della pagina
   ========================================================================= */

.mn {
  --navy:        #1B3354;
  --navy-dark:   #12243E;
  --magenta:     #AF2E6F;
  --magenta-d:   #8A1F55;
  --gold:        #D9A32B;
  --gold-light:  #FFF6E2;
  --ivory:       #FAF9F5;
  --white:       #FFFFFF;
  --ink:         #2B2B2B;
  --grey-text:   #5A6472;
  --grey-soft:   #8A929C;
  --line:        #E3E6EB;
  --field-line:  #C5CAD2;

  --head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --radius: 6px;
  --radius-sm: 4px;

  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.62;
  overflow-x: hidden;
}

/* --- Impalcatura ------------------------------------------------------- */

.mn-section { padding-block: 108px; }
.mn-wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
.mn-prose { max-width: 720px; }

.mn-section--ivory { background: var(--ivory); }
.mn-section--white { background: var(--white); }
.mn-section--navy  { background: var(--navy); color: var(--white); }
.mn-section--rules { border-block: 1px solid var(--line); }

.mn-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.mn-two--wide-left { grid-template-columns: 1.25fr 0.75fr; }
.mn-two--wide-right { grid-template-columns: 0.8fr 1.2fr; }

/* --- Tipografia -------------------------------------------------------- */

.mn p { margin: 0 0 22px; }
.mn p:last-child { margin-bottom: 0; }
.mn strong { font-weight: 700; }

.mn-eyebrow {
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 30px;
  color: var(--gold);
}
.mn-eyebrow--magenta { color: var(--magenta); }
.mn-eyebrow--white   { color: rgba(255, 255, 255, .82); }

.mn-h1 {
  font-family: var(--head);
  font-weight: 900;
  font-size: clamp(42px, 6.6vw, 96px);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--white);
}
.mn-h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 32px;
  color: var(--navy);
}
.mn-h2--sm { font-size: clamp(28px, 3.3vw, 44px); }
.mn-h2--on-navy { color: var(--white); }

.mn-lead { font-size: clamp(17px, 1.4vw, 21px); }
.mn-strong-line { font-weight: 700; }
.mn-note {
  font-size: 13px;
  font-style: italic;
  color: var(--grey-soft);
  line-height: 1.55;
}

/* Filetto oro sotto i titoli. */
.mn-rule {
  width: 96px;
  height: 7px;
  background: var(--gold);
  border: 0;
  margin: 34px 0 34px;
}
.mn-rule--center { margin-inline: auto; }

/* --- Sezione 1: above the fold ---------------------------------------- */

.mn-hero {
  background: var(--navy);
  color: var(--white);
  min-height: 88vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-block: 120px 140px;
}
.mn-hero__text { max-width: 900px; }
.mn-hero p { color: rgba(255, 255, 255, .88); }
.mn-hero .mn-strong-line { color: var(--white); }

.mn-scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 1px;
  height: 54px;
  background: var(--gold);
  opacity: .55;
}

/* --- Sezione 2: scheda numeri ----------------------------------------- */

.mn-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: 48px;
}
.mn-figures {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 30px 0 28px;
}
.mn-figure__num {
  display: block;
  font-family: var(--head);
  font-weight: 900;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.mn-figure--muted .mn-figure__num { color: var(--grey-soft); }
.mn-figure__label {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: var(--grey-text);
}
.mn-card__kicker {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--navy);
  margin: 0;
}

/* --- Sezione 3: blocco numero zero ------------------------------------ */

.mn-bignum {
  background: var(--navy);
  border-radius: var(--radius);
  color: var(--white);
  text-align: center;
  padding: 64px 40px;
}
.mn-bignum__num {
  display: block;
  font-family: var(--head);
  font-weight: 900;
  font-size: 128px;
  line-height: .9;
  color: var(--gold);
}
.mn-bignum__label {
  display: block;
  margin-top: 22px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}

/* --- Sezione 4: banda magenta ----------------------------------------- */

.mn-break {
  background: var(--magenta);
  color: var(--white);
  text-align: center;
  padding-block: 130px;
}
.mn-break .mn-h2 { color: var(--white); max-width: 980px; margin-inline: auto; }
.mn-break p { color: rgba(255, 255, 255, .92); max-width: 720px; margin-inline: auto; }
.mn-break .mn-strong-line { color: var(--white); font-size: clamp(19px, 1.7vw, 23px); }

/* --- Sezione 5: cosa ricevi ------------------------------------------- */

.mn-deliverables { display: grid; gap: 34px; }
.mn-item {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.mn-item:first-child { border-top: 0; padding-top: 0; }
.mn-item__n {
  display: block;
  font-family: var(--head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--magenta);
  margin-bottom: 10px;
}
.mn-item p { margin: 0; }

.mn-item--book {
  background: var(--gold-light);
  border: 0;
  border-radius: var(--radius);
  padding: 34px 36px;
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 30px;
  align-items: center;
}
.mn-item--book .mn-item__n { color: var(--navy); }
.mn-book-shot img,
.mn-book-shot .mn-slot { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }

.mn-mockup img { width: 100%; height: auto; display: block; }

.mn-closing {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px 48px;
  margin-top: 56px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.45;
  font-weight: 400;
}

/* --- Sezione 6: riprova sociale --------------------------------------- */

.mn-quote {
  background: #F4F5F7;
  border-left: 5px solid var(--magenta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 38px 40px;
  margin: 0;
}
.mn-quote p {
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}
.mn-quote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
}
.mn-link {
  font-weight: 700;
  color: var(--magenta);
  border-bottom: 2px solid rgba(175, 46, 111, .35);
  text-decoration: none;
}
.mn-link:hover { color: var(--magenta-d); border-bottom-color: var(--magenta-d); }

/* --- Sezione 7: per chi si, per chi no -------------------------------- */

.mn-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.mn-fit__col {
  border-radius: var(--radius);
  padding: 40px 38px;
  background: var(--white);
  border: 2px solid var(--navy);
}
.mn-fit__col--no {
  background: #F4F5F7;
  border: 1px solid var(--line);
  color: var(--grey-text);
}
.mn-fit__label {
  font-family: var(--head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 26px;
}
.mn-fit__col--no .mn-fit__label { color: var(--grey-soft); }
.mn-fit ul { list-style: none; margin: 0; padding: 0; }
.mn-fit li { margin-bottom: 22px; }
.mn-fit li:last-child { margin-bottom: 0; }
.mn-fit li strong { display: block; color: var(--navy); margin-bottom: 4px; }
.mn-fit__col--no li strong { color: #4A525E; }

/* --- Sezione 8: chi ti scrive ----------------------------------------- */

.mn-author { background: var(--navy); color: var(--white); }
.mn-author .mn-h2 { color: var(--white); }
.mn-author p { color: rgba(255, 255, 255, .88); }
.mn-author strong { color: var(--white); }
.mn-author__aside { font-size: 16px; color: rgba(255, 255, 255, .66); }

.mn-portrait img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
/* Se la foto non c'e' ancora: area piena navy piu' chiaro, nessun avatar. */
.mn-portrait--empty {
  background: #294A74;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
}

/* --- Sezione 9: form -------------------------------------------------- */

.mn-formbox {
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  max-width: 780px;
  margin-inline: auto;
  padding: 56px 56px 48px;
  text-align: center;
}
.mn-formbox .mn-h2 { margin-bottom: 0; }
.mn-form { text-align: left; margin-top: 38px; }
.mn-field { margin-bottom: 22px; }
.mn-field label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 8px;
}
.mn-field input {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 18px;
  color: var(--ink);
  background: var(--ivory);
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-sm);
}
.mn-field input:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
.mn-microcopy {
  font-size: 15px;
  color: var(--grey-text);
  line-height: 1.55;
  margin: 0 0 26px;
}
.mn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--magenta);
  color: var(--white);
  font-family: var(--head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
}
.mn-btn:hover { background: var(--magenta-d); color: var(--white); }
.mn-afterbtn {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--grey-soft);
  text-align: center;
}
.mn-form__status {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}

/* --- Sezione 10: FAQ a soffietto ---------------------------------------
   <details> e <summary> nativi: si aprono anche senza JavaScript, si
   comandano da tastiera e gli screen reader li annunciano gia' come
   elementi espandibili. Il chevron non e' un'icona decorativa ma il
   comando di apertura, ed e' disegnato con due bordi: nessun file, nessun
   gradiente. */

.mn-faq { border-top: 1px solid var(--line); }

.mn-faq__row { border-bottom: 1px solid var(--line); }

.mn-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  min-height: 44px;
  padding: 26px 2px;
  margin: 0;
  cursor: pointer;
  font-family: var(--head);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.32;
  color: var(--navy);
  list-style: none;
}
.mn-faq__q::-webkit-details-marker { display: none; }
.mn-faq__q:hover { color: var(--magenta); }
.mn-faq__q:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.mn-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border-right: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.mn-faq__row[open] .mn-faq__q::after {
  margin-top: 13px;
  transform: rotate(-135deg);
}

.mn-faq__a {
  margin: 0;
  padding: 0 60px 30px 0;
  max-width: 760px;
}
.mn-faq__row[open] .mn-faq__a { animation: mn-faq-apre .18s ease both; }

@keyframes mn-faq-apre {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* --- Footer di marca --------------------------------------------------- */

.mn-footerbrand {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, .78);
  padding-block: 56px 40px;
  text-align: center;
}
.mn-footerbrand strong {
  display: block;
  font-family: var(--head);
  font-weight: 800;
  font-size: 21px;
  color: var(--white);
  margin-bottom: 8px;
}
.mn-footerbrand a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.mn-footerbrand a:hover { color: var(--white); }

/* Il footer legale del tema si allinea al fondo scuro di questa landing. */
.osm-mn .lp-footer { background: var(--navy-dark, #12243E); }

/* --- Barra fissa mobile ------------------------------------------------ */

.mn-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: #1B3354;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .22s ease;
  display: none;
}
.mn-sticky.is-on { transform: translateY(0); }
.mn-sticky .mn-btn { height: 64px; font-size: 19px; }

/* --- Segnaposto immagini ----------------------------------------------- */

.mn-slot {
  display: block;
  width: 100%;
  background: #EDEFF2;
  border: 1px dashed #C7CDD6;
  border-radius: var(--radius);
  color: var(--grey-soft);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mn-slot--mockup { aspect-ratio: 4 / 3; }
.mn-slot--book   { aspect-ratio: 3 / 4; }

/* =========================================================================
   Mobile
   ========================================================================= */

@media (max-width: 900px) {
  .mn { font-size: 17px; }
  .mn-section { padding-block: 46px; }
  .mn-wrap { padding-inline: 24px; }

  .mn-two,
  .mn-two--wide-left,
  .mn-two--wide-right,
  .mn-fit { grid-template-columns: 1fr; gap: 34px; }

  .mn-hero { min-height: 0; padding-block: 64px 86px; }
  .mn-eyebrow { margin-bottom: 20px; font-size: 11px; }
  .mn-rule { margin-block: 24px; width: 72px; height: 6px; }

  .mn-card { padding: 30px 26px; }
  .mn-figures { gap: 26px; margin: 24px 0 22px; }
  .mn-figure__num { font-size: 46px; }
  .mn-card__kicker { font-size: 20px; }

  .mn-bignum { padding: 46px 26px; }
  .mn-bignum__num { font-size: 96px; }
  .mn-bignum__label { font-size: 18px; }

  .mn-break { padding-block: 66px; }

  .mn-item--book { grid-template-columns: 1fr; }
  .mn-book-shot { max-width: 150px; }
  .mn-closing { padding: 30px 26px; margin-top: 38px; }

  .mn-quote { padding: 28px 24px; }
  .mn-quote p { font-size: 16px; }

  .mn-fit__col { padding: 28px 24px; }

  .mn-formbox { padding: 34px 24px 30px; }
  .mn-field input { height: 54px; }
  .mn-btn { height: 64px; font-size: 19px; }

  .mn-faq__q { font-size: 19px; padding: 22px 2px; gap: 20px; }
  .mn-faq__a { padding-right: 0; padding-bottom: 24px; }

  /* La barra fissa esiste solo da telefono. */
  .mn-sticky { display: block; }

  /* Spazio in fondo, perche' la barra non copra il footer. */
  .page-template-template-landing-manuale .lp-footer { padding-bottom: 86px; }
}

/* Chi ha attivato "riduci movimento" non vede la barra scivolare. */
@media (prefers-reduced-motion: reduce) {
  .mn-sticky { transition: none; }
  .mn-faq__q::after { transition: none; }
  .mn-faq__row[open] .mn-faq__a { animation: none; }
}

/* Mockup: l'elenco dei tre punti e' molto piu' alto dell'immagine, quindi
   centrarla apriva un vuoto sotto il titolo. Ancorata in alto e resa
   "appiccicosa": accompagna la lettura dell'elenco invece di sparire su.
   Su mobile le colonne si impilano e lo sticky non ha senso. */
.mn-mockup {
  align-self: start;
  position: sticky;
  top: 40px;
}

@media (max-width: 900px) {
  .mn-mockup { position: static; }
}

/* Blocco "Cosa ricevi": colonne pari e gap piu' stretto, cosi' il mockup
   occupa davvero la fascia accanto ai punti numerati invece di galleggiare
   in una colonna stretta. L'immagine riempie tutta la larghezza disponibile. */
.mn-two--deliver {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.mn-two--deliver .mn-mockup img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .mn-two--deliver { grid-template-columns: 1fr; gap: 30px; }
}

/* Blocco libro a tutta larghezza, sotto il mockup e la colonna dei punti.
   Riempie lo spazio che restava vuoto sotto l'immagine verticale. */
.mn-item--book {
  grid-template-columns: 1fr 190px;
  margin-top: 44px;
  padding: 38px 44px;
}
.mn-item--book p { max-width: 720px; }

@media (max-width: 900px) {
  .mn-item--book { grid-template-columns: 1fr; margin-top: 28px; padding: 26px 24px; }
  .mn-item--book .mn-book-shot { max-width: 150px; }
}

/* =========================================================================
   BLOCCO OMAGGIO (l'ottavo giorno)
   Non e' il quarto punto di un elenco: e' un regalo, e deve fermare l'occhio.
   Riquadro compatto con bordo tratteggiato oro, come un tagliando staccabile.
   Margini stretti, testo grande, nessun numero.
   ========================================================================= */
.mn-item--book {
  grid-template-columns: 1fr 140px;
  gap: 36px;
  align-items: center;
  margin-top: 48px;
  padding: 26px 32px;
  background: var(--gold-light);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
}
.mn-item--book p {
  max-width: 640px;
  font-size: 23px;
  line-height: 1.5;
}
.mn-item--book strong { color: var(--navy); }
.mn-item--book em { font-style: italic; }

@media (max-width: 900px) {
  .mn-item--book {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
    padding: 22px 20px;
  }
  .mn-item--book p { font-size: 18px; }
  .mn-item--book .mn-book-shot { max-width: 120px; }
}

/* Logo non cliccabile: resta l'identita' visiva, sparisce la via d'uscita. */
.lp-logo--statico { display: inline-block; cursor: default; }

/* Blocco omaggio: la prima riga e' il richiamo, sta su una riga sua. */
.mn-item__gift { margin-bottom: 14px; }
.mn-item--book p:last-child { margin-bottom: 0; }

/* =========================================================================
   TESTATA
   Il tema la tiene appiccicata in alto con fondo semitrasparente e sfocatura:
   su questa landing e' statica e scorre via con la pagina, senza coprire il
   titolo (revisione 2 del documento).
   Il fondo e' lo stesso navy dell'hero, cosi' sparisce la striscia chiara in
   cima, e il logo e' reso bianco via filtro: l'originale e' trasparente al
   68%, quindi brightness(0) + invert(1) lo porta a bianco pieno mantenendo
   i contorni. Nessun file nuovo da caricare.
   Logo centrato e alto 68px: a 40px la riga "PARTNER MESSINA" non si leggeva.
   Le regole sono agganciate alla classe del template, cosi' le altre due
   landing restano com'erano. Qui non si possono usare le variabili di .mn:
   la testata sta fuori da quel contenitore, quindi valori espliciti.
   ========================================================================= */
.osm-mn .lp-header {
  position: static;
  background: #1B3354;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.osm-mn .lp-header__inner {
  justify-content: center;
  padding-block: 24px 10px;
}
.osm-mn .lp-logo__img {
  height: 68px;
  filter: brightness(0) invert(1);
}
.page-template-template-landing-manuale .mn-hero { padding-top: 64px; }

@media (max-width: 900px) {
  .osm-mn .lp-header__inner { padding-block: 18px 6px; }
  .osm-mn .lp-logo__img { height: 52px; }
  .page-template-template-landing-manuale .mn-hero { padding-top: 40px; }
}

/* =========================================================================
   AGGANCIO MOCKUP / RIGA BLU
   La mano che tiene il telefono esce dal bordo superiore del blocco navy:
   il mockup sconfina verso il basso e la riga blu gli passa sopra, tagliando
   il polso. Per farlo servono due cose: un elenco piu' compatto, che libera
   altezza, e il mockup fermo (lo sticky lo farebbe scivolare rompendo
   l'aggancio).
   ========================================================================= */

/* ".mn p" (0,1,1) batteva ".mn-closing" (0,1,0): il margine superiore del
   blocco navy non veniva mai applicato. Qui ha la specificita' giusta. */
.mn-section .mn-closing { margin-top: 56px; }

@media (min-width: 901px) {
  .mn-two--deliver .mn-deliverables { gap: 22px; }
  .mn-two--deliver .mn-deliverables .mn-item { padding-top: 18px; }
  .mn-two--deliver .mn-mockup { position: static; }
}

/* Il mockup e' allineato a filo con il titolo di sezione, con la riga blu e
   col riquadro dell'omaggio. Il PNG ha 8,91% di margine trasparente a
   sinistra e zero a destra: lo spostamento negativo serve a compensarlo,
   cosi' e' il bordo del libro ad andare a filo, non quello del file.
   110% di larghezza x 8,91% di margine = 9,8% di scostamento. */
@media (min-width: 901px) {
  .mn-two--deliver .mn-mockup img {
    width: 110%;
    max-width: none;
    margin-left: -9.8%;
    /* Taglia solo il polso: il bordo inferiore del telefono resta visibile. */
    margin-bottom: -60px;
  }
  .mn-section .mn-closing {
    position: relative;
    z-index: 2;
    margin-top: 26px;
  }
}

/* Footer compattato: tolte le due righe con ragione sociale e indirizzo del
   sito, e ridotti al minimo i margini verticali. I corpi del testo restano
   quelli di prima: si guadagna altezza solo sugli spazi. */
.mn-footerbrand { padding-block: 26px 20px; }
.mn-footerbrand strong { margin-bottom: 3px; }

.osm-mn .lp-footer { padding: 18px 0 22px; }
.osm-mn .lp-footer__disclaimer { margin-top: 10px; }

/* La riga legale su desktop deve stare su un rigo solo. Serviva pochissimo:
   il testo chiede 1040px e ne aveva 1024, quindi andava a capo per l'ultima
   parola. Allargando il contenitore del footer a 1160px entra con 65px di
   margine. Sotto i 1220px di finestra non c'e' spazio e torna a capo da sola. */
@media (min-width: 1220px) {
  .osm-mn .lp-footer .lp-container { max-width: 1160px; }
}

/* Le risposte delle FAQ possono avere piu' paragrafi (rev. 4). */
.mn-faq__a p { margin: 0 0 16px; }
.mn-faq__a p:last-child { margin-bottom: 0; }

/* Indirizzo delle recensioni: testo in chiaro, non un link. Nessuna uscita
   dalla pagina, ma resta verificabile, che e' cio' che lo rende una prova. */
.mn-fonte { margin-top: 4px; }
.mn-fonte strong { color: var(--navy); }

/* =========================================================================
   TIPOGRAFIA MOBILE (audit del 23/09/2026)
   Regola: su telefono nessun testo deve risultare piu' piccolo che su
   desktop. Vale anche dove l'audit non ha misurato.
   Non riguarda titoli e numeri-grafici: per quelli il documento di consegna
   prescrive misure mobili apposite (H1 42px, cifre 96 e 46px) e restano.
   ========================================================================= */
@media (max-width: 900px) {

  /* 1 · Corpo dei paragrafi. Il valore non veniva da una regola sui
     paragrafi ma da ".mn", il contenitore: era 17px, cioe' due pixel sotto
     i 19 del desktop. */
  .mn { font-size: 20px; line-height: 1.6; }

  /* 2 · Sottotitolo dell'above the fold: il testo piu' letto della pagina. */
  .mn-lead { font-size: clamp(19px, 1.4vw, 21px); }

  /* 3 · Citazione di Idea PC: era l'unica riprova sociale e su telefono
     diventava il testo piu' piccolo della pagina. */
  .mn-quote p { font-size: 20px; }

  /* 4 · Blocco del libro. */
  .mn-item--book p { font-size: 20px; }

  /* 5 · Occhielli: erano rimpiccioliti a 11px. */
  .mn-eyebrow { font-size: 13px; }

  /* 6 · Note fonte (Excelsior, Istat): sono prove, non decorazione. */
  .mn-note { font-size: 15px; }

  /* 7 · Etichette "E' per te se" / "Non e' per te se". */
  .mn-fit__label { font-size: 15px; }

  /* 8 · Riga sotto il bottone del form. */
  .mn-afterbtn { font-size: 15px; }

  /* Fuori dall'elenco dell'audit, ma la regola vale lo stesso: erano gli
     ultimi due testi rimasti sotto la misura del desktop. */
  .mn-bignum__label { font-size: 20px; }
  .mn-card__kicker { font-size: 22px; }
}

/* Mobile: il libro dell'omaggio va centrato nel riquadro e ingrandito.
   Impilato in colonna singola restava piccolo e schiacciato a sinistra, con
   un vuoto a destra che sbilanciava il tagliando. Tre regole precedenti lo
   limitavano (150, 150, 120px): questa le chiude tutte. */
@media (max-width: 900px) {
  .mn-item--book .mn-book-shot {
    max-width: 220px;
    margin-inline: auto;
  }
  .mn-item--book { padding-bottom: 26px; }
}

/* Modulo Go High Level incorporato. E' un iframe su un altro dominio: il suo
   aspetto interno si governa dentro GHL, qui si controlla solo la cornice. */
.mn-form-embed { margin-top: 30px; }
.mn-form-embed iframe { display: block; width: 100%; border: 0; }
.mn-formbox .mn-microcopy { margin: 22px 0 0; }
.mn-formbox .mn-afterbtn { margin-top: 12px; }

@media (max-width: 900px) {
  .mn-form-embed { margin-top: 22px; }
}

/* =========================================================================
   PAGINA GRAZIE (dopo opt-in)
   Stessa identita' della landing, ma e' una pagina di servizio: deve stare
   in una schermata e mezza da telefono, quindi scala e spaziature sono piu'
   contenute. Nessun bottone: il suo unico lavoro e' far aprire WhatsApp.
   ========================================================================= */

.mn-grazie__wrap { max-width: 720px; }

.mn-grazie__testa {
  padding-block: 64px 32px;
  text-align: center;
}
.mn-grazie__h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-bottom: 0;
}
.mn-grazie__lead { color: var(--grey-text); }
.mn-grazie__testa .mn-rule { margin-block: 22px; }

.mn-grazie__corpo { padding-block: 0 72px; }

.mn-gz-blocco {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 26px;
}
.mn-gz-blocco:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.mn-gz-titolo {
  font-family: var(--head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 12px;
}
.mn-gz-blocco p { margin: 0 0 14px; }
.mn-gz-blocco p:last-child { margin-bottom: 0; }

/* Il blocco di soccorso e' l'unico con un fondo: chi ci arriva ha un problema
   e deve trovarlo al volo scorrendo la pagina. */
.mn-gz-blocco--soccorso {
  background: var(--gold-light);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-top: 34px;
}
.mn-gz-numero { color: var(--navy); white-space: nowrap; }

@media (max-width: 900px) {
  .mn-grazie__testa { padding-block: 40px 24px; }
  .mn-grazie__corpo { padding-block: 0 48px; }
  .mn-gz-titolo { font-size: 20px; }
  .mn-gz-blocco { padding-top: 20px; margin-top: 20px; }
  .mn-gz-blocco--soccorso { padding: 18px 20px; margin-top: 26px; }
}

/* Riga in coda al terzo punto numerato: e' un secondo respiro dentro lo stesso
   blocco, non un punto nuovo, quindi resta allineata al testo di sopra. */
.mn-item__more { margin-top: 12px !important; }

/* Emanuela: seconda riga della stessa sezione, stesso impianto di Vincenzo -
   ritratto a sinistra, testo a destra. Il filetto chiaro le separa senza
   spezzare il fondo navy. */
.mn-author__ema {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

@media (max-width: 900px) {
  .mn-author__ema { margin-top: 32px; padding-top: 28px; }
}

.mn-author__sub {
  margin: 0 0 12px;
  font-family: var(--head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--white);
}

@media (max-width: 900px) {
  .mn-author__sub { font-size: 21px; }
}

/* ==========================================================================
   Protocollo Riordino - la sezione dopo il modulo
   Riferimento: facsimile-protocollo-riordino-landing-v1.png del 25/09/2026.

   Le quattro fasi stanno in fila, mai in cerchio: un ciclo dice "questo non
   finisce mai", e chi legge ci vede un costo che non smette. Niente frecce
   all'insu', scale, piramidi o gradini - nulla che somigli a una classifica
   fra le persone.
   ========================================================================== */

.mn-rior .mn-lead {
  margin-top: 14px;
  max-width: 640px;
}

.mn-rior__fasi {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}

.mn-rior__fase {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: var(--ivory);
  border-left: 9px solid var(--gold);
}

.mn-rior__n {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--head);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  color: var(--gold);
}

.mn-rior__t {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--head);
  font-weight: 900;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Il testo va a capo sotto il titolo, non sotto il numero. */
.mn-rior__fase p {
  grid-column: 2;
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
}

/* Un solo livello di grassetto in tutta la sezione: nel corpo non ce n'e',
   cosi' l'occhio salta da un numero all'altro senza inciampare. */
.mn-rior__fase p strong { font-weight: 400; }

/* Il box della regola e' il secondo livello di lettura: dice che dietro c'e'
   un protocollo e non un elenco di cose che fanno tutti. Senza questi box la
   sezione e' copiabile da chiunque. */
.mn-rior__regola {
  margin-top: 16px !important;
  padding: 12px 16px;
  background: #F4F3EF;
  border-left: 5px solid var(--gold);
  font-family: var(--body);
  font-weight: 700;
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.4;
  color: var(--navy) !important;
}

.mn-rior__chiusura {
  max-width: 760px;
  margin: 34px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.mn-rior__ct {
  margin: 0 0 14px;
  font-family: var(--head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.25;
  color: var(--navy);
}

/* Nessuna misura qui dentro: il testo prende corpo, interlinea e carattere
   dal resto della landing, come tutti gli altri paragrafi. */
.mn-rior__chiusura p {
  margin: 0 0 22px;
  color: var(--ink);
}

.mn-rior__btn { margin: 26px auto 0; }

/* Su schermo largo le quattro fasi stanno in fila, con il box della regola
   sempre attaccato alla sua fase. */
@media (min-width: 901px) {
  .mn-rior__fasi {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .mn-rior__fase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }

  .mn-rior__n { font-size: 46px; }

  .mn-rior__t {
    margin-top: 8px;
    font-size: 19px;
  }

  .mn-rior__fase p { font-size: 17px; }

  .mn-rior__regola { font-size: 16px !important; }

  .mn-rior__btn { max-width: 420px; }
}

/* Su telefono il corpo non scende sotto i 20 px: chi legge ha fra i 45 e i 65
   anni e lo fa alle 7:30 del mattino. */
@media (max-width: 900px) {
  /* Il testo resta allineato sotto il titolo, come nel facsimile, ma il numero
     e i margini si stringono: a 20 px di corpo ogni pixel tolto al margine e'
     una parola in piu' per riga. */
  .mn-rior__fase {
    padding: 20px 18px;
    column-gap: 14px;
  }

  .mn-rior__regola { padding: 12px 14px; }

  .mn-rior__fase p { font-size: 20px; }

  .mn-rior__regola { font-size: 18px !important; }

  .mn-rior__n { font-size: 44px; }

  .mn-rior__t { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   La citazione del Sole 24 ORE, dentro la sezione della testimonianza.
   Piccola per due motivi messi in conto: grande sposterebbe il peso della
   pagina sullo strumento invece che sul metodo, e una riproduzione ampia di un
   articolo altrui e' un problema di diritti che una citazione non ha.
   -------------------------------------------------------------------------- */

.mn-press {
  margin: 30px 0 0;
  max-width: 480px;
}

.mn-press__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #DCDFE4;
  border-radius: 8px;
}

.mn-press__cap {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--grey-text);
}

.mn-press__cap a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mn-press__cap a:hover { color: var(--magenta); }

@media (max-width: 900px) {
  /* Su telefono la didascalia e' testo di lettura come il resto: non scende
     sotto i 20 px. */
  .mn-press__cap { font-size: 20px; }
}