/* ============================================================================
   LABORATORIO MATEMATICO — Identità "Osservatorio"  (S56, 10/08/2026)
   Blu notte + ottone, titoli con le grazie, filetti sottili.
   Si appoggia a Bootstrap 5.3 in tema scuro e ne ridefinisce le variabili.
   ========================================================================== */

:root {
  /* --- palette --- */
  --lm-bg:        #0B1220;
  --lm-bg-2:      #111A2C;
  --lm-bg-3:      #0E1626;
  --lm-bg-deep:   #080D18;
  --lm-line:      #22304A;
  --lm-line-soft: #1A2436;
  --lm-text:      #E8ECF4;
  --lm-muted:     #93A0B8;
  --lm-brass:     #C9A227;
  --lm-brass-hi:  #DDBA45;
  --lm-brass-dim: rgba(201, 162, 39, .10);
  --lm-patina:    #5E9E8A;

  /* --- caratteri --- */
  --lm-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --lm-sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lm-mono:  ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* retrocompatibilità con le classi vecchie */
  --panel: var(--lm-bg-2);
}

/* --- Bootstrap: ridefinizione del tema scuro --- */
[data-bs-theme="dark"] {
  --bs-body-bg:            var(--lm-bg);
  --bs-body-color:         var(--lm-text);
  --bs-emphasis-color:     var(--lm-text);
  --bs-secondary-color:    var(--lm-muted);
  --bs-border-color:       var(--lm-line);
  --bs-border-color-translucent: var(--lm-line);
  --bs-link-color:         var(--lm-brass);
  --bs-link-hover-color:   var(--lm-brass-hi);
  --bs-primary:            #C9A227;
  --bs-primary-rgb:        201, 162, 39;
  --bs-body-font-family:   var(--lm-sans);
}

/* ---------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
body {
  background: var(--lm-bg) !important;
  color: var(--lm-text) !important;
  font-family: var(--lm-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .lm-serif {
  font-family: var(--lm-serif);
  font-weight: 400;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* Bootstrap mette .fw-bold su molti titoli: nel nostro stile il grassetto
   sui serif è pesante, lo riportiamo a un peso normale. */
h1.fw-bold, h2.fw-bold, h3.fw-bold,
h1.fw-semibold, h2.fw-semibold, h3.fw-semibold { font-weight: 400 !important; }

a { text-decoration: none; }

.text-secondary { color: var(--lm-muted) !important; }
.border-secondary { border-color: var(--lm-line) !important; }
.bg-black { background-color: var(--lm-bg) !important; }
.bg-dark  { background-color: var(--lm-bg-2) !important; }

hr { border-color: var(--lm-line); opacity: 1; }

::selection { background: var(--lm-brass); color: var(--lm-bg); }

:focus-visible {
  outline: 2px solid var(--lm-brass);
  outline-offset: 2px;
}

.py-lg-6 { padding-top: 5rem; padding-bottom: 5rem; }

/* ---------------------------------------------------------------------------
   ELEMENTI RICORRENTI DELL'IDENTITÀ
   ------------------------------------------------------------------------- */

/* occhiello: testo minuscolo spaziato fra due filetti */
.lm-eyebrow {
  font-family: var(--lm-sans);
  font-size: .69rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lm-brass);
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.35rem;
}
.lm-eyebrow::before,
.lm-eyebrow::after {
  content: "";
  height: 1px;
  width: 3.2rem;
  background: var(--lm-line);
}
.lm-eyebrow.start::before { display: none; }
.lm-eyebrow.center { justify-content: center; }

/* etichetta di stato: attiva / in arrivo */
.lm-badge {
  display: inline-block;
  font-family: var(--lm-sans);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--lm-line);
  border-radius: 2px;
  padding: .28rem .6rem;
  color: var(--lm-muted);
  white-space: nowrap;
}
.lm-badge.on   { border-color: var(--lm-brass); color: var(--lm-brass); }
.lm-badge.soon { border-color: var(--lm-line);  color: var(--lm-muted); }
.lm-badge.free { border-color: var(--lm-patina); color: var(--lm-patina); }

/* titolo di sezione + sottotitolo */
.lm-h2 { font-size: 1.55rem; margin-bottom: .35rem; }
.lm-h2-sub {
  color: var(--lm-muted);
  font-size: .93rem;
  max-width: 66ch;
  margin-bottom: 1.9rem;
}

/* sezione con filetto di separazione */
.lm-section {
  padding: 3.2rem 0;
  border-bottom: 1px solid var(--lm-line);
}
.lm-section.deep { background: var(--lm-bg-3); }

/* riquadro */
.lm-box {
  border: 1px solid var(--lm-line);
  border-radius: 4px;
  background: var(--lm-bg-2);
  padding: 1.35rem;
  height: 100%;
}
.lm-box.hi { border-color: var(--lm-brass); }
.lm-box h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.lm-box p  { color: var(--lm-muted); font-size: .89rem; line-height: 1.6; margin-bottom: 0; }

/* numerale romano/arabo in ottone */
.lm-num {
  font-family: var(--lm-serif);
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--lm-brass);
  margin-bottom: .65rem;
}

/* passo numerato (1 2 3) */
.lm-step { border-top: 2px solid var(--lm-brass); padding-top: 1rem; height: 100%; }
.lm-step b {
  display: block;
  font-family: var(--lm-serif);
  font-size: 1.9rem;
  color: var(--lm-brass);
  line-height: 1;
  margin-bottom: .7rem;
  font-weight: 400;
}
.lm-step h3 { font-family: var(--lm-sans); font-size: .97rem; font-weight: 600; margin-bottom: .3rem; }
.lm-step p  { color: var(--lm-muted); font-size: .85rem; margin-bottom: 0; }

/* pallino "strumento" */
.lm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lm-patina);
  margin-bottom: .75rem;
}

/* tabella delle materie / degli studi */
.lm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lm-table th {
  text-align: left;
  color: var(--lm-muted);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 0 0 .65rem;
  border-bottom: 1px solid var(--lm-line);
}
.lm-table td { padding: .9rem 0; border-bottom: 1px solid var(--lm-line); vertical-align: top; }
.lm-table td.mat { font-family: var(--lm-serif); font-size: 1.05rem; white-space: nowrap; }
.lm-table td.des { color: var(--lm-muted); line-height: 1.55; }
.lm-table td.st  { text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) {
  .lm-table td.des { font-size: .84rem; }
  .lm-table td.mat { font-size: .95rem; }
}

/* ---------------------------------------------------------------------------
   BOTTONI
   ------------------------------------------------------------------------- */
.btn { border-radius: 3px; font-family: var(--lm-sans); }

.btn-lm {
  background: var(--lm-brass);
  color: var(--lm-bg);
  font-weight: 700;
  border: 1px solid var(--lm-brass);
  padding: .82rem 2rem;
  transition: background .18s ease, transform .18s ease;
}
.btn-lm:hover, .btn-lm:focus { background: var(--lm-brass-hi); border-color: var(--lm-brass-hi); color: var(--lm-bg); }
.btn-lm:active { transform: translateY(1px); }

.btn-lm-outline {
  background: transparent;
  color: var(--lm-brass);
  border: 1px solid var(--lm-brass);
  font-weight: 600;
  padding: .78rem 1.6rem;
  transition: background .18s ease, color .18s ease;
}
.btn-lm-outline:hover, .btn-lm-outline:focus { background: var(--lm-brass-dim); color: var(--lm-brass-hi); }

.btn-lm-ghost {
  background: transparent;
  color: var(--lm-text);
  border: 1px solid var(--lm-line);
  font-weight: 600;
  padding: .78rem 1.6rem;
}
.btn-lm-ghost:hover { border-color: var(--lm-muted); color: var(--lm-text); }

/* i vecchi .btn-light sparsi nel sito diventano ottone */
.btn-light, .btn-outline-light { border-radius: 3px; }
.btn-light { background: var(--lm-brass); border-color: var(--lm-brass); color: var(--lm-bg) !important; font-weight: 700; }
.btn-light:hover { background: var(--lm-brass-hi); border-color: var(--lm-brass-hi); }
.btn-outline-light { border-color: var(--lm-line); color: var(--lm-text); }
.btn-outline-light:hover { background: var(--lm-bg-2); border-color: var(--lm-muted); color: var(--lm-text); }

/* ---------------------------------------------------------------------------
   BARRA DI NAVIGAZIONE
   ------------------------------------------------------------------------- */
.lm-navbar {
  background: var(--lm-bg);
  border-bottom: 1px solid var(--lm-line);
}
.lm-navbar .navbar-brand { font-family: var(--lm-serif); }
.lm-navbar .nav-link {
  color: var(--lm-muted);
  font-size: .9rem;
  padding: .45rem 0;
  position: relative;
}
.lm-navbar .nav-link:hover { color: var(--lm-text); }
.lm-navbar .nav-link.active { color: var(--lm-text); }
.lm-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--lm-brass);
}
@media (max-width: 991.98px) {
  .lm-navbar .nav-link { padding: .8rem 0; border-bottom: 1px solid var(--lm-line-soft); font-size: 1.05rem; font-family: var(--lm-serif); }
  .lm-navbar .nav-link.active::after { display: none; }
  .lm-navbar .navbar-collapse { padding-bottom: 1rem; }
}
.lm-navbar .navbar-toggler { border-color: var(--lm-line); padding: .3rem .55rem; }
.lm-navbar .navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--lm-brass); }

.brand-logo { height: 30px; width: auto; display: block; }
@media (min-width: 992px) { .brand-logo { height: 42px; } }

/* ---------------------------------------------------------------------------
   APERTURA (hero)
   ------------------------------------------------------------------------- */
.hero,
.lm-hero {
  background: radial-gradient(120% 90% at 50% -25%, #16223A 0%, var(--lm-bg) 62%);
  border-bottom: 1px solid var(--lm-line);
}
.lm-hero-title {
  font-family: var(--lm-serif);
  font-size: clamp(2rem, 5.2vw, 2.85rem);
  line-height: 1.14;
  margin-bottom: 1.1rem;
}
.lm-hero-title em { font-style: italic; color: var(--lm-brass); }
.lm-hero-sub {
  color: var(--lm-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.9rem;
}
.lm-micro { color: var(--lm-muted); font-size: .8rem; margin-top: .85rem; margin-bottom: 0; }

/* riquadro del video (segnaposto finché non arriva il link) */
.lm-player {
  position: relative;
  max-width: 640px;
  margin: 0 auto 1.9rem;
  border: 1px solid var(--lm-line);
  border-radius: 5px;
  background: #060A12;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.lm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lm-player-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  color: var(--lm-muted);
}
.lm-player-empty .play {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--lm-brass); color: var(--lm-bg);
  display: grid; place-items: center; font-size: 1.25rem;
}
.lm-player-empty span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   PIÈ DI PAGINA
   ------------------------------------------------------------------------- */
.lm-footer { background: var(--lm-bg-deep); border-top: 1px solid var(--lm-line); }
.lm-footer h4 {
  font-family: var(--lm-sans);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lm-brass);
  margin-bottom: .9rem;
  font-weight: 600;
}
.lm-footer a, .lm-footer p { color: var(--lm-muted); font-size: .84rem; line-height: 1.6; }
.lm-footer a { display: block; margin-bottom: .45rem; }
.lm-footer a:hover { color: var(--lm-text); }
.lm-footer .lm-footer-brand { font-family: var(--lm-serif); font-size: 1.05rem; color: var(--lm-text); margin-bottom: .6rem; }
.lm-footer .lm-disc { border-top: 1px solid var(--lm-line); margin-top: 1.6rem; padding-top: 1.3rem; font-size: .73rem; line-height: 1.75; color: var(--lm-muted); }
.lm-18 {
  display: inline-block;
  border: 1px solid var(--lm-line);
  border-radius: 2px;
  padding: .3rem .65rem;
  margin-bottom: .8rem;
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--lm-muted);
}
.footer-logo { height: 46px; width: auto; display: block; }

/* ---------------------------------------------------------------------------
   COMPONENTI GIÀ ESISTENTI — rivestiti con la palette nuova
   ------------------------------------------------------------------------- */
.cp-card {
  background: var(--lm-bg-2);
  border: 1px solid var(--lm-line);
  border-radius: 4px;
}
.cp-muted { color: var(--lm-muted) !important; }
.cp-line  { border-top: 1px solid var(--lm-line); }
.cp-pill {
  background: var(--lm-bg-2);
  border: 1px solid var(--lm-line);
  border-radius: 999px;
  padding: .35rem .75rem;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}
.cp-img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--lm-line); }
.cp-btn { border-radius: 3px; padding: .85rem 1rem; font-weight: 700; }
.cp-logo { height: 34px; width: auto; display: inline-block; }

/* schede degli studi */
.article-card {
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-2);
  overflow: hidden;
  border-radius: 4px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.article-card:hover {
  border-color: var(--lm-brass);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
}
.article-media { aspect-ratio: 16 / 9; background: var(--lm-bg-3); position: relative; }
.article-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
  opacity: .92;
}
.article-card:hover .article-img { transform: scale(1.04); opacity: 1; }
.article-body { padding: 1.05rem 1.15rem; }
.article-title {
  font-family: var(--lm-serif);
  font-weight: 400 !important;
  line-height: 1.25;
  font-size: 1.1rem;
  color: var(--lm-text);
}
.article-excerpt { font-size: .86rem; line-height: 1.55; color: var(--lm-muted) !important; }
.article-cta {
  border-top: 1px solid var(--lm-line);
  padding: .8rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  font-weight: 600;
  color: var(--lm-brass);
  background: transparent;
}
.article-cta-icon { transition: transform .2s ease; }
.article-card:hover .article-cta-icon { transform: translateX(4px); }
.article-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 2px;
  color: var(--lm-brass);
  background: rgba(11, 18, 32, .85);
  border: 1px solid var(--lm-line);
}

/* "primo piano" */
.featured-link { transition: border-color .2s ease; border-radius: 4px; }
.featured-link:hover { border-color: var(--lm-brass) !important; }
.featured-media { aspect-ratio: 3 / 4; overflow: hidden; }
@media (min-width: 576px) { .featured-media { aspect-ratio: 16 / 9; } }
@media (min-width: 768px) { .featured-media { aspect-ratio: 21 / 9; } }
.featured-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.featured-link:hover .featured-img { transform: scale(1.04); }
.featured-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 13, 24, .95), rgba(8, 13, 24, .55), rgba(8, 13, 24, 0));
}
.featured-content { position: absolute; inset: auto 0 0 0; padding: 1.25rem; }
@media (min-width: 768px) { .featured-content { padding: 2rem; } }
.featured-title {
  font-family: var(--lm-serif);
  font-weight: 400 !important;
  line-height: 1.18;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
}

/* schede social */
.social-card, .social-card-lg {
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-2);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: border-color .2s ease, transform .2s ease;
}
.social-card-lg { padding: 1.35rem; }
.social-card:hover, .social-card-lg:hover { border-color: var(--lm-brass); transform: translateY(-2px); }
.social-icon, .social-icon-lg {
  width: 44px; height: 44px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--lm-bg-3);
  border: 1px solid var(--lm-line);
  color: var(--lm-brass);
  flex: 0 0 auto;
}
.social-icon-lg { width: 58px; height: 58px; }
.social-icon i { font-size: 1.15rem; line-height: 1; }
.social-icon-lg i { font-size: 1.55rem; line-height: 1; }

/* media delle pagine di racconto */
.about-media {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-2);
}
.about-img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
/* Le foto vere non sono tutte 4:3: senza queste due varianti il ritaglio
   taglierebbe le teste alle verticali e i lati alle panoramiche. */
.about-img.tall { aspect-ratio: 3 / 4; }
.about-img.wide { aspect-ratio: 16 / 9; }
/* Didascalia: serve a dire chi si vede nella foto, sennò non si capisce. */
.about-cap {
  border-top: 1px solid var(--lm-line);
  padding: .6rem .9rem;
  color: var(--lm-muted);
  font-size: .82rem;
  line-height: 1.45;
}
.about-placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #16223A, var(--lm-bg-3));
  color: var(--lm-muted);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* apertura delle pagine di progetto */
.project-hero { position: relative; min-height: 320px; background: var(--lm-bg); overflow: hidden; }
.project-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.project-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,18,32,.96), rgba(11,18,32,.6), rgba(11,18,32,.25)); }
.project-hero-content { position: relative; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.project-hero-sub { max-width: 60ch; }

/* elenco dei PDF */
.pdf-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem;
  border: 1px solid var(--lm-line);
  border-radius: 4px;
  background: var(--lm-bg-2);
  transition: border-color .2s ease, transform .2s ease;
}
.pdf-row:hover { border-color: var(--lm-brass); transform: translateY(-1px); }
.pdf-thumb { width: 110px; height: 78px; flex: 0 0 auto; border-radius: 3px; overflow: hidden; border: 1px solid var(--lm-line); background: var(--lm-bg-3); }
.pdf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdf-content { flex: 1 1 auto; min-width: 0; }
.pdf-title { display: flex; align-items: center; gap: .6rem; font-family: var(--lm-serif); }
.pdf-lock {
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--lm-line); background: var(--lm-bg-3); color: var(--lm-muted);
}
.pdf-chevron { flex: 0 0 auto; color: var(--lm-brass); }
@media (max-width: 575.98px) {
  .pdf-row { flex-direction: column; align-items: stretch; }
  .pdf-thumb { width: 100%; height: 160px; }
  .pdf-chevron { display: none; }
}

/* opt-in */
.optin-lead { max-width: 60ch; }
.optin-card { border: 1px solid var(--lm-line); background: var(--lm-bg-2); border-radius: 4px; }
.optin-choice {
  display: block;
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-3);
  border-radius: 4px;
  padding: .9rem;
  transition: border-color .2s ease;
}
.optin-choice:hover { border-color: var(--lm-brass); }
.optin-divider { height: 1px; background: var(--lm-line); }

/* moduli */
.form-control, .form-select {
  background: var(--lm-bg-3);
  border-color: var(--lm-line);
  color: var(--lm-text);
  border-radius: 3px;
  padding: .65rem .8rem;
}
.form-control:focus, .form-select:focus {
  background: var(--lm-bg-3);
  border-color: var(--lm-brass);
  color: var(--lm-text);
  box-shadow: 0 0 0 .18rem var(--lm-brass-dim);
}
.form-control::placeholder { color: var(--lm-muted); opacity: .75; }
.form-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lm-muted); margin-bottom: .35rem; }
.form-check-input { background-color: var(--lm-bg-3); border-color: var(--lm-line); }
.form-check-input:checked { background-color: var(--lm-brass); border-color: var(--lm-brass); }
.form-check-input:focus { border-color: var(--lm-brass); box-shadow: 0 0 0 .18rem var(--lm-brass-dim); }

/* tabelle scure */
.table-dark { --bs-table-bg: transparent; --bs-table-border-color: var(--lm-line); color: var(--lm-text); }

/* utilità */
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.lm-tabular { font-variant-numeric: tabular-nums; }

/* citazione in evidenza — per le frasi di Davide */
.lm-quote {
  border-left: 2px solid var(--lm-brass);
  padding: .3rem 0 .3rem 1.6rem;
  margin: 0;
}
.lm-quote p {
  font-family: var(--lm-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--lm-text);
  margin: 0;
}
.lm-quote cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--lm-sans);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lm-muted);
  font-style: normal;
}

/* riga di racconto: numerale a margine + testo */
.lm-tappa { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem; padding: 1.3rem 0; border-top: 1px solid var(--lm-line); }
.lm-tappa:first-child { border-top: 0; padding-top: 0; }
.lm-tappa .n { font-family: var(--lm-serif); font-size: 1.5rem; color: var(--lm-brass); line-height: 1.1; }
.lm-tappa h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.lm-tappa p { color: var(--lm-muted); font-size: .93rem; line-height: 1.65; margin-bottom: 0; max-width: 62ch; }

/* ---------------------------------------------------------------------------
   ISCRIZIONE E ACCESSO  (S56)
   ------------------------------------------------------------------------- */

/* indicatore dei tre passi */
.lm-slabel {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lm-muted);
  margin-bottom: .6rem;
}
.lm-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem; }
.lm-sdot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--lm-line);
  color: var(--lm-muted);
  font-size: .75rem;
  display: grid; place-items: center;
  flex: none;
}
.lm-sdot.on   { background: var(--lm-brass); border-color: var(--lm-brass); color: var(--lm-bg); font-weight: 700; }
.lm-sdot.done { border-color: var(--lm-brass); color: var(--lm-brass); }
.lm-sline { height: 1px; background: var(--lm-line); flex: 1; }

/* riquadro dei moduli di accesso */
.lm-auth {
  max-width: 30rem;
  margin: 0 auto;
}
.lm-auth-card {
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-2);
  border-radius: 4px;
  padding: 1.6rem;
}
.lm-auth h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.lm-auth .lm-auth-sub { color: var(--lm-muted); font-size: .92rem; margin-bottom: 1.5rem; }

/* bottone Google */
.lm-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  background: #FFFFFF;
  color: #1F1F1F;
  border: 1px solid #DADCE0;
  border-radius: 3px;
  padding: .78rem 1rem;
  font-weight: 600;
  font-size: .95rem;
  transition: background .18s ease;
}
.lm-google:hover { background: #F1F3F4; color: #1F1F1F; }
.lm-google svg { width: 18px; height: 18px; flex: none; }

/* separatore "oppure" */
.lm-oppure {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--lm-muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 1.3rem 0;
}
.lm-oppure::before, .lm-oppure::after { content: ""; height: 1px; background: var(--lm-line); flex: 1; }

/* avvisi */
.lm-alert {
  border: 1px solid var(--lm-line);
  border-left: 3px solid var(--lm-brass);
  background: var(--lm-bg-2);
  border-radius: 3px;
  padding: .85rem 1rem;
  font-size: .9rem;
  margin-bottom: 1.2rem;
}
.lm-alert.ko { border-left-color: #C4574E; }
.lm-alert.ok { border-left-color: var(--lm-patina); }

/* anteprima della mail ricevuta */
.lm-mailbox {
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-3);
  border-radius: 3px;
  padding: .9rem 1rem;
  margin-bottom: 1.2rem;
}
.lm-mailbox .da { font-size: .72rem; color: var(--lm-brass); margin-bottom: .25rem; }
.lm-mailbox .og { font-size: .92rem; font-weight: 600; margin-bottom: .2rem; }
.lm-mailbox .an { font-size: .8rem; color: var(--lm-muted); margin: 0; }

/* nota legale sotto i bottoni */
.lm-legale { font-size: .74rem; color: var(--lm-muted); line-height: 1.55; }
.lm-legale a { color: var(--lm-text); text-decoration: underline; }

/* movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .article-card:hover, .social-card:hover, .pdf-row:hover, .featured-link:hover .featured-img { transform: none; }
}

/* ---------------------------------------------------------------------------
   S61 · IL PERCORSO A STEP DELL'AREA RISERVATA
   Chi arriva dal bot trovava tutti i riquadri insieme e non sapeva dove
   guardare. Adesso è una scala: un passo aperto per volta, i fatti chiusi
   sopra, i prossimi spenti sotto.
   ------------------------------------------------------------------------- */
.lm-percorso {
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.lm-percorso-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: 1.1rem 1.4rem .9rem;
  border-bottom: 1px solid var(--lm-line-soft);
}
.lm-percorso-testa h2 {
  font-family: var(--lm-serif);
  font-size: 1.2rem;
  margin: 0;
  flex-grow: 1;
}
.lm-percorso-testa .conta {
  font-size: .78rem;
  color: var(--lm-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* barra di avanzamento: sottile, ottone, senza animazioni inutili */
.lm-avanzamento {
  height: 3px;
  background: var(--lm-line-soft);
  position: relative;
}
.lm-avanzamento > i {
  display: block;
  height: 100%;
  background: var(--lm-brass);
  transition: width .35s ease;
}

.lm-passo {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--lm-line-soft);
  align-items: flex-start;
}
.lm-passo:last-child { border-bottom: 0; }

/* il pallino col numero — cambia da solo secondo lo stato del passo */
.lm-passo .segno {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--lm-line);
  color: var(--lm-muted);
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}
.lm-passo .corpo { flex-grow: 1; min-width: 0; }
.lm-passo h3 {
  font-family: var(--lm-sans);
  font-size: .98rem;
  font-weight: 600;
  margin: 0 0 .15rem;
  color: var(--lm-text);
}
.lm-passo .sotto {
  font-size: .76rem;
  color: var(--lm-brass);
  letter-spacing: .03em;
  margin-bottom: .35rem;
}
.lm-passo p {
  color: var(--lm-muted);
  font-size: .87rem;
  line-height: 1.6;
  margin: 0;
}
.lm-passo .azione { margin-top: .85rem; }

/* ── fatto: si asciuga a una riga sola, non ruba più attenzione ─────────── */
.lm-passo.fatto { padding-top: .8rem; padding-bottom: .8rem; }
.lm-passo.fatto .segno {
  border-color: var(--lm-patina);
  color: var(--lm-patina);
}
.lm-passo.fatto h3 { font-weight: 500; color: var(--lm-muted); }
.lm-passo.fatto .sotto { display: none; }
.lm-passo.fatto p { font-size: .82rem; }

/* ── corrente: l'unico che si vede davvero ─────────────────────────────── */
.lm-passo.corrente {
  background: var(--lm-bg-3);
  border-left: 2px solid var(--lm-brass);
  padding-left: calc(1.4rem - 2px);
}
.lm-passo.corrente .segno {
  border-color: var(--lm-brass);
  background: var(--lm-brass);
  color: var(--lm-bg);
}
.lm-passo.corrente h3 { font-size: 1.05rem; }

/* ── dopo: c'è, si legge, ma non chiama ────────────────────────────────── */
.lm-passo.dopo { opacity: .5; }
.lm-passo.dopo .sotto { color: var(--lm-muted); }

/* ── invito (01/09): sempre aperto, non trattiene ───────────────────────
   Lo step ③ «Prova il calcolatore» non si chiude mai: non è un traguardo,
   è una porta aperta. Quindi si legge bene come il corrente, ma senza la
   riga d'ottone e senza il pallino pieno — non è lì che devi andare adesso. */
.lm-passo.invito .segno {
  border-style: dashed;
  border-color: var(--lm-brass);
  color: var(--lm-brass);
}
.lm-passo.invito .sotto { color: var(--lm-muted); }

/* ── Collega Telegram: fuori dalla scala, sempre disponibile ────────────
   Era lo step ③, e prometteva «una previsione in regalo» che il freemium
   spento non consegnava. Adesso sta qui sotto e dice solo cose vere. */
.lm-collega {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.4rem;
  border-top: 1px solid var(--lm-line);
  background: var(--lm-bg-3);
}
.lm-collega .icona { font-size: 1.35rem; line-height: 1.4; flex: 0 0 auto; }
.lm-collega .corpo { flex-grow: 1; min-width: 0; }
.lm-collega h3 {
  font-family: var(--lm-sans);
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .2rem;
  color: var(--lm-text);
}
.lm-collega p {
  color: var(--lm-muted);
  font-size: .85rem;
  line-height: 1.6;
  margin: 0;
}
.lm-collega .azione { margin-top: .8rem; }
.lm-collega.fatto .icona { opacity: .55; }
.lm-collega.fatto h3 { font-weight: 500; color: var(--lm-muted); }

/* percorso finito: il riquadro si chiude in una riga di conferma */
.lm-percorso.finito .lm-percorso-testa { border-bottom: 0; }

/* nota sotto un passo (es. «l'ora di nascita si può aggiungere dopo») */
.lm-passo .nota {
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--lm-muted);
  border-left: 2px solid var(--lm-line);
  padding-left: .7rem;
}

@media (max-width: 575.98px) {
  .lm-passo { padding: 1rem; gap: .75rem; }
  .lm-passo.corrente { padding-left: calc(1rem - 2px); }
  .lm-passo .azione .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   S61 · LO SPECCHIETTO DELLE PREVISIONI
   Impianto preso dal mockup del committente (Previsione · Data · Colpi · Esito),
   veste presa dal sito: fondo scuro, ottone, patina. Il mockup era su crema,
   qui stonava.
   ------------------------------------------------------------------------- */
.lm-previsioni { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lm-previsioni th {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lm-muted);
  font-weight: 600;
  text-align: left;
  padding: 0 0 .7rem;
  border-bottom: 1px solid var(--lm-brass);
  white-space: nowrap;
}
.lm-previsioni td {
  padding: .95rem 0;
  border-bottom: 1px solid var(--lm-line-soft);
  vertical-align: middle;
}
.lm-previsioni tr:last-child td { border-bottom: 0; }
.lm-previsioni th + th, .lm-previsioni td + td { padding-left: 1rem; }

/* colonna 1: il nome del metodo sopra, ruote e numeri sotto */
.lm-previsioni .metodo { font-weight: 600; color: var(--lm-text); display: block; }
.lm-previsioni .numeri {
  font-family: var(--lm-mono);
  font-size: .8rem;
  color: var(--lm-muted);
  display: block;
  margin-top: .15rem;
}
.lm-previsioni .quando { color: var(--lm-muted); white-space: nowrap; font-size: .84rem; }
.lm-previsioni .colpi  { font-family: var(--lm-mono); color: var(--lm-text); white-space: nowrap; }
.lm-previsioni .esito  { text-align: right; white-space: nowrap; }

/* le pillole di stato: stessa idea del mockup, colori di casa */
.lm-esito {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--lm-line);
  color: var(--lm-muted);
}
.lm-esito.vinta     { border-color: var(--lm-patina); color: var(--lm-patina); background: rgba(94,158,138,.10); }
.lm-esito.attiva    { border-color: var(--lm-brass);  color: var(--lm-brass);  background: var(--lm-brass-dim); }
.lm-esito.cambiata  { border-color: var(--lm-line);   color: var(--lm-muted); }
.lm-esito.recupero  { border-color: var(--lm-muted);  color: var(--lm-text); }

/* su telefono la tabella diventa un elenco di schede: niente scroll laterale */
@media (max-width: 575.98px) {
  .lm-previsioni thead { display: none; }
  .lm-previsioni, .lm-previsioni tbody, .lm-previsioni tr, .lm-previsioni td { display: block; width: 100%; }
  .lm-previsioni tr {
    border: 1px solid var(--lm-line);
    border-radius: 3px;
    padding: .85rem 1rem;
    margin-bottom: .7rem;
  }
  .lm-previsioni td { border: 0; padding: .15rem 0; }
  .lm-previsioni th + th, .lm-previsioni td + td { padding-left: 0; }
  .lm-previsioni .esito { text-align: left; margin-top: .5rem; }
  .lm-previsioni .colpi::before {
    content: "Colpi ";
    color: var(--lm-muted);
    font-family: var(--lm-sans);
    font-size: .78rem;
  }
}

/* ---------------------------------------------------------------------------
   S61 · «CHATTA CON NOI» — il pulsantino in basso a destra
   Come lo fanno quasi tutti i siti, ma in ottone e senza finestrella finta:
   apre direttamente Davide Bot su Telegram.
   ------------------------------------------------------------------------- */
.lm-chat-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: var(--lm-brass);
  color: var(--lm-bg);
  font-family: var(--lm-sans);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: background .18s ease, transform .18s ease;
}
.lm-chat-fab:hover,
.lm-chat-fab:focus { background: var(--lm-brass-hi); color: var(--lm-bg); transform: translateY(-2px); }
.lm-chat-fab:focus-visible { outline: 2px solid var(--lm-text); outline-offset: 3px; }
.lm-chat-fab .ico { font-size: 1.05rem; line-height: 1; }

/* Su telefono resta il solo cerchio: la scritta coprirebbe i pulsanti della
   pagina, che è esattamente il difetto di questi widget quando sono fatti male. */
@media (max-width: 575.98px) {
  .lm-chat-fab {
    right: .8rem;
    bottom: .8rem;
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
  }
  .lm-chat-fab .txt { display: none; }
  .lm-chat-fab .ico { font-size: 1.3rem; }
}

/* Se il banner dei cookie è aperto, il pulsante si sposta sopra per non
   sovrapporsi: il consenso viene prima della chat.
   Il banner parte con display:none e lo script lo porta a 'block', quindi si
   guarda proprio quello — non il contrario, sennò lo spostamento resterebbe
   attivo anche a banner chiuso. */
body:has(#cookieBanner[style*="display: block"]) .lm-chat-fab { bottom: 8.5rem; }

/* ---------------------------------------------------------------------------
   S61 · IL REGOLAMENTO DELLE PREVISIONI (dentro il profilo)
   Impianto preso dallo specchietto del committente — tre blocchi, uno per
   metodo, ognuno col suo accento — ma nei colori del sito: sta dentro il
   profilo, deve sembrare parte della pagina e non un volantino incollato.
   ------------------------------------------------------------------------- */
.lm-regolamento {
  border: 1px solid var(--lm-line);
  background: var(--lm-bg-3);
  border-radius: 3px;
  margin-top: 1.25rem;
}
.lm-regolamento > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .7rem;
  padding: .85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--lm-sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--lm-text);
}
.lm-regolamento > summary::-webkit-details-marker { display: none; }
.lm-regolamento > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--lm-brass);
  transition: transform .2s ease;
}
.lm-regolamento[open] > summary::after { transform: rotate(180deg); }
.lm-regolamento > summary small { color: var(--lm-muted); font-weight: 400; font-size: .78rem; }
.lm-regolamento > summary:hover { color: var(--lm-brass-hi); }
.lm-regolamento > summary:focus-visible { outline: 2px solid var(--lm-brass); outline-offset: -2px; }

.lm-regolamento .corpo { padding: .25rem 1.1rem 1.1rem; }

.lm-regolamento .metodo {
  border-top: 1px solid var(--lm-line-soft);
  padding-top: .9rem;
  margin-top: .9rem;
}
.lm-regolamento .metodo h3 {
  font-family: var(--lm-sans);
  font-size: .92rem;
  font-weight: 700;
  color: var(--accento);
  margin: 0 0 .1rem;
}
.lm-regolamento .metodo .sotto {
  font-size: .78rem;
  color: var(--lm-muted);
  margin: 0 0 .55rem;
}
.lm-regolamento .metodo ul { margin: 0; padding-left: 1.05rem; }
.lm-regolamento .metodo li {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--lm-text);
  margin-bottom: .35rem;
}
.lm-regolamento .metodo li::marker { color: var(--accento); }

.lm-regolamento .nota {
  margin: 1.1rem 0 0;
  padding: .75rem .9rem;
  border-left: 2px solid var(--lm-brass);
  background: var(--lm-brass-dim);
  font-size: .83rem;
  line-height: 1.6;
  color: var(--lm-text);
}
.lm-regolamento .legale {
  margin: .85rem 0 0;
  font-size: .72rem;
  color: var(--lm-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA HOME NUOVA — 07/09/2026

   Stefano: «tutta la home deve poi far sì che la gente si registri».
   Il modulo d'iscrizione non è più una pagina a parte a cui si arriva: sta
   dentro la home, ha un'identità visiva sua, e ogni sezione ci riporta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── I tre motivi: cosa hai appena ti iscrivi ─────────────────────────────── */
.lm-motivi { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.lm-motivo { display: flex; gap: .8rem; align-items: flex-start; }
.lm-motivo .segno { font-size: 1.35rem; line-height: 1.35; flex: 0 0 auto; }
.lm-motivo strong {
  display: block;
  color: var(--lm-text);
  font-size: 1rem;
  margin-bottom: .12rem;
}
.lm-motivo .testo {
  display: block;
  color: var(--lm-muted);
  font-size: .89rem;
  line-height: 1.65;
}

/* ── Il modulo: è il fulcro della pagina, quindi è l'unico riquadro con il
      bordo d'ottone e l'ombra. L'occhio lo trova anche scorrendo veloce. ──── */
.lm-form {
  background: var(--lm-bg-2);
  border: 1px solid var(--lm-brass);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.lm-form h3 {
  font-family: var(--lm-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--lm-text);
  margin: 0 0 .25rem;
}
.lm-form .sotto { color: var(--lm-muted); font-size: .86rem; margin: 0 0 1.25rem; }
.lm-form label {
  display: block;
  font-size: .76rem;
  color: var(--lm-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 .3rem;
}
.lm-form .form-control {
  background: var(--lm-bg);
  border: 1px solid var(--lm-line);
  border-radius: 4px;
  color: var(--lm-text);
  padding: .7rem .75rem;
  font-size: .95rem;
  margin-bottom: .85rem;
}
.lm-form .form-control::placeholder { color: #4d5a70; }
.lm-form .form-control:focus {
  background: var(--lm-bg);
  border-color: var(--lm-brass);
  color: var(--lm-text);
  box-shadow: none;
}
/* Il blocco dei dati di nascita: staccato, perché è il regalo e non
   burocrazia. La riga d'ottone lo dice prima ancora di leggere. */
.lm-form .regalo {
  border-top: 1px solid var(--lm-line);
  margin: .25rem 0 1rem;
  padding-top: 1rem;
}
.lm-form .regalo .titolo {
  color: var(--lm-brass);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
}

/* ── Il richiamo che chiude ogni sezione ──────────────────────────────────── */
.lm-richiamo { text-align: center; margin-top: 1.75rem; }
.lm-richiamo p { color: var(--lm-muted); font-size: .88rem; margin: 0 0 .75rem; }

/* ── La barra che resta in basso mentre si scorre ──────────────────────────
   Nomina il regalo, non «registrati»: è un'offerta, non una richiesta. */
.lm-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: rgba(11, 18, 32, .94);
  border-top: 1px solid var(--lm-brass);
  backdrop-filter: blur(8px);
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.lm-barra span { color: var(--lm-muted); font-size: .86rem; }
.lm-barra b { color: var(--lm-text); }
/* Sotto i 576px il testo lungo mangia tutto lo schermo: resta il pulsante. */
@media (max-width: 575.98px) {
  .lm-barra .testo-lungo { display: none; }
}

/* 07/09 — Riquadri e tappe con PIÙ paragrafi dentro.
   `.lm-box p` e `.lm-tappa p` azzerano il margine sotto, e vincono sulle
   utility di Bootstrap per specificità (0-0-1-1 contro 0-0-1-0): senza queste
   due righe i paragrafi lunghi si attaccano fra loro e il testo diventa un
   muro. Serve in «Chi siamo», dove ogni blocco ha due o tre paragrafi. */
.lm-box p + p   { margin-top: .7rem; }
.lm-tappa p + p { margin-top: .75rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   IL PROFILO PASSO PASSO — 07/09/2026

   Stefano: «una volta che arrivano sul profilo la prima volta dobbiamo fare che
   sia passo passo, seguita la persona, […] diviso con cura e non confusionario».

   Prima la scala elencava i quattro passi tutti insieme. Adesso: una striscia
   sottile che dice dove sei, e UN passo grande con l'azione dentro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La striscia: dove sei, quanto manca ─────────────────────────────────── */
.lm-striscia { display: flex; gap: .4rem; margin-bottom: 1.5rem; }
.lm-striscia .p {
  flex: 1;
  text-align: center;
  padding: .55rem .35rem;
  border-radius: 4px;
  background: var(--lm-bg-3);
  border: 1px solid var(--lm-line);
  font-size: .72rem;
  line-height: 1.3;
  color: var(--lm-muted);
}
.lm-striscia .p b { display: block; font-size: .95rem; margin-bottom: .1rem; }
.lm-striscia .p.fatto { border-color: var(--lm-patina); color: var(--lm-patina); }
.lm-striscia .p.ora   { border-color: var(--lm-brass); color: var(--lm-brass); font-weight: 600; }
/* Da telefono i titoli non ci stanno: restano i numeri, che bastano a dire
   «sei al secondo di quattro». */
@media (max-width: 575.98px) {
  .lm-striscia .p { font-size: 0; padding: .45rem .2rem; }
  .lm-striscia .p b { font-size: .9rem; margin-bottom: 0; }
}

/* ── Il passo grande: uno solo, con l'azione dentro ──────────────────────── */
.lm-passo-grande {
  background: var(--lm-bg-2);
  border: 1px solid var(--lm-brass);
  border-radius: 4px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.lm-passo-grande .conta {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lm-muted);
  margin-bottom: 1rem;
}
.lm-passo-grande .icona { font-size: 2.4rem; line-height: 1; margin-bottom: .8rem; }
.lm-passo-grande h2 {
  font-family: var(--lm-serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--lm-text);
  margin: 0 0 .5rem;
}
.lm-passo-grande p {
  color: var(--lm-muted);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 1.4rem;
}
.lm-passo-grande .nota-passo {
  font-size: .82rem;
  border-left: 2px solid var(--lm-line);
  padding-left: .8rem;
  text-align: left;
  max-width: 46ch;
}
/* A percorso finito il riquadro non deve più chiamare: niente ottone. */
.lm-passo-grande.finito { border-color: var(--lm-patina); box-shadow: none; padding: 1.5rem; }
.lm-passo-grande.finito .icona { font-size: 1.8rem; color: var(--lm-patina); }
.lm-passo-grande.finito h2 { font-size: 1.25rem; }
.lm-passo-grande.finito p { margin-bottom: 0; }

/* ── La riga «dopo questo…»: sapere che manca poco è metà del lavoro ─────── */
.lm-dopo { margin-top: 1.25rem; text-align: center; }
.lm-dopo p { color: var(--lm-muted); font-size: .82rem; margin: 0; }

/* ── Gli inviti: cose belle da provare, non passi che bloccano ───────────── */
.lm-invito {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--lm-line);
  border-radius: 4px;
  background: var(--lm-bg-3);
}
.lm-invito .icona { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.lm-invito .corpo { flex-grow: 1; min-width: 0; }
.lm-invito strong { display: block; color: var(--lm-text); font-size: .95rem; }
.lm-invito span { color: var(--lm-muted); font-size: .84rem; line-height: 1.55; }
@media (max-width: 575.98px) {
  .lm-invito { flex-wrap: wrap; }
  .lm-invito .btn { width: 100%; }
}