/* Pagina pubblica (landing) su "/". Richiede theme.css; usa solo i token pubblici --cm-*.
   Le due dimensioni da titolo di copertina, più grandi della scala dell'app, sono token locali
   della pagina, dichiarati sul suo elemento radice. */
.cm-landing {
  --cm-font-landing-hero: 3.75rem;
  --cm-font-landing-section: 2.75rem;

  min-height: 100vh; background: var(--cm-color-surface-page); color: var(--cm-color-text-primary);
  font-family: var(--cm-font-family-sans);
}
.cm-landing-wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--cm-space-5); }
.cm-landing-mono { font-family: var(--cm-font-family-mono); }

/* Intestazione */
/* Il tema mette overflow-x: hidden su body, che così diventa un contenitore di scroll che non scorre mai
   e l'intestazione sticky non resta agganciata: sulla landing basta clip, che taglia senza quell'effetto. */
body:has(> .cm-landing) { overflow-x: clip; }
.cm-landing-header { position: sticky; top: 0; z-index: 10; background: var(--cm-color-surface-raised); border-bottom: 1px solid var(--cm-color-border-default); }
.cm-landing-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-4); min-height: 72px; }
.cm-landing-brand { display: inline-flex; align-items: center; gap: var(--cm-space-2); color: var(--cm-color-text-primary); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-tracking-title); text-decoration: none; }
.cm-landing-brand__mark {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--cm-radius-md);
  background: var(--cm-color-brand); color: var(--cm-color-on-brand);
}
.cm-landing-brand__mark svg { display: block; }
.cm-landing-nav { display: flex; align-items: center; gap: var(--cm-space-5); }
.cm-landing-nav__link, .cm-landing-nav__login { color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); font-weight: var(--cm-weight-medium); text-decoration: none; }
.cm-landing-nav__link:hover, .cm-landing-nav__login:hover { color: var(--cm-color-brand); }

/* Pulsanti (link con aspetto di pulsante: portano a una sezione o alla mail) */
.cm-landing-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cm-space-2); min-height: 52px; padding-inline: var(--cm-space-4);
  border: 1px solid transparent; border-radius: var(--cm-radius-lg); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); text-decoration: none;
}
.cm-landing-btn--sm { min-height: 44px; padding-inline: var(--cm-space-4); font-size: var(--cm-font-body); }
.cm-landing-btn--primary { background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-btn--primary:hover { background: var(--cm-color-brand-hover); color: var(--cm-color-on-brand); }
.cm-landing-btn--outline { border-color: var(--cm-color-border-default); background: var(--cm-color-surface-raised); color: var(--cm-color-text-primary); }
.cm-landing-btn--outline:hover { border-color: var(--cm-color-brand); color: var(--cm-color-brand); }

/* Testi ricorrenti */
.cm-landing-eyebrow {
  color: var(--cm-color-brand); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-extra-wide); text-transform: uppercase;
}
.cm-landing-text { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); line-height: var(--cm-leading-relaxed); }
.cm-landing-icon { width: 28px; height: 28px; color: var(--cm-color-brand); flex-shrink: 0; }
.cm-landing-icon--sm { width: 22px; height: 22px; }

/* Apertura */
.cm-landing-hero { padding-block: 88px 72px; background: var(--cm-color-surface-raised); }
.cm-landing-hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.cm-landing-hero__copy { display: flex; flex-direction: column; gap: var(--cm-space-5); }
.cm-landing-hero__title { margin: 0; font-size: var(--cm-font-landing-hero); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-tight); letter-spacing: var(--cm-tracking-tight); }
.cm-landing-hero__lead { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-lg); line-height: var(--cm-leading-normal); }
.cm-landing-actions { display: flex; flex-wrap: wrap; gap: var(--cm-space-3); }
.cm-landing-note { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-body); }

/* Esempio di report nell'apertura */
.cm-landing-sample {
  display: flex; flex-direction: column; gap: var(--cm-space-4); min-width: 0; margin: 0; padding: var(--cm-space-5);
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-page);
}
.cm-landing-sample__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cm-space-3); }
.cm-landing-sample__label {
  color: var(--cm-color-status-warning); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-wide); text-transform: uppercase;
}
.cm-landing-sample__hint { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
.cm-landing-sample__title { margin: 0; font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); letter-spacing: var(--cm-tracking-title); }
.cm-landing-sample__cart {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised);
}
.cm-landing-sample__kpi { display: flex; flex-direction: column; gap: var(--cm-space-1); padding: var(--cm-space-3); }
.cm-landing-sample__kpi + .cm-landing-sample__kpi { border-left: 1px solid var(--cm-color-border-default); }
.cm-landing-sample__kpi--over { background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); }
.cm-landing-sample__kpi-label { color: inherit; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-wide); text-transform: uppercase; opacity: .85; }
.cm-landing-sample__kpi-value { font-size: var(--cm-font-lg); }
.cm-landing-sample__table {
  width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised);
  font-size: var(--cm-font-body);
}
.cm-landing-sample__table th {
  padding: var(--cm-space-3); border-bottom: 1px solid var(--cm-color-border-default); color: var(--cm-color-text-muted); font-size: var(--cm-font-xs);
  font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-wide); text-align: left; text-transform: uppercase;
}
.cm-landing-sample__table td { padding: var(--cm-space-3); border-bottom: 1px solid var(--cm-color-border-subtle); vertical-align: top; }
.cm-landing-sample__table tr:last-child td { border-bottom: 0; }
.cm-landing-sample__product { font-weight: var(--cm-weight-semibold); }
.cm-landing-gap { display: block; color: var(--cm-color-brand); font-weight: var(--cm-weight-bold); }
.cm-landing-gap--over { color: var(--cm-color-status-warning); }
.cm-landing-bar { margin-top: var(--cm-space-2); height: 6px; }
.cm-landing-bar .cm-progress__bar { background: var(--cm-color-brand); }
.cm-landing-bar--over .cm-progress__bar { background: var(--cm-color-status-warning); }

/* Striscia "in breve" */
.cm-landing-strip { padding-block: var(--cm-space-5); background: var(--cm-color-text-primary); color: var(--cm-color-surface-raised); }
.cm-landing-strip__item { display: flex; flex-direction: column; gap: var(--cm-space-1); font-size: var(--cm-font-md); }
.cm-landing-strip__title { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-xl); font-weight: var(--cm-weight-semibold); }

/* Sezioni */
.cm-landing-section { padding-block: 104px; }
/* Le ancore del menù (#come-funziona, #contatti…) non finiscono sotto l'intestazione fissa alta 72px. */
.cm-landing-section, .cm-landing-cta { scroll-margin-top: 72px; }
.cm-landing-section--raised { background: var(--cm-color-surface-raised); }
.cm-landing-section__head { display: flex; flex-direction: column; gap: var(--cm-space-3); max-width: 760px; margin-bottom: 48px; }
.cm-landing-section__title { margin: 0; font-size: var(--cm-font-landing-section); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-tight); letter-spacing: var(--cm-tracking-tight); }
.cm-landing-section__lead { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-lg); line-height: var(--cm-leading-normal); }
.cm-landing-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-5); }
.cm-landing-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-5); }
.cm-landing-card {
  display: flex; flex-direction: column; gap: var(--cm-space-3); padding: var(--cm-space-5);
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised);
}
.cm-landing-card__title { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }

/* Cosa ottenete: vendite (tinta di avviso) e margine (tinta del brand) */
.cm-landing-benefit { display: flex; flex-direction: column; gap: var(--cm-space-4); padding: 40px; border-radius: var(--cm-radius-lg); }
.cm-landing-benefit--over { --cm-landing-tone: var(--cm-color-status-warning); background: var(--cm-color-status-warning-bg); }
.cm-landing-benefit--margin { --cm-landing-tone: var(--cm-color-brand); background: var(--cm-color-status-info-bg); }
.cm-landing-benefit__label {
  color: var(--cm-landing-tone); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-wide); text-transform: uppercase;
}
.cm-landing-benefit__title { margin: 0; font-size: var(--cm-font-2xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-landing-benefit__example {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cm-space-2); margin-top: auto;
  padding: var(--cm-space-3) var(--cm-space-4); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); font-size: var(--cm-font-md);
}
.cm-landing-benefit__figure { color: var(--cm-landing-tone); }
.cm-landing-callout { display: flex; align-items: center; gap: var(--cm-space-3); margin: var(--cm-space-5) 0 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); }

/* Come funziona */
.cm-landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-5); margin: 0; padding: 0; list-style: none; }
.cm-landing-step { display: flex; flex-direction: column; gap: var(--cm-space-3); padding-top: var(--cm-space-5); border-top: 2px solid var(--cm-color-text-primary); }
.cm-landing-step__number { color: var(--cm-color-brand); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }

/* Perché fidarsi, domande */
.cm-landing-features { row-gap: 40px; }
.cm-landing-feature__title { margin: 0 0 var(--cm-space-2); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.cm-landing-faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; }
.cm-landing-faq .cm-landing-section__head { margin-bottom: 0; }
.cm-landing-faq__item { padding-block: var(--cm-space-5); border-top: 1px solid var(--cm-color-border-default); }
.cm-landing-faq__item:last-child { border-bottom: 1px solid var(--cm-color-border-default); }

/* L'analisi gratuita: cosa si riceve, con l'anteprima del report di una pagina */
.cm-landing-offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.cm-landing-offer__copy { display: flex; flex-direction: column; gap: var(--cm-space-5); }
.cm-landing-offer__copy .cm-landing-section__head { margin-bottom: 0; }
.cm-landing-offer__list { display: flex; flex-direction: column; gap: var(--cm-space-5); margin: 0; padding: 0; list-style: none; }
.cm-landing-offer__item { display: flex; gap: var(--cm-space-4); align-items: flex-start; }
.cm-landing-offer__cta { align-self: flex-start; }
.cm-landing-check {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--cm-radius-md); background: var(--cm-color-status-info-bg); color: var(--cm-color-brand);
}
.cm-landing-check svg { width: 18px; height: 18px; }
.cm-landing-offer__preview { display: flex; justify-content: center; margin: 0; padding: 40px; border-radius: var(--cm-radius-lg); background: var(--cm-color-border-default); }
/* Il "foglio" del report: stesso impaginato del PDF vero, in piccolo. */
.cm-landing-page {
  display: flex; flex-direction: column; gap: var(--cm-space-3); width: 100%; max-width: 440px; min-height: 560px; box-sizing: border-box;
  padding: var(--cm-space-5); border-radius: var(--cm-radius-sm); background: var(--cm-color-surface-raised); box-shadow: var(--cm-shadow-overlay);
}
.cm-landing-page__eyebrow {
  padding-top: var(--cm-space-2); border-top: 2px solid var(--cm-color-text-primary); color: var(--cm-color-status-warning);
  font-family: var(--cm-font-family-mono); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-extra-wide); text-transform: uppercase;
}
.cm-landing-page__title { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-landing-page__lead { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-sm); }
.cm-landing-page__cart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--cm-color-border-default); font-size: var(--cm-font-body); }
.cm-landing-page__cart > div { display: flex; flex-direction: column; gap: var(--cm-space-1); padding: var(--cm-space-2); }
.cm-landing-page__cart > div + div { border-left: 1px solid var(--cm-color-border-default); }
.cm-landing-page__cart-diff { background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); }
.cm-landing-page__label { color: inherit; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-wide); text-transform: uppercase; opacity: .85; }
.cm-landing-page__table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--cm-color-text-primary); border-bottom: 2px solid var(--cm-color-text-primary); font-size: var(--cm-font-sm); }
.cm-landing-page__table th { padding: var(--cm-space-1) var(--cm-space-2); color: var(--cm-color-text-muted); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); text-align: left; text-transform: uppercase; }
.cm-landing-page__table td { padding: var(--cm-space-2); border-top: 1px solid var(--cm-color-surface-raised); vertical-align: top; }
.cm-landing-page__row--over td { background: var(--cm-color-status-warning-bg); }
.cm-landing-page__row--inline td { background: var(--cm-color-status-info-bg); }
.cm-landing-page__product { font-weight: var(--cm-weight-semibold); }
.cm-landing-page__gap { display: block; font-weight: var(--cm-weight-bold); }
.cm-landing-page__row--over .cm-landing-page__gap { color: var(--cm-color-status-warning); }
.cm-landing-page__row--inline .cm-landing-page__gap { color: var(--cm-color-brand); }
.cm-landing-page__bar { margin-top: var(--cm-space-1); height: 3px; background: transparent; }
.cm-landing-page__row--over .cm-progress__bar { background: var(--cm-color-status-warning); }
.cm-landing-page__row--inline .cm-progress__bar { background: var(--cm-color-brand); }
.cm-landing-page__insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-4); }
.cm-landing-page__insights > div { display: flex; flex-direction: column; gap: var(--cm-space-1); }
.cm-landing-page__insight-title { color: var(--cm-color-status-warning); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-tracking-wide); text-transform: uppercase; }
.cm-landing-page__insight-title--inline { color: var(--cm-color-brand); }
/* Righe di testo stilizzate: l'anteprima mostra la struttura del commento, non il testo. */
.cm-landing-page__line { display: block; height: 6px; border-radius: var(--cm-radius-sm); background: var(--cm-color-border-subtle); }
.cm-landing-page__line--short { width: 65%; }
.cm-landing-page__hint { margin-top: auto; color: var(--cm-color-text-muted); font-size: var(--cm-font-xs); }

/* Cosa succede dopo l'invio del modulo */
.cm-landing-next { display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-landing-next__title { opacity: .8; font-family: var(--cm-font-family-mono); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-extra-wide); text-transform: uppercase; }
.cm-landing-next__list { display: flex; flex-direction: column; gap: var(--cm-space-3); margin: 0; padding: 0; list-style: none; }
.cm-landing-next__item { display: flex; gap: var(--cm-space-4); align-items: baseline; font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); }
.cm-landing-next__number { opacity: .8; font-family: var(--cm-font-family-mono); font-weight: var(--cm-weight-semibold); }

/* Invito finale e piè di pagina */
.cm-landing-cta { padding-block: 104px; background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-cta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: start; }
.cm-landing-cta__copy { display: flex; flex-direction: column; gap: var(--cm-space-5); }
.cm-landing-cta__title { margin: 0; font-size: var(--cm-font-landing-section); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-tight); letter-spacing: var(--cm-tracking-tight); }
.cm-landing-cta__lead { margin: 0; font-size: var(--cm-font-lg); line-height: var(--cm-leading-normal); }
.cm-landing-cta__contacts { margin: 0; font-size: var(--cm-font-md); }
.cm-landing-cta__link { color: inherit; font-weight: var(--cm-weight-semibold); }
.cm-landing-cta__link:hover { color: inherit; }
/* Il modulo sta su una card chiara: campi e messaggi del design system restano leggibili sul fondo del brand. */
.cm-landing-form {
  display: flex; flex-direction: column; gap: var(--cm-space-4); padding: var(--cm-space-5);
  border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); color: var(--cm-color-text-primary);
}
.cm-landing-form .cm-landing-btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.cm-landing-form__privacy { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); line-height: var(--cm-leading-normal); }
/* Campo trappola per i bot: fuori dallo schermo, non "display: none" (alcuni bot lo saltano). */
.cm-landing-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cm-landing-footer { padding-block: var(--cm-space-5); background: var(--cm-color-text-primary); color: var(--cm-color-surface-raised); font-size: var(--cm-font-body); }
.cm-landing-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cm-space-3); }
.cm-landing-footer__link { color: inherit; }
.cm-landing-footer__link:hover { color: inherit; }
.cm-landing-footer__links { display: flex; flex-wrap: wrap; gap: var(--cm-space-4); }

/* Informativa privacy (/privacy): testo lungo da leggere, colonna stretta come le intestazioni di sezione. */
.cm-landing-legal { display: flex; flex-direction: column; gap: 40px; max-width: 760px; overflow-wrap: anywhere; }
.cm-landing-legal__part { display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-landing-legal__title { margin: 0; font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-tight); }
.cm-landing-legal__list {
  display: flex; flex-direction: column; gap: var(--cm-space-2); margin: 0; padding-left: var(--cm-space-5);
  color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); line-height: var(--cm-leading-relaxed);
}

/* Come funziona: esempio animato in cinque scene (landing.js), la sezione che spiega il prodotto. Le scene stanno impilate nella stessa
   cella della griglia, così l'altezza è quella della più alta e il cambio scena non sposta la pagina;
   le animazioni d'ingresso ripartono ogni volta che una scena torna attiva. */
.cm-landing-demo { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
.cm-landing-demo__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cm-space-3); margin-top: 48px;
  padding: var(--cm-space-4); border-radius: var(--cm-radius-lg); background: var(--cm-color-status-info-bg);
}
.cm-landing-demo__cta-text { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__nav { display: flex; flex-direction: column; gap: var(--cm-space-4); }
.cm-landing-demo__steps { display: flex; flex-direction: column; gap: var(--cm-space-1); margin: 0; padding: 0; list-style: none; }
.cm-landing-demo__step {
  position: relative; display: flex; gap: var(--cm-space-3); align-items: flex-start; width: 100%; min-height: 44px; overflow: hidden;
  padding: var(--cm-space-3); border: 1px solid transparent; border-radius: var(--cm-radius-md); background: transparent;
  color: var(--cm-color-text-secondary); font: inherit; text-align: left; cursor: pointer;
}
.cm-landing-demo__step:hover { color: var(--cm-color-text-primary); }
.cm-landing-demo__step--active { border-color: var(--cm-color-border-default); background: var(--cm-color-surface-page); color: var(--cm-color-text-primary); box-shadow: var(--cm-shadow-sm); }
.cm-landing-demo__step-number { padding-top: 2px; color: var(--cm-color-text-faint); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__step--active .cm-landing-demo__step-number { color: var(--cm-color-brand); }
.cm-landing-demo__step-copy { display: flex; flex-direction: column; gap: 2px; }
.cm-landing-demo__step-title { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__step-text { color: var(--cm-color-text-muted); font-size: var(--cm-font-compact); line-height: var(--cm-leading-snug); }
.cm-landing-demo__progress {
  position: absolute; right: var(--cm-space-3); bottom: 0; left: var(--cm-space-3); height: 2px;
  border-radius: 2px; background: var(--cm-color-brand); transform: scaleX(0); transform-origin: left center;
}
.cm-landing-demo--playing .cm-landing-demo__step--active .cm-landing-demo__progress { animation: cm-landing-demo-grow var(--cm-landing-demo-step) linear both; }
.cm-landing-demo--paused .cm-landing-demo__step--active .cm-landing-demo__progress { animation-play-state: paused; }
.cm-landing-demo__controls { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); }
.cm-landing-demo__control {
  display: inline-flex; align-items: center; gap: var(--cm-space-2); min-height: 44px; padding-inline: var(--cm-space-3);
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-raised);
  color: var(--cm-color-text-secondary); font: inherit; font-size: var(--cm-font-body); font-weight: var(--cm-weight-medium); cursor: pointer;
}
.cm-landing-demo__control:hover { border-color: var(--cm-color-brand); color: var(--cm-color-brand); }
.cm-landing-demo__control svg { width: 16px; height: 16px; }

.cm-landing-demo__stage {
  display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-page); box-shadow: var(--cm-shadow-md);
}
.cm-landing-demo__stage-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-3); padding: var(--cm-space-3) var(--cm-space-4);
  border-bottom: 1px solid var(--cm-color-border-default); background: var(--cm-color-surface-raised);
}
.cm-landing-demo__brand { display: inline-flex; align-items: center; gap: var(--cm-space-2); font-weight: var(--cm-weight-bold); }
.cm-landing-demo__scenes { display: grid; padding: 40px; }
.cm-landing-demo__scene { display: flex; flex-direction: column; gap: var(--cm-space-4); min-width: 0; grid-area: 1 / 1; visibility: hidden; }
.cm-landing-demo__scene--active { visibility: visible; }
.cm-landing-demo__scene--centered { align-items: center; justify-content: center; text-align: center; }
.cm-landing-demo__scene-head { display: flex; flex-direction: column; gap: var(--cm-space-1); }
.cm-landing-demo__scene-title { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.cm-landing-demo__muted { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-body); }

/* 01 · il prodotto */
.cm-landing-demo__product {
  display: flex; gap: var(--cm-space-4); align-items: center; width: 100%; max-width: 400px; padding: var(--cm-space-4);
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); text-align: left;
}
.cm-landing-demo__product-image {
  display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; flex-shrink: 0;
  border-radius: var(--cm-radius-lg); background: var(--cm-color-status-info-bg); color: var(--cm-color-brand);
}
.cm-landing-demo__product-image svg { width: 44px; height: 44px; }
.cm-landing-demo__product-copy { display: flex; flex-direction: column; gap: var(--cm-space-1); min-width: 0; }
.cm-landing-demo__product-name { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.cm-landing-demo__product-price { font-size: var(--cm-font-2xl); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__question { display: flex; flex-direction: column; gap: var(--cm-space-1); }
.cm-landing-demo__question-title { margin: 0; font-size: var(--cm-font-xl); font-weight: var(--cm-weight-semibold); }

/* 02 · la rilevazione */
.cm-landing-demo__rows { display: flex; flex-direction: column; gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.cm-landing-demo__row {
  position: relative; display: grid; grid-template-columns: 10px minmax(0, 9rem) minmax(0, 1fr) 5.5rem; gap: var(--cm-space-3); align-items: center;
  min-height: 56px; padding: var(--cm-space-2) var(--cm-space-3); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-md);
  background: var(--cm-color-surface-raised);
}
/* Il bordo del brand che si accende riga per riga è il "passaggio" della rilevazione. */
.cm-landing-demo__row::after {
  position: absolute; inset: -1px; border: 2px solid var(--cm-color-brand); border-radius: var(--cm-radius-md); content: ""; opacity: 0; pointer-events: none;
}
.cm-landing-demo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cm-color-text-faint); }
.cm-landing-demo__site { font-size: var(--cm-font-body); font-weight: var(--cm-weight-medium); }
.cm-landing-demo__fetch {
  height: 10px; border-radius: var(--cm-radius-sm);
  background: linear-gradient(90deg, var(--cm-color-border-subtle) 0%, var(--cm-color-border-default) 50%, var(--cm-color-border-subtle) 100%);
  background-size: 200% 100%;
}
.cm-landing-demo__note { color: var(--cm-color-text-muted); font-size: var(--cm-font-compact); line-height: var(--cm-leading-snug); }
.cm-landing-demo__row-price { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); text-align: right; }

/* 03 · il confronto */
.cm-landing-demo__ranking { display: flex; flex-direction: column; gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.cm-landing-demo__rank {
  display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 5rem; gap: var(--cm-space-3); align-items: center;
  padding: var(--cm-space-1) var(--cm-space-2); border-radius: var(--cm-radius-md); font-size: var(--cm-font-body);
}
.cm-landing-demo__track { height: 20px; border-radius: var(--cm-radius-sm); background: var(--cm-color-border-subtle); }
.cm-landing-demo__fill { display: block; width: var(--cm-landing-share); height: 100%; border-radius: var(--cm-radius-sm); background: var(--cm-color-status-info-border); }
.cm-landing-demo__rank-price { font-weight: var(--cm-weight-semibold); text-align: right; }
.cm-landing-demo__rank--you { background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); font-weight: var(--cm-weight-bold); }
.cm-landing-demo__rank--you .cm-landing-demo__track { background: var(--cm-color-status-warning-border); }
.cm-landing-demo__rank--you .cm-landing-demo__fill { background: var(--cm-color-status-warning); }
.cm-landing-demo__verdict {
  display: flex; align-items: center; gap: var(--cm-space-2); align-self: flex-start; margin: 0; padding: var(--cm-space-2) var(--cm-space-3);
  border-radius: var(--cm-radius-md); background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); font-size: var(--cm-font-body);
}
.cm-landing-demo__verdict .cm-landing-icon { color: currentColor; }

/* 04 · dove intervenire: stesse tinte di "Cosa ottenete" */
.cm-landing-demo__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-3); }
.cm-landing-demo__action { display: flex; flex-direction: column; gap: var(--cm-space-2); padding: var(--cm-space-4); border-radius: var(--cm-radius-lg); }
.cm-landing-demo__action--over { --cm-landing-tone: var(--cm-color-status-warning); --cm-landing-tone-bg: var(--cm-color-status-warning-bg); background: var(--cm-color-status-warning-bg); }
.cm-landing-demo__action--margin { --cm-landing-tone: var(--cm-color-brand); --cm-landing-tone-bg: var(--cm-color-status-info-bg); background: var(--cm-color-status-info-bg); }
.cm-landing-demo__action-label {
  color: var(--cm-landing-tone); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-wide); text-transform: uppercase;
}
.cm-landing-demo__action-title { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-landing-demo__action-product { color: var(--cm-color-text-secondary); font-size: var(--cm-font-body); }
.cm-landing-demo__compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cm-space-2); font-size: var(--cm-font-md); }
.cm-landing-demo__compare s { color: var(--cm-color-text-muted); }
.cm-landing-demo__pill {
  align-self: flex-start; margin-top: auto; padding: var(--cm-space-1) var(--cm-space-3); border-radius: var(--cm-radius-pill);
  background: var(--cm-landing-tone); color: var(--cm-landing-tone-bg); font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold);
}

/* 05 · ogni giorno */
.cm-landing-demo__chart {
  display: flex; flex-direction: column; gap: var(--cm-space-2); padding: var(--cm-space-3) var(--cm-space-4);
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised);
}
.cm-landing-demo__legend { display: flex; flex-wrap: wrap; gap: var(--cm-space-4); font-size: var(--cm-font-compact); }
.cm-landing-demo__legend-item { display: inline-flex; align-items: center; gap: var(--cm-space-2); }
.cm-landing-demo__legend-item::before { width: 16px; height: 0; border-top: 2px solid currentColor; content: ""; }
.cm-landing-demo__legend-item--you { color: var(--cm-color-status-warning); }
.cm-landing-demo__legend-item--you::before { border-top-style: dashed; }
.cm-landing-demo__legend-item--rival { color: var(--cm-color-brand); }
.cm-landing-demo__plot { display: block; width: 100%; height: auto; overflow: visible; }
.cm-landing-demo__line-you { stroke: var(--cm-color-status-warning); stroke-width: 2; stroke-dasharray: 5 5; }
.cm-landing-demo__line-rival { fill: none; stroke: var(--cm-color-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.cm-landing-demo__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); text-align: center; }
.cm-landing-demo__alert {
  display: flex; gap: var(--cm-space-3); align-items: center; align-self: flex-end; width: 100%; max-width: 440px; padding: var(--cm-space-3) var(--cm-space-4);
  border-radius: var(--cm-radius-lg); background: var(--cm-color-text-primary); color: var(--cm-color-surface-raised); box-shadow: var(--cm-shadow-popover);
}
.cm-landing-demo__alert-icon {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; background: var(--cm-color-brand); color: var(--cm-color-on-brand);
}
.cm-landing-demo__alert-icon svg { width: 18px; height: 18px; }
.cm-landing-demo__alert-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--cm-font-compact); }
.cm-landing-demo__alert-copy strong { font-size: var(--cm-font-body); }

/* Animazioni: partono solo nella scena attiva; il ritardo di ogni elemento è --cm-landing-delay. */
.cm-landing-demo__scene--active .cm-landing-demo-in { animation: cm-landing-demo-in .55s cubic-bezier(.2, .7, .2, 1) var(--cm-landing-delay, 0s) both; }
.cm-landing-demo__scene--active .cm-landing-demo-pop { animation: cm-landing-demo-pop .45s cubic-bezier(.2, .9, .3, 1.3) var(--cm-landing-delay, 0s) both; }
.cm-landing-demo__scene--active .cm-landing-demo-grow { transform-origin: left center; animation: cm-landing-demo-grow .8s cubic-bezier(.2, .7, .2, 1) var(--cm-landing-delay, 0s) both; }
.cm-landing-demo__scene--active .cm-landing-demo-draw { animation: cm-landing-demo-draw 1.6s ease-out .3s both; }
.cm-landing-demo__scene--active .cm-landing-demo__row::after { animation: cm-landing-demo-scan 1s ease-out calc(var(--cm-landing-delay, 0s) + .3s) both; }
.cm-landing-demo__scene--active .cm-landing-demo__fetch { animation: cm-landing-demo-shimmer 1.1s linear infinite, cm-landing-demo-fade .3s ease var(--cm-landing-delay, 0s) forwards; }
@keyframes cm-landing-demo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cm-landing-demo-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes cm-landing-demo-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cm-landing-demo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cm-landing-demo-scan { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cm-landing-demo-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cm-landing-demo-fade { to { opacity: .35; } }

@media (max-width: 992px) {
  .cm-landing-demo { grid-template-columns: minmax(0, 1fr); gap: var(--cm-space-4); }
  /* Su schermo stretto i passaggi diventano una fila di numeri: il titolo lo porta già ogni scena. */
  .cm-landing-demo__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cm-landing-demo__step { justify-content: center; padding: var(--cm-space-2); }
  .cm-landing-demo__step-number { padding-top: 0; }
  .cm-landing-demo__step-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cm-landing-demo__progress { right: var(--cm-space-2); left: var(--cm-space-2); }
  .cm-landing { --cm-font-landing-hero: 2.75rem; --cm-font-landing-section: 2.25rem; }
  .cm-landing-hero__grid, .cm-landing-grid-2, .cm-landing-faq, .cm-landing-cta__grid, .cm-landing-offer { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cm-landing-grid-3, .cm-landing-steps { grid-template-columns: minmax(0, 1fr); }
  .cm-landing-nav__link { display: none; }
}
@media (max-width: 576px) {
  .cm-landing-demo__scenes { padding: var(--cm-space-4); }
  .cm-landing-demo__product { flex-direction: column; text-align: center; }
  .cm-landing-demo__product-copy { align-items: center; }
  .cm-landing-demo__row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .cm-landing-demo__fetch { display: none; }
  .cm-landing-demo__note { grid-row: 2; grid-column: 2 / -1; }
  .cm-landing-demo__rank { grid-template-columns: minmax(0, 1fr) auto; }
  .cm-landing-demo__track { grid-row: 2; grid-column: 1 / -1; }
  .cm-landing-demo__actions { grid-template-columns: minmax(0, 1fr); }
  .cm-landing { --cm-font-landing-hero: 2.25rem; --cm-font-landing-section: 1.875rem; }
  .cm-landing-wrap { padding-inline: var(--cm-space-4); }
  .cm-landing-hero, .cm-landing-section, .cm-landing-cta { padding-block: 56px; }
  .cm-landing-nav { gap: var(--cm-space-3); }
  .cm-landing-nav .cm-landing-btn--sm { display: none; }
  .cm-landing-actions .cm-landing-btn { width: 100%; }
  .cm-landing-demo__cta .cm-landing-btn { width: 100%; }
  .cm-landing-sample { padding: var(--cm-space-4); }
  /* L'esempio è illustrativo: su schermo stretto basta "voi" e lo scarto, la colonna del migliore allargherebbe la pagina. */
  .cm-landing-sample__table th:nth-child(3), .cm-landing-sample__table td:nth-child(3) { display: none; }
  .cm-landing-sample__table th, .cm-landing-sample__table td { padding: var(--cm-space-2); }
  .cm-landing-sample__cart { grid-template-columns: minmax(0, 1fr); }
  .cm-landing-sample__kpi + .cm-landing-sample__kpi { border-left: 0; border-top: 1px solid var(--cm-color-border-default); }
  .cm-landing-benefit { padding: var(--cm-space-5); }
  .cm-landing-form { padding: var(--cm-space-4); }
  .cm-landing-offer__preview { padding: var(--cm-space-3); }
  .cm-landing-offer__cta { align-self: stretch; }
  .cm-landing-page { min-height: 0; padding: var(--cm-space-4); }
  .cm-landing-page__table th:nth-child(3), .cm-landing-page__table td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-landing-demo__scene--active .cm-landing-demo-in, .cm-landing-demo__scene--active .cm-landing-demo-pop, .cm-landing-demo__scene--active .cm-landing-demo-grow,
  .cm-landing-demo__scene--active .cm-landing-demo-draw, .cm-landing-demo__scene--active .cm-landing-demo__row::after,
  .cm-landing-demo__scene--active .cm-landing-demo__fetch, .cm-landing-demo--playing .cm-landing-demo__step--active .cm-landing-demo__progress { animation: none; }
}