/* 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;
  /* 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); }
.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-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); }

/* Esempio nell'apertura */
.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-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-wide); text-transform: uppercase;
}
.cm-landing-sample__hint { color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); }
/* L'esempio delle landing (home, /shopify, /woocommerce): il confronto di "Il tuo negozio", con gli stessi
   colori (arancione = sei più caro, verde = puoi alzare) e gli stessi testi. */
.cm-landing-board__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-2); }
.cm-landing-board__tile {
  display: flex; flex-direction: column; gap: 2px; padding: var(--cm-space-3); border: 1px solid var(--cm-color-border-default);
  border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); color: var(--cm-color-text-secondary); font-size: var(--cm-font-body);
}
.cm-landing-board__tile strong { color: var(--cm-color-text-primary); font-size: var(--cm-font-2xl); line-height: var(--cm-leading-snug); }
.cm-landing-board__tile--over { background: var(--cm-color-status-warning-bg); }
.cm-landing-board__tile--over strong { color: var(--cm-color-status-warning); }
.cm-landing-board__tile--raise { background: var(--cm-color-status-success-bg); }
.cm-landing-board__tile--raise strong { color: var(--cm-color-status-success); }
.cm-landing-board__rows { display: flex; flex-direction: column; gap: var(--cm-space-2); margin: 0; padding: 0; list-style: none; }
.cm-landing-board__row {
  display: flex; flex-direction: column; gap: 2px; 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-board__product { font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-landing-board__prices { color: var(--cm-color-text-muted); font-size: var(--cm-font-body); }
.cm-landing-board__prices strong { color: var(--cm-color-text-primary); }
.cm-landing-board__verdict {
  align-self: flex-start; margin-top: var(--cm-space-1); padding: 2px var(--cm-space-2); border-radius: var(--cm-radius-sm);
  font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold);
}
.cm-landing-board__verdict--over { background: var(--cm-color-status-warning-bg); color: var(--cm-color-status-warning); }
.cm-landing-board__verdict--raise { background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success); }
/* La riga ancora da riempire, nella home: bordo tratteggiato e verdetto col colore del marchio, né arancione né verde. */
.cm-landing-board__row--open { border-style: dashed; border-color: var(--cm-color-brand); }
.cm-landing-board__verdict--open { background: var(--cm-color-brand); color: var(--cm-color-on-brand); }

/* Striscia "in breve" */
/* Chiara, come il resto della pagina: un riepilogo che accompagna la lettura, non uno stacco che la interrompe. */
.cm-landing-strip { padding-block: var(--cm-space-5); border-block: 1px solid var(--cm-color-border-default); background: var(--cm-color-surface-raised); color: var(--cm-color-text-secondary); }
.cm-landing-strip__item { display: flex; flex-direction: column; gap: var(--cm-space-1); font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); }
.cm-landing-strip__title { color: var(--cm-color-text-primary); font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-tracking-title); }

/* 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-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-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-text-muted); 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 { 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); 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); }
.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); }
/* "Per chi è": l'invito per chi ha un negozio Shopify o WooCommerce, sotto le schede, verso la sua landing. */
.cm-landing-shops { display: flex; flex-direction: column; gap: var(--cm-space-4); margin-top: 48px; }
.cm-landing-shops__lead { margin: 0; max-width: 760px; color: var(--cm-color-text-secondary); font-size: var(--cm-font-lg); line-height: var(--cm-leading-normal); }
.cm-landing-shops__lead strong { color: var(--cm-color-text-primary); }

/* 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-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 { --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-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-sample { padding: var(--cm-space-4); }
  .cm-landing-benefit { padding: var(--cm-space-5); }
  .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); }
}