/* Pagina pubblica (landing) su "/". Richiede theme.css; usa solo i token pubblici --cm-*.
   Le 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;
  --cm-font-landing-figure: 4.5rem;
  --cm-font-landing-gift: 5rem;
  /* Interlinea dei titoli grandi: 1 faceva quasi toccare le righe del titolo d'apertura (4 righe). */
  --cm-leading-landing-title: 1.1;

  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); }
/* L'invito principale di ogni sezione: l'unico elemento indaco pieno e in rilievo, con la freccia che dice "si va avanti". */
.cm-landing-btn--lg { min-height: 60px; padding-inline: var(--cm-space-5); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold);
  box-shadow: var(--cm-shadow-overlay); transition: transform var(--cm-motion-fast) var(--cm-ease-standard), background var(--cm-motion-fast) var(--cm-ease-standard); }
.cm-landing-btn--lg::after { content: "→"; transition: transform var(--cm-motion-fast) var(--cm-ease-standard); }
.cm-landing-btn--lg:hover { transform: translateY(-1px); }
.cm-landing-btn--lg:hover::after { transform: translateX(3px); }
.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-text-muted); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-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); }

/* 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-landing-title); 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-btn__note { color: var(--cm-color-text-muted); font-weight: var(--cm-weight-regular); }
/* Apertura: l'invito principale e sotto, centrato sulla sua larghezza, il video come link leggero (non un secondo pulsante). */
.cm-landing-actions--stack { flex-direction: column; align-items: center; align-self: flex-start; gap: var(--cm-space-2); }
.cm-landing-play {
  display: inline-flex; align-items: center; gap: var(--cm-space-2); min-height: 44px; padding-inline: var(--cm-space-2);
  color: var(--cm-color-text-primary); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); text-decoration: none;
}
.cm-landing-play__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cm-color-status-info-bg); color: var(--cm-color-brand); transition: background var(--cm-motion-fast) var(--cm-ease-standard), color var(--cm-motion-fast) var(--cm-ease-standard);
}
.cm-landing-play__icon svg { width: 14px; height: 14px; margin-left: 2px; }
.cm-landing-play:hover { color: var(--cm-color-brand); }
.cm-landing-play:hover .cm-landing-play__icon { background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-play:focus-visible { outline: 2px solid var(--cm-color-brand); outline-offset: 2px; border-radius: var(--cm-radius-md); }

/* Il video, aperto dal pulsante in cima alla pagina in una finestra sopra la pagina. */
/* Larga al massimo quanto serve perché video, barra e pulsante stiano nell'altezza dello schermo (10rem le due barre). */
.cm-landing-video { width: min(1100px, calc(100vw - 2 * var(--cm-space-4)), calc((100dvh - 10rem) * 16 / 9)); max-width: none; padding: 0; overflow: hidden; border: 0; border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); color: var(--cm-color-text-primary); box-shadow: var(--cm-shadow-popover); }
.cm-landing-video::backdrop { background: var(--cm-color-backdrop); }
.cm-landing-video__box { display: flex; flex-direction: column; }
.cm-landing-video__head, .cm-landing-video__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cm-space-3); padding: var(--cm-space-2) var(--cm-space-2) var(--cm-space-2) var(--cm-space-4); }
.cm-landing-video__foot { padding: var(--cm-space-3) var(--cm-space-4); }
.cm-landing-video__title { margin: 0; font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-video__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-raised); color: var(--cm-color-text-secondary); cursor: pointer; }
.cm-landing-video__close:hover { border-color: var(--cm-color-brand); color: var(--cm-color-brand); }
.cm-landing-video__close svg { width: 18px; height: 18px; }
.cm-landing-video__player { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--cm-color-surface-page); }
.cm-landing-video__note { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
/* 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); }



/* 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); }
/* Chi c'è dietro: foto tonda e nome, come una firma sotto il testo. */
.cm-landing-founder { display: flex; align-items: center; gap: var(--cm-space-3); margin-top: var(--cm-space-2); }
.cm-landing-founder__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: var(--cm-shadow-sm); }
.cm-landing-founder__name { display: flex; flex-direction: column; margin: 0; color: var(--cm-color-text-primary); font-size: var(--cm-font-body); line-height: var(--cm-leading-snug); }
.cm-landing-founder__name span { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
.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-landing-title); 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-card {
  display: flex; flex-direction: column; gap: var(--cm-space-3); 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);
}
.cm-landing-card__title { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }


/* 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-text-muted); font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }

/* Domande */
.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 { border-top: 1px solid var(--cm-color-border-default); }
.cm-landing-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-4); min-height: 44px;
  padding-block: var(--cm-space-4); cursor: pointer; list-style: none; }
.cm-landing-faq__q::-webkit-details-marker { display: none; }
.cm-landing-faq__q .cm-landing-feature__title { margin: 0; }
.cm-landing-faq__q:hover .cm-landing-feature__title { color: var(--cm-color-brand); }
.cm-landing-faq__q:focus-visible { outline: 2px solid var(--cm-color-brand); outline-offset: 2px; border-radius: var(--cm-radius-sm); }
.cm-landing-faq__icon { display: inline-flex; flex: none; color: var(--cm-color-text-muted); transition: transform var(--cm-motion-fast) var(--cm-ease-standard); }
.cm-landing-faq__item[open] .cm-landing-faq__icon { transform: rotate(180deg); color: var(--cm-color-brand); }
.cm-landing-faq__item > .cm-landing-text { margin: 0; padding-bottom: var(--cm-space-5); }
.cm-landing-faq__item:last-child { border-bottom: 1px solid var(--cm-color-border-default); }

/* Prezzi: due numeri grandi (il regalo e il prezzo a prodotto), lo sconto dei primi 100, i conti a richiesta e le
   garanzie. Prezzi + IVA, con il prezzo IVA inclusa tra parentesi dove conta (niente switch azienda/privato). */
.cm-landing-price { display: grid; grid-template-columns: repeat(2, 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); justify-content: center; border-color: var(--cm-color-brand); background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-price__label {
  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); }
/* "+ IVA" accanto alla cifra: piccolo, come nei listini (OVH): il prezzo IVA inclusa è scritto sotto, tra parentesi. */
.cm-landing-price__vat { font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); }
.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-4); }
/* Sconto dei primi 100: una riga sotto i due numeri, verde come il regalo, con l'etichetta che dice subito quanto. */
.cm-landing-deal { display: flex; align-items: center; gap: var(--cm-space-3); margin: var(--cm-space-4) 0 0; padding: var(--cm-space-3) var(--cm-space-4);
  border: 1px solid var(--cm-color-status-success); border-radius: var(--cm-radius-lg); background: var(--cm-color-status-success-bg);
  color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); }
.cm-landing-deal strong { color: var(--cm-color-text-primary); }
.cm-landing-deal__badge { flex: none; padding: var(--cm-space-1) var(--cm-space-3); border-radius: var(--cm-radius-pill); background: var(--cm-color-status-success);
  color: var(--cm-color-on-brand); font-weight: var(--cm-weight-bold); white-space: nowrap; }
/* "Fai i conti": confronti e tabella si aprono solo per chi li vuole, come le domande frequenti. */
.cm-landing-calc { margin-top: var(--cm-space-5); border-block: 1px solid var(--cm-color-border-default); }
.cm-landing-calc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-4); min-height: 44px;
  padding-block: var(--cm-space-4); cursor: pointer; list-style: none; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); }
.cm-landing-calc__summary::-webkit-details-marker { display: none; }
.cm-landing-calc__summary:hover { color: var(--cm-color-brand); }
.cm-landing-calc__summary:focus-visible { outline: 2px solid var(--cm-color-brand); outline-offset: 2px; border-radius: var(--cm-radius-sm); }
.cm-landing-calc[open] .cm-landing-faq__icon { transform: rotate(180deg); color: var(--cm-color-brand); }
.cm-landing-calc__body { padding-bottom: var(--cm-space-4); }
/* "Quanto tempo risparmi": le ore che servirebbero a mano, prima dei confronti in euro. */
.cm-landing-time { display: flex; flex-direction: column; gap: var(--cm-space-2); margin-top: var(--cm-space-4); 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-time__figure { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-lg); line-height: var(--cm-leading-snug); }
.cm-landing-time__figure strong { color: var(--cm-color-text-primary); font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); }
.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-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-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-landing-title); 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; }
/* Nel modulo il testo del pulsante è lungo: a 16px resta su una riga. */
.cm-landing-form .cm-landing-btn--lg { font-size: var(--cm-font-md); white-space: nowrap; }
.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: 680px; 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); }
/* Tabella di parole (confronti nelle guide): le celle vanno a capo invece di allargare la pagina. */
.cm-landing-price-table--text td { white-space: normal; }
.cm-landing-price-table--text tbody > tr > * { vertical-align: top; }
.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);
}

/* Guide (/guides): stesso impianto dei testi legali, più il percorso, la schermata dell'app e le schede cliccabili dell'indice. */
.cm-landing-crumbs { font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-extra-wide); text-transform: uppercase; }
.cm-landing-crumbs__link { color: var(--cm-color-brand); text-decoration: none; }
.cm-landing-crumbs__link:hover { text-decoration: underline; }
.cm-landing-shot { display: flex; flex-direction: column; gap: var(--cm-space-2); margin: var(--cm-space-4) 0 0; }
.cm-landing-shot__img { display: block; width: 100%; height: auto; border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); }
.cm-landing-shot__img--narrow { max-width: 480px; }
.cm-landing-shot__caption { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
.cm-landing-card--link { color: inherit; text-decoration: none; transition: border-color .15s ease; }
.cm-landing-card--link:hover { border-color: var(--cm-color-brand); color: inherit; }
.cm-landing-card--link .cm-landing-card__title { color: var(--cm-color-brand); }

/* Come funziona: un pezzo del video vero, muto e a ripetizione (landing.js lo fa partire quando è a schermo); sotto, pausa,
   la nota sui dati d'esempio e il video intero. Le schermate hanno già la loro finestra del browser: qui solo l'angolo e l'ombra. */
.cm-landing-clip { max-width: 1040px; margin: 0 auto; }
.cm-landing-steps + .cm-landing-clip { margin-top: 48px; }
.cm-landing-clip__frame { 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-clip__video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 856; }
.cm-landing-clip__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-space-2) var(--cm-space-4); margin-top: var(--cm-space-3); }
.cm-landing-clip__foot .cm-landing-play { margin-left: auto; }
.cm-landing-clip__note { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
.cm-landing-clip__toggle {
  display: inline-flex; align-items: center; gap: var(--cm-space-2); min-height: 36px; 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-sm); font-weight: var(--cm-weight-medium); cursor: pointer;
}
.cm-landing-clip__toggle:hover { border-color: var(--cm-color-brand); color: var(--cm-color-brand); }
.cm-landing-clip__toggle svg { width: 14px; height: 14px; }
.cm-landing-clip__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-clip__cta-text { margin: 0; font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); }

@media (max-width: 992px) {
  .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-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 { --cm-font-landing-hero: 2.25rem; --cm-font-landing-section: 1.875rem; --cm-font-landing-figure: 3.5rem; --cm-font-landing-gift: 4rem; }
  .cm-landing-wrap { padding-inline: var(--cm-space-4); }
  .cm-landing-hero, .cm-landing-section, .cm-landing-cta { padding-block: 56px; }
  /* A 360 px "Prova gratis" usciva dallo schermo. */
  .cm-landing-header__inner, .cm-landing-nav { gap: var(--cm-space-2); }
  /* "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-actions--stack { align-self: stretch; }
  .cm-landing-deal { flex-direction: column; align-items: flex-start; }
  .cm-landing-btn--lg { padding-inline: var(--cm-space-3); font-size: var(--cm-font-md); }
  .cm-landing-clip__cta .cm-landing-btn { width: 100%; }
  .cm-landing-video__foot .cm-landing-btn { width: 100%; }
  .cm-landing-form { padding: var(--cm-space-4); }
  /* Sul telefono il pulsante del modulo dice solo "Crea l'account": il regalo è scritto subito sopra, e intero andava a capo. */
  .cm-landing-btn__extra { display: none; }
  .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-compact); }
  /* Le tabelle di parole delle guide diventano schede: una riga, una scheda, con il nome della colonna sopra ogni valore. */
  .cm-landing-price-table--text, .cm-landing-price-table--text tbody, .cm-landing-price-table--text tr,
  .cm-landing-price-table--text th, .cm-landing-price-table--text td { display: block; }
  .cm-landing-price-table--text thead { display: none; }
  .cm-landing-price-table--text tr { margin-bottom: var(--cm-space-3); 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-price-table--text tbody th { padding: 0 0 var(--cm-space-2); border: 0; font-size: var(--cm-font-md); }
  .cm-landing-price-table--text td { padding: var(--cm-space-1) 0; border: 0; font-size: var(--cm-font-md); }
  .cm-landing-price-table--text td[data-label]::before { content: attr(data-label); display: block; color: var(--cm-color-text-muted);
    font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); text-transform: uppercase; letter-spacing: var(--cm-tracking-label); }
  .cm-landing-price-table--text tbody tr:last-child > * { border-bottom: 0; }
  .cm-landing-price-table--text td:empty { display: none; }
}
/* Schermi touch (telefoni e tablet): tasti alti almeno 44px per il dito, e niente testo sotto i 12px. */
@media (pointer: coarse) {
  .cm-landing-nav__login { display: inline-flex; align-items: center; min-height: 44px; }
  /* Le voci del menu non cambiano display (sotto i 992px sono nascoste): solo un'area di tocco più alta. */
  .cm-landing-nav__link { padding-block: var(--cm-space-3); }
  .cm-landing-pass__reveal { min-height: 44px; right: 4px; padding-inline: var(--cm-space-2); }
  .cm-landing-footer__links { gap: 0 var(--cm-space-4); }
  .cm-landing-footer__link { display: inline-flex; align-items: center; min-height: 44px; }
  .cm-landing-crumbs__link { display: inline-flex; align-items: center; min-height: 44px; }
  .cm-landing-price-table thead th, .cm-landing-price-table__sub, .cm-landing-compare__source { font-size: var(--cm-font-sm); }
}

/* L'apertura della home: la talpa che spunta dalla scheda del verdetto. Pensata prima per 390 px: titolo, promessa, verdetto e bottone
   stanno nel primo schermo. Le pagine per piattaforma restano sull'apertura normale. Sta in fondo per vincere sulle regole di telefono qui sopra. */
.cm-landing-hero--mole {
  --cm-font-landing-hero: 3.75rem;
  --cm-font-landing-lead: var(--cm-font-xl);
  padding-block: var(--cm-space-5) 72px;
  background: radial-gradient(90% 70% at 80% 40%, color-mix(in srgb, var(--cm-color-brand) 16%, transparent), transparent), var(--cm-color-surface-raised);
}
.cm-landing-hero--mole .cm-landing-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "copy spy" "act spy"; gap: var(--cm-space-5) 72px; align-items: center; }
.cm-landing-hero--mole .cm-landing-hero__copy { grid-area: copy; align-self: end; }
.cm-landing-hero--mole .cm-landing-actions { grid-area: act; align-self: start; align-items: flex-start; }
.cm-landing-hero--mole .cm-landing-hero__title { text-wrap: balance; }
.cm-landing-hero--mole .cm-landing-hero__lead { color: var(--cm-color-text-primary); font-size: var(--cm-font-landing-lead); font-weight: var(--cm-weight-medium); }
.cm-landing-hero__gift { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); }
.cm-landing-hero__gift strong { color: var(--cm-color-status-success); font-weight: var(--cm-weight-bold); }

.cm-landing-spy {
  --cm-landing-mole-width: 208px;
  --cm-landing-mole-room: 128px;
  --cm-landing-mole-right: var(--cm-space-4);

  position: relative; isolation: isolate; grid-area: spy; min-width: 0; margin: 0; padding-top: var(--cm-landing-mole-room);
}
.cm-landing-spy__card {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--cm-space-3); 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-overlay);
}
/* La talpa spunta da dietro il bordo della scheda: il corpo è tagliato a quel bordo (il bordo è a 210/250 dell'altezza del disegno), una mano
   ci sta aggrappata sopra. Colori fissi, uguali in chiaro e in scuro: è un personaggio, non un pezzo dell'interfaccia. */
.cm-landing-spy__mole, .cm-landing-form__mole {
  --cm-mole-ink: #11131a;
  --cm-mole-night: #1e1a66;
  --cm-mole-deep: #2a2580;
  --cm-mole-shade: #3a33b8;
  --cm-mole-mid: #4338ca;
  --cm-mole-fur: #4f46e5;
  --cm-mole-lens: #6d66f2;
  --cm-mole-soft: #8078f6;
  --cm-mole-light: #a8a3ff;
  --cm-mole-mouth: #6e3f0e;
  --cm-mole-bronze: #925000;
  --cm-mole-tan: #b8863f;
  --cm-mole-line: #c99a5b;
  --cm-mole-sand: #efc88e;
  --cm-mole-cream: #fdf2e2;
  --cm-mole-milk: #fffaf0;
  --cm-mole-rose: #c51642;
  --cm-mole-pink: #ff809b;
  --cm-mole-blush: #ffb3c4;
  --cm-mole-gold: #ffc46b;
  --cm-mole-shine: #ffe0ad;
  --cm-mole-lilac: #d9c7f0;
  --cm-mole-white: #fff;
}
.cm-landing-spy__mole {
  position: absolute; z-index: 2; top: calc(var(--cm-landing-mole-room) - var(--cm-landing-mole-width) * .6563); right: var(--cm-landing-mole-right);
  width: var(--cm-landing-mole-width); height: auto; overflow: visible; pointer-events: none;
}
.cm-landing-spy__rise { transition: transform 280ms var(--cm-ease-standard); }
.cm-landing-spy__mole.is-down .cm-landing-spy__rise { transform: translateY(84px); }
.cm-landing-spy__mole.is-hit .cm-landing-spy__blink { animation: cm-landing-blink 240ms linear 520ms; }
.cm-landing-spy__mole.is-hit .cm-landing-spy__brow { animation: cm-landing-brow 420ms var(--cm-ease-standard); }
.cm-landing-spy__lens { transform-box: fill-box; transform-origin: 80% 100%; }
.cm-landing-spy__mole.is-hit .cm-landing-spy__lens { animation: cm-landing-lens 420ms var(--cm-ease-standard); }
.cm-landing-spy__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cm-space-3); }
.cm-landing-spy__label { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-wide); text-transform: uppercase; }
.cm-landing-spy__hint { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
.cm-landing-spy__steps { display: grid; }
.cm-landing-spy__step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--cm-space-2); min-width: 0; }
.cm-landing-spy__step.is-off { visibility: hidden; }
.cm-landing-spy__product { font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); }
.cm-landing-spy__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-3); }
.cm-landing-spy__price { display: flex; flex-direction: column; color: var(--cm-color-text-muted); font-size: var(--cm-font-body); }
.cm-landing-spy__price strong { color: var(--cm-color-text-primary); font-size: var(--cm-font-2xl); line-height: var(--cm-leading-snug); white-space: nowrap; }
.cm-landing-spy__verdict {
  padding: var(--cm-space-2) var(--cm-space-3); border-radius: var(--cm-radius-md); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); text-align: center;
}
.cm-landing-spy__verdict--over { background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); }
.cm-landing-spy__verdict--raise { background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success); }
.cm-landing-spy__verdict--open { background: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-landing-spy__verdict.is-waiting { visibility: hidden; }
.cm-landing-spy__verdict.is-stamped { animation: cm-landing-stamp 320ms var(--cm-ease-standard); }
.cm-landing-spy__dots { display: flex; justify-content: center; margin-block: calc(-1 * var(--cm-space-3)) calc(-1 * var(--cm-space-4)); }
.cm-landing-spy__dots[hidden] { display: none; }
.cm-landing-spy__dot { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.cm-landing-spy__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cm-color-border-default); transition: background var(--cm-motion-fast) var(--cm-ease-standard); }
.cm-landing-spy__dot[aria-current="true"]::before { background: var(--cm-color-brand); }
.cm-landing-spy__dot:focus-visible { outline: 2px solid var(--cm-color-brand); outline-offset: -6px; border-radius: 50%; }
.cm-landing-btn--lg.is-called { animation: cm-landing-call 900ms var(--cm-ease-standard) 2; }

@keyframes cm-landing-blink {
  40%, 60% { opacity: 1; }
}
@keyframes cm-landing-brow {
  40% { transform: translateY(-6px); }
}
@keyframes cm-landing-lens {
  40% { transform: translateY(-7px) rotate(-3deg); }
}
@keyframes cm-landing-stamp {
  0% { opacity: 0; transform: scale(1.35); }
  60% { opacity: 1; transform: scale(.97); }
  100% { transform: scale(1); }
}
@keyframes cm-landing-call {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (max-width: 992px) {
  .cm-landing-hero--mole .cm-landing-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "spy" "act"; gap: var(--cm-space-3); }
  .cm-landing-hero--mole .cm-landing-actions { align-items: center; align-self: stretch; }
  .cm-landing-hero--mole .cm-landing-btn--lg { width: 100%; max-width: 480px; }
  .cm-landing-spy { width: 100%; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 576px) {
  .cm-landing-hero--mole { --cm-font-landing-hero: 2.125rem; --cm-font-landing-lead: 1.125rem; padding-block: var(--cm-space-3) var(--cm-space-5); }
  .cm-landing-hero--mole .cm-landing-hero__copy { gap: var(--cm-space-2); }
  .cm-landing-hero--mole .cm-landing-hero__lead { line-height: var(--cm-leading-snug); }
  .cm-landing-hero--mole .cm-landing-actions { gap: var(--cm-space-1); }
  .cm-landing-spy { --cm-landing-mole-width: 120px; --cm-landing-mole-room: 46px; --cm-landing-mole-right: var(--cm-space-1); }
  .cm-landing-hero__gift { font-size: var(--cm-font-body); text-align: center; }
  .cm-landing-spy__card { gap: var(--cm-space-1); padding: var(--cm-space-3) var(--cm-space-4); }
  .cm-landing-spy__step { gap: var(--cm-space-1); }
  .cm-landing-spy__price strong { font-size: var(--cm-font-xl); }
  .cm-landing-spy__verdict { padding-block: 6px; font-size: var(--cm-font-md); }
}
/* Telefoni bassi (o browser dentro un'app): il bottone deve restare nel primo schermo, la riga sopra il titolo e la coda della frase no. */
@media (max-width: 576px) and (max-height: 640px) {
  .cm-landing-hero--mole .cm-landing-eyebrow { display: none; }
  .cm-landing-hero__lead-tail { display: none; }
}
/* La home sotto l'apertura: ogni sezione dice una cosa sola, con un numero o un esempio al posto delle schede di testo.
   Stessa regola dell'apertura: pensata prima per 390 px. */
.cm-landing-section__head--center { align-items: center; margin-inline: auto; text-align: center; }
.cm-landing-section__title, .cm-landing-cta__title { text-wrap: balance; }

/* Il problema: la notte, la stessa in chiaro e in scuro come la talpa. */
.cm-landing-night {
  --cm-landing-night-sky: #1e1a66;
  --cm-landing-night-glow: #3a33b8;
  --cm-landing-night-white: #fff;
  --cm-landing-night-text: #d9d7ff;
  --cm-landing-night-gold: #ffc46b;
  --cm-landing-night-line: rgba(255, 255, 255, 0.18);
  --cm-landing-night-panel: rgba(255, 255, 255, 0.07);

  padding-block: 104px; background: radial-gradient(70% 90% at 85% 10%, var(--cm-landing-night-glow), transparent), var(--cm-landing-night-sky); color: var(--cm-landing-night-white);
}
.cm-landing-night__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.cm-landing-night__copy { display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-landing-night .cm-landing-eyebrow { color: var(--cm-landing-night-gold); }
.cm-landing-night .cm-landing-section__lead { color: var(--cm-landing-night-text); }
.cm-landing-night__sum { display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--cm-landing-night-line); border-radius: var(--cm-radius-lg); background: var(--cm-landing-night-panel); }
.cm-landing-night__figure { margin: 0; font-size: var(--cm-font-landing-figure); font-weight: var(--cm-weight-bold); font-variant-numeric: tabular-nums; line-height: var(--cm-leading-tight); letter-spacing: var(--cm-tracking-tight); }
.cm-landing-night__figure--small { margin-top: var(--cm-space-4); font-size: var(--cm-font-landing-section); }
.cm-landing-night__text { margin: var(--cm-space-1) 0 0; color: var(--cm-landing-night-text); font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); }
.cm-landing-night__punch { margin: var(--cm-space-5) 0 0; color: var(--cm-landing-night-gold); font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }

/* Ogni mattina: le righe di "Il tuo negozio", d'esempio. */
.cm-landing-report {
  display: flex; flex-direction: column; gap: var(--cm-space-4); max-width: 880px; margin: 0 auto; 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); box-shadow: var(--cm-shadow-overlay);
}
.cm-landing-report__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cm-space-3); }
.cm-landing-report__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-2); }
.cm-landing-report__tile { display: flex; flex-direction: column; padding: var(--cm-space-2) var(--cm-space-3); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-page); color: var(--cm-color-text-secondary); font-size: var(--cm-font-body); line-height: var(--cm-leading-snug); }
.cm-landing-report__tile strong { color: var(--cm-color-text-primary); font-size: var(--cm-font-2xl); }
.cm-landing-report__tile--over { background: var(--cm-color-status-warning-bg); }
.cm-landing-report__tile--over strong { color: var(--cm-color-status-warning); }
.cm-landing-report__tile--raise { background: var(--cm-color-status-success-bg); }
.cm-landing-report__tile--raise strong { color: var(--cm-color-status-success); }
.cm-landing-report__rows { margin: 0; padding: 0; list-style: none; }
.cm-landing-report__row { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.3fr); gap: var(--cm-space-1) var(--cm-space-4); align-items: center; padding-block: var(--cm-space-3); border-top: 1px solid var(--cm-color-border-default); }
.cm-landing-report__product { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-report__prices { font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); white-space: nowrap; }
.cm-landing-report__prices span { color: var(--cm-color-text-muted); font-weight: var(--cm-weight-regular); }
.cm-landing-report__verdict { justify-self: end; padding: var(--cm-space-1) var(--cm-space-2); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-page); color: var(--cm-color-text-secondary); font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); text-align: right; }
.cm-landing-report__verdict--over { background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); }
.cm-landing-report__verdict--raise { background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success); }
.cm-landing-report__legend { margin: calc(-1 * var(--cm-space-2)) 0 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
.cm-landing-report__note { margin: var(--cm-space-4) 0 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-md); text-align: center; }
.cm-landing-gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-5); max-width: 880px; margin: var(--cm-space-5) auto 0; }
.cm-landing-gain { display: flex; flex-direction: column; gap: var(--cm-space-2); padding-left: var(--cm-space-4); border-left: 4px solid var(--cm-color-status-warning); }
.cm-landing-gain--raise { border-left-color: var(--cm-color-status-success); }
/* Il report si compone quando arriva a schermo: solo con JavaScript e senza "riduci movimento", altrimenti è già tutto lì. */
.cm-landing-report.is-waiting .cm-landing-report__row { opacity: 0; transform: translateY(10px); }
.cm-landing-report.is-shown .cm-landing-report__row { animation: cm-reveal-rise 420ms var(--cm-ease-standard) both; }
.cm-landing-report.is-shown .cm-landing-report__row:nth-child(2) { animation-delay: 140ms; }
.cm-landing-report.is-shown .cm-landing-report__row:nth-child(3) { animation-delay: 280ms; }
.cm-landing-report.is-shown .cm-landing-report__row:nth-child(4) { animation-delay: 420ms; }
.cm-landing-report.is-shown .cm-landing-report__row:nth-child(5) { animation-delay: 560ms; }

/* Come funziona: tre numeri grandi, uniti da una linea. */
.cm-landing-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-5); margin: 0 0 48px; padding: 0; list-style: none; }
.cm-landing-path__step { position: relative; display: flex; flex-direction: column; gap: var(--cm-space-2); }
.cm-landing-path__step:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 60px; right: calc(-1 * var(--cm-space-5) + var(--cm-space-2)); height: 2px; background: var(--cm-color-border-default); }
.cm-landing-path__number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cm-color-brand); color: var(--cm-color-on-brand); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); }

/* Per chi è: i settori in una riga, poi le due strade per piattaforma. */
.cm-landing-sectors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.cm-landing-sectors li { padding: var(--cm-space-2) var(--cm-space-4); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-pill); background: var(--cm-color-surface-raised); font-size: var(--cm-font-md); font-weight: var(--cm-weight-medium); }
.cm-landing-sectors__note { max-width: 640px; margin: var(--cm-space-4) auto 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); text-align: center; }
.cm-landing-platforms { max-width: 880px; margin: 40px auto 0; }

/* Perché fidarsi: i tre motivi e, accanto, la persona che ne risponde. */
.cm-landing-trust { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.cm-landing-trust .cm-landing-section__head { margin-bottom: var(--cm-space-5); }
.cm-landing-trust__list { display: flex; flex-direction: column; gap: var(--cm-space-4); }
.cm-landing-voice { display: flex; flex-direction: column; gap: var(--cm-space-4); margin: 0; padding: var(--cm-space-5); border-radius: var(--cm-radius-lg); background: var(--cm-color-status-info-bg); }
.cm-landing-voice__quote { display: flex; flex-direction: column; gap: var(--cm-space-2); margin: 0; }
.cm-landing-voice__title { margin: 0; font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-landing-voice .cm-landing-founder { margin-top: 0; }
.cm-landing-voice .cm-landing-text { color: var(--cm-color-text-primary); }

/* Prezzi: il regalo e il cursore, che risponde "quanto costa il mio catalogo" senza conti. */
.cm-landing-pricing .cm-landing-price__card:not(.cm-landing-price__card--gift) { background: var(--cm-color-surface-raised); box-shadow: var(--cm-shadow-overlay); }
.cm-landing-price__figure--huge { font-size: var(--cm-font-landing-gift); }
.cm-landing-price__card .cm-landing-price__text strong { color: var(--cm-color-text-primary); }
.cm-landing-estimate__question { font-size: var(--cm-font-lg); font-weight: var(--cm-weight-semibold); }
.cm-landing-estimate__count { color: var(--cm-color-brand); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-2xl); font-weight: var(--cm-weight-bold); }
.cm-landing-estimate__range { width: 100%; height: 44px; margin: 0; accent-color: var(--cm-color-brand); cursor: pointer; }
.cm-landing-estimate__range[hidden] { display: none; }
.cm-landing-promises--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-landing-pricing__more { margin: var(--cm-space-4) 0 0; font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }

/* Invito finale: titolo, modulo e, solo dopo, cosa succede. La talpa si affaccia dal modulo. */
.cm-landing-cta__grid--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy form" "after form"; gap: var(--cm-space-5) 72px; }
.cm-landing-cta__grid--form .cm-landing-cta__copy { grid-area: copy; }
.cm-landing-cta__after { display: flex; flex-direction: column; gap: var(--cm-space-5); grid-area: after; }
.cm-landing-cta__grid--form .cm-landing-form { position: relative; grid-area: form; margin-top: 72px; }
/* Nelle pagine per piattaforma la scheda porta "Cosa succede dopo", che sul fondo del brand usa i colori ereditati. */
.cm-landing-form .cm-landing-next__list { color: var(--cm-color-text-secondary); }
.cm-landing-form__mole { position: absolute; top: -116px; right: var(--cm-space-4); width: 176px; height: auto; overflow: visible; pointer-events: none; }

@media (max-width: 992px) {
  .cm-landing-night__grid, .cm-landing-trust, .cm-landing-path, .cm-landing-gains { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cm-landing-path__step:not(:last-child)::after { display: none; }
  .cm-landing-cta__grid--form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form" "after"; gap: var(--cm-space-5); }
  .cm-landing-promises--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .cm-landing-night { padding-block: 56px; }
  .cm-landing-night__sum { padding: var(--cm-space-4); }
  .cm-landing-section__head { margin-bottom: var(--cm-space-5); }
  .cm-landing-report { padding: var(--cm-space-3); }
  .cm-landing-report__row { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--cm-space-2); }
  .cm-landing-report__verdict { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .cm-landing-report__tile { padding: var(--cm-space-2); }
  .cm-landing-path { gap: var(--cm-space-4); margin-bottom: var(--cm-space-5); }
  .cm-landing-path__step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--cm-space-1) var(--cm-space-3); }
  .cm-landing-path__number { grid-row: 1 / span 2; }
  .cm-landing-path__step .cm-landing-text { grid-column: 2; }
  .cm-landing-sectors li { padding: 6px var(--cm-space-3); font-size: var(--cm-font-body); }
  .cm-landing-trust { gap: var(--cm-space-5); }
  .cm-landing-promises--six { grid-template-columns: minmax(0, 1fr); gap: var(--cm-space-4); margin-top: var(--cm-space-5); }
  .cm-landing-form__mole { top: -86px; width: 130px; right: var(--cm-space-2); }
  .cm-landing-cta__grid--form .cm-landing-form { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-landing-spy__rise { transition: none; }
  .cm-landing-spy__mole.is-hit *, .cm-landing-spy__verdict.is-stamped, .cm-landing-btn--lg.is-called, .cm-landing-report.is-shown .cm-landing-report__row { animation: none; }
}