/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9; /* review round 7 (Barron): the accent moves to
     the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
     accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
     accent held (L 0.660, so the documented ratios survive) and chroma
     in the product blurple's own range (its token sits at C 0.118; the
     accent takes 0.125, from the old steel's 0.030):
     the accent now reads as an accent rather than another neutral. */
  --color-accent-2: #a7a1db; /* the machine-derived stand-in follows: same
     hue, same L 0.734, chroma at the same 2:3 proportion it held */
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* Deck section-divider ground — review round 3: saturation as presence.
     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
     family; C 0.094 — written when the accent held C 0.030, before the
     round-7 blurple raised it past the ground's) with a lighter bloom and
     a ghost tint of the same hue, while the slide grounds stay
     desaturated. Deck-scale fills only — not interface colors. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;
  /* Il carattere "da palco": solo il titolo dell'hero e le righe cantate. Se
     finisse anche su h2/h3 il sito perderebbe la differenza fra cio' che si
     canta e cio' che si legge. */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;

  /* Il secondo accento, caldo: l'ambra delle strisce dell'icona. Riservato
     all'invito principale e ai segnali "vivo" (sync, stato di uscita): usato
     ovunque smetterebbe di indicare qualcosa. Non cambia con la stagione,
     apposta: e' il colore del marchio, non dell'addobbo. */
  --color-warm: #f4b43f;
  --color-warm-ink: #1a1206;   /* il testo sopra --color-warm: contrasto ~11:1 */

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
/* La scala dei titoli si riduce sotto i 720px, e sopra non cambia di un pixel:
   il massimo di ogni clamp() e' il valore che il titolo aveva prima, e la parte
   in vw lo raggiunge gia' a 720px di viewport (42 / 720 = 5.84vw, e cosi' le
   altre). Sotto quella soglia un titolo si rimpicciolisce invece di spezzarsi in
   otto righe da una parola: a 360px, tolto il padding di sezione, restano circa
   270px, e a 42px una sola parola lunga li occupa quasi tutti.
   h5 e h6 sono gia' piccoli e restano fissi. */
h1 { font-size: clamp(28px, 5.84vw, 42px); }
h2 { font-size: clamp(24px, 4.45vw, 32px); }
h3 { font-size: clamp(20px, 3.48vw, 25px); }
h4 { font-size: clamp(17px, 2.78vw, 20px); }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
.table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ══════════════════════════════════════════════════════════════════════════
   Sito Melostix — le griglie che devono impilare sul telefono

   Prefisso `mx-`: non sono componenti Nocturne, sono le poche griglie del
   sito che su schermo stretto vanno in colonna. Stanno qui, e non in uno
   `style="..."` sui nodi, per una ragione sola: un attributo `style` batte
   qualunque regola di un foglio di stile, quindi finche' la griglia e' inline
   nessuna @media query puo' toccarla. Sopra i breakpoint queste classi
   ripetono esattamente cio' che prima era inline: su schermo largo non
   cambia un pixel.

   Due soglie, ognuna con la sua aritmetica:
     900px  le griglie multi-colonna a larghezza minima fissa. La piu' larga
            e' quella delle card dei client: 220 + 280 + 200 di colonne,
            2 x 44.8 di gap interni e 2 x 44.8 di padding di sezione = 879px.
            Sotto i 900 non ci sta piu', quindi si impila.
     720px  l'header. Marchio (191) + margine (44.8) + nav (297) + gap (22.4)
            + switch IT/EN (53) + padding (89.6) = 698px. E, dalla stessa
            soglia, il riquadro d'invito (`mx-cta`): il suo padding da 67.2px
            per lato, su 360px di schermo, lasciava al titolo 135px.

   Non tutto quello che deve reagire alla larghezza sta qui: le *dimensioni del
   testo* usano `clamp()` (funziona anche da inline, non serve una @media) e le
   misure della finestra dei testi dell'hero della home sono numeri calcolati in
   JS. Il perche' di ciascuna strada e' nel CLAUDE.md del sito, sezione
   "Responsive".
   ══════════════════════════════════════════════════════════════════════ */

/* — header, nav, switch di lingua — */
.mx-header {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-6) calc(var(--space-8) * 2);
}
.mx-nav {
  display: flex; gap: var(--space-8);
  margin-left: calc(var(--space-8) * 2); font-size: 13px;
}
.mx-lang {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-3);
  font-size: 12px; font-family: ui-monospace, monospace;
  /* wrap perche' qui dentro ora ci sono tre cose (IT, EN, DECOR) e a 360px,
     accanto al logo, la riga e' al limite: se non ci sta, va a capo invece
     di allargare la pagina. */
  flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2);
}

/* — griglie di contenuto multi-colonna — */
.mx-steps {   /* ecosistema: le quattro tappe */
  display: grid; grid-template-columns: 84px minmax(240px, 0.9fr) 1.1fr;
  gap: calc(var(--space-8) * 2); padding: calc(var(--space-8) * 2.5) 0;
  border-top: 1px solid var(--color-neutral-900); align-items: start;
}
.mx-cards {   /* client: le card dei quattro client */
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr) minmax(200px, 0.8fr);
  gap: calc(var(--space-8) * 2); padding: calc(var(--space-8) * 2.5) 0;
  border-top: 1px solid var(--color-neutral-900); align-items: start;
}
.mx-qa {      /* home e docs: domanda a sinistra, risposta a destra */
  display: grid; grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
  gap: calc(var(--space-8) * 2);
  border-top: 1px solid var(--color-neutral-900);
}
.mx-qa-tight { padding: calc(var(--space-8) * 1.5) 0; }   /* home */
.mx-qa-wide  { padding: calc(var(--space-8) * 2) 0; }     /* docs */
.mx-split {   /* ecosistema: testo accanto a immagine o riquadro */
  display: grid; gap: calc(var(--space-8) * 3); align-items: center;
}
.mx-split-arrival { grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.8fr); }
.mx-split-clients { grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr); }
.mx-cta {    /* il riquadro d'invito in fondo a quattro pagine: a 360px il suo
                padding da 67px per lato lasciava al titolo meno di meta' schermo */
  max-width: 1180px; margin: 0 auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: calc(var(--space-8) * 3);
  background: color-mix(in srgb, var(--color-section) 22%, transparent);
}

/* — home: l'hero a due colonne (testo | telefono) — */
.mx-hero-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: calc(var(--space-8) * 3); align-items: center;
}
.mx-hero-stage {   /* il telefono, e dietro il tablet che mostra la stessa riga */
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-6);
}
/* Il display sta qui e non inline: inline, la @media qui sotto non potrebbe
   nasconderlo (vedi "Responsive" nel CLAUDE.md). */
.mx-hero-tablet {
  position: absolute; right: -40px; top: 84px; width: 360px; height: 270px;
  display: flex; flex-direction: column;
}
.mx-btn-warm {     /* l'invito principale: pieno, non filo, a pillola */
  background: var(--color-warm); border-color: var(--color-warm);
  color: var(--color-warm-ink); font-weight: 600;
  border-radius: 999px; min-height: 44px; padding-inline: var(--space-8);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease;
}
.mx-btn-warm:hover { background: color-mix(in srgb, var(--color-warm) 86%, white); color: var(--color-warm-ink); }
.mx-btn-warm:active { background: color-mix(in srgb, var(--color-warm) 86%, black); color: var(--color-warm-ink); }
/* — home: le altre sezioni, compattate —
   Testo e contenuto affiancati invece che impilati: la home era lunga il
   doppio di quanto dice. Sotto i 900px tornano in colonna. */
.mx-duo {          /* testo a sinistra, contenuto a destra */
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: calc(var(--space-8) * 3); align-items: center;
}
.mx-shots {        /* le tre schermate in fila */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8); align-items: start;
}
.mx-sync {         /* ecosistema: master | linee | client */
  display: grid; grid-template-columns: 220px minmax(48px, 90px) minmax(0, 1fr);
  align-items: center;
}
.mx-sync-lines { display: block; width: 100%; height: 100%; min-height: 400px; }
.mx-sync-clients {  /* righe uguali: le linee arrivano a 1/8, 3/8, 5/8, 7/8 */
  display: grid; grid-auto-rows: 1fr; gap: var(--space-6);
}
.mx-facts {        /* privacy: i quattro fatti in 2x2 */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8);
}
.mx-cta-split {    /* l'invito finale: testo | stato delle piattaforme */
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: calc(var(--space-8) * 2); align-items: center;
}

/* — i segnali "vivi", condivisi da tutte le pagine —
   Il pallino ambra accanto a uno stato che cambia (uscita, sync); le card
   dei client che si accendono insieme a ogni riga e la riga nuova che sale.
   Due classi con la stessa animazione, alternate a ogni riga: cambiare nome
   riavvia l'animazione senza toccare il DOM. */
@keyframes mx-live {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warm) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.mx-live-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-warm); animation: mx-live 2s ease-in-out infinite;
}
@keyframes mx-sync-a { from { box-shadow: 0 0 0 1px var(--color-warm), 0 0 32px color-mix(in srgb, var(--color-warm) 30%, transparent); } to { box-shadow: var(--shadow-sm); } }
@keyframes mx-sync-b { from { box-shadow: 0 0 0 1px var(--color-warm), 0 0 32px color-mix(in srgb, var(--color-warm) 30%, transparent); } to { box-shadow: var(--shadow-sm); } }
@keyframes mx-rise-a { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mx-rise-b { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mx-sync-a { animation: mx-sync-a 1400ms ease-out both; }
.mx-sync-b { animation: mx-sync-b 1400ms ease-out both; }
.mx-rise-a { display: inline-block; animation: mx-rise-a 520ms ease-out both; }
.mx-rise-b { display: inline-block; animation: mx-rise-b 520ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .mx-live-dot, .mx-sync-a, .mx-sync-b, .mx-rise-a, .mx-rise-b { animation: none; }
}

/* — la banda: una sezione su un fondo appena piu' blu, per staccarla dal
   resto. Una per pagina al massimo: se sono tutte bande, non e' piu' niente. */
.mx-band {
  background: color-mix(in srgb, var(--color-section) 26%, var(--color-bg));
  border-top: 1px solid var(--color-neutral-900); border-bottom: 1px solid var(--color-neutral-900);
}

/* Il tablet sta a destra del telefono e lo sporge: sotto i 1100px la colonna
   non ha piu' spazio per tutti e due e il tablet coprirebbe il testo. */
@media (max-width: 1100px) { .mx-hero-tablet { display: none; } }

@media (max-width: 900px) {
  .mx-hero-split { grid-template-columns: 1fr; gap: calc(var(--space-8) * 2); }
  .mx-hero-stage { align-items: center; }
  .mx-duo, .mx-cta-split { grid-template-columns: 1fr; gap: calc(var(--space-8) * 2); }
  .mx-sync { grid-template-columns: 1fr; gap: calc(var(--space-8) * 1.5); }
  .mx-sync-lines { display: none; }
  .mx-sync-master { justify-self: center; }
  .mx-steps,
  .mx-cards,
  .mx-qa,
  .mx-split-arrival,
  .mx-split-clients { grid-template-columns: 1fr; }
  .mx-steps, .mx-cards, .mx-qa { gap: var(--space-6); }
  .mx-split { gap: calc(var(--space-8) * 2); }
}

@media (max-width: 720px) {
  /* Tre schermate affiancate a 360px sarebbero larghe 80px: diventano un
     nastro che scorre di lato dentro il suo riquadro, non la pagina. */
  .mx-shots {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4);
  }
  .mx-shots > * { scroll-snap-align: start; }
  .mx-facts { grid-template-columns: 1fr; gap: var(--space-6); }
  .mx-cta { padding: calc(var(--space-8) * 1.5); }
  .mx-header {
    flex-wrap: wrap; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
  }
  .mx-nav {
    order: 3; width: 100%; margin-left: 0;
    flex-wrap: wrap; gap: var(--space-6);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tema stagionale (v2: colore + decorazioni animate)

   `seasons.js` (scritto a mano, incluso dal layout) legge l'orologio del
   dispositivo, lo confronta con la sua tabella e scrive su <html>:
     data-season="nome"        la ricorrenza o la stagione trovata
     data-season-kind="..."    "holiday" (ha particelle) o "generic" (solo colore)
     data-decor="on|off"       la scelta dell'utente col toggle nell'header
   Qui sotto c'e' tutto il resto del colore: solo CSS. Le particelle le
   disegna il canvas di seasons.js, e l'unica regola che le riguarda qui e'
   quella che posiziona il layer (`.mx-season-canvas`).

   Senza quegli attributi — tabella vuota, nessuna corrispondenza, script che
   non parte — nessuna di queste regole si applica e il sito e' esattamente
   quello di sempre. Il tema e' un di piu', mai un requisito.

   Due livelli di intensita', per non trasformare un sito di supporto in una
   vetrina di Natale tutto l'anno:
     holiday   colore pieno, alone acceso, particelle sul canvas
     generic   solo una tinta nell'alone dell'hero e un filo sull'header;
               nessuna particella, nessun respiro
   Chi apre questo sito ha spesso un problema da risolvere: la decorazione
   sta dietro al contenuto, e si spegne con un click.

   Aggiungere una ricorrenza: una riga nella tabella di `seasons.js`, una
   scena in `SCENES` (se vuole particelle) e una tripletta di colori qui
   sotto. Se la tripletta manca, il tema resta invisibile: i colori partono
   da `transparent`.
   ══════════════════════════════════════════════════════════════════════ */

html[data-season] {
  --season-glow: transparent;
  --season-line: transparent;
  --season-ink: var(--color-accent-900);
}

/* L'alone dell'hero e' un token, non un valore inline: e' cosi' che una
   regola stagionale puo' tingerlo. Fuori stagione vale l'accento di sempre,
   quindi la home non cambia di un pixel quando non c'e' niente da
   festeggiare. */
:root { --hero-glow: var(--color-accent-900); }
html[data-season] { --hero-glow: var(--season-ink); }

/*                                 alone          filo header      alone hero  */
html[data-season="halloween"]    { --season-glow: #e07a1f; --season-line: #b35e12; --season-ink: #4a2a10; }
html[data-season="christmas"]    { --season-glow: #2f9e57; --season-line: #1f7a41; --season-ink: #163a28; }
html[data-season="newyear"]      { --season-glow: #d4af37; --season-line: #a8842a; --season-ink: #3d3116; }
html[data-season="ferragosto"]   { --season-glow: #3aa8d8; --season-line: #2680a8; --season-ink: #143444; }
html[data-season="thanksgiving"] { --season-glow: #c07a2c; --season-line: #92591c; --season-ink: #3f2a12; }
html[data-season="valentine"]    { --season-glow: #e0708f; --season-line: #b34e69; --season-ink: #431c28; }
html[data-season="easter"]       { --season-glow: #cfe3b8; --season-line: #8fae72; --season-ink: #2b3524; }
html[data-season="stpatrick"]    { --season-glow: #3f9e4d; --season-line: #2f7a3b; --season-ink: #17351d; }
/* Il compleanno non ha una data sua: lo accendono le righe di `BIRTHDAYS` in
   seasons.js, tutte con questo stesso colore. Una sola tripletta per quante
   persone si vogliano festeggiare — a cambiare e' la lettera che vola. */
html[data-season="birthday"]     { --season-glow: #d47ac2; --season-line: #a45094; --season-ink: #3a1c33; }

/* Le stagioni generiche coprono il resto dell'anno: tinte tenui, che si
   notano solo se si guarda. Nessuna scena in seasons.js, quindi nessuna
   particella — per costruzione, non per una regola in piu'. */
html[data-season="spring"] { --season-glow: #7fb37a; --season-line: #4d7a4a; --season-ink: #22331f; }
html[data-season="summer"] { --season-glow: #4fb0c9; --season-line: #2f7f94; --season-ink: #17323a; }
html[data-season="autumn"] { --season-glow: #b3803f; --season-line: #825b28; --season-ink: #332514; }
html[data-season="winter"] { --season-glow: #6f8fc4; --season-line: #4a6690; --season-ink: #1e2735; }

/* L'alone in cima alla pagina. Sotto l'header (z-index 10) e sotto il
   canvas: non copre mai la nav, non intercetta niente. */
html[data-season]::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 300px;
  pointer-events: none; z-index: 5;
  background: radial-gradient(130% 100% at 50% 0%,
    color-mix(in srgb, var(--season-glow) 40%, transparent), transparent 72%);
  animation: mx-season-breathe 11s ease-in-out infinite;
}
/* Le stagioni generiche prendono meta' alone e non respirano. */
html[data-season-kind="generic"]::before {
  background: radial-gradient(130% 100% at 50% 0%,
    color-mix(in srgb, var(--season-glow) 18%, transparent), transparent 68%);
  animation: none; opacity: 0.9;
}
html[data-season] .mx-header { box-shadow: inset 0 -2px 0 var(--season-line); }

/* Il layer delle particelle. position:fixed e pointer-events:none: fuori dal
   flusso, quindi non puo' rompere l'impaginazione di nessuna pagina, e non
   ruba un click a nessun link. Sopra il contenuto ma sotto l'header, cosi'
   la nav resta sempre leggibile. */
.mx-season-canvas {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 8;
}

/* Spento vuol dire spento. Il toggle dell'header dice "decorazioni
   stagionali", e chi lo preme si aspetta che sparisca tutto: le particelle,
   l'alone, il filo di colore sotto l'header. Da qui in giu' il sito e' quello
   di sempre, come se la tabella non avesse trovato niente.

   Sta dopo le regole stagionali di proposito: ha la loro stessa specificita'
   e vince perche' viene dopo. Spostarlo piu' su lo disattiverebbe. */
html[data-decor="off"] .mx-season-canvas { display: none; }
html[data-decor="off"]::before { display: none; }
html[data-decor="off"] .mx-header { box-shadow: none; }
html[data-decor="off"] { --hero-glow: var(--color-accent-900); }

@keyframes mx-season-breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* L'alone dell'hero deriva lentamente invece di stare fermo: il movimento
   piu' lento della pagina (28s), abbastanza da dare vita all'hero e non
   abbastanza da distrarre chi legge.

   L'animazione porta solo la deriva, mai il posizionamento: un `transform`
   dichiarato sull'elemento verrebbe sostituito da quello dei keyframe, quindi
   un alone che si centrasse con translateX(-50%) salterebbe di mezza larghezza
   appena l'animazione parte. Gli aloni delle cinque pagine si posizionano
   tutti con `left`, e questa classe si limita a farli respirare. */
@keyframes mx-hero-drift {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-16px) scale(1.06); }
}
.mx-hero-glow { animation: mx-hero-drift 28s ease-in-out infinite; }

/* — il toggle DECOR nell'header, accanto allo switch IT/EN — */
.mx-decor {
  appearance: none; background: none; border: 0; padding: 0 0 1px;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em;
  color: var(--color-neutral-600); cursor: pointer;
  border-bottom: 1px solid var(--color-neutral-800);
  transition: color 160ms ease, border-color 160ms ease;
}
.mx-decor:hover { color: var(--color-accent-300); border-bottom-color: var(--color-accent-600); }
.mx-decor:active { color: var(--color-accent-400); }
.mx-decor[aria-pressed="true"] { color: var(--color-accent-300); border-bottom-color: var(--color-accent); }
.mx-decor:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — transizione fra pagine: sono sei file statici, il passaggio e' un reload
     vero. Entrata sempre; uscita solo se il click ha fatto in tempo a
     scrivere data-leaving su <html>. Se il JS non gira la pagina appare
     comunque: l'opacita' di partenza sta nell'animazione, non sull'elemento.

     Il riempimento e' `backwards` e non `both` di proposito. Con `both`
     l'animazione, finita, continua a imporre `opacity: 1` — e un valore che
     viene da un'animazione batte qualunque regola normale, quindi la riga
     dell'uscita qui sotto non avrebbe mai avuto effetto: il click avrebbe
     solo aspettato 180ms per poi navigare senza dissolvere niente. Con
     `backwards` il valore di partenza copre solo il prima, e appena
     l'animazione e' finita l'opacita' torna a essere quella della cascata. — */
@keyframes mx-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.mx-page { animation: mx-page-in 420ms cubic-bezier(.2,.8,.2,1) backwards; }
html[data-leaving] .mx-page { opacity: 0; transition: opacity 180ms ease; }

/* Chi ha chiesto meno movimento tiene il colore e perde tutto il resto:
   niente respiro, niente deriva, niente transizioni di pagina, niente
   reveal — e le particelle non partono nemmeno (seasons.js non monta il
   canvas). Una decorazione stagionale e' la prima cosa che deve sparire. */
@media (prefers-reduced-motion: reduce) {
  html[data-season]::before { animation: none; opacity: 0.85; }
  .mx-season-canvas { display: none; }
  .mx-hero-glow { animation: none; }
  .mx-page { animation: none; }
  html[data-leaving] .mx-page { opacity: 1; transition: none; }
}