/* ================================================================
   ReaLink - SEZIONI RIDISEGNATE (css)
   Prefisso unico: "sec-".
   Va caricato DOPO style.css / motion.css / mockup*.css / home-restyle.css.

   Copre tre sezioni della home:
   01. #diffSection    matrice di confronto riga per riga
   02. #cosa-ricevi    cosa danno gli altri / cosa diamo noi + tre corsie
   03. #eredi          il 90% come protagonista + mappa dei co-eredi
   09. #confronto-ads  il duello a due colonne: le categorie di
                       fornitori contro ReaLink, chi paga prima
   10. #calcolatore    slider del budget + stima del ritorno (js/roi.js)
   12. #sistema        il sistema che si monta pezzo per pezzo mentre
                       scorri (sticky) + fascia di chiusura
   11. .sec-icard      card con pittogramma svg inline, usate da
                       #branding e #compliance nella home, e dalla
                       pagina metodo.html

   REGOLE
   - Nessun colore nuovo: solo le variabili gia esistenti in style.css
     (--color-accent, --book-orange, --color-ink, --color-line, ...)
     piu il rosso/verde di segnalazione gia usati in diff-pin.css.
   - Nessuna immagine esterna, nessun icon font: i pittogrammi sono
     disegnati con bordi e pseudo elementi.
   - Sotto i 880px tutto diventa una colonna.
   ================================================================ */

:root {
  /* Segnali gia in uso nel sito (diff-pin.css, cost-card): li richiamiamo
     qui come token per non ripetere i valori riga per riga. */
  --sec-no-ink:   #dc2626;
  --sec-no-bg:    #fde8e8;
  --sec-neutral:  #eef0f3;
  --sec-neutral-ink: #6b6b72;
  --sec-deep:     #15234d;   /* fondo del gradiente blu, gia in diff-pin.css */
}

/* ================================================================
   PEZZI COMUNI
   ================================================================ */

/* Spunta / crocetta / trattino. Pittogramma puro CSS, nessun font. */
.sec-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 1px;
}
.sec-mark.is-x  { background: var(--sec-no-bg); color: var(--sec-no-ink); }
.sec-mark.is-ck { background: var(--color-accent); color: #fff; }

/* Etichetta breve, tutta maiuscola. */
.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.sec-tag.is-all  { background: var(--sec-neutral); color: var(--sec-neutral-ink); }
.sec-tag.is-only { background: var(--book-orange); color: #fff; }
.sec-tag.is-top  { background: rgba(255,255,255,.16); color: #fff; }

/* Casetta disegnata in CSS: tetto (triangolo di bordi) + corpo.
   Eredita il colore dal contesto, cosi va bene su fondo chiaro e scuro. */
.sec-house {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 24px;
  color: inherit;
}
.sec-house::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 10px solid currentColor;
}
.sec-house::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  width: 18px;
  height: 14px;
  border-radius: 0 0 3px 3px;
  background: currentColor;
}
.sec-house.is-off { opacity: .26; }

.sec-houses {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ================================================================
   01. #diffSection - MATRICE DI CONFRONTO
   Quattro colonne: criterio + tre opzioni. Ogni riga e un confronto
   sullo STESSO criterio, cosi l'occhio scorre in orizzontale.
   ================================================================ */

.sec-cmp {
  width: 100%;
  text-align: left;
}

.sec-cmp__grid {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.02fr)
    minmax(140px, 1fr)
    minmax(160px, 1.16fr)
    minmax(140px, 1fr);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(15, 15, 16, .25);
}

/* La riga esiste nel DOM (serve per la coreografia e per il mobile)
   ma su desktop sparisce dal layout: le celle diventano celle di griglia. */
.sec-cmp__row { display: contents; }

.sec-cmp__cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--color-ink-soft);
  background: #fff;
}

/* Riga di separazione fra un confronto e l'altro. */
.sec-cmp__row + .sec-cmp__row .sec-cmp__cell {
  border-top: 1px solid var(--color-line);
}

/* Colonna dei criteri */
.sec-cmp__crit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.25;
  color: var(--color-ink);
  background: var(--color-bg-alt);
  align-items: center;
}

/* --- Intestazioni di colonna ------------------------------------ */
.sec-cmp__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px;
  background: var(--color-bg-alt);
}
.sec-cmp__head h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--color-ink);
}
.sec-cmp__head--empty { background: var(--color-bg-alt); }

/* Colonna vincente: fondo blu pieno in testa, velo azzurro sulle celle. */
.sec-cmp__head--win {
  background: linear-gradient(165deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 26px 50px -32px rgba(30, 58, 138, .8);
}
.sec-cmp__head--win h3 { color: #fff; }

.sec-cmp__cell.is-win {
  background: rgba(30, 58, 138, .055);
  color: var(--color-ink);
  font-weight: 600;
  box-shadow:
    inset  1px 0 0 rgba(30, 58, 138, .14),
    inset -1px 0 0 rgba(30, 58, 138, .14);
}

/* --- Piede: la leva sulla provvigione --------------------------- */
.sec-cmp__foot {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  text-align: left;
}
.sec-cmp__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 18px;
  border-radius: 999px;
  background: linear-gradient(165deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  color: #fff;
  box-shadow: 0 22px 44px -26px rgba(30, 58, 138, .85);
}
.sec-cmp__num {
  font-family: var(--font-numeric);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.sec-cmp__lbl {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  max-width: 22ch;
  color: rgba(255, 255, 255, .86);
}
.sec-cmp__note {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
  max-width: 34ch;
}
.sec-cmp__note strong { color: var(--color-ink); }

/* --- Schermi bassi: la sezione e pinnata, deve stare in una schermata --- */
@media (min-width: 881px) and (max-height: 900px) {
  #diffSection .dp-title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
  #diffSection .dp-sub   { margin-bottom: 24px; font-size: .95rem; }
  #diffSection .dp-eyebrow { margin-bottom: 14px; }
  .sec-cmp__cell { padding: 9px 14px; font-size: .82rem; }
  .sec-cmp__head { padding: 13px 14px; }
  .sec-cmp__foot { margin-top: 14px; }
}

/* Schermi molto bassi (portatili 13 pollici): secondo giro di compattamento,
   la matrice deve restare tutta dentro la schermata pinnata. */
@media (min-width: 881px) and (max-height: 780px) {
  #diffSection { padding-top: 28px; padding-bottom: 24px; }
  #diffSection .dp-eyebrow { margin-bottom: 10px; font-size: .72rem; }
  #diffSection .dp-title { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-bottom: 10px; }
  #diffSection .dp-sub   { margin-bottom: 18px; font-size: .9rem; }
  .sec-cmp__cell { padding: 7px 12px; font-size: .79rem; }
  .sec-cmp__head { padding: 10px 12px; gap: 6px; }
  .sec-cmp__head h3 { font-size: .92rem; }
  .sec-cmp__foot { margin-top: 12px; gap: 10px 20px; }
  .sec-cmp__stat { padding: 9px 18px 9px 14px; }
  .sec-cmp__num { font-size: 1.5rem; }
}

/* --- Mobile: ogni criterio diventa una scheda impilata ---------- */
@media (max-width: 880px) {
  .sec-cmp__grid {
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .sec-cmp__row {
    display: block;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 14px 30px -24px rgba(15, 15, 16, .3);
  }
  .sec-cmp__row + .sec-cmp__row .sec-cmp__cell { border-top: none; }

  /* Le intestazioni di colonna non servono piu: ogni cella si porta
     dietro il nome del fornitore (data-who). */
  .sec-cmp__grid > .sec-cmp__row--head { display: none; }

  .sec-cmp__crit {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-line);
  }

  .sec-cmp__val {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 10px;
    row-gap: 4px;
    padding: 11px 16px;
  }
  .sec-cmp__val + .sec-cmp__val { border-top: 1px solid var(--color-line); }
  .sec-cmp__val::before {
    content: attr(data-who);
    grid-column: 1 / -1;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sec-neutral-ink);
  }
  .sec-cmp__cell.is-win {
    box-shadow: none;
    background: rgba(30, 58, 138, .07);
  }
  .sec-cmp__cell.is-win::before { color: var(--color-accent); }

  .sec-cmp__foot { justify-content: flex-start; }
  .sec-cmp__note { max-width: none; }
}

@media (max-width: 480px) {
  .sec-cmp__stat { width: 100%; border-radius: 18px; }
  .sec-cmp__lbl { max-width: none; }
}

/* ================================================================
   02. #cosa-ricevi - COSA DANNO GLI ALTRI / COSA DIAMO NOI
   ================================================================ */

.sec-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(14px, 2.4vw, 30px);
  margin: 0 0 clamp(28px, 4vw, 46px);
}

.sec-split__side {
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: #fff;
  padding: clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-split__side.is-us {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(165deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 34px 66px -34px rgba(30, 58, 138, .75);
}

.sec-split__lbl {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sec-neutral-ink);
}
.sec-split__side.is-us .sec-split__lbl { color: rgba(255, 255, 255, .72); }

.sec-split__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sec-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.2;
}
.sec-chip.is-have {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
}
.sec-chip.is-miss {
  background: transparent;
  border: 1px dashed rgba(220, 38, 38, .45);
  color: var(--sec-no-ink);
}
.sec-chip.is-yes {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
}
.sec-chip.is-yes.is-star {
  background: var(--book-orange);
  border-color: var(--book-orange);
  box-shadow: 0 16px 30px -14px rgba(231, 89, 31, .85);
}
.sec-chip .sec-mark.is-ck { background: rgba(255, 255, 255, .22); color: #fff; }
.sec-chip.is-have .sec-mark.is-ck { background: var(--color-accent); color: #fff; }

/* Il "VS" fra le due colonne */
.sec-split__vs {
  align-self: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  color: #fff;
  background: var(--color-ink);
  box-shadow: 0 10px 22px -8px rgba(15, 15, 16, .55);
}

/* --- Le tre corsie ---------------------------------------------- */
.sec-lanes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec-lane {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 2.3vw, 26px);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

.sec-lane__n {
  font-family: var(--font-numeric);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--color-ink);
  opacity: .22;
}

.sec-lane__hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.sec-lane__hd h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--color-ink);
}
.sec-lane__txt p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 46ch;
}

/* Il dato grande a destra della corsia */
.sec-lane__fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  min-width: 150px;
}
.sec-lane__big {
  font-family: var(--font-numeric);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--color-accent);
}
.sec-lane__cap {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--sec-neutral-ink);
  max-width: 18ch;
}
.sec-lane__houses { color: var(--color-accent); }

/* Corsia esclusiva: filo arancio sul bordo sinistro */
.sec-lane.is-only::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--book-orange);
}

/* Corsia di punta: gli eredi */
.sec-lane.is-star {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(150deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 36px 70px -34px rgba(30, 58, 138, .8);
}
.sec-lane.is-star::before { background: var(--book-orange); width: 6px; }
.sec-lane.is-star .sec-lane__n { color: #fff; opacity: .38; }
.sec-lane.is-star .sec-lane__hd h3 { color: #fff; font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
.sec-lane.is-star .sec-lane__txt p { color: rgba(255, 255, 255, .84); }
.sec-lane.is-star .sec-lane__big { color: #fff; font-size: clamp(2.6rem, 5.4vw, 3.9rem); }
.sec-lane.is-star .sec-lane__cap { color: rgba(255, 255, 255, .72); }

@media (max-width: 880px) {
  .sec-split { grid-template-columns: 1fr; }
  .sec-split__vs { justify-self: center; margin: -4px 0; }

  .sec-lane {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }
  .sec-lane__fig {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
    padding-top: 4px;
    border-top: 1px solid var(--color-line);
    margin-top: 4px;
    min-width: 0;
  }
  .sec-lane.is-star .sec-lane__fig { border-top-color: rgba(255, 255, 255, .18); }
  .sec-lane__txt p { max-width: none; }
  .sec-lane__cap { max-width: none; }
}

/* ================================================================
   03. #eredi - IL 90% E LA MAPPA DEI CO-EREDI
   ================================================================ */

.sec-heirs {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(16px, 2.6vw, 32px);
  align-items: stretch;
}

.sec-heirs__stat {
  border-radius: 24px;
  padding: clamp(26px, 3.4vw, 44px);
  color: #fff;
  background: linear-gradient(150deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 40px 80px -38px rgba(30, 58, 138, .8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.sec-heirs__num {
  font-family: var(--font-numeric);
  font-size: clamp(4.2rem, 11vw, 7rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .86;
  color: #fff;
}
.sec-heirs__num-lbl {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
  max-width: 20ch;
}
.sec-heirs__bar {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.sec-heirs__bar .sec-houses { color: #fff; }
.sec-heirs__bar-lbl {
  display: block;
  margin-top: 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* I tre punti, una frase ciascuno */
.sec-heirs__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec-point {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: #fff;
  flex: 1;
}
.sec-point__n {
  font-family: var(--font-numeric);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .09);
  border-radius: 11px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-point h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--color-ink);
}
.sec-point p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
.sec-point.is-only { border-color: rgba(231, 89, 31, .38); }
.sec-point.is-only .sec-point__n { color: var(--book-orange); background: rgba(231, 89, 31, .1); }

/* --- Mappa dei co-eredi: piu persone, un solo immobile ---------- */
.sec-comap {
  margin-top: clamp(16px, 2.6vw, 26px);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  background: var(--color-bg-alt);
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}
.sec-comap__txt h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 10px 0 6px;
  color: var(--color-ink);
}
.sec-comap__txt p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 42ch;
}

.sec-map { position: relative; }
/* Niente gap: cosi ogni colonna vale esattamente un terzo e i fili
   verticali (16,6% / 50% / 83,3%) cadono al centro di ogni persona. */
.sec-map__people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.sec-map__p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.sec-map__av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  color: #fff;
  background: var(--color-accent);
  box-shadow: 0 12px 24px -12px rgba(30, 58, 138, .9);
}
.sec-map__p:nth-child(2) .sec-map__av { background: var(--book-orange); box-shadow: 0 12px 24px -12px rgba(231, 89, 31, .9); }
.sec-map__nm {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sec-neutral-ink);
}

/* I fili che collegano le tre persone allo stesso immobile.
   Solo bordi e blocchi, nessuna immagine. */
.sec-map__wires {
  position: relative;
  height: 46px;
  margin: 2px 0;
}
.sec-map__wires span {
  position: absolute;
  background: rgba(30, 58, 138, .3);
}
.sec-map__wires .w {
  top: 0;
  width: 2px;
  height: 50%;
  transform: translateX(-1px);
}
.sec-map__wires .w1 { left: 16.666%; }
.sec-map__wires .w2 { left: 50%; }
.sec-map__wires .w3 { left: 83.333%; }
.sec-map__wires .bus {
  top: calc(50% - 1px);
  left: 16.666%;
  width: 66.666%;
  height: 2px;
}
.sec-map__wires .drop {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  transform: translateX(-1px);
}

.sec-map__asset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: 0 16px 34px -24px rgba(15, 15, 16, .4);
}
.sec-map__asset .sec-house { color: var(--color-accent); }
.sec-map__asset b {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--color-ink);
}
.sec-map__asset small {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sec-neutral-ink);
}

@media (max-width: 880px) {
  .sec-heirs { grid-template-columns: 1fr; }
  .sec-comap { grid-template-columns: 1fr; }
  .sec-comap__txt p { max-width: none; }
  .sec-heirs__num-lbl { max-width: none; }
}

@media (max-width: 600px) {
  .sec-point { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .sec-point__n { width: 34px; height: 34px; font-size: .92rem; border-radius: 10px; }
  .sec-lane { padding: 18px; }
  .sec-map__av { width: 40px; height: 40px; font-size: .74rem; }
  .sec-map__nm { font-size: .62rem; letter-spacing: .04em; }
}

/* ================================================================
   04. DIDASCALIA DEI MOCKUP
   Il portatile con la piattaforma non si spiegava da solo: questa
   fascia dice in due righe che cos'e e a chi la consegniamo.
   ================================================================ */

.sec-capt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(15, 15, 16, .35);
}

.sec-capt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(165deg, var(--color-accent) 0%, var(--sec-deep) 100%);
}

.sec-capt__txt h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--color-ink);
}
.sec-capt__txt p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 62ch;
}

@media (max-width: 700px) {
  .sec-capt {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sec-capt__eyebrow { justify-self: start; }
  .sec-capt__txt p { max-width: none; }
}

/* ================================================================
   05. #dentro-contatto - UNA SOLA SCHEDA CONTATTO
   Al posto delle cinque scatolette affiancate (di cui una restava
   orfana sulla seconda riga) c'e una scheda sola, larga, che si legge
   come la fotografia di un contatto vero: a sinistra il dato
   evidenziato, a destra l'etichetta breve che dice cosa stai
   guardando. Sotto i 780px le etichette si staccano e diventano una
   lista sotto la scheda.
   ================================================================ */

.sec-idwrap {
  margin-top: clamp(34px, 4.6vw, 60px);
  padding-top: clamp(26px, 3.8vw, 44px);
  border-top: 1px solid var(--color-line);
}

.sec-idcard {
  border: 1px solid var(--color-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 64px -44px rgba(15, 15, 16, .55);
  overflow: hidden;
}

/* --- Testata: chi e --- */
.sec-idcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.sec-idcard__av {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .02em;
  color: #fff;
  background: var(--color-accent);
  box-shadow: 0 12px 24px -14px rgba(30, 58, 138, .9);
}
.sec-idcard__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sec-idcard__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--color-ink);
}
.sec-idcard__sub {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sec-neutral-ink);
}
.sec-idcard__seal {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--book-orange);
  background: rgba(231, 89, 31, .1);
  border: 1px solid rgba(231, 89, 31, .28);
}

/* --- Corpo: dato a sinistra, etichetta a destra --- */
.sec-idcard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(196px, .8fr);
  gap: 0;
}

.sec-idrow {
  position: relative;
  display: grid;
  grid-template-columns: 32px 116px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--color-line);
  transition: background .35s ease;
}
.sec-idrow:hover { background: rgba(30, 58, 138, .035); }
.sec-idrow:nth-last-child(2) { border-bottom: 0; }

.sec-idrow__ic {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .09);
}
.sec-idrow__ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sec-idrow__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--color-ink);
}

/* Il dato: deve sembrare copiato dalla piattaforma, non scritto qui. */
.sec-idrow__v {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sec-idrow__v b {
  font-family: var(--font-numeric);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--color-accent);
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(30, 58, 138, .06);
  border: 1px solid rgba(30, 58, 138, .18);
  white-space: nowrap;
}
.sec-idrow__v b.is-warm {
  color: var(--book-orange);
  background: rgba(231, 89, 31, .07);
  border-color: rgba(231, 89, 31, .3);
}
.sec-idrow__v b.is-mute {
  color: var(--sec-neutral-ink);
  background: var(--sec-neutral);
  border-color: var(--color-line);
}

/* Riga di punta: il tipo di contatto, l'unico dato che gli altri non
   hanno. Filo arancio come nelle corsie di #cosa-ricevi. */
.sec-idrow.is-only { box-shadow: inset 3px 0 0 var(--book-orange); }
.sec-idrow.is-only .sec-idrow__ic {
  color: var(--book-orange);
  background: rgba(231, 89, 31, .1);
}

/* --- Etichette: due o tre parole che indicano il dato --- */
.sec-idtag {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 13px clamp(16px, 2.2vw, 22px);
  border-bottom: 1px solid var(--color-line);
  border-left: 1px dashed var(--color-line);
  background: var(--color-bg-alt);
}
.sec-idtag:last-child { border-bottom: 0; }
/* Il pallino sul filo tratteggiato: e la punta della freccia che
   collega l'etichetta al dato che ha accanto. */
.sec-idtag::before {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(50% - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
.sec-idtag.is-only::before { background: var(--book-orange); }
.sec-idtag__l {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-accent);
}
.sec-idtag.is-only .sec-idtag__l { color: var(--book-orange); }
.sec-idtag__d {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

/* --- Sotto i 780px: una colonna, etichette in lista sotto la scheda -- */
@media (max-width: 780px) {
  .sec-idcard__grid { grid-template-columns: minmax(0, 1fr); }

  /* L'ultima riga si riprende il filo: e la linea che separa la
     scheda dalla lista delle etichette. */
  .sec-idcard__grid .sec-idrow,
  .sec-idcard__grid .sec-idrow:nth-last-child(2) {
    order: 1;
    border-bottom: 1px solid var(--color-line);
  }
  .sec-idtag { order: 2; }

  .sec-idrow {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    row-gap: 8px;
  }
  .sec-idrow__k { align-self: center; }
  .sec-idrow__v { grid-column: 2; }

  .sec-idtag {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 10px;
    padding: 7px clamp(16px, 4vw, 22px);
    border-bottom: 0;
    border-left: 0;
    background: none;
  }
  .sec-idtag::before {
    position: static;
    width: 6px;
    height: 6px;
    margin-left: 2px;
  }
  .sec-idtag__l,
  .sec-idtag__d { grid-column: 2; }
  .sec-idtag:first-of-type { padding-top: 16px; }
  .sec-idtag:last-of-type { padding-bottom: 18px; }
}

@media (max-width: 600px) {
  .sec-idcard__head { flex-wrap: wrap; }
  .sec-idcard__seal { margin-left: 0; }
  .sec-idrow__v b { font-size: .82rem; padding: 4px 8px; }
}

/* ================================================================
   05b. #eredi - IL PALLINO CHE PERCORRE I COLLEGAMENTI
   Un solo elemento che scorre lungo i fili gia disegnati: scende da
   E1, sale su E2, torna sul filo, sale su E3. Percentuali, cosi il
   tracciato resta agganciato ai fili a qualsiasi larghezza.
   ================================================================ */

.sec-map__dot {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--book-orange);
  box-shadow: 0 0 0 4px rgba(231, 89, 31, .14);
  opacity: 0;
  left: 16.666%;
  top: 0;
  /* 5 secondi per andata e ritorno completi: a 9s era cosi lento
     che non si notava nemmeno. Il pallino non sparisce piu a fine
     corsa, torna indietro e riparte, cosi il collegamento fra i tre
     eredi resta sempre leggibile. */
  animation: sec-map-dot 5s ease-in-out infinite;
  animation-play-state: paused;
}
/* Parte solo quando la mappa e davvero sotto gli occhi. */
.sec-map.is-live .sec-map__dot { animation-play-state: running; }

@keyframes sec-map-dot {
  /* andata: E1 -> E2 -> E3 */
  0%   { left: 16.666%; top: 0;   opacity: 0; }
  3%   { left: 16.666%; top: 0;   opacity: 1; }
  10%  { left: 16.666%; top: 50%; opacity: 1; }
  18%  { left: 50%;     top: 50%; opacity: 1; }
  25%  { left: 50%;     top: 0;   opacity: 1; }
  31%  { left: 50%;     top: 0;   opacity: 1; }
  38%  { left: 50%;     top: 50%; opacity: 1; }
  46%  { left: 83.333%; top: 50%; opacity: 1; }
  53%  { left: 83.333%; top: 0;   opacity: 1; }
  /* sosta sull'ultimo erede, poi si torna indietro */
  60%  { left: 83.333%; top: 0;   opacity: 1; }
  67%  { left: 83.333%; top: 50%; opacity: 1; }
  75%  { left: 50%;     top: 50%; opacity: 1; }
  81%  { left: 50%;     top: 0;   opacity: 1; }
  85%  { left: 50%;     top: 0;   opacity: 1; }
  90%  { left: 50%;     top: 50%; opacity: 1; }
  97%  { left: 16.666%; top: 50%; opacity: 1; }
  100% { left: 16.666%; top: 0;   opacity: 1; }
}

/* ================================================================
   05c. #automazione - I TRE PASSI, UNO ALLA VOLTA
   Le card entrano in sequenza con lo scroll (ScrollTrigger assegna
   data-state a ogni card) e la card attiva si stacca dalle altre.
   Senza js le card restano semplicemente visibili: la classe is-seq
   la mette il js solo quando sa di poter animare.
   ================================================================ */

.sec-steps.is-seq .process-card {
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1),
              box-shadow .55s ease,
              border-color .55s ease;
}
.sec-steps.is-seq .process-card[data-state="wait"] {
  opacity: 0;
  transform: translateY(28px) scale(.985);
}
/* I passi gia raccontati restano leggibili, ma piu sobri. */
.sec-steps.is-seq .process-card[data-state="done"] {
  opacity: .58;
  transform: none;
  box-shadow: none;
}
.sec-steps.is-seq .process-card[data-state="live"] {
  opacity: 1;
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: 0 30px 60px -32px rgba(30, 58, 138, .55);
}
.sec-steps.is-seq .process-card[data-state="live"].highlight {
  box-shadow: 0 30px 60px -30px rgba(231, 89, 31, .5);
}

/* --- La chat segue i passi ---------------------------------------
   Sotto sequenza le bolle non compaiono piu tutte insieme: al passo 2
   escono i messaggi dell'automazione, al passo 3 arriva la risposta.
   Le regole hanno una classe in piu di quelle di mockup-automazione,
   quindi vincono senza bisogno di !important. */
.mka-phone-block.is-seq.in .mka-msg,
.mka-phone-block.is-seq.in .mka-typing {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition-delay: 0ms;
}
.mka-phone-block.is-seq.in .mka-typing { animation: none; }

.mka-phone-block.is-seq.in[data-chat-step="2"] .mka-msg--out,
.mka-phone-block.is-seq.in[data-chat-step="3"] .mka-msg--out {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0) * .38ms);
}
.mka-phone-block.is-seq.in[data-chat-step="2"] .mka-typing {
  opacity: 1;
  transform: none;
  transition-delay: 900ms;
}
.mka-phone-block.is-seq.in[data-chat-step="3"] .mka-typing {
  opacity: 1;
  transform: none;
  animation: mka-typing-out .3s ease forwards;
  animation-delay: 260ms;
}
.mka-phone-block.is-seq.in[data-chat-step="3"] .mka-msg--in {
  opacity: 1;
  transform: none;
  transition-delay: 620ms;
}
/* Le spunte diventano "lette" solo quando il messaggio e uscito. */
.mka-phone-block.is-seq.in .mka-ticks--read { animation: none; }
.mka-phone-block.is-seq.in[data-chat-step="2"] .mka-ticks--read,
.mka-phone-block.is-seq.in[data-chat-step="3"] .mka-ticks--read {
  animation: mka-read .4s ease forwards;
  animation-delay: calc(var(--d, 0) * .38ms + 520ms);
}

/* ================================================================
   06. #matematica - LA PROVVIGIONE COME LEVA
   La cifra e il protagonista. Accanto, la barra che spiega in un
   colpo d'occhio chi incassa per primo e chi dopo.
   ================================================================ */

.sec-comm {
  position: relative;
  overflow: hidden;
  margin-top: clamp(20px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 3.8vw, 52px) clamp(26px, 3.4vw, 48px);
  border-radius: var(--radius-xl, 24px);
  color: #fff;
  background: linear-gradient(165deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 40px 84px -36px rgba(30, 58, 138, .8);
}
.sec-comm > * { position: relative; z-index: 1; }

/* Alone caldo: l'unico punto della sezione in cui entra l'arancio. */
.sec-comm::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -10%;
  top: -44%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(231, 89, 31, .36) 0%,
              rgba(231, 89, 31, .11) 44%,
              rgba(231, 89, 31, 0) 70%);
  pointer-events: none;
}

.sec-comm__lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--book-orange-bright, #ff7340);
  background: rgba(231, 89, 31, .16);
  border: 1px solid rgba(231, 89, 31, .34);
}

.sec-comm__fig {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 18px 0 6px;
  font-family: var(--font-numeric);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  color: #fff;
}
.sec-comm__n { font-size: clamp(2.6rem, 8vw, 4.6rem); }
.sec-comm__sep {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .6);
}
.sec-comm__cur {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--book-orange-bright, #ff7340);
}
.sec-comm__cap {
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.06rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
  max-width: 34ch;
}
.sec-comm__cap strong { color: #fff; }

/* --- Colonna destra: chi incassa, e in che ordine --------------- */
.sec-comm__side {
  padding-left: clamp(0px, 2.2vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.sec-comm__side h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.18;
  margin: 0 0 16px;
  color: #fff;
}

/* La barra di proporzione: quasi tutta dell'agente, una fetta a noi. */
.sec-bar {
  display: flex;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}
.sec-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left center;
}
.sec-bar__seg.is-you {
  flex: 1 1 auto;
  color: #fff;
  background: rgba(255, 255, 255, .17);
}
/* La quota ReaLink e al massimo il 10% della provvigione: la barra deve
   dirlo con la LARGHEZZA, non con una scritta. Il 30% di prima ingannava
   l'occhio (sembrava che prendessimo un terzo). Ora il segmento resta
   stretto e l'etichetta scende nella legenda, perche a questa larghezza
   nessun testo ci starebbe dentro. */
.sec-bar__seg.is-us {
  flex: 0 0 10%;
  min-width: 24px;
  padding: 0;
  color: transparent;
  background: var(--book-orange);
}

/* Legenda sotto la barra: ogni colore con il suo significato. */
.sec-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
}
.sec-bar__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}
.sec-bar__key::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.sec-bar__key.is-you::before { background: rgba(255, 255, 255, .38); }
.sec-bar__key.is-us::before  { background: var(--book-orange); }

/* Riempimento allo scroll: la barra si apre da sinistra. */
.rl-js .sec-bar__seg { transform: scaleX(0); transition: transform 900ms cubic-bezier(.22,.61,.36,1); }
.rl-js .sec-bar__seg.is-us { transition-delay: 260ms; }
.rl-js .rl-in .sec-bar__seg,
.rl-js .sec-bar__seg.rl-in { transform: scaleX(1); }

.sec-bar__note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .74);
}

/* I tre tempi: chi incassa prima, chi dopo. */
.sec-order {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: secord;
}
/* ATTENZIONE: qui NON si usa display grid o flex sul <li>.
   Il contenuto e testo misto (un nodo di testo piu un <strong>): con grid
   ogni figlio diventa una cella, quindi il <strong> finiva a capo nella riga
   successiva e la frase si spezzava ("L'immobile" / "viene venduto").
   Con il numero in position absolute il testo resta un flusso inline unico. */
.sec-order li {
  position: relative;
  padding-left: 38px;
  min-height: 26px;
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}
.sec-order li::before {
  counter-increment: secord;
  content: counter(secord);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-numeric);
  font-size: .76rem;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, .16);
}
.sec-order li.is-us::before { background: var(--book-orange); }
.sec-order li strong { color: #fff; }

@media (max-width: 900px) {
  .sec-comm { grid-template-columns: minmax(0, 1fr); }
  .sec-comm__side {
    padding-left: 0;
    padding-top: clamp(20px, 4vw, 28px);
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }
  .sec-comm__cap { max-width: none; }
}
@media (max-width: 600px) {
  .sec-bar { height: 42px; }
  .sec-bar__seg { font-size: .64rem; letter-spacing: 0; }
  /* Anche su mobile la proporzione deve restare onesta: si allarga appena
     per restare visibile su schermi stretti, non fino a un terzo. */
  .sec-bar__seg.is-us { flex-basis: 12%; min-width: 20px; }
}

/* ================================================================
   07. #garanzia - UNA GARANZIA SOLA, PIU UN REGALO
   La garanzia occupa tutta la riga ed e arancio: e il sopralluogo,
   l'unico impegno che ci prendiamo. Il manuale sta sotto, in un
   blocco blu con il nastro dell'omaggio: si vede a colpo d'occhio
   che e un regalo e non una garanzia.
   ================================================================ */

.sec-guar {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(22px, 3.4vw, 48px);
  padding: clamp(28px, 3.6vw, 46px) clamp(24px, 3.2vw, 44px);
  border: 1px solid rgba(231, 89, 31, .34);
  border-radius: var(--radius-xl, 24px);
  background:
    linear-gradient(180deg, rgba(255, 233, 221, .9) 0%, rgba(255, 233, 221, 0) 52%),
    var(--color-bg);
  box-shadow: 0 30px 64px -34px rgba(231, 89, 31, .45);
}
.sec-guar::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(231, 89, 31, .28);
  border-radius: calc(var(--radius-xl, 24px) - 6px);
  pointer-events: none;
}
.sec-guar > * { position: relative; z-index: 1; }

.sec-guar__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 999px;
  color: #fff;
  background: radial-gradient(circle at 30% 26%, var(--book-orange-bright, #ff7340) 0%, var(--book-orange) 70%);
  box-shadow: 0 12px 24px -12px rgba(231, 89, 31, .8);
}
.sec-guar__tag svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-guar h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 16px 0 10px;
  color: var(--color-ink);
}
.sec-guar__txt p {
  margin: 0;
  font-size: clamp(.96rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 46ch;
}
.sec-guar__when {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 11px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
  background: rgba(231, 89, 31, .1);
  border: 1px dashed rgba(231, 89, 31, .38);
}

/* La "convocazione": tre caselle, giorno, ora e indirizzo. */
.sec-appt {
  border: 1px solid rgba(231, 89, 31, .3);
  border-radius: 18px;
  background: #fff;
  padding: clamp(18px, 2.2vw, 24px);
  box-shadow: 0 22px 46px -30px rgba(231, 89, 31, .55);
}
.sec-appt__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(231, 89, 31, .3);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--color-ink);
}
.sec-appt__hd svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--book-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sec-appt__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec-appt__rows li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  color: var(--color-ink);
}
.sec-appt__rows .sec-mark.is-ck {
  background: var(--book-orange);
  width: 22px;
  height: 22px;
}
.sec-appt__foot {
  margin: 14px 0 0;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--sec-neutral-ink);
}

/* --- Il regalo: chiaramente secondario ------------------------- */
.sec-gift {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: clamp(16px, 2.4vw, 24px);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-bg-alt);
}
.sec-gift__ic {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .09);
}
.sec-gift__ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sec-gift__tag {
  display: inline-block;
  margin-bottom: 7px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .1);
}
.sec-gift h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 5px;
  color: var(--color-ink);
}
.sec-gift p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 74ch;
}


/* --- Variante "in evidenza" del regalo (.sec-gift.is-star) -------
   La usa la home. Il manuale non e la garanzia: la garanzia qui sopra
   e arancio, il regalo e blu e porta il nastro dell'omaggio, cosi le
   due cose non si confondono mai.
   La versione base .sec-gift resta com'era: la usa metodo.html. */

.sec-gift.is-star {
  position: relative;
  overflow: hidden;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(20px, 2.8vw, 32px);
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(30, 58, 138, .26);
  border-radius: var(--radius-xl, 24px);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(30, 58, 138, .1) 0%, rgba(30, 58, 138, 0) 58%),
    var(--color-bg);
  box-shadow: 0 28px 60px -38px rgba(30, 58, 138, .55);
}
/* Il nastro d'angolo: e il segno che si tratta di un omaggio. */
.sec-gift__ribbon {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: -46px;
  width: 190px;
  padding: 7px 0;
  text-align: center;
  transform: rotate(38deg);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: radial-gradient(circle at 30% 26%, var(--book-orange-bright, #ff7340) 0%, var(--book-orange) 72%);
  box-shadow: 0 14px 26px -14px rgba(231, 89, 31, .9);
}

/* Il manuale: la copertina vera, trattata come un oggetto reale.
   Prospettiva leggera, un accenno di spessore sul dorso e l'ombra
   appoggiata sotto. Nessuna animazione: e una posa, non un effetto. */
.sec-gift__book {
  position: relative;
  width: clamp(132px, 13vw, 158px);
  flex: none;
  perspective: 1000px;
}

/* L'ombra a terra, sotto il libro. */
.sec-gift__book::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 2%;
  bottom: -14px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 45, .38) 0%, rgba(15, 23, 45, 0) 72%);
  filter: blur(1px);
}

.sec-gift__shot {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 4px 10px 10px 4px;
  transform: rotateY(-11deg) rotateX(2deg) rotateZ(-1.2deg);
  transform-style: preserve-3d;
  box-shadow:
    0 30px 48px -24px rgba(15, 23, 45, .68),
    0 4px 12px -6px rgba(15, 23, 45, .35);
}

/* Lo spessore del libro: la costa delle pagine sul lato destro. */
.sec-gift__shot::after {
  content: "";
  position: absolute;
  top: 2%;
  bottom: 2%;
  right: -5px;
  width: 6px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(15, 23, 45, .5) 0%, #efece6 42%, #d9d5cd 100%);
}

/* Il dorso, sul lato della rilegatura. */
.sec-gift__shot::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(15, 23, 45, .42) 0%, rgba(15, 23, 45, 0) 100%);
  pointer-events: none;
}

.sec-gift__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  background: var(--color-bg-alt);
}

/* Il fiocco: due archi e un nodo, tutto in css. */
.sec-gift__bow {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
}
.sec-gift__bow::before,
.sec-gift__bow::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50% 50% 50% 0;
  background: var(--book-orange);
}
.sec-gift__bow::before { left: -1px; transform: rotate(-42deg); }
.sec-gift__bow::after  { right: -1px; transform: rotate(48deg); }

.sec-gift.is-star .sec-gift__tag {
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--sec-deep) 100%);
}
.sec-gift.is-star h3 {
  font-size: clamp(1.16rem, 2.2vw, 1.5rem);
  line-height: 1.18;
  margin-bottom: 8px;
}
.sec-gift.is-star p { font-size: .94rem; line-height: 1.5; }

.sec-gift__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sec-gift__list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: .88rem;
  line-height: 1.42;
  color: var(--color-ink-soft);
}

.sec-gift__foot {
  margin-top: 14px;
  font-size: .82rem !important;
  line-height: 1.5 !important;
  color: var(--sec-neutral-ink) !important;
}
.sec-gift__foot a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Sotto i 760px il regalo va a una colonna: la copertina sta sopra
   il testo, piu piccola e centrata. */
@media (max-width: 760px) {
  .sec-gift.is-star { grid-template-columns: minmax(0, 1fr); }
  .sec-gift__book { width: 124px; margin: 0 auto 10px; }
}

@media (max-width: 600px) {
  .sec-gift.is-star { padding: 22px 18px 24px; }
  .sec-gift__ribbon { top: 16px; right: -50px; width: 180px; font-size: .55rem; }
  .sec-gift__list > li { font-size: .85rem; }
  .sec-gift__book { width: 112px; }
  /* Su schermo stretto la prospettiva costa in nitidezza: la togliamo. */
  .sec-gift__shot { transform: none; }
}

@media (max-width: 900px) {
  .sec-guar { grid-template-columns: minmax(0, 1fr); }
  .sec-guar__txt p { max-width: none; }
}
@media (max-width: 600px) {
  .sec-gift { grid-template-columns: minmax(0, 1fr); }
  .sec-gift p { max-width: none; }
}

/* ================================================================
   08. #automazione - LA CHAT CON IL MESSAGGIO VERO
   Il messaggio reale e lungo: si spezza in tre bolle. Qui stringiamo
   il corpo della chat perche resti tutto dentro lo schermo.
   ================================================================ */

#automazione .mka-chat__body {
  justify-content: flex-end;
  gap: 7px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42px);
          mask-image: linear-gradient(180deg, transparent 0, #000 42px);
}
#automazione .mka-msg {
  font-size: .67rem;
  line-height: 1.4;
  padding: 7px 9px 15px 10px;
  max-width: 88%;
}
#automazione .mka-msg__meta { font-size: .5rem; }

@media (max-width: 900px) {
  #automazione .mka-msg { font-size: .68rem; }
}

/* ================================================================
   09. #confronto-ads - CHI PAGA PRIMA, CHI RISCHIA CON TE
   Due colonne affiancate, il numero grande in mezzo a ciascuna, e il
   disco VS che le separa. A sinistra le CATEGORIE di fornitori (mai
   aziende con un nome), a destra ReaLink.
   La variante .is-duel, piu sotto, alza il contrasto fra le due.
   ================================================================ */

.sec-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(14px, 2.2vw, 26px);
  margin-top: clamp(30px, 4vw, 52px);
}

.sec-vs__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}

/* Colonna delle campagne: resta neutra, quasi spenta. */
.sec-vs__col.is-ads { background: var(--color-bg-alt); }

/* Colonna ReaLink: fondo blu pieno, e la colonna che deve vincere. */
.sec-vs__col.is-us {
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  border-color: transparent;
  box-shadow: 0 32px 60px -34px var(--color-accent-glow);
}

.sec-vs__h {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--color-ink);
}
.sec-vs__col.is-us .sec-vs__h { color: #fff; }

/* Il numero protagonista */
.sec-vs__fig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 16px 0 18px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.sec-vs__col.is-us .sec-vs__fig {
  border-top-color: rgba(255, 255, 255, .18);
  border-bottom-color: rgba(255, 255, 255, .18);
}

.sec-vs__n {
  font-family: var(--font-numeric);
  font-size: clamp(2.1rem, 5.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sec-neutral-ink);
}
.sec-vs__n small {
  font-size: .34em;
  font-weight: 700;
  letter-spacing: .02em;
}
.sec-vs__col.is-us .sec-vs__n { color: #fff; }

.sec-vs__cap {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.sec-vs__cap strong { color: var(--color-ink); }
.sec-vs__col.is-us .sec-vs__cap { color: rgba(255, 255, 255, .82); }
.sec-vs__col.is-us .sec-vs__cap strong { color: #fff; }

/* Le tre righe: due righe di testo al massimo ciascuna. */
.sec-vs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  width: 100%;
}
.sec-vs__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
.sec-vs__col.is-us .sec-vs__list li { color: rgba(255, 255, 255, .86); }
.sec-vs__col.is-us .sec-vs__list .sec-mark.is-ck {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.sec-vs__foot {
  margin: auto 0 0;
  padding-top: 14px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--sec-neutral-ink);
}
.sec-vs__foot strong { color: var(--sec-no-ink); }
.sec-vs__col.is-us .sec-vs__foot { color: rgba(255, 255, 255, .76); }
.sec-vs__col.is-us .sec-vs__foot strong { color: var(--book-orange-bright); }

/* Il "VS" fra le due colonne */
.sec-vs__mid {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
}

/* La fascia di chiusura: la frase chiave piu le note sui dati. */
.sec-vs__band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.sec-vs__band-k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--color-ink);
}
.sec-vs__band-t p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--sec-neutral-ink);
}
.sec-vs__band-t p + p { margin-top: 8px; }

/* Nota di prudenza sotto il confronto: si parla di categorie di
   fornitori, mai di aziende identificabili. */
.sec-vs__note {
  margin: 16px auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--sec-neutral-ink);
}

/* --- Il duello (.sec-vs.is-duel) -------------------------------
   Lo stesso confronto a due colonne, ma piu netto: a sinistra le
   CATEGORIE di fornitori, spente e fredde; a destra noi, accesi.
   Il rosso e l'arancio restano accenti, il peso lo fanno il grigio
   e il blu del brand.
   Allo scroll le due colonne entrano da lati opposti (data-rl-reveal
   left/right) e il disco VS arriva dopo, in mezzo. Sotto i 720px il
   motion system porta tutto in verticale, con motion ridotto entra
   fermo e gia visibile. */

.sec-vs.is-duel {
  gap: clamp(10px, 1.8vw, 22px);
  align-items: stretch;
}

/* Distanza di entrata piu ampia: il colpo si deve sentire. */
.sec-vs.is-duel > .sec-vs__col {
  --rl-dist-x: 92px;
  --rl-dur: 820ms;
}
.sec-vs.is-duel > .sec-vs__col.is-us { --rl-delay: 90ms; }

/* Intestazione di colonna: chi e chi, detto in chiaro. */
.sec-vs__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}
.sec-vs__col.is-us .sec-vs__hd { border-bottom-color: rgba(255, 255, 255, .2); }

.sec-vs__side {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sec-neutral-ink);
}
.sec-vs__col.is-us .sec-vs__side { color: var(--book-orange-bright, #ff7340); }

/* Colonna dei competitor: fredda, sbiadita, bordo tratteggiato. */
.sec-vs.is-duel > .sec-vs__col.is-ads {
  border: 1px dashed rgba(107, 107, 114, .4);
  background: linear-gradient(180deg, #f3f4f6 0%, #e9ebef 100%);
  box-shadow: none;
}
.sec-vs.is-duel > .is-ads .sec-vs__h,
.sec-vs.is-duel > .is-ads .sec-vs__n,
.sec-vs.is-duel > .is-ads .sec-vs__cap strong { color: var(--sec-neutral-ink); }
.sec-vs.is-duel > .is-ads .sec-vs__fig {
  border-top-color: rgba(107, 107, 114, .24);
  border-bottom-color: rgba(107, 107, 114, .24);
}

/* Colonna nostra: la stessa del sito, ma con piu presenza. */
.sec-vs.is-duel > .sec-vs__col.is-us {
  box-shadow:
    inset 0 2px 0 var(--book-orange),
    0 40px 70px -34px var(--color-accent-glow);
}

/* Le righe del confronto: criterio sopra, risposta sotto. */
.sec-vs__row {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.sec-vs__crit {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sec-neutral-ink);
}
.sec-vs__col.is-us .sec-vs__crit { color: var(--book-orange-bright, #ff7340); }
.sec-vs__say {
  font-size: .88rem;
  line-height: 1.45;
}

/* Il disco VS: elemento di peso, non un dettaglio. L'anello nel
   colore di fondo lo stacca dalle due colonne. */
.sec-vs.is-duel > .sec-vs__mid {
  position: relative;
  z-index: 3;
  width: clamp(72px, 7.4vw, 104px);
  height: clamp(72px, 7.4vw, 104px);
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  letter-spacing: .08em;
  background: linear-gradient(160deg, #2a2a2e 0%, var(--color-ink) 100%);
  box-shadow:
    0 0 0 7px var(--color-bg),
    0 0 0 8px rgba(231, 89, 31, .55),
    0 26px 44px -20px rgba(15, 15, 16, .55);
  /* Entra dopo le colonne e da piu lontano: e lo scontro fra le due. */
  --rl-scale: .42;
  --rl-delay: 340ms;
  --rl-dur: 720ms;
}

@media (max-width: 900px) {
  .sec-vs { grid-template-columns: minmax(0, 1fr); }
  .sec-vs__mid { justify-self: center; margin: -4px 0; }
  .sec-vs__band { grid-template-columns: minmax(0, 1fr); }
  .sec-vs.is-duel > .sec-vs__mid { margin: -6px auto; }
}

@media (max-width: 600px) {
  .sec-vs__note { text-align: left; }
  .sec-vs__hd { padding-bottom: 12px; }
  .sec-vs__side { font-size: 1rem; letter-spacing: .1em; }
  .sec-vs.is-duel > .sec-vs__mid { width: 66px; height: 66px; font-size: 1.02rem; }
}


/* ================================================================
   10. #calcolatore - IL RITORNO SULL'INVESTIMENTO, CON LO SLIDER
   Uno slider, tre dati, il messaggio chiave. Tutto e una stima:
   l'avvertenza sta in chiaro sotto, non in un asterisco.
   ================================================================ */

/* Testo per soli lettori di schermo (la zona aria-live del calcolatore). */
.sec-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sec-roi {
  --sec-roi-pct: 27.8%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}

/* --- Colonna comandi: la barra del budget ----------------------- */
.sec-roi__ctrl {
  align-self: stretch;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 30px 56px -34px var(--color-accent-glow);
}

.sec-roi__lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.sec-roi__budget {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 18px;
}
.sec-roi__budget-n {
  font-family: var(--font-numeric);
  font-size: clamp(2.6rem, 7vw, 3.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sec-roi__budget-c {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .68);
}

/* Lo slider. Traccia riempita fino al valore corrente con --sec-roi-pct,
   pollice largo cosi resta comodo anche sul telefono. */
.sec-roi__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.sec-roi__range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--book-orange) 0%, var(--book-orange-bright) 100%)
      no-repeat 0 0 / var(--sec-roi-pct) 100%,
    rgba(255, 255, 255, .22);
}
.sec-roi__range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.sec-roi__range::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--book-orange) 0%, var(--book-orange-bright) 100%);
}
.sec-roi__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border-radius: 50%;
  border: 4px solid var(--book-orange);
  background: #fff;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45);
}
.sec-roi__range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid var(--book-orange);
  background: #fff;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45);
}
.sec-roi__range:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 999px;
}

.sec-roi__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .58);
}

.sec-roi__hint {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}

/* --- Colonna risultati ------------------------------------------ */
.sec-roi__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sec-roi__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.sec-roi__n {
  font-family: var(--font-numeric);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.sec-roi__k {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
}
.sec-roi__d {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--sec-neutral-ink);
}

/* La casella del confronto con le campagne: e il dato che deve stonare. */
.sec-roi__card.is-ads {
  border-color: rgba(220, 38, 38, .26);
  background: var(--sec-no-bg);
}
.sec-roi__card.is-ads .sec-roi__n { color: var(--sec-no-ink); }

/* Il messaggio chiave: e il vero punto della sezione. */
.sec-roi__key {
  margin-top: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(231, 89, 31, .3);
  background: var(--book-orange-soft);
}
.sec-roi__key-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--book-orange);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.sec-roi__key-h {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-ink);
}
.sec-roi__key-h strong {
  font-family: var(--font-numeric);
  font-weight: 800;
  color: var(--book-orange);
  white-space: nowrap;
}
.sec-roi__key-t {
  margin: 10px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
/* Il pavimento: cosa succede anche con una sola vendita. */
.sec-roi__key-floor {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--color-line);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--color-ink);
}
.sec-roi__key-floor strong {
  color: var(--book-orange);
  white-space: nowrap;
}

/* --- L'avvertenza: in chiaro, non in un asterisco --------------- */
.sec-roi__warn {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line);
  border-left: 5px solid var(--color-success);
  background: var(--color-bg);
}
.sec-roi__warn-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-success);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.sec-roi__warn p {
  margin: 0;
  max-width: 78ch;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
}
.sec-roi__warn p strong { color: var(--color-ink); }

@media (max-width: 900px) {
  .sec-roi { grid-template-columns: minmax(0, 1fr); }
  .sec-roi__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-roi__warn p { max-width: none; }
}

@media (max-width: 600px) {
  .sec-vs__col { padding: 20px 18px 22px; }
  .sec-vs__foot { padding-top: 12px; }
  .sec-roi { padding: 18px 16px 20px; }
  .sec-roi__ctrl { padding: 20px 18px 22px; }
  .sec-roi__cards { grid-template-columns: minmax(0, 1fr); }
  .sec-roi__card { padding: 16px 16px 18px; }
  /* Slider comodo da usare col pollice. */
  .sec-roi__range { height: 44px; }
  .sec-roi__range::-webkit-slider-runnable-track { height: 12px; }
  .sec-roi__range::-moz-range-track,
  .sec-roi__range::-moz-range-progress { height: 12px; }
  .sec-roi__range::-webkit-slider-thumb { width: 36px; height: 36px; margin-top: -12px; }
  .sec-roi__range::-moz-range-thumb { width: 36px; height: 36px; }
}

/* ================================================================
   11. CARD CON PITTOGRAMMA
   Usate da #branding e #compliance, e da metodo.html. Prima erano titolo
   piu paragrafo lungo, cioe un muro di testo che nessuno legge.
   Adesso ogni card apre con un pittogramma svg inline che racconta
   il concetto del titolo, e la descrizione sta in due righe.

   Colore del pittogramma, uno solo per sezione, mai misti:
     default      blu   --color-accent
     .is-ok       verde --color-success   (conformita)
     .is-warm     arancio --book-orange
   ================================================================ */

.sec-icards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
/* Variante a quattro colonne, la usa metodo.html. Le card sono piu
   strette, quindi respirano con un filo di padding in meno. */
.sec-icards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec-icards.is-four .sec-icard { padding: clamp(20px, 2vw, 24px); }

.sec-icard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-bg);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
/* Velo appena percettibile al passaggio del mouse, come su .card. */
.sec-icard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(26, 47, 78, .05), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.sec-icard:hover { transform: translateY(-3px); border-color: rgba(30, 58, 138, .34); }
.sec-icard:hover::before { opacity: 1; }
.sec-icards.is-ok   .sec-icard:hover { border-color: rgba(44, 110, 73, .38); }
.sec-icards.is-warm .sec-icard:hover { border-color: rgba(231, 89, 31, .38); }

/* Testa della card. Su desktop pittogramma sopra, titolo sotto. */
.sec-icard__hd {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 16px);
}
.sec-icard__ic {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .09);
}
.sec-icards.is-ok .sec-icard__ic {
  color: var(--color-success);
  background: rgba(44, 110, 73, .1);
}
.sec-icards.is-warm .sec-icard__ic {
  color: var(--book-orange);
  background: rgba(231, 89, 31, .1);
}
.sec-icard__ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sec-icard h3 {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.22;
  color: var(--color-ink);
}
.sec-icard p {
  position: relative;
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* Il pittogramma entra un soffio dopo il testo della sua card:
   eredita --rl-delay dallo stagger del genitore e ci somma 170ms. */
.rl-js .sec-icard__ic {
  opacity: 0;
  transform: scale(.8);
}
.rl-js.rl-armed .sec-icard__ic {
  transition:
    opacity   var(--rl-dur-fast) var(--rl-ease) calc(var(--rl-delay, 0ms) + 170ms),
    transform var(--rl-dur-fast) var(--rl-ease) calc(var(--rl-delay, 0ms) + 170ms);
}
.rl-js .sec-icard.rl-in .sec-icard__ic {
  opacity: 1;
  transform: none;
}

/* Sotto i 1220px tre o quattro colonne diventano troppo strette e la
   descrizione va a capo troppe volte: si passa a due colonne. */
@media (max-width: 1220px) {
  .sec-icards,
  .sec-icards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .sec-icards,
  .sec-icards.is-four { grid-template-columns: minmax(0, 1fr); }
  .sec-icard { padding: 18px 18px 20px; gap: 10px; }
  /* Pittogramma e titolo sulla stessa riga: non si spreca altezza. */
  .sec-icard__hd { flex-direction: row; align-items: center; gap: 13px; }
  .sec-icard__ic { width: 40px; height: 40px; border-radius: 12px; }
  .sec-icard__ic svg { width: 21px; height: 21px; }
  .sec-icard h3 { font-size: 1.02rem; }
  .sec-icard p { font-size: .93rem; }
}

/* ================================================================
   12. #sistema - NON UNA CAMPAGNA, UN SISTEMA
   Il momento forte della pagina: la sezione resta fissata e il
   sistema si monta pezzo per pezzo mentre scorri.

   Struttura (HTML):
     .rl-sticky.sec-build          <- data-rl-sticky, --rl-sticky-length
       .rl-sticky-stage            <- resta fissa
         .sec-build__inner
           .sec-build__rig         <- la rastrelliera dei quattro pezzi
           .rl-sticky-steps.rl-overlap
             .rl-sticky-step.sec-build__step  x5

   Chi accende cosa:
     motion.js  -> .is-active sullo step e --rl-progress sulla sezione
     script in fondo a index.html -> data-state sugli slot della
     rastrelliera (wait / live / done), cosi i pezzi gia montati
     restano accesi invece di spegnersi.

   Sotto i 720px, senza JavaScript e con motion ridotto il motion
   system riporta la sezione a flusso normale: i cinque blocchi si
   leggono in colonna e la rastrelliera sparisce (e decorativa).
   ================================================================ */

/* La sezione occupava piu altezza di quanta ne chiedesse il
   contenuto: qui si stringe rispetto al passo comune delle sezioni. */
#sistema { padding-block: clamp(52px, 6.6vw, 96px); }

.sec-build { margin-top: clamp(22px, 2.8vw, 36px); }

.rl-js .sec-build .rl-sticky-stage { overflow: clip; }

.sec-build__inner {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(26px, 4vw, 64px);
  width: 100%;
}

/* --- La rastrelliera: i pezzi che si montano ------------------- */
.sec-build__rig {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-xl, 24px);
  background: var(--color-bg-alt);
}
.sec-build__rig-lbl,
.sec-build__rig-foot {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sec-neutral-ink);
}
.sec-build__rig-foot { letter-spacing: .1em; text-transform: none; font-weight: 600; font-size: .74rem; }

.sec-build__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sec-build__slot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--color-line);
  background: transparent;
  transition:
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    transform .45s ease,
    opacity .45s ease;
}

.sec-build__sn {
  font-family: var(--font-numeric);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--sec-neutral-ink);
  transition: color .45s ease;
}
.sec-build__st {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--color-ink);
  transition: color .45s ease;
}

/* La spunta del pezzo montato: disegnata, nessun font di icone. */
.sec-build__sck {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  position: relative;
  opacity: .5;
  transition: opacity .45s ease, background .45s ease, border-color .45s ease;
}
.sec-build__sck::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid transparent;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
  transition: border-color .45s ease;
}

/* Stati scritti dallo script in fondo a index.html.
   Senza JavaScript nessuno stato viene scritto: gli slot restano
   nella loro forma piena e leggibile. */
.sec-build__slot[data-state="wait"] {
  opacity: .42;
  transform: translateX(-4px);
}
.sec-build__slot[data-state="live"] {
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 22px 40px -26px var(--color-accent-glow, rgba(30, 58, 138, .85));
  transform: translateX(4px);
}
.sec-build__slot[data-state="live"] .sec-build__sn { color: rgba(255, 255, 255, .66); }
.sec-build__slot[data-state="live"] .sec-build__st { color: #fff; }
.sec-build__slot[data-state="live"] .sec-build__sck {
  border-color: rgba(255, 255, 255, .55);
  opacity: 1;
}
.sec-build__slot[data-state="live"] .sec-build__sck::before { border-color: #fff; }

.sec-build__slot[data-state="done"] {
  border-style: solid;
  border-color: rgba(30, 58, 138, .28);
  background: rgba(30, 58, 138, .06);
}
.sec-build__slot[data-state="done"] .sec-build__sn { color: var(--color-accent); }
.sec-build__slot[data-state="done"] .sec-build__sck {
  opacity: 1;
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.sec-build__slot[data-state="done"] .sec-build__sck::before { border-color: #fff; }

/* Barra di avanzamento della sezione: legge --rl-progress. */
.sec-build__meter {
  height: 3px;
  border-radius: 999px;
  background: var(--color-line);
  overflow: hidden;
  margin-top: 4px;
}
.sec-build__meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--book-orange));
  transform: scaleX(var(--rl-progress, 1));
  transform-origin: 0 50%;
}

/* --- I blocchi che si danno il cambio --------------------------
   L'altezza minima riempie la scena fissata: senza, il contenuto
   galleggiava al centro di uno schermo quasi vuoto. */
.sec-build__steps { min-height: clamp(300px, 46vh, 470px); }

/* Il motion system centra gli step sovrapposti: qui li vogliamo
   allineati a sinistra, attaccati alla rastrelliera. */
.rl-js .sec-build__steps.rl-overlap > .sec-build__step {
  justify-content: flex-start;
  align-items: center;
}

/* Ogni pezzo: il dettaglio a sinistra, il suo pittogramma a destra.
   Il pittogramma e decorativo (aria-hidden nel markup) e serve a
   riempire l'altezza della scena, che altrimenti resta vuota. */
.sec-build__in {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 216px);
  align-items: stretch;
  gap: clamp(18px, 3vw, 44px);
}
.sec-build__txt {
  min-width: 0;
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec-build__k {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .1);
}
.sec-build__k.is-done {
  color: #fff;
  background: radial-gradient(circle at 30% 26%, var(--book-orange-bright, #ff7340) 0%, var(--book-orange) 70%);
  box-shadow: 0 12px 24px -14px rgba(231, 89, 31, .9);
}

.sec-build__h {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.06;
  color: var(--color-ink);
}
.sec-build__h em {
  font-style: normal;
  color: var(--book-orange);
}

.sec-build__p {
  margin: 14px 0 0;
  font-size: clamp(.96rem, 1.5vw, 1.08rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.sec-build__why {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid rgba(30, 58, 138, .28);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.sec-build__why > span {
  font-weight: 800;
  color: var(--color-accent);
}
.sec-build__why.is-done { border-left-color: rgba(231, 89, 31, .42); }
.sec-build__why.is-done > span { color: var(--book-orange); }

/* --- I pittogrammi dei pezzi (.sbv) ----------------------------
   Disegnati con bordi e blocchi, nessuna immagine e nessun icon
   font. Sono decorativi: nel markup portano aria-hidden. */
.sbv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 16px 16px 18px;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-bg);
  box-shadow: 0 24px 44px -32px rgba(15, 23, 45, .55);
}
.sbv__lbl {
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-accent);
}

/* 01, le schede di contatto */
.sbv-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.sbv-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(30, 58, 138, .16);
}
.sbv-bars { display: grid; gap: 5px; }
.sbv-bars > i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(30, 58, 138, .3);
}
.sbv-bars > i.is-short { width: 56%; background: var(--color-line); }
.sbv-pin {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--book-orange);
}

/* 02, la finestra della piattaforma */
.sbv-win {
  display: block;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.sbv-win__bar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--sec-deep) 100%);
}
.sbv-win__bar > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}
.sbv-win__bar > i:first-child { background: var(--book-orange-bright, #ff7340); }
.sbv-win__body { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 10px; }
.sbv-win__side { display: grid; gap: 6px; align-content: start; }
.sbv-win__side > i { display: block; height: 7px; border-radius: 3px; background: var(--color-line); }
.sbv-win__side > i:first-child { background: rgba(30, 58, 138, .34); }
.sbv-win__main { display: grid; gap: 6px; align-content: start; }
.sbv-win__main > i { display: block; height: 7px; border-radius: 999px; background: rgba(30, 58, 138, .2); }
.sbv-win__main > i:nth-child(2) { width: 74%; }
.sbv-win__main > i:nth-child(4) { width: 58%; background: var(--color-line); }

/* 03, le prime bolle della chat */
.sbv-bub {
  display: block;
  height: 22px;
  border-radius: 12px 12px 12px 4px;
  background: rgba(44, 110, 73, .16);
}
.sbv-bub.is-out { margin-right: 22%; }
.sbv-bub.is-out.is-short { margin-right: 46%; }
.sbv-bub.is-in {
  margin-left: 34%;
  border-radius: 12px 12px 4px 12px;
  background: rgba(30, 58, 138, .16);
}

/* 04, i passaggi del metodo */
.sbv-ck {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.sbv-ck > i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  position: relative;
}
.sbv-ck > i::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
.sbv-ck > b { display: block; height: 6px; border-radius: 999px; background: var(--color-line); }
.sbv-ck > b.is-short { width: 62%; }
.sbv-sign {
  display: block;
  margin-top: 3px;
  height: 18px;
  border-bottom: 2px solid var(--book-orange);
  border-radius: 0 0 4px 4px;
}

/* Il sistema montato: i quattro pezzi tenuti insieme dal nodo. */
.sbv.is-full {
  border-color: rgba(30, 58, 138, .3);
  box-shadow: 0 28px 50px -30px var(--color-accent-glow);
}
.sbv-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sbv-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(30, 58, 138, .26);
  background: rgba(30, 58, 138, .06);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-accent);
}
.sbv-tile > b {
  font-family: var(--font-numeric);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--sec-neutral-ink);
}
/* Il nodo al centro: e il segno che i quattro pezzi si tengono. */
.sbv-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--book-orange);
  box-shadow: 0 0 0 4px var(--color-bg);
}

/* Senza JavaScript i cinque blocchi restano in colonna: qui diamo
   loro un minimo di respiro fra uno e l'altro. */
.sec-build__steps > .sec-build__step + .sec-build__step { margin-top: clamp(22px, 3vw, 34px); }
.rl-js .sec-build__steps > .sec-build__step + .sec-build__step { margin-top: 0; }

/* La fascia di chiusura: la frase chiave a sinistra, la spiegazione a
   destra. Fondo blu del brand, lo stesso gradiente delle altre sezioni. */
.sec-sys__band {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(26px, 3.6vw, 48px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--color-accent) 0%, var(--sec-deep) 100%);
  box-shadow: 0 32px 60px -34px var(--color-accent-glow);
}
.sec-sys__band-k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.7vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #fff;
}
.sec-sys__band-k em {
  font-style: normal;
  color: var(--book-orange-bright);
}
.sec-sys__band-t p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.sec-sys__band-t p + p { margin-top: 10px; }
.sec-sys__band-t strong { color: #fff; }

@media (max-width: 1160px) {
  .sec-build__in { grid-template-columns: minmax(0, 1fr) minmax(0, 180px); }
}

@media (max-width: 1000px) {
  .sec-build__inner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 26px; }
  .sec-build__st { font-size: .84rem; }
  .sec-build__in { grid-template-columns: minmax(0, 1fr) minmax(0, 152px); gap: 18px; }
  .sbv { padding: 12px 12px 14px; gap: 7px; }
}

@media (max-width: 900px) {
  .sec-sys__band { grid-template-columns: minmax(0, 1fr); }
  /* Fra i 900 e i 720 px la rastrelliera c'e ancora e lo spazio
     rimasto non basta per due colonne: resta il testo, che e il
     contenuto vero. Sotto i 720 il pittogramma torna, in colonna. */
  .sec-build__in { grid-template-columns: minmax(0, 1fr); }
  .sec-build__viz { display: none; }
}

/* Sotto i 720px il motion system spegne lo sticky: la rastrelliera
   e decorativa e sparisce, restano i cinque blocchi in colonna e i
   pittogrammi tornano, sotto al testo. */
@media (max-width: 720px) {
  .sec-build__rig { display: none; }
  .sec-build__inner { grid-template-columns: minmax(0, 1fr); }
  .sec-build__steps { min-height: 0; }
  .sec-build__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sec-build__viz { display: flex; max-width: 260px; }
}

@media (max-width: 600px) {
  .sec-build__inner { gap: 18px; }
  .sec-build__txt { max-width: none; }
  .sec-build__h { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  .sec-build__p { font-size: .95rem; }
  .sec-build__viz { max-width: none; }
  .sec-sys__band { padding: 22px 18px 24px; }
  .sec-sys__band-k { font-size: 1.28rem; }
  .sec-sys__band-t p { font-size: .9rem; }
}


/* ================================================================
   13. metodo.html - LA PAGINA "COME FUNZIONA"
   Stessi mattoni della home (sec-split, sec-icard, sec-comm, sec-guar):
   qui ci sono solo i tre pezzi che la home non ha.

   13a. .sec-facts    striscia di cifre sotto il titolo della pagina
   13b. .sec-mf-fig   la cifra protagonista dentro le card dei principi
   13c. .sec-cost     cosa comprende l'elaborazione di un contatto

   Nessun colore nuovo: --color-accent, --book-orange, --color-ink,
   --color-bg, --color-bg-alt, --color-line e le loro trasparenze.
   ================================================================ */

/* Le sezioni che ospitano un .rl-orb devono fare da riferimento al
   posizionamento assoluto del fondale, altrimenti l'alone scappa in
   cima alla pagina. Stessa regola che home-restyle.css applica alla home. */
#cosa-compri,
#costo,
#impegno {
  position: relative;
  isolation: isolate;
}
#cosa-compri > .container,
#costo > .container,
#impegno > .container { position: relative; z-index: 1; }
#cosa-compri .rl-orb,
#costo .rl-orb,
#impegno .rl-orb { z-index: 0; }


/* --- 13a. Striscia di cifre della testata ----------------------- */
.sec-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(26px, 3.4vw, 40px);
}

.sec-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 16px;
  border-left: 2px solid var(--color-accent);
}
.sec-fact.is-warm { border-left-color: var(--book-orange); }

.sec-fact__n {
  font-family: var(--font-numeric);
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--color-accent);
}
.sec-fact.is-warm .sec-fact__n { color: var(--book-orange); }

.sec-fact__l {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-muted);
  max-width: 18ch;
}

/* I due pulsanti della testata: mai attaccati al bordo su schermo stretto. */
.sec-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.2vw, 38px);
}


/* --- 13b. La cifra dentro le card dei principi ------------------ */
/* Le card del manifesto hanno i figli su piani Z diversi (style.css):
   la cifra si mette fra il corpo del testo e le implicazioni. */
.manifesto-card .sec-mf-fig {
  position: relative;
  z-index: 2;
  transform: translateZ(22px);
}

.sec-mf-fig {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.sec-mf-fig__n {
  font-family: var(--font-numeric);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--color-accent);
}
.sec-mf-fig__l {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--color-muted);
}


/* --- 13c. Cosa comprende l'elaborazione di un contatto ---------- */
/* Blocco volutamente piu leggero di .sec-icard: sta dentro un passo
   del percorso, non deve rubargli la scena. */
.sec-cost {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-bg);
}

.sec-cost__hd {
  display: block;
  margin-bottom: 14px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-accent);
}

.sec-cost__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.sec-cost__items > li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.sec-cost__ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: rgba(30, 58, 138, .09);
}
.sec-cost__ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-cost__t {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.25;
  color: var(--color-ink);
}
.sec-cost__d {
  display: block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
}


/* --- 13d. Mobile ----------------------------------------------- */
@media (max-width: 900px) {
  .sec-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .sec-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .sec-fact__l { max-width: none; }
  .sec-hero-cta { flex-direction: column; align-items: stretch; }
  .sec-hero-cta .btn { justify-content: center; text-align: center; }

  .sec-mf-fig { padding: 12px 14px; }

  .sec-cost { padding: 16px 16px 18px; }
  .sec-cost__items { grid-template-columns: minmax(0, 1fr); }

  /* Le cifre dei passi: su schermo stretto due per riga diventano
     colonnine da 80px e l'etichetta va a capo cinque volte. Meglio
     lasciarle andare a capo e dargli tutta la larghezza. */
  .step-tl-content .step-tl-kpi { flex-wrap: wrap; gap: 14px 22px; }
  .step-tl-kpi-item { flex: 1 1 130px; }
}

/* Schermi molto stretti: il blocco vive dentro un passo del percorso,
   quindi la larghezza utile e poca. Il pittogramma si stringe per
   lasciare piu spazio alla parola. */
@media (max-width: 460px) {
  .sec-cost { padding: 14px; }
  .sec-cost__items > li { gap: 9px; }
  .sec-cost__ic { width: 28px; height: 28px; border-radius: 9px; }
  .sec-cost__ic svg { width: 15px; height: 15px; }
  .sec-cost__t { font-size: .88rem; }
  .sec-cost__d { font-size: .78rem; }
}


/* ================================================================
   MOTION RIDOTTO
   Il motion system spegne gia i suoi reveal. Qui ci limitiamo a non
   lasciare ombre o trasformazioni che possano dare fastidio.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .sec-cmp__cell,
  .sec-lane,
  .sec-point,
  .sec-idrow,
  .sec-chip,
  .sec-build__slot,
  .sec-icard { transition: none !important; }

  /* #sistema: con motion ridotto lo sticky non parte, quindi il
     sistema si legge gia montato. Nessun pezzo resta spento e la
     barra di avanzamento resta piena. */
  .sec-build__rig { display: none; }
  .sec-build__inner { grid-template-columns: minmax(0, 1fr); }
  .sec-build__steps { min-height: 0; }
  .sec-build__slot[data-state] {
    opacity: 1 !important;
    transform: none !important;
  }
  .sec-build__meter > span { transform: none !important; }

  /* Il pallino fra gli eredi e un loop: con motion ridotto si ferma
     del tutto e sparisce, cosi non resta un punto fermo sul filo. */
  .sec-map__dot {
    animation: none !important;
    display: none;
  }

  /* I tre passi dell'automazione restano tutti visibili da subito:
     niente sequenza, niente card in attesa. */
  .sec-steps .process-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* La cifra dentro le card dei principi resta sul suo piano. */
  .manifesto-card .sec-mf-fig { transform: none !important; }

  .rl-js .sec-bar__seg {
    transform: none !important;
    transition: none !important;
  }

  /* Il pittogramma resta fermo e visibile. */
  .rl-js .sec-icard__ic {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ================================================================
   CTA PRINCIPALE, la chiamata con Leandro
   Il testo dichiara il tempo (abbassa l'attrito) e la riga sotto
   toglie la paura di trovarsi davanti un venditore.
   L'alone pulsa UNA sola volta quando il bottone entra in viewport:
   attira l'occhio senza diventare un lampeggio da televendita.
   ================================================================ */
.sec-cta {
  position: relative;
  isolation: isolate;
  gap: 10px;
}
.sec-cta .sec-cta__arrow {
  display: inline-block;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.sec-cta:hover .sec-cta__arrow,
.sec-cta:focus-visible .sec-cta__arrow { transform: translateX(5px); }

/* l'alone: un secondo strato dietro il bottone, mai sopra il testo */
.sec-cta::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--book-orange);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.rl-js .sec-cta.rl-in::after { animation: sec-cta-alone 1500ms ease-out 380ms 1 both; }
@keyframes sec-cta-alone {
  0%   { opacity: .34; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.14); }
  100% { opacity: 0;   transform: scale(1.14); }
}

/* la riga sotto il bottone */
.sec-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sec-cta-sub {
  margin: 0;
  font-size: .82rem;
  color: var(--color-muted);
}
.sec-cta-sub strong { color: var(--color-ink); font-weight: 600; }
/* sui fondi scuri la riga deve restare leggibile */
.sec-comm .sec-cta-sub,
.sec-roi .sec-cta-sub,
[style*="color:#fff"] .sec-cta-sub { color: rgba(255, 255, 255, .72); }

@media (prefers-reduced-motion: reduce) {
  .sec-cta::after { animation: none !important; opacity: 0 !important; }
  .sec-cta .sec-cta__arrow { transition: none; }
}


/* ================================================================
   FONTE DEL DATO SUGLI EREDI
   Il numero grande e' un dato di mercato verificabile, non nostro:
   la fonte va scritta sotto, piccola ma leggibile.
   ================================================================ */
.sec-heirs__src {
  margin: 12px 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--sec-neutral-ink, var(--color-muted));
  opacity: .85;
}