/* ==========================================================================
   marketing.css — homepage platform-first www.iza.ai (BUILD-SPEC §6, INC-8)

   SOLO riferimenti ai token (var(--…)) di tokens.css, mai valori duplicati.
   Classi con prefisso mk- (zero collisioni con app.css, che qui NON si
   carica). Fasce nere SOLO "How it works" e final CTA via .band-dark di
   tokens.css (inversione variabili in scope). Unico accento = nero pieno
   (--accent; bianco pieno sulle fasce nere, inversione automatica).
   Animazioni: solo transform/opacity, con token motion, dentro @supports,
   azzerate da prefers-reduced-motion. CSP style-src 'self': nessun style
   inline nel markup — tutto vive qui.
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* — skip link — */

.mk-skip {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-16));
  z-index: var(--z-modal);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-ctl);
  font-size: var(--fs-md);
  text-decoration: none;
}

.mk-skip:focus-visible {
  top: var(--sp-4);
  outline: var(--focus-ring-width) solid var(--accent-ink);
  outline-offset: var(--focus-ring-offset);
}

/* — tipografia di ruolo — */

.mk-label {
  margin: 0 0 var(--sp-4);
  font-family: var(--micro-font);
  font-size: var(--fs-micro);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-track);
  line-height: var(--lh-micro);
  text-transform: uppercase;
  /* eyebrow/kicker = testo essenziale di conversione: muted (faint mai su
     testo essenziale, regola token) */
  color: var(--text-muted);
}

.mk-h1 {
  margin: 0 auto var(--sp-6);
  max-width: 26ch;
  font-size: var(--fs-hero);
  font-weight: var(--hero-weight);
  letter-spacing: var(--hero-track);
  line-height: var(--lh-h1);
}

.mk-h2 {
  margin: 0 0 var(--sp-6);
  max-width: 30ch;
  font-size: var(--fs-h1);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-track);
  line-height: var(--lh-h1);
}

.mk-sub {
  margin: 0 auto var(--sp-6);
  max-width: var(--measure);
  font-size: var(--fs-lg);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}

.mk-micro {
  margin: var(--sp-4) 0 var(--sp-10);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mk-caption {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.mk-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.mk-wrap-narrow {
  max-width: var(--measure);
}

/* — bottoni (unico accento = nero pieno; invertito sulle fasce nere) — */

.mk-btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-md);
  font-weight: var(--head-weight);
  text-decoration: none;
  border-radius: var(--radius-ctl);
  box-shadow: var(--btn-shadow), var(--edge-light-accent);
}

.mk-btn-small {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.mk-btn-ghost {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  background: var(--ghost-bg);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--head-weight);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
}

.mk-btn:focus-visible,
.mk-btn-ghost:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* — nav sticky (sempre bianca, anche sopra le fasce nere — LPG §4.1) — */

.mk-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(var(--sp-3));
  backdrop-filter: blur(var(--sp-3));
  border-bottom: 1px solid var(--hairline);
}

.mk-nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.mk-brand {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking);
  color: var(--text);
  text-decoration: none;
}

.mk-nav-links {
  display: none;
  flex: 1;
  gap: var(--sp-6);
  margin-left: var(--sp-8);
}

.mk-nav-links a,
.mk-nav-login {
  color: var(--text-muted);
  font-size: var(--fs-md);
  text-decoration: none;
}

.mk-nav-links a:hover,
.mk-nav-login:hover {
  color: var(--text);
}

.mk-nav-account {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}

/* — hero (sempre bianca) — */

.mk-hero {
  padding: var(--sp-16) 0 var(--sp-12);
  background: var(--bg);
  text-align: center;
}

.mk-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.mk-hero-planner {
  max-width: calc(var(--measure) * 1.35);
  margin: 0 auto;
  text-align: left;
}

/* — proof strip (solo dati veri) — */

.mk-proof {
  padding: var(--sp-10) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}

.mk-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  text-align: center;
}

.mk-proof-num {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--num-tracking);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}

.mk-proof-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* — sezioni: hairline superiore = il ritmo visivo (LPG §3.3) — */

.mk-section {
  padding: var(--sp-16) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--top-h) + var(--sp-4));
}

.mk-section.band-dark {
  background: var(--glow-band) var(--bg);
}

.mk-section-sub {
  max-width: var(--measure);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-8);
  color: var(--text-muted);
}

/* — bento value system (hairline grid 1px, LPG §4.6) — */

.mk-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mk-cell {
  position: relative;
  padding: var(--sp-8);
  background: var(--bg);
}

.mk-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    calc(var(--sp-16) * 4) circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--text) 6%, transparent),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

.mk-cell:hover::before {
  opacity: 1;
}

.mk-cell h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-track);
  line-height: var(--lh-head);
}

.mk-cell p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.mk-balance-demo {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface-2);
  border-radius: var(--radius-ctl);
}

.mk-balance-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mk-bar {
  display: block;
  height: var(--sp-3);
  border-radius: var(--r-pill);
}

.mk-bar-monthly {
  width: 72%;
  background: var(--accent);
}

.mk-bar-topup {
  width: 38%;
  background: var(--text-faint);
}

.mk-balance-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* — how it works (fascia nera) — */

.mk-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-step {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.mk-step-num {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: var(--micro-track);
  color: var(--text-muted);
}

.mk-step h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-track);
  line-height: var(--lh-head);
}

.mk-step p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* — personalization mini-demo (HTML/CSS reale, no screenshot) — */

.mk-demo {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--sp-5);
}

.mk-demo-col {
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-1), var(--edge-light);
}

.mk-demo-arrow {
  font-size: var(--fs-h1);
  color: var(--text-faint);
  text-align: center;
  transform: rotate(90deg);
}

.mk-profile {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.mk-profile-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: var(--sp-4);
  font-size: var(--fs-md);
}

.mk-profile-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--text-faint);
}

.mk-profile-row dd {
  margin: 0;
}

.mk-prompt {
  padding: var(--sp-5);
  background: var(--surface-2);
  border-radius: var(--radius-ctl);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.mk-prompt p {
  margin: 0;
}

.mk-prompt mark {
  padding: 0 var(--sp-1);
  background: var(--bg);
  color: var(--text);
  font-weight: var(--head-weight);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}

/* — credit model — */

.mk-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.mk-card {
  padding: var(--sp-8);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-1), var(--edge-light);
}

.mk-card h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-track);
  line-height: var(--lh-head);
}

.mk-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.mk-order {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}

.mk-order-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
}

.mk-order-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  margin-right: var(--sp-2);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  border-radius: var(--r-pill);
}

.mk-order-arrow {
  color: var(--text-faint);
}

/* — pricing (prezzi V2 §4.1) — */

.mk-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.mk-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-1), var(--edge-light);
}

.mk-plan-pop {
  background: var(--bg);
  outline: 1px solid var(--accent);
  box-shadow: var(--sh-3), var(--edge-light);
}

.mk-plan-badge {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--micro-font);
  font-size: var(--fs-micro);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-pill);
}

.mk-plan-name {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-track);
}

.mk-plan-price {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--num-tracking);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}

.mk-plan-price span {
  font-size: var(--fs-md);
  font-weight: normal;
  letter-spacing: normal;
  color: var(--text-muted);
}

.mk-plan-yearly {
  margin: var(--sp-1) 0 var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mk-plan-credits {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.mk-plan-credits strong {
  color: var(--text);
}

.mk-plan-blurb {
  flex: 1;
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mk-plan-cta {
  text-align: center;
}

.mk-plan-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-8);
  text-align: center;
}

.mk-plan-rows p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* — FAQ (<details> nativi, zero JS) — */

.mk-faq {
  display: grid;
  gap: var(--sp-3);
}

.mk-detail {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-radius: var(--radius-ctl);
  box-shadow: var(--sh-1), var(--edge-light);
}

.mk-detail summary {
  position: relative;
  padding-right: var(--sp-8);
  font-size: var(--fs-md);
  font-weight: var(--head-weight);
  list-style: none;
  cursor: pointer;
}

.mk-detail summary::-webkit-details-marker {
  display: none;
}

.mk-detail summary::after {
  content: "+";
  position: absolute;
  top: 0;
  right: var(--sp-2);
  font-family: var(--font-mono);
  color: var(--text-faint);
}

.mk-detail[open] summary::after {
  content: "–";
}

.mk-detail summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--r-sm);
}

.mk-detail p {
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--text-muted);
}

/* — final CTA (fascia nera) — */

.mk-final {
  text-align: center;
}

.mk-final-h {
  margin: 0 auto var(--sp-6);
  max-width: 22ch;
  font-size: var(--fs-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--h1-track);
  line-height: var(--lh-head);
}

.mk-final .mk-micro {
  margin: 0;
}

/* — credit planner (widget hero §6.1) — */

.mk-planner {
  padding: var(--sp-6);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow), var(--edge-light);
}

.mk-planner-head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.mk-planner-label {
  font-size: var(--fs-md);
  font-weight: var(--head-weight);
}

.mk-qty {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.mk-qty input {
  width: 9ch;
  padding: var(--input-pad);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: var(--display-weight);
  letter-spacing: var(--num-tracking);
  text-align: right;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
}

.mk-qty input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.mk-qty span {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mk-slider {
  width: 100%;
  margin: var(--sp-2) 0;
  accent-color: var(--accent);
}

.mk-ticks {
  position: relative;
  height: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mk-tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* posizioni = qtyToPos() del mapping esponenziale 250×3200^(p/1000) */
.mk-tick-1 {
  left: 0;
  transform: none;
}

.mk-tick-2 {
  left: 17.2%;
}

.mk-tick-3 {
  left: 37.1%;
}

.mk-tick-4 {
  left: 50.7%;
}

.mk-tick-5 {
  left: 57.1%;
}

.mk-tick-6 {
  left: 71.5%;
}

.mk-tick-7 {
  left: 85.6%;
}

.mk-tick-8 {
  right: 0;
  transform: none;
}

.mk-planner-update {
  width: 100%;
}

/* — blocco raccomandazione (SSR = update JS via textContent) — */

.mk-rec {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}

.mk-rec-main .mk-label {
  margin-bottom: var(--sp-2);
}

.mk-rec-plan {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track);
  line-height: var(--lh-head);
}

.mk-rec-price {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--num-tracking);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}

.mk-rec-yearly {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mk-rec-lines {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.mk-rec-lines li {
  position: relative;
  padding-left: var(--sp-5);
}

.mk-rec-lines li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

.mk-rec-first {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-md);
  font-weight: var(--head-weight);
  text-align: center;
  border-radius: var(--radius-ctl);
  box-shadow: var(--btn-shadow), var(--edge-light-accent);
}

/* — footer (solo link reali) — */

.mk-footer {
  padding: var(--sp-10) 0 var(--sp-8);
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}

.mk-footer-inner {
  display: grid;
  gap: var(--sp-8);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.mk-footer-brand p {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.mk-footer-col {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.mk-footer-col .mk-label {
  margin-bottom: var(--sp-1);
}

.mk-footer-col a {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-decoration: none;
}

.mk-footer-col a:hover {
  color: var(--text);
}

.mk-footer-line {
  max-width: var(--wrap);
  margin: var(--sp-8) auto 0;
  padding: var(--sp-6) var(--sp-6) 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* — reveal on scroll: lo stato nascosto esiste SOLO se il JS gira (.mk-js
     aggiunto da marketing.js su <html>); senza JS tutto è visibile. — */

.mk-js .mk-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
}

.mk-js .mk-reveal.mk-in {
  opacity: 1;
  transform: none;
}

/* — motion: solo transform/opacity, solo token, dentro @supports — */

@supports (transition-duration: 1ms) {
  .mk-js .mk-reveal {
    transition:
      opacity var(--dur-reveal) var(--ease-standard),
      transform var(--dur-reveal) var(--ease-standard);
  }

  .mk-cell {
    transition: transform var(--dur-lift) var(--ease-standard);
  }

  .mk-cell::before {
    transition: opacity var(--dur-med) var(--ease-standard);
  }

  .mk-cell:hover {
    transform: translateY(calc(-1 * var(--lift-shift)));
  }

  .mk-btn,
  .mk-btn-ghost {
    transition: transform var(--dur-press) var(--ease-standard);
  }

  .mk-btn:active,
  .mk-btn-ghost:active {
    transform: scale(var(--press-scale));
  }
}

@supports (scroll-behavior: smooth) {
  html {
    scroll-behavior: smooth;
  }
}

/* — 768px — */

@media (min-width: 768px) {
  .mk-nav-links {
    display: flex;
  }

  .mk-proof-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .mk-bento {
    grid-template-columns: 1.4fr 1fr;
  }

  .mk-cell-big {
    grid-row: span 3;
  }

  .mk-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }

  .mk-demo {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-8);
  }

  .mk-demo-arrow {
    transform: none;
  }

  .mk-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .mk-plans {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .mk-planner {
    padding: var(--sp-8);
  }

  .mk-planner-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .mk-planner-update {
    width: auto;
  }

  .mk-rec {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-8);
  }

  .mk-footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* — 360–767px: tacche secondarie dello slider nascoste — */

@media (max-width: 767px) {
  .mk-tick-sm {
    display: none;
  }
}

/* — 1280px — */

@media (min-width: 1280px) {
  .mk-hero {
    padding-top: calc(var(--sp-16) + var(--sp-8));
  }
}

/* — reduced motion: tutto fermo, contenuto statico perfettamente leggibile — */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mk-js .mk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mk-cell,
  .mk-cell::before,
  .mk-btn,
  .mk-btn-ghost {
    transition: none;
  }

  .mk-cell:hover {
    transform: none;
  }
}

/* — performance: sezioni sotto il fold (LPG §6). 32rem = stima di rendering
     per content-visibility, non un valore di design. — */

.mk-section,
.mk-proof,
.mk-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 32rem;
}