/* 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.25rem;
  --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: 40px 56px; 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-4); }
.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); }
/* Il regalo nell'apertura, subito sopra i pulsanti: verde come il guadagno nella sezione Prezzi. */
.cm-landing-gift {
  display: flex; gap: var(--cm-space-3); align-items: center; align-self: flex-start; margin: 0; padding: var(--cm-space-2) var(--cm-space-4) var(--cm-space-2) var(--cm-space-2);
  border: 1px solid var(--cm-color-status-success); border-radius: var(--cm-radius-lg); background: var(--cm-color-status-success-bg);
}
.cm-landing-gift__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--cm-radius-md); background: var(--cm-color-status-success); color: var(--cm-color-status-success-bg);
}
.cm-landing-gift__copy { line-height: var(--cm-leading-snug); }
.cm-landing-gift__title { color: var(--cm-color-status-success); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-landing-gift__text { color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); }
.cm-landing-note { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-body); }

/* Esempio nell'apertura: le notizie del mattino */
.cm-landing-sample {
  display: flex; flex-direction: column; gap: var(--cm-space-3); min-width: 0; margin: 0; padding: var(--cm-space-4);
  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;
}
/* Le notizie del mattino nell'apertura: cosa è cambiato stanotte e cosa vuol dire per te (arancione = ora costa meno di te, verde = ora sei tu il più conveniente). */
.cm-landing-news { display: flex; flex-direction: column; gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.cm-landing-news__item {
  display: flex; gap: var(--cm-space-3); align-items: flex-start; 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-news__icon {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning);
}
.cm-landing-news__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-landing-news__title { margin: 0; font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-news__product { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-body); }
.cm-landing-news__prices { margin: var(--cm-space-1) 0 0; font-size: var(--cm-font-md); }
.cm-landing-news__prices s { color: var(--cm-color-text-muted); }
.cm-landing-news__verdict {
  align-self: flex-start; margin-top: var(--cm-space-1); padding: 2px var(--cm-space-2); border-radius: var(--cm-radius-sm);
  background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold);
}
.cm-landing-news__item--up .cm-landing-news__icon, .cm-landing-news__item--up .cm-landing-news__verdict {
  background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success);
}
.cm-landing-sample__hint { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }

/* 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ù (#how-it-works, #contact…) 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-benefit__example .cm-landing-mono { white-space: nowrap; }
.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); }

/* Prezzi: tre numeri grandi (il regalo, il prezzo, lo sconto), il confronto con un abbonamento,
   la tabella della spesa e le garanzie. */
/* Azienda o privato: uno switch sopra i prezzi, che mostra le cifre IVA esclusa o inclusa. */
.cm-landing-buyer { display: inline-flex; gap: 4px; margin: 0 0 var(--cm-space-5); padding: 4px; border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-raised); }
.cm-landing-buyer__option { position: relative; display: inline-flex; align-items: baseline; gap: var(--cm-space-2); padding: var(--cm-space-2) var(--cm-space-4); border-radius: var(--cm-radius-pill); cursor: pointer; color: var(--cm-color-text-secondary); transition: background var(--cm-motion-fast) var(--cm-ease-standard), color var(--cm-motion-fast) var(--cm-ease-standard); }
.cm-landing-buyer__option:hover { color: var(--cm-color-text-primary); }
.cm-landing-buyer__radio { position: absolute; opacity: 0; pointer-events: none; }
.cm-landing-buyer__name { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-buyer__note { font-size: var(--cm-font-xs); opacity: .8; white-space: nowrap; }
.cm-landing-buyer__option:has(.cm-landing-buyer__radio:checked) { background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-buyer__option:has(.cm-landing-buyer__radio:focus-visible) { outline: 2px solid var(--cm-color-brand); outline-offset: 2px; }
.cm-landing-pricing:not(:has(.cm-landing-buyer__radio[value="person"]:checked)) .cm-landing-for-person,
.cm-landing-pricing:has(.cm-landing-buyer__radio[value="person"]:checked) .cm-landing-for-company { display: none; }

.cm-landing-price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-5); }
.cm-landing-price__card {
  --cm-landing-tone: var(--cm-color-text-primary);
  display: flex; flex-direction: column; gap: var(--cm-space-2); padding: 32px;
  border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-page);
}
.cm-landing-price__card--gift { --cm-landing-tone: var(--cm-color-on-brand); border-color: var(--cm-color-brand); background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-price__card--deal { --cm-landing-tone: var(--cm-color-status-success); border-color: var(--cm-color-status-success); background: var(--cm-color-status-success-bg); }
.cm-landing-price__label {
  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-price__figure { color: var(--cm-landing-tone); 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-price__text { margin: 0; font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); }
.cm-landing-price__card:not(.cm-landing-price__card--gift) .cm-landing-price__text { color: var(--cm-color-text-secondary); }
.cm-landing-savings { margin-top: var(--cm-space-5); }
.cm-landing-compare {
  display: flex; flex-direction: column; gap: var(--cm-space-4); 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-compare__head { display: flex; flex-direction: column; gap: var(--cm-space-1); }
.cm-landing-compare__title { font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.cm-landing-compare__list { display: flex; flex-direction: column; gap: var(--cm-space-5); margin: 0; padding: 0; list-style: none; }
/* Barra lunga quanto la spesa, in scala su 90 €: l'abbonamento va da 45 a 90 €, la parte chiara è la forbice. */
.cm-landing-compare__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cm-space-1) var(--cm-space-3); align-items: center; }
.cm-landing-compare__name { font-size: var(--cm-font-md); }
.cm-landing-compare__value { grid-row: 1 / span 2; grid-column: 2; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); }
.cm-landing-compare__bar { height: 12px; border-radius: var(--cm-radius-sm); }
.cm-landing-compare__bar--others { width: 100%; background: linear-gradient(to right, var(--cm-color-text-muted) 50%, var(--cm-color-border-default) 50%); }
.cm-landing-compare__bar--list { width: 33%; background: var(--cm-color-brand); }
.cm-landing-compare__bar--deal { width: 23%; background: var(--cm-color-status-success); }
.cm-landing-compare__row--best .cm-landing-compare__name { font-weight: var(--cm-weight-semibold); }
.cm-landing-compare__row--best .cm-landing-compare__value { color: var(--cm-color-status-success); }
.cm-landing-compare__source { margin: auto 0 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-xs); }
.cm-landing-price-table { width: 100%; border-collapse: collapse; font-size: var(--cm-font-md); }
.cm-landing-price-table th, .cm-landing-price-table td { padding: var(--cm-space-2); border-bottom: 1px solid var(--cm-color-border-default); text-align: left; }
.cm-landing-price-table thead th { color: var(--cm-color-text-muted); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); text-transform: uppercase; vertical-align: bottom; }
.cm-landing-price-table tbody th { font-weight: var(--cm-weight-semibold); }
.cm-landing-price-table td { white-space: nowrap; }
.cm-landing-price-table tbody tr:last-child > * { border-bottom: 0; }
.cm-landing-price-table__deal { color: var(--cm-color-status-success); font-weight: var(--cm-weight-bold); }
.cm-landing-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cm-space-5); margin: 48px 0 0; padding: 0; list-style: none; }
.cm-landing-promise { display: flex; gap: var(--cm-space-3); align-items: flex-start; }
.cm-landing-promise__title { margin: 0 0 var(--cm-space-1); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.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-price__cta { display: flex; flex-direction: column; align-items: center; gap: var(--cm-space-3); margin-top: 48px; text-align: center; }

/* 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__promises { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cm-space-1) var(--cm-space-3); margin: 0; padding: 0; list-style: none; color: var(--cm-color-text-secondary); font-size: var(--cm-font-sm); }
.cm-landing-form__promises li { display: inline-flex; align-items: center; gap: var(--cm-space-1); }
.cm-landing-form__promises svg { color: var(--cm-color-status-success); }
/* La password con "Mostra" dentro il campo, come nel login. */
.cm-landing-pass { position: relative; display: flex; align-items: center; }
.cm-landing-pass .cm-field-input { padding-right: 96px; }
.cm-landing-pass__reveal {
  position: absolute; right: 8px; min-height: 24px; padding: 4px 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--cm-color-text-subtle); font-family: var(--cm-font-family-sans); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-label); text-transform: uppercase;
}
.cm-landing-pass__reveal:hover { color: var(--cm-color-brand); }
.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); }

/* Testo lungo da leggere, colonna stretta come le intestazioni di sezione: informativa privacy (/privacy)
   e termini del servizio (/terms). */
.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__table { overflow-x: auto; }
.cm-landing-legal__table .cm-landing-price-table { overflow-wrap: normal; }
.cm-landing-price-table__sub { display: block; color: var(--cm-color-text-muted); font-size: var(--cm-font-xs); }
.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; }
/* Le scene più corte stanno al centro del riquadro, alto quanto la scena più lunga. */
.cm-landing-demo__scene { display: flex; flex-direction: column; justify-content: center; gap: var(--cm-space-4); min-width: 0; grid-area: 1 / 1; visibility: hidden; }
.cm-landing-demo__scene--active { visibility: visible; }
/* Su schermo stretto i passaggi a sinistra sono solo numeri: ogni scena dice quale passaggio mostra. */
.cm-landing-demo__scene-step { display: none; align-items: center; gap: var(--cm-space-2); margin: 0; color: var(--cm-color-brand); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__scene-step > span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cm-color-status-info-bg); font-size: var(--cm-font-compact); }
.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 · copi il link dalla pagina del concorrente e lo incolli in "Aggiungi prodotto" (come nell'area clienti):
   il link si seleziona e si copia, Ctrl+V lo incolla nel campo, "Trova il prezzo" si preme, poi "Fatto". */
.cm-landing-demo__browser { overflow: hidden; border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); }
.cm-landing-demo__browser-bar { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-2) var(--cm-space-3); border-bottom: 1px solid var(--cm-color-border-default); background: var(--cm-color-surface-page); }
.cm-landing-demo__browser-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.cm-landing-demo__browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--cm-color-border-default); }
.cm-landing-demo__address { display: flex; align-items: center; gap: var(--cm-space-2); flex: 1; min-width: 0; padding: var(--cm-space-1) var(--cm-space-3); border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-raised); color: var(--cm-color-text-muted); }
.cm-landing-demo__address svg { width: 13px; height: 13px; flex-shrink: 0; }
.cm-landing-demo__address-url { overflow: hidden; border-radius: var(--cm-radius-sm); font-size: var(--cm-font-compact); text-overflow: ellipsis; white-space: nowrap; background: var(--cm-color-status-info-bg); color: var(--cm-color-text-primary); }
.cm-landing-demo__copied { display: inline-flex; align-items: center; gap: var(--cm-space-1); flex-shrink: 0; padding: 2px var(--cm-space-2); border-radius: var(--cm-radius-pill); background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__copied svg { width: 13px; height: 13px; }
.cm-landing-demo__browser-page { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-3); }
.cm-landing-demo__browser-thumb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--cm-radius-md); background: var(--cm-color-status-info-bg); color: var(--cm-color-brand); }
.cm-landing-demo__browser-thumb svg { width: 22px; height: 22px; }
.cm-landing-demo__handoff { display: flex; align-items: center; justify-content: center; gap: var(--cm-space-2); margin: calc(var(--cm-space-2) * -1) 0; color: var(--cm-color-brand); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__handoff svg { width: 16px; height: 16px; }
.cm-landing-demo__browser-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cm-landing-demo__browser-price { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.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__add { display: flex; flex-direction: column; gap: var(--cm-space-2); 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); box-shadow: var(--cm-shadow-sm); }
.cm-landing-demo__add-title { margin: 0 0 var(--cm-space-1); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.cm-landing-demo__add-label { font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__field { position: relative; display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-3); border: 1px solid var(--cm-color-brand); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-raised); outline: 3px solid var(--cm-color-status-info-bg); }
.cm-landing-demo__field > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--cm-color-text-faint); }
.cm-landing-demo__field-text { display: grid; flex: 1; min-width: 0; font-size: var(--cm-font-md); }
.cm-landing-demo__placeholder, .cm-landing-demo__pasted { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-landing-demo__placeholder { color: var(--cm-color-text-faint); opacity: 0; }
.cm-landing-demo__pasted { border-radius: var(--cm-radius-sm); color: var(--cm-color-text-primary); }
.cm-landing-demo__key { position: absolute; top: 50%; right: var(--cm-space-3); padding: 2px var(--cm-space-2); border: 1px solid var(--cm-color-border-default); border-bottom-width: 3px; border-radius: var(--cm-radius-sm); background: var(--cm-color-surface-page); color: var(--cm-color-text-primary); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); opacity: 0; transform: translateY(-50%); }
.cm-landing-demo__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--cm-space-2); margin-top: var(--cm-space-2); padding: var(--cm-space-3) var(--cm-space-4); border-radius: var(--cm-radius-md); background: var(--cm-color-brand); color: var(--cm-color-on-brand); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); outline: 4px solid transparent; }
.cm-landing-demo__submit svg { width: 18px; height: 18px; }
.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 · l'attesa con le tre tappe che si spuntano, poi il risultato al suo posto (come nell'area clienti). */
.cm-landing-demo__swap { display: grid; }
.cm-landing-demo__panel { display: flex; flex-direction: column; gap: var(--cm-space-2); min-width: 0; grid-area: 1 / 1; 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); box-shadow: var(--cm-shadow-sm); }
.cm-landing-demo__wait { align-self: start; opacity: 0; visibility: hidden; }
.cm-landing-demo__site-chip { align-self: flex-start; padding: 2px var(--cm-space-2); border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-page); color: var(--cm-color-text-muted); font-size: var(--cm-font-compact); }
.cm-landing-demo__checks { display: flex; flex-direction: column; gap: var(--cm-space-3); margin: var(--cm-space-2) 0; padding: 0; list-style: none; }
.cm-landing-demo__check { display: flex; align-items: center; gap: var(--cm-space-3); font-size: var(--cm-font-md); }
.cm-landing-demo__check-mark { position: relative; display: inline-flex; width: 26px; height: 26px; flex-shrink: 0; border: 2px solid var(--cm-color-border-default); border-radius: 50%; }
.cm-landing-demo__check-mark > span { position: absolute; inset: -2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cm-color-status-success); color: var(--cm-color-on-brand); }
.cm-landing-demo__check-mark svg, .cm-landing-demo__found-mark svg { width: 14px; height: 14px; }
.cm-landing-demo__bar { display: block; height: 6px; overflow: hidden; border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-page); }
.cm-landing-demo__bar > span { display: block; height: 100%; border-radius: var(--cm-radius-pill); background: var(--cm-color-brand); transform-origin: left; }
.cm-landing-demo__result { align-items: center; text-align: center; }
.cm-landing-demo__found-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success); }
.cm-landing-demo__found-mark svg { width: 22px; height: 22px; }
.cm-landing-demo__eyebrow { color: var(--cm-color-status-success); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; }
.cm-landing-demo__found { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: var(--cm-space-3); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-page); }
.cm-landing-demo__price-label { margin-top: var(--cm-space-2); color: var(--cm-color-text-muted); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; }
.cm-landing-demo__price { font-size: var(--cm-font-3xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-tight); }
.cm-landing-demo__fact { display: inline-flex; align-items: center; gap: var(--cm-space-1); margin-top: var(--cm-space-2); padding: 2px var(--cm-space-3); border-radius: var(--cm-radius-pill); background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success); font-size: var(--cm-font-sm); }
.cm-landing-demo__fact svg { width: 14px; height: 14px; }
.cm-landing-demo__follow { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: var(--cm-space-2); padding: var(--cm-space-3) var(--cm-space-4); border-radius: var(--cm-radius-md); background: var(--cm-color-brand); color: var(--cm-color-on-brand); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); outline: 4px solid transparent; }
.cm-landing-demo__promise { display: flex; align-items: center; justify-content: center; gap: var(--cm-space-2); margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-sm); }
.cm-landing-demo__promise svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--cm-color-brand); }

/* 03 · la pagina del prodotto: prezzo di oggi e controllo, il grafico della settimana, l'avviso del cambio, i numeri. */
.cm-landing-demo__today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-3); }
.cm-landing-demo__tile { display: flex; flex-direction: column; gap: var(--cm-space-1); min-width: 0; 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__tile .cm-landing-demo__price-label { margin-top: 0; }
.cm-landing-demo__today-price { display: grid; font-size: var(--cm-font-2xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-tight); }
.cm-landing-demo__price-old, .cm-landing-demo__price-new { grid-area: 1 / 1; }
.cm-landing-demo__price-old { opacity: 0; }
.cm-landing-demo__trend { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--cm-space-1); padding: 2px var(--cm-space-2); border-radius: var(--cm-radius-pill); background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__trend svg { width: 13px; height: 13px; }
.cm-landing-demo__watch { display: inline-flex; align-items: center; gap: var(--cm-space-2); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--cm-color-status-success); }
.cm-landing-demo__pulse::after { position: absolute; inset: 0; border-radius: 50%; background: var(--cm-color-status-success); content: ""; opacity: 0; }
.cm-landing-demo__countdown { display: block; height: 6px; margin-top: var(--cm-space-1); overflow: hidden; border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-page); }
.cm-landing-demo__countdown > span { display: block; height: 100%; border-radius: var(--cm-radius-pill); background: var(--cm-color-status-success); transform: scaleX(.55); transform-origin: left; }
.cm-landing-demo__note { color: var(--cm-color-text-muted); font-size: var(--cm-font-compact); }
.cm-landing-demo__chart {
  position: relative; 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__plot { display: block; width: 100%; height: auto; overflow: visible; }
.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__plot-label { fill: var(--cm-color-text-muted); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); }
.cm-landing-demo__plot-label--new { fill: var(--cm-color-status-warning); }
.cm-landing-demo__plot-dot { fill: var(--cm-color-status-warning); stroke: var(--cm-color-surface-raised); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.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__chart .cm-landing-demo__alert { position: absolute; bottom: calc(var(--cm-space-3) + 1.75rem); left: var(--cm-space-4); }
.cm-landing-demo__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-3); margin: 0; padding: 0; list-style: none; }
.cm-landing-demo__stat { display: flex; flex-direction: column; gap: 2px; 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); }
.cm-landing-demo__stat strong { font-size: var(--cm-font-md); }
.cm-landing-section:has(.cm-landing-demo__scene--finale.cm-landing-demo__scene--active) .cm-landing-demo__cta .cm-landing-btn--primary { animation: cm-landing-demo-nudge 1s ease-in-out 6.8s 2; }
.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-draw { animation: cm-landing-demo-draw 1.6s ease-out 1s both; }
.cm-landing-demo__scene--active .cm-landing-demo__price-old { animation: cm-landing-demo-leave .35s ease-in 4s both; }
.cm-landing-demo__scene--active .cm-landing-demo__price-new { animation: cm-landing-demo-in .5s cubic-bezier(.2, .7, .2, 1) 4.1s both; }
.cm-landing-demo__scene--active .cm-landing-demo__plot-dot { animation: cm-landing-demo-pop .45s cubic-bezier(.2, .9, .3, 1.3) 2.7s both; }
.cm-landing-demo__scene--active .cm-landing-demo__plot-label--new { animation: cm-landing-demo-hide-in .4s ease-out 2.9s both; }
.cm-landing-demo__scene--active .cm-landing-demo__pulse::after { animation: cm-landing-demo-ping 1.6s ease-out infinite; }
.cm-landing-demo__scene--active .cm-landing-demo__countdown > span { animation: cm-landing-demo-count 9s linear .2s both; }
.cm-landing-demo__scene--active .cm-landing-demo__wait { animation: cm-landing-demo-leave .3s ease-in 3.3s both; }
.cm-landing-demo__scene--active .cm-landing-demo__bar > span { animation: cm-landing-demo-grow 2.7s ease-in-out .2s both; }
.cm-landing-demo__scene--active .cm-landing-demo__follow { animation: cm-landing-demo-in .55s cubic-bezier(.2, .7, .2, 1) 5s both, cm-landing-demo-press .5s ease-out 5.6s forwards; }
.cm-landing-demo__scene--active .cm-landing-demo__address-url { animation: cm-landing-demo-select .5s ease-out .8s both; }
.cm-landing-demo__scene--active .cm-landing-demo__field { animation: cm-landing-demo-focus .3s ease-out 2.8s both; }
.cm-landing-demo__scene--active .cm-landing-demo__placeholder { animation: cm-landing-demo-hide .1s linear 3.6s both; }
.cm-landing-demo__scene--active .cm-landing-demo__pasted { animation: cm-landing-demo-paste .9s ease-out 3.6s both; }
.cm-landing-demo__scene--active .cm-landing-demo__key { animation: cm-landing-demo-key .8s ease-out 2.8s both; }
.cm-landing-demo__scene--active .cm-landing-demo__submit { animation: cm-landing-demo-press .5s ease-out 4.3s both; }
@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-hide-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-landing-demo-ping { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes cm-landing-demo-count { from { transform: scaleX(.05); } to { transform: scaleX(.55); } }
@keyframes cm-landing-demo-nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
@keyframes cm-landing-demo-leave { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; transform: translateY(-8px); } }
@keyframes cm-landing-demo-select { from { background: transparent; } to { background: var(--cm-color-status-info-bg); } }
@keyframes cm-landing-demo-focus { from { border-color: var(--cm-color-border-default); outline-color: transparent; } to { border-color: var(--cm-color-brand); outline-color: var(--cm-color-status-info-bg); } }
@keyframes cm-landing-demo-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes cm-landing-demo-paste { 0% { opacity: 0; background: var(--cm-color-status-info-bg); } 10% { opacity: 1; background: var(--cm-color-status-info-bg); } 100% { opacity: 1; background: transparent; } }
@keyframes cm-landing-demo-key { 0% { opacity: 0; transform: translateY(-50%) scale(.7); } 20%, 70% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
@keyframes cm-landing-demo-press { 0% { transform: none; outline-color: transparent; } 35% { transform: scale(.96); outline-color: var(--cm-color-status-info-bg); } 100% { transform: none; outline-color: var(--cm-color-status-info-bg); } }

@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(3, 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__scene-step { display: flex; }
  .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 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cm-landing-grid-3, .cm-landing-steps, .cm-landing-price { grid-template-columns: minmax(0, 1fr); }
  .cm-landing-promises { grid-template-columns: repeat(2, 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__price { font-size: var(--cm-font-2xl); }
  .cm-landing-demo__today { grid-template-columns: minmax(0, 1fr); }
  .cm-landing-demo__chart .cm-landing-demo__alert { position: static; }
  .cm-landing-demo__stats, .cm-landing-demo__plot-label { display: none; }
  .cm-landing-demo__browser-page .cm-landing-demo__muted, .cm-landing-demo__browser-dots { display: none; }
  .cm-landing-demo__field-text { font-size: var(--cm-font-body); }
  .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); }
  /* "Prova gratis" resta visibile anche su telefono: è l'invito principale della pagina. */
  .cm-landing-nav .cm-landing-btn--sm { min-height: 40px; padding-inline: var(--cm-space-3); white-space: nowrap; }
  .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); }
  .cm-landing-benefit { padding: var(--cm-space-5); }
  .cm-landing-form { padding: var(--cm-space-4); }
  .cm-landing-price__card, .cm-landing-compare { padding: var(--cm-space-4); }
  .cm-landing-promises { grid-template-columns: minmax(0, 1fr); }
  .cm-landing-price__cta .cm-landing-btn { width: 100%; }
  .cm-landing-price-table th, .cm-landing-price-table td { padding-inline: var(--cm-space-1); font-size: var(--cm-font-sm); }
}
@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-draw, .cm-landing-demo__scene--active .cm-landing-demo__wait,
  .cm-landing-demo__scene--active .cm-landing-demo__bar > span, .cm-landing-demo__scene--active .cm-landing-demo__follow,
  .cm-landing-demo__scene--active .cm-landing-demo__price-old, .cm-landing-demo__scene--active .cm-landing-demo__price-new,
  .cm-landing-demo__scene--active .cm-landing-demo__plot-dot, .cm-landing-demo__scene--active .cm-landing-demo__plot-label--new,
  .cm-landing-demo__scene--active .cm-landing-demo__pulse::after, .cm-landing-demo__scene--active .cm-landing-demo__countdown > span,
  .cm-landing-section:has(.cm-landing-demo__scene--finale.cm-landing-demo__scene--active) .cm-landing-demo__cta .cm-landing-btn--primary,
  .cm-landing-demo__scene--active .cm-landing-demo__address-url, .cm-landing-demo__scene--active .cm-landing-demo__field,
  .cm-landing-demo__scene--active .cm-landing-demo__placeholder, .cm-landing-demo__scene--active .cm-landing-demo__pasted,
  .cm-landing-demo__scene--active .cm-landing-demo__key, .cm-landing-demo__scene--active .cm-landing-demo__submit,
  .cm-landing-demo--playing .cm-landing-demo__step--active .cm-landing-demo__progress { animation: none; }
}