/* === DEEP-CMS SELF-HOSTED FONTS (generato da scripts/perf/selfhost-fonts.py) === */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/manrope-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/manrope-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === /DEEP-CMS SELF-HOSTED FONTS === */




/* =========================================================================
   MC Slide — design system
   Derivato dal mockup approvato mockup/outputs/mcslide-mac-case-study-light-page-v2.png:
   editoriale bianco, hero fotografica full-bleed con colonna di luce a destra,
   striscia metriche numerata, accenti aqua (dal marchio) e beige.
   ========================================================================= */

:root {
  /* Superfici */
  --mcs-bg: #F7F6F3;
  --mcs-surface: #FFFFFF;
  --mcs-dark: #1B1E21;

  /* Testo */
  --mcs-ink: #23262A;
  /* Grigio scuro del brandbook (Laura, 31/08). Sostituisce il #6B7076 campionato
     dal marchio: e' del cliente, ed e' anche piu' leggibile (6,7:1 sul fondo
     calce contro 4,6:1). */
  --mcs-ink-2: #575756;
  --mcs-ink-on-dark: #F2F1EE;

  /* Linee */
  --mcs-line: #E4E1DC;          /* separatori dei dati: e' una tinta della calce, resta calda */
  --mcs-line-strong: #C9CACC;   /* bordo dei controlli: grigio chiaro del brandbook */

  /* Accenti — i tre colori del brandbook consegnati da Laura il 31/08/2026:
     #A2D1CD tiffany, #575756 grigio scuro, #C9CACC grigio chiaro. Il tiffany
     ha lo stesso angolo di tinta (175°) dell'aqua campionata dal marchio: e'
     lo stesso colore, dichiarato dal cliente invece che dedotto da noi. */
  --mcs-aqua: #A2D1CD;
  --mcs-aqua-deep: #3B7A74;   /* stessa tinta, portata a 4,6:1 sul fondo calce: il tiffany pieno sta a 1,55 e sotto un testo non ci va mai */
  --mcs-beige: #E8D6BE;
  --mcs-beige-ink: #4A3B29;
  /* Cotto anche nel data-URI di .mcs-waves: cambiarlo qui non basta. */
  --mcs-wave: #E3E0DA;

  /* Tipografia */
  --mcs-font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --mcs-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* Griglia — richiesta cliente 25/08: contenuto quasi a filo dei bordi,
     come saxun.com. Il massimo esiste solo per non mandare le righe di testo
     a 2000px sui monitor grandi; sotto i 2100 il contenitore e' la finestra
     meno il gutter, che e' volutamente stretto. */
  --mcs-maxw: 2100px;
  /* Le voci di navigazione stanno sul gradino "body" (0.9375rem), non su
     quello "ui" dei controlli (0.8125rem): una voce di menu' si legge, non
     si preme. Nessuna misura nuova, solo un ruolo spostato di un gradino. */
  --mcs-nav-size: 0.9375rem;
  --mcs-gutter: clamp(16px, 2vw, 44px);
  --mcs-section: clamp(72px, 9vw, 148px);
  /* Larghezza della colonna destra: la usano hero (colonna di luce),
     striscia metriche (pannello beige) e header. Devono restare allineate. */
  --mcs-col-right: min(30%, 420px);
  /* L'ultimo pezzo di immagine che resta a colori pieni a destra della colonna
     di luce. Lo stesso valore rientra il pannello beige, cosi' colonna e
     pannello stanno sullo stesso asse a qualunque larghezza. */
  --mcs-edge-strip: clamp(20px, 3vw, 56px);
  /* Altezza della striscia metriche a desktop. La hero sottrae esattamente
     questo dalla schermata, cosi' fotografia e dati entrano insieme al primo
     colpo d'occhio. Misurato fra 205 e 213px da 1100 a 1920: 216 li copre. */
  --mcs-metrics-h: 216px;

  /* Altezza dell'header: le ancore ci scorrono sotto e il menu a tendina ci
     si aggancia. Due righe (utility + navigazione) sopra i 1080. */
  --mcs-header-h: 104px;

  --mcs-ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Anello di focus: senza, i controlli erano invisibili da tastiera.
   Prima :focus (regge anche dove :focus-visible non c'e'), poi lo si toglie
   al focus da mouse. Due varianti: l'aqua non si vede sulle bande scure. */
:focus {
  outline: 2px solid var(--mcs-aqua-deep);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--mcs-aqua-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.mcs-hero :focus-visible,
.mcs-header :focus-visible,
.mcs-fullbleed :focus-visible,
.mcs-ctaband :focus-visible,
.mcs-footer :focus-visible {
  outline-color: #fff;
}

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

body {
  margin: 0;
  background: var(--mcs-bg);
  color: var(--mcs-ink);
  font-family: var(--mcs-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--mcs-font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
}

p { margin: 0; }

/* --- Scala tipografica ------------------------------------------------- */
.mcs-display   { font-size: clamp(2.15rem, 4.4vw, 3.9rem); }
.mcs-h2        { font-size: clamp(1.75rem, 3.2vw, 2.9rem); }
.mcs-h3        { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.mcs-lead      { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.72; color: var(--mcs-ink-2); }
.mcs-body      { font-size: 0.9375rem; line-height: 1.72; color: var(--mcs-ink-2); }
.mcs-label {
  font-family: var(--mcs-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mcs-ink-2);
}
.mcs-num {
  font-family: var(--mcs-font-display);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--mcs-aqua-deep);
}

/* --- Contenitori -------------------------------------------------------- */
.mcs-wrap {
  width: 100%;
  max-width: var(--mcs-maxw);
  margin-inline: auto;
  padding-inline: var(--mcs-gutter);
}
.mcs-section { padding-block: var(--mcs-section); }

/* --- Bottoni ------------------------------------------------------------ */
.mcs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--mcs-line-strong);
  background: transparent;
  color: inherit;
  font-family: var(--mcs-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s var(--mcs-ease), color .35s var(--mcs-ease), border-color .35s var(--mcs-ease);
}
.mcs-btn:hover { background: var(--mcs-ink); border-color: var(--mcs-ink); color: #fff; }
.mcs-btn--solid { background: var(--mcs-ink); border-color: var(--mcs-ink); color: #fff; }
.mcs-btn--solid:hover { background: var(--mcs-aqua-deep); border-color: var(--mcs-aqua-deep); }
.mcs-btn--light { border-color: rgba(255,255,255,.55); color: #fff; }
.mcs-btn--light:hover { background: #fff; border-color: #fff; color: var(--mcs-ink); }

/* Link con freccia (motivo ricorrente del mockup) */
.mcs-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.mcs-arrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform .4s var(--mcs-ease);
}
.mcs-arrow:hover::before { transform: scaleX(1.42); }

/* --- Onde di fondo ------------------------------------------------------ */
.mcs-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 640px 150px;
  opacity: .9;
  /* Onda periodica esatta: due semionde da 320px dentro un tile da 640, con
     la stessa tangente a x=0 e x=640 — senza, ogni ripetizione del tile
     spezzava la curva con un gomito visibile a colonne regolari. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='150' viewBox='0 0 640 150'%3E%3Cg fill='none' stroke='%23E3E0DA' stroke-width='1.4'%3E%3Cpath d='M0 20C107 -10 213 50 320 20S533 -10 640 20'/%3E%3Cpath d='M0 50C107 20 213 80 320 50s213-30 320 0'/%3E%3Cpath d='M0 80C107 50 213 110 320 80s213-30 320 0'/%3E%3Cpath d='M0 110C107 80 213 140 320 110s213-30 320 0'/%3E%3Cpath d='M0 140C107 110 213 170 320 140s213-30 320 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Motion ------------------------------------------------------------
   Due gradi. La rivelazione delicata (`reveal`) accompagna il testo che entra
   nello schermo: 14px di risalita e nient'altro. Il momento autoriale resta
   uno solo, lo statement, che ha la sua rivelazione a clip nel proprio block.

   Gli elementi sono visibili di loro: e' il JS ad armarli. Senza JS, o con
   prefers-reduced-motion, non sparisce niente. */
[data-mcs-motion="reveal"].is-armed { opacity: 0; transform: translateY(14px); }
[data-mcs-motion="reveal"].is-armed.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--mcs-ease), transform .7s var(--mcs-ease);
}

/* Sfalsamento appena percettibile fra i figli diretti: il titolo entra, il
   testo lo segue di un soffio. */
[data-mcs-motion="reveal"].is-armed.is-in > *:nth-child(1) { transition-delay: 0s; }
[data-mcs-motion="reveal"].is-armed.is-in > *:nth-child(2) { transition-delay: .07s; }
[data-mcs-motion="reveal"].is-armed.is-in > *:nth-child(3) { transition-delay: .14s; }
[data-mcs-motion="reveal"].is-armed.is-in > *:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .mcs-lines__media img,
  .mcs-arrow::before { transition: none; }
  [data-mcs-motion="reveal"].is-armed { opacity: 1; transform: none; }
}

/* =========================================================================
   Chrome — header con alberatura, ricerca, area riservata, menu mobile, footer
   Richieste cliente 25/08/2026: barra di navigazione completa di alberatura
   con sottomenu' dinamico (riferimento saxun.com), barra di ricerca evidente,
   accesso all'area riservata, footer curato con marchio grande e social.
   ========================================================================= */

.mcs-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  color: #fff;
  transition: background .4s var(--mcs-ease), color .4s var(--mcs-ease), box-shadow .4s var(--mcs-ease);
}
.mcs-header__row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 32px);
  min-height: var(--mcs-header-h);
  padding-inline: var(--mcs-gutter);
  max-width: var(--mcs-maxw);
  margin-inline: auto;
}
/* Marchio orizzontale, scelto il 18/09. La targa bianca serviva a proteggere
   dalla fotografia un marchio verticale alto 56px, dove la parola non si
   leggeva comunque; il lockup su una riga regge da solo, quindi torna lo
   scambio chiaro/colore: bianco sopra la hero, a colori quando l'header
   diventa opaco (is-stuck, is-solid, pannello aperto). */
.mcs-header__logo {
  display: block; flex: none;
  line-height: 0;
}
.mcs-header__logo img { height: 52px; width: auto; }
.mcs-header__logo .is-white { display: block; }
.mcs-header__logo .is-color { display: none; }
.mcs-header.is-stuck .mcs-header__logo .is-white,
.mcs-header.is-solid .mcs-header__logo .is-white,
.mcs-header.has-mega-open .mcs-header__logo .is-white { display: none; }
.mcs-header.is-stuck .mcs-header__logo .is-color,
.mcs-header.is-solid .mcs-header__logo .is-color,
.mcs-header.has-mega-open .mcs-header__logo .is-color { display: block; }

/* --- Navigazione con alberatura ---------------------------------------- */
.mcs-header__nav { margin-right: auto; }
.mcs-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: clamp(6px, 1vw, 18px); }
/* position static: il pannello a tendina si posiziona sull'header, non sulla
   voce, o le colonne dei prodotti non avrebbero larghezza.
   display flex: senza, la voce si appoggia in cima alla cella e le voci con
   sottomenu' finiscono un pixel piu' in alto delle altre. */
.mcs-nav__item { position: static; display: flex; align-items: center; }
.mcs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mcs-font-body);
  font-size: var(--mcs-nav-size);
  /* Dichiarata, non ereditata: un <button> non eredita line-height dal body,
     usa `normal`. Con le voci miste — Sistemi e' un button, Contatti un link —
     le due altezze differivano di 2px e i testi non stavano sulla stessa riga. */
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 11px 6px;
  cursor: pointer;
  opacity: .92;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--mcs-ease), opacity .3s var(--mcs-ease);
}
.mcs-nav__link:hover,
.mcs-nav__item.is-open > .mcs-nav__link { opacity: 1; border-bottom-color: currentColor; }
.mcs-nav__chev { flex: none; transition: transform .3s var(--mcs-ease); }
.mcs-nav__item.is-open .mcs-nav__chev { transform: rotate(180deg); }

/* Il pannello e' largo quanto la finestra e si aggancia sotto la riga:
   posizione assoluta sull'header, non sulla voce, o le colonne dei prodotti
   non avrebbero spazio. */
.mcs-mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--mcs-surface);
  color: var(--mcs-ink);
  border-top: 1px solid var(--mcs-line);
  box-shadow: none;
  /* Da chiuso l'attributo hidden toglie il pannello dal tab order: opacita'
     e trasformazione da sole lascerebbero i link raggiungibili col tab. */
}
.mcs-mega[hidden] { display: none; }
.mcs-mega__inner {
  max-width: var(--mcs-maxw);
  margin-inline: auto;
  padding: clamp(28px, 3vw, 48px) var(--mcs-gutter) clamp(32px, 3.4vw, 54px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(24px, 2.6vw, 52px);
  align-items: start;
}
.mcs-mega__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mcs-mega__thumb { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mcs-line); }
.mcs-mega__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--mcs-ease); }
.mcs-mega__col:hover .mcs-mega__thumb img { transform: scale(1.05); }
.mcs-mega__ctitle {
  font-family: var(--mcs-font-display);
  font-weight: 300;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--mcs-ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mcs-line);
}
.mcs-mega__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mcs-mega__col ul a {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mcs-ink-2);
  text-decoration: none;
  padding-block: 6px;
  transition: color .25s var(--mcs-ease);
}
.mcs-mega__col ul a:hover { color: var(--mcs-aqua-deep); }
.mcs-mega__note {
  grid-column: -2 / -1;
  background: var(--mcs-bg);
  padding: clamp(20px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mcs-mega__note p { font-size: 0.8125rem; line-height: 1.6; color: var(--mcs-ink-2); }

/* --- Strumenti: ricerca, area riservata, CTA ----------------------------
   Tre controlli, una sola altezza: 42px. Il CTA con padding verticale ne
   misurava 51 e restava piu' alto degli altri due. */
.mcs-header__tools { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); margin-left: auto; }
.mcs-header__tools .mcs-btn,
.mcs-header__band .mcs-btn {
  height: 42px;
  padding-block: 0;
  line-height: 1;
}
.mcs-header__band { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); }

/* La banda occupa esattamente la colonna di luce: stessa larghezza, stesso
   bordo destro. E' assoluta rispetto all'header — che e' largo quanto la
   finestra, come il wrapper della colonna — invece che in flusso dentro la
   riga, che ha il gutter e darebbe una percentuale calcolata su un'altra base.
   Prima area riservata e CTA finivano a cavallo del bordo della banda: la
   ricerca tagliata a meta', il bottone che sbordava di 14px. */
@media (min-width: 1181px) {
  .mcs-header__row {
    /* Spazio riservato alla banda piu' un respiro, cosi' la ricerca finisce
       prima che la colonna di luce cominci invece di sfiorarla. */
    padding-right: calc(min(30%, 420px) + var(--mcs-edge-strip) + clamp(12px, 1.4vw, 22px));
  }
  .mcs-header__band {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--mcs-edge-strip) + max(0px, (100% - var(--mcs-maxw)) / 2));
    width: min(30%, 420px);
    justify-content: flex-end;
    /* Stesso inset del pannello sabbia che sta sotto: cosi' il bordo destro del
       CTA cade sulla stessa verticale del testo dentro il pannello, non solo
       il bordo della banda su quello della banda. Un bottone a filo del bordo
       sembrerebbe incastrato, non allineato. */
    padding-inline: clamp(22px, 2.4vw, 38px);
  }
}

.mcs-search { position: relative; flex: none; }

/* === La ricerca: un oggetto solo ========================================
   Adattamento del componente "Seek" di Bencho (bencho.dev, licenza MIT).
   Un'icona di ricerca che diventa campo di ricerca.

   UN OGGETTO, NON DUE. Tutto quello che segue discende da qui. La versione
   ovvia e' un'icona che sfuma via e un campo che sfuma dentro, ed e' ovvia
   perche' e' facile — ma due cose che si scambiano non passano mai per una
   cosa sola che cambia, per quanto bene sia calibrata la dissolvenza. Quindi
   c'e' una scatola sola, la cui LARGHEZZA e' lo stato, e l'icona e il campo
   stanno dentro di lei per tutto il tempo.

   Cosi' i problemi interessanti diventano geometria invece che coreografia:

   · La lente non si muove mai rispetto alla scatola. Sta a un rientro fisso
     dal bordo, e alla larghezza chiusa quel rientro la centra: (42 - 18) / 2
     fa 12, e 12 e' anche il padding che il campo aperto vuole (il campo del
     menu mobile ne ha 13, e la differenza non si vede). Un numero solo dice
     "centrata in un cerchio" e "allineata in un campo", e la lente che
     attraversa la barra non e' un'animazione che ha scritto qualcuno: e' la
     scatola che cresce attorno a un segno rimasto fermo.

   · L'altezza non cambia mai e l'angolo e' lo stesso a qualunque larghezza,
     quindi la FORMA e' una regola sola invece che un'interpolazione con due
     estremi. Il raggio che passava da 21 a 13 sarebbe una seconda cosa
     costretta ad andare d'accordo con la prima; un raggio costante non chiede
     nessun accordo.
     L'originale e' un cerchio che diventa pastiglia. Qui il raggio e' ZERO:
     un quadrato che diventa un rettangolo. E' DESIGN.md §Forma — "spigoli vivi
     ovunque, raggio 0px di regola, e' la forma del profilo di alluminio
     estruso", dal mockup approvato dal cliente — e la regola dell'oggetto
     sopravvive intatta, perche' non dipendeva dall'essere tondo ma
     dall'essere uno solo. Il raggio sta in una costante del JS: per riavere
     la pastiglia di Bencho si cambia quel numero e nient'altro.

   · LA SCATOLA CRESCE VERSO SINISTRA, e qui ci scostiamo dall'originale.
     Bencho la fa crescere dal centro, perche' li' il componente sta da solo
     al centro di una scheda. Qui e' l'ultimo controllo della barra, appoggiato
     al bordo destro della colonna di luce: crescere dal centro manderebbe
     meta' pastiglia fuori dallo schermo. Il perno e' il bordo destro, e la
     lente scorre verso sinistra per l'intera crescita invece che per meta'.
     L'oggetto resta uno: e' la stessa scatola che cresce attorno alla stessa
     lente, solo ancorata a un lato invece che al proprio centro.

   · L'ingombro in barra resta 42px anche da aperto. La pastiglia e' assoluta,
     quindi cresce SOPRA il CTA invece di spingerlo: e' esattamente la ragione
     per cui il 18/09 il campo aperto era stato tolto dalla barra, dove si
     mangiava 360px che servivano all'area riservata.

   SI MUOVE UNA COSA SOLA, la larghezza. Bencho ne muove altre due: l'oggetto
   si sporge verso il puntatore, e cede per 90ms sotto il clic prima di
   espandersi. Tolte tutte e due (Francesco, 18/09). In una barra dove il CTA
   sta a 14px un controllo che si sposta da solo si legge come un difetto di
   allineamento, e uno scatto al clic mette un'attesa davanti a un'apertura
   che deve essere immediata. Hover e stato premuto non hanno piu' nessuna
   animazione: resta un cambio di colore, che non e' un movimento. */
.mcs-search--seek {
  /* ── i token di Bencho, tradotti in quelli di MC Slide ─────────────────
     Stanno qui sulla radice del componente e non su :root: --ink, --pane e
     --bg sono nomi generici, e un sito che ha gia' i propri non deve
     ritrovarseli addosso ovunque. */
  --font-ui: var(--mcs-font-body);
  /* L'header vive in due stati e il controllo con lui: bianco sopra la
     fotografia della hero, inchiostro appena la barra diventa opaca. Tutta la
     scala dell'inchiostro nasce da questi tre numeri, che gli stati
     dell'header piu' sotto riscrivono: il colore si cambia in un posto solo
     invece che in otto regole. Virgole e non spazi, perche' e' rgba() a
     leggerli. */
  --ink-rgb: 255, 255, 255;
  --ink: rgb(var(--ink-rgb));
  --ink-2: rgba(var(--ink-rgb), .9);   /* lente mentre si digita */
  --ink-3: rgba(var(--ink-rgb), .78);  /* lente a riposo */
  --ink-4: rgba(var(--ink-rgb), .6);   /* lente a campo aperto */
  /* .68 e' l'opacita' del placeholder che il campo del menu mobile ha gia':
     stesso segnaposto, stesso grigio, in tutti e due i posti. */
  --ink-5: rgba(var(--ink-rgb), .68);
  /* Superficie e bordo: gli stessi due valori che avevano il vecchio bottone
     e il campo, cosi' il controllo nuovo non e' piu' chiaro ne' piu' scuro di
     quelli che gli stanno accanto. */
  --pane: rgba(255,255,255,.1);
  --pane-edge: rgba(255,255,255,.5);
  /* La frittura sopra la fotografia. Sull'header opaco il fondo e' pieno e il
     backdrop-filter non ha niente da sfocare: si spegne da solo. */
  --g-blur: 3px;
  --g-sat: 140%;

  position: relative;
  /* L'ingombro in barra e' quello dell'oggetto chiuso, sempre: e' un
     controllo alto 42 come gli altri tre della riga. */
  width: var(--shut, 42px);
  height: var(--shut, 42px);
  flex: none;
  /* Sopra il CTA, che le sta sotto mentre e' aperta. */
  z-index: 7;
  font-family: var(--font-ui);
}

/* ── l'oggetto ──────────────────────────────────────────────────────────
   La larghezza e' lo stato. L'altezza e' fissa, quindi il raggio si ricava
   dalla larghezza invece di essere animato accanto a lei — a 42 l'angolo e'
   21 e la forma E' un cerchio, e non c'e' un fotogramma in cui i due non
   vanno d'accordo. */
.mcs-search--seek .sek-skin {
  position: absolute;
  top: 0;
  /* il perno. Vedi la nota sopra: qui la scatola cresce verso sinistra. */
  right: 0;
  width: var(--w, 42px);
  /* --shut, NON un numero. Il JS pubblica la larghezza chiusa e l'altezza da
     una costante sola proprio perche' non possano divergere: un cerchio che
     non e' rotondo e' l'unica forma che si accorge chiunque. */
  height: var(--shut, 42px);
  border-radius: var(--sek-r, 0px);
  background: var(--pane);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  isolation: isolate;
  /* Nessuna trasformazione. L'oggetto non si sporge verso il puntatore e non
     cede sotto il clic: quelle due sono di Bencho e qui sono state tolte
     (Francesco, 18/09). L'unica cosa che si muove e' la larghezza, e la muove
     il JS a molla, non una transizione. */
  transition:
    background .3s var(--mcs-ease),
    border-color .3s var(--mcs-ease);
  /* il campo sta dentro dal primo fotogramma; e' questo che gli impedisce di
     traboccare da un cerchio di 42px */
  overflow: hidden;
  border: 1px solid var(--pane-edge);
}

/* Hover: il bordo si fa netto e la lente piena, e basta. Non si riempie di
   bianco (Francesco, 18/09): a fondo pieno il quadrato diventa l'oggetto piu'
   acceso di una barra dove il CTA e' un contorno, e per un attimo sembra lui
   il pulsante principale. Il segnale minimo che dice "questo si preme" e'
   l'unico che serve, e non e' un'animazione. */
.mcs-search--seek:not([data-open="true"]) .sek-skin:hover {
  --pane-edge: rgb(var(--ink-rgb));
}

/* il campo e' un bersaglio da testo, l'oggetto chiuso e' un bottone */
.mcs-search--seek[data-open="true"] .sek-skin { cursor: text; }

/* ── la lente ───────────────────────────────────────────────────────────
   Fissata al rientro sinistro della scatola e mai animata. Alla larghezza
   chiusa quel rientro la centra; a quella aperta e' il padding del campo. */
.mcs-search--seek .sek-lens {
  position: absolute;
  left: var(--inset, 12px);
  top: 50%;
  width: var(--lens, 18px);
  height: var(--lens, 18px);
  margin-top: calc(var(--lens, 18px) / -2);
  fill: none;
  stroke: var(--ink-3);
  /* 1.125, E IL NUMERO NON SI PUO' CONFRONTARE CON QUELLO DI LUCIDE NE' CON
     QUELLO DI BENCHO. Un tratto di u unita' disegna a u/viewBox della
     dimensione dell'icona. Il simbolo #i-search di questo sito e' su una
     griglia di 24 con tratto 1.5, cioe' 0.0625; questa lente e' su una
     griglia di 18, e 0.0625 x 18 fa 1.125. Il 1.5 di Bencho qui sarebbe
     0.0833, un terzo piu' pesante delle altre icone del chrome. */
  stroke-width: 1.125;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke 200ms ease, stroke-width 200ms ease;
}
.mcs-search--seek .sek-skin:hover .sek-lens { stroke: var(--ink); }
.mcs-search--seek[data-open="true"] .sek-lens { stroke: var(--ink-4); }
/* si digita: la lente si ispessisce di un capello e si scurisce. Un tempo per
   raffica, non uno per tasto — un segno che sfarfalla al ritmo della
   digitazione e' rumore travestito da risposta. Stessa proporzione
   dell'originale: 1.35 sta a 1.125 come il suo 1.8 sta a 1.5. */
.mcs-search--seek[data-busy="true"] .sek-lens { stroke: var(--ink-2); stroke-width: 1.35; }

/* ── il campo ───────────────────────────────────────────────────────────
   C'e' dal primo fotogramma e lo rivela --say, che e' l'ultimo terzo della
   corsa della larghezza. Scivola di qualche pixel mentre arriva, da sinistra,
   cosi' si legge come uscito dalla lente invece che apparso dov'era. */
.mcs-search--seek .sek-field {
  position: absolute;
  /* 9px e' il gap fra icona e testo che il campo del menu mobile ha gia' */
  left: calc(var(--inset, 12px) + var(--lens, 18px) + 9px);
  right: 12px;
  top: 0;
  height: 100%;
  border: 0;
  background: none;
  /* 0.8125rem e' la misura dei controlli di questa barra. Bencho usa 18px
     perche' la sua pastiglia e' alta 64 e il testo dentro un oggetto grande
     sembrava una didascalia; questa e' alta 42, cioe' esattamente un controllo
     della riga, e prende la misura dei controlli della riga. */
  font-family: var(--mcs-font-body);
  font-size: 0.8125rem;
  letter-spacing: .02em;
  color: var(--ink);
  outline: none;
  padding: 0;
  opacity: var(--say, 0);
  transform: translateX(calc((1 - var(--say, 0)) * -6px));
  /* finche' non e' quasi tutta aperta non e' un bersaglio, e un cursore che si
     puo' piazzare dentro un cerchio di 42px e' un cursore nel posto sbagliato */
  pointer-events: var(--say-hit, none);
}
.mcs-search--seek[data-open="true"] .sek-field { --say-hit: auto; }
.mcs-search--seek .sek-field::placeholder { color: var(--ink-5); }
/* Chrome e Safari mettono una X nativa che qui litiga col bordo netto. */
.mcs-search--seek .sek-field::-webkit-search-cancel-button { -webkit-appearance: none; }

/* la via d'ingresso, e solo finche' c'e' una via d'ingresso: a campo aperto
   questo e' mestiere del campo, e un secondo bersaglio sopra si mangerebbe il
   clic che piazza il cursore. Il JS lo nasconde, non lo cancella. */
.mcs-search--seek .sek-hit {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
.mcs-search--seek .sek-hit[hidden] { display: none; }
/* Niente regola di focus qui dentro. Quello del sito (:focus-visible in cima
   al foglio) sa gia' fare bianco sopra la fotografia e verderame sul fondo
   chiaro, e ha il raggio di 1px che DESIGN.md riserva agli anelli. Il doppio
   anello di Bencho lo rifarebbe da capo con --bg, e su due stati dell'header
   il suo anello interno sparirebbe contro il proprio fondo: e' l'unico token
   della lista che qui non serve mappare, perche' era l'unico a servirgli. */

/* Lingua e CTA si fanno da parte mentre si cerca: il campo ci cresce sopra e
   li coprirebbe comunque, ma a meta'. Escono anche dal tab order, o da tastiera
   si finirebbe dentro un controllo che non si vede. Area riservata non e' in
   questa lista perche' non e' nella banda: sta in riga, prima che la colonna di
   luce cominci, e il campo aperto non la raggiunge. */
.mcs-header__band .mcs-btn,
.mcs-header__band .mcs-lang {
  /* visibility a 0s senza ritardo quando tornano: devono essere visibili gia'
     al primo fotogramma della dissolvenza, o si vedrebbe il vuoto per 220ms */
  transition: opacity .22s var(--mcs-ease), visibility 0s linear 0s;
}
.mcs-header__band.is-searching .mcs-btn,
.mcs-header__band.is-searching .mcs-lang {
  opacity: 0;
  pointer-events: none;
  /* ritardata di tutta la dissolvenza, se no sparirebbero di colpo invece di
     spegnersi. E' visibility e non opacity da sola perche' un link a opacita'
     zero resta nel tab order. */
  visibility: hidden;
  transition: opacity .22s var(--mcs-ease), visibility 0s linear .22s;
}

/* Risultati: la tendina cade sotto l'oggetto CHIUSO, non sotto la pastiglia,
   perche' il riferimento e' la radice del componente ed e' lei a restare
   ferma. Bordo destro in comune, e' l'unico che i due condividono sempre. */
.mcs-search--seek .mcs-search__results { top: calc(100% + 10px); }

.mcs-search__field {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding-inline: 13px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.1);
  transition: background .3s var(--mcs-ease), border-color .3s var(--mcs-ease);
}
.mcs-search__field svg { flex: none; opacity: .85; }
.mcs-search input {
  width: clamp(170px, 19vw, 360px);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--mcs-font-body);
  font-size: 0.8125rem;
  letter-spacing: .02em;
  outline: none;
  padding: 0;
}
.mcs-search input::placeholder { color: currentColor; opacity: .68; }
/* Chrome e Safari mettono una X nativa che qui litiga col bordo netto. */
.mcs-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mcs-search__field:focus-within { background: rgba(255,255,255,.2); border-color: #fff; }

.mcs-search__results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(440px, 78vw);
  background: var(--mcs-surface);
  color: var(--mcs-ink);
  border: 1px solid var(--mcs-line);
  max-height: 54vh;
  overflow-y: auto;
  z-index: 5;
}
.mcs-search__results[hidden] { display: none; }
.mcs-search__hit {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--mcs-line);
}
.mcs-search__hit:last-child { border-bottom: 0; }
.mcs-search__hit:hover, .mcs-search__hit.is-active { background: var(--mcs-bg); }
.mcs-search__hit b { font-family: var(--mcs-font-display); font-weight: 300; font-size: 1rem; display: block; }
.mcs-search__hit span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--mcs-ink-2);
  margin-top: 2px;
}
.mcs-search__empty { padding: 14px 16px; font-size: 0.8125rem; color: var(--mcs-ink-2); }
/* Intestazione dei suggerimenti col campo vuoto: e' un'etichetta, non un
   risultato, quindi sta piu' piccola e non si illumina al passaggio. */
.mcs-search__hint {
  padding: 12px 16px 6px;
  font-size: 0.6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mcs-ink-2);
  border-bottom: 1px solid var(--mcs-line);
}

/* Dal 18/09 e' una scritta, non piu' il quadrato con l'omino: l'icona non
   diceva dove portava. Resta alta 42px come gli altri controlli, allineata al
   testo del CTA che le sta accanto. */
.mcs-header__user {
  display: inline-flex;
  align-items: center;
  height: 42px;
  flex: none;
  color: inherit;
  text-decoration: none;
  font-family: var(--mcs-font-body);
  font-size: 0.8125rem;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--mcs-ease), opacity .3s var(--mcs-ease);
}
.mcs-header__user:hover { border-bottom-color: currentColor; }

.mcs-header__tools .mcs-btn,
.mcs-header__band .mcs-btn { white-space: nowrap; }

/* Due stati chiari:
   - is-stuck: la hero e' stata scrollata via, l'header si stacca e va fisso;
   - is-solid: la pagina non ha una hero fotografica (area riservata, grazie).
     Li' il testo bianco su fondo calce era illeggibile fin dal primo pixel.
     Sticky, non fixed: senza flusso l'header coprirebbe l'inizio della pagina. */
.mcs-header.is-stuck,
.mcs-header.is-solid {
  background: rgba(255,255,255,.97);
  color: var(--mcs-ink);
  box-shadow: 0 1px 0 var(--mcs-line);
  backdrop-filter: saturate(1.1) blur(6px);
}
.mcs-header.is-stuck { position: fixed; }
.mcs-header.is-solid { position: sticky; }
.mcs-header.is-stuck .mcs-btn--light,
.mcs-header.is-solid .mcs-btn--light { border-color: var(--mcs-line-strong); color: var(--mcs-ink); }
.mcs-header.is-stuck .mcs-btn--light:hover,
.mcs-header.is-solid .mcs-btn--light:hover { background: var(--mcs-ink); border-color: var(--mcs-ink); color: #fff; }
/* La ricerca sull'header opaco: si riscrivono i tre token e basta, perche' il
   componente non nomina un colore da nessun'altra parte. Inchiostro al posto
   del bianco, fondo calce, bordo grigio chiaro: gli stessi valori che avevano
   qui il vecchio bottone e il campo. */
.mcs-header.is-stuck .mcs-search--seek,
.mcs-header.is-solid .mcs-search--seek {
  --ink-rgb: 35, 38, 42;
  --pane: var(--mcs-bg);
  --pane-edge: var(--mcs-line-strong);
}
/* L'hover non ha bisogno di una riga propria sull'header opaco: il bordo netto
   lo ricava da --ink-rgb, che qui sopra e' gia' inchiostro. */
/* A campo aperto il fondo va bianco pieno: il calce va bene per un quadrato di
   42px, sotto una riga di testo che si sta scrivendo no. */
.mcs-header.is-stuck .mcs-search--seek[data-open="true"],
.mcs-header.is-solid .mcs-search--seek[data-open="true"] {
  --pane: #fff;
  --pane-edge: var(--mcs-ink);
}
/* Sopra fondo chiaro l'anello di focus bianco sparisce: torna al verderame. */
.mcs-header.is-solid :focus-visible { outline-color: var(--mcs-aqua-deep); }
/* Col pannello aperto l'header e' comunque su fondo bianco: il testo bianco
   sopra la hero sparirebbe contro il pannello. */
.mcs-header.has-mega-open {
  background: var(--mcs-surface);
  color: var(--mcs-ink);
}
.mcs-header.has-mega-open .mcs-btn--light { border-color: var(--mcs-line-strong); color: var(--mcs-ink); }
.mcs-header.has-mega-open .mcs-search--seek {
  --ink-rgb: 35, 38, 42;
  --pane: var(--mcs-bg);
  --pane-edge: var(--mcs-line-strong);
}

/* Burger: e' un <button>, non un <div> — o il menu resta irraggiungibile da tastiera */

/* Scelta lingua: quadrato col codice, stessa misura del burger. */
.mcs-lang { position: relative; flex: none; }
.mcs-lang__btn {
  width: 42px; height: 42px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-family: var(--mcs-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  display: inline-flex; align-items: center; justify-content: center;
}
.mcs-lang__btn[aria-expanded="true"], .mcs-lang__btn:hover { background: rgba(255,255,255,.12); }
.mcs-header.is-stuck .mcs-lang__btn:hover, .mcs-header.is-solid .mcs-lang__btn:hover,
.mcs-header.is-stuck .mcs-lang__btn[aria-expanded="true"], .mcs-header.is-solid .mcs-lang__btn[aria-expanded="true"] { background: var(--mcs-surface, #f2f1ee); }
.mcs-lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  margin: 0; padding: 4px 0; list-style: none; min-width: 64px;
  background: #fff; color: var(--mcs-ink);
  border: 1px solid var(--mcs-line-strong);
  box-shadow: 0 12px 30px rgba(16,22,28,.12);
  z-index: 40;
}
.mcs-lang__menu a { display: block; padding: 8px 14px; font-size: 0.8125rem; letter-spacing: .08em; text-decoration: none; }
.mcs-lang__menu a:hover, .mcs-lang__menu a[aria-current="true"] { background: var(--mcs-surface, #f2f1ee); }

.mcs-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.mcs-burger span { display: block; width: 20px; height: 1px; background: currentColor; position: relative; }
.mcs-burger span::before, .mcs-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
}
.mcs-burger span::before { top: -6px; }
.mcs-burger span::after { top: 6px; }

/* --- Menu mobile -------------------------------------------------------
   Da chiuso visibility:hidden — opacity/transform da soli lasciano i link nel
   tab order dentro un aria-hidden (violazione axe aria-hidden-focus). */
.mcs-mobilenav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--mcs-surface);
  color: var(--mcs-ink);
  padding: 96px var(--mcs-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s var(--mcs-ease), transform .35s var(--mcs-ease), visibility 0s linear .35s;
}
.mcs-mobilenav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--mcs-ease), transform .35s var(--mcs-ease), visibility 0s;
}
.mcs-mobilenav__search { margin-bottom: 22px; }
.mcs-mobilenav__search .mcs-search__field { border-color: var(--mcs-line-strong); background: var(--mcs-bg); }
.mcs-mobilenav__search input { width: 100%; }
.mcs-mobilenav__search .mcs-search { display: block; }
.mcs-mobilenav__search .mcs-search__results { right: auto; left: 0; width: 100%; }

.mcs-mobilenav__group { border-bottom: 1px solid var(--mcs-line); }
.mcs-mobilenav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--mcs-font-display);
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-decoration: none;
  padding: 15px 0;
}
.mcs-mobilenav__top .mcs-nav__chev { transition: transform .3s var(--mcs-ease); }
.mcs-mobilenav__group.is-open .mcs-nav__chev { transform: rotate(180deg); }
.mcs-mobilenav__sub { padding: 0 0 16px; }
.mcs-mobilenav__sub[hidden] { display: none; }
.mcs-mobilenav__sub h4 {
  font-family: var(--mcs-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mcs-ink-2);
  margin: 14px 0 6px;
}
.mcs-mobilenav__sub a { display: block; font-size: 0.9375rem; color: var(--mcs-ink-2); text-decoration: none; padding-block: 7px; }
.mcs-mobilenav__brand { position: absolute; top: 18px; left: var(--mcs-gutter); }
.mcs-mobilenav__brand img { height: 42px; width: auto; }
.mcs-mobilenav__close {
  position: absolute;
  top: 20px; right: var(--mcs-gutter);
  width: 42px; height: 42px;
  border: 1px solid var(--mcs-line-strong);
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.mcs-mobilenav__foot { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1280px) {
  .mcs-header__nav { display: none; }
  .mcs-burger { display: inline-flex; }
  .mcs-search { display: none; }
}
@media (max-width: 1080px) {
  /* Sotto i 1080 il pannello beige occupa tutta la riga: niente rientro,
     o resterebbe una fetta bianca senza senso. */
  :root { --mcs-edge-strip: 0px; --mcs-header-h: 88px; }
}
@media (max-width: 720px) {
  .mcs-header__band .mcs-btn { display: none; }
}

/* --- Footer -------------------------------------------------------------
   Richiesta cliente: marchio grande col pay off, icone social, piu' curato.
   Il marchio sta nella prima colonna e cresce fino a 128px: e' la firma della
   banda, non un logo di servizio. */
.mcs-footer { background: var(--mcs-dark); color: var(--mcs-ink-on-dark); padding-block: clamp(56px, 7vw, 100px) 28px; }
.mcs-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 2.1fr;
  gap: clamp(36px, 5vw, 90px);
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mcs-footer__brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.mcs-footer__logo img { height: clamp(110px, 11vw, 156px); width: auto; }
.mcs-footer__payoff {
  font-family: var(--mcs-font-display);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 18ch;
  color: var(--mcs-ink-on-dark);
}

/* Recapiti sotto il marchio: dal 31/08 sono quelli della lettera ai nuovi
   clienti, non piu' tre numeri di vetrina. Il valore e' un numero lungo, non
   una cifra sola, quindi ogni voce sta su due righe e la riga va a capo.
   Queste regole erano finite dentro il blocco del pay off, dove la
   nidificazione CSS le leggeva come .mcs-footer__payoff .mcs-footer__facts:
   un selettore che non esiste in pagina, e infatti restava il pallino della
   lista e il valore si incollava all'etichetta. */
.mcs-footer__facts {
  list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: clamp(16px, 1.8vw, 22px) 0 0;
  border-top: 1px solid rgba(242, 241, 238, .18);
  display: grid; gap: clamp(12px, 1.4vw, 18px);
}
.mcs-footer__facts li { display: flex; flex-direction: column; gap: 2px; }
.mcs-footer__facts strong {
  font-family: var(--mcs-font-display); font-weight: 300;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.1; letter-spacing: -0.02em;
}
.mcs-footer__facts span { font-size: .8125rem; line-height: 1.4; opacity: .72; }
.mcs-footer__social { display: flex; gap: 10px; flex-wrap: wrap; }
.mcs-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.22);
  color: inherit;
  transition: background .3s var(--mcs-ease), color .3s var(--mcs-ease), border-color .3s var(--mcs-ease);
}
.mcs-footer__social a:hover { background: #fff; border-color: #fff; color: var(--mcs-dark); }

.mcs-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: clamp(24px, 3vw, 44px); }
.mcs-footer__cols h4 { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; font-family: var(--mcs-font-body); font-weight: 500; margin-bottom: 14px; }
.mcs-footer__cols a, .mcs-footer__cols p { display: block; font-size: 0.875rem; text-decoration: none; opacity: .82; padding-block: 5px; }
.mcs-footer__cols a:hover { opacity: 1; }
.mcs-footer__sedi { display: flex; flex-direction: column; gap: 16px; }
.mcs-footer__sede strong { display: block; font-weight: 500; font-size: 0.8125rem; letter-spacing: .04em; opacity: .95; }
.mcs-footer__sede p { padding-block: 2px; opacity: .72; }

.mcs-footer__certs {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  padding-block: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mcs-footer__certs img { height: 34px; width: auto; opacity: .78; filter: grayscale(1) brightness(2.4); }
.mcs-footer__certs span { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5; }

.mcs-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 24px; font-size: 0.8125rem; opacity: .7; }
.mcs-footer__legal a { text-decoration: none; opacity: .82; }
.mcs-footer__legal a:hover { opacity: 1; }
.mcs-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07);
}
.mcs-footer__bottom span { font-size: 0.75rem; opacity: .55; }
.mcs-footer__bottom img { height: 56px; width: auto; }
@media (max-width: 980px) {
  .mcs-footer__top { grid-template-columns: 1fr; }
  .mcs-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Ancore e skip link ------------------------------------------------- */
[id] { scroll-margin-top: calc(var(--mcs-header-h) + 16px); }
.mcs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mcs-ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 0.8125rem;
  text-decoration: none;
}
.mcs-skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   CATALOGO SISTEMI — lista e scheda
   Le pagine delle collection non passano dai block: sono due template propri
   (sistemi-list.html, sistemi-detail.html) serviti dal middleware. Riusano
   token, contenitore e bottoni del resto del sito, e aggiungono solo cio' che
   qui non esisteva: la barra dei filtri, la card di sistema e la tabella dati.
   ========================================================================== */

.mcs-crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 0.8125rem; letter-spacing: .02em; color: var(--mcs-ink-2);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}
.mcs-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mcs-line-strong); }
.mcs-crumb a:hover { color: var(--mcs-aqua-deep); border-bottom-color: currentColor; }
.mcs-crumb span[aria-hidden] { color: var(--mcs-line-strong); }
.mcs-crumb [aria-current] { color: var(--mcs-ink); }

/* --- Testata della lista ------------------------------------------------- */
.mcs-cathead { padding: clamp(40px, 5vw, 76px) 0 clamp(32px, 4vw, 56px); }
.mcs-cathead__title { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; margin: 0 0 clamp(16px, 1.8vw, 26px); }
.mcs-cathead__lead { max-width: 62ch; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.72; color: var(--mcs-ink-2); margin: 0; }
/* Massimi di gamma: erano una fascia della home, il cliente li ha voluti dove
   si sceglie il sistema (31/08). Filetto verticale come la striscia metriche. */
.mcs-cathead__specs {
  list-style: none; margin: clamp(26px, 3vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(18px, 2vw, 26px) 0;
}
.mcs-cathead__specs li {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px; align-items: start;
  padding-inline: clamp(14px, 1.6vw, 26px); border-left: 1px solid var(--mcs-line);
}
.mcs-cathead__specs li:first-child { border-left: 0; padding-inline-start: 0; }
.mcs-cathead__specs img { grid-row: 1 / span 2; width: 34px; height: 34px; }
.mcs-cathead__specs strong { font-size: 1rem; line-height: 1.35; }
.mcs-cathead__specs span { font-size: .8125rem; line-height: 1.5; color: var(--mcs-ink-2); }
@media (max-width: 640px) {
  .mcs-cathead__specs li { border-left: 0; padding-inline: 0; }
}

/* --- Barra filtri --------------------------------------------------------
   Form GET: funziona a JavaScript spento e ogni combinazione ha il suo
   indirizzo. Il middleware filtra lato server e rimette checked/selected. */
.mcs-catfilter { border-block: 1px solid var(--mcs-line); background: var(--mcs-surface); padding-block: clamp(18px, 2vw, 26px); }
.mcs-catfilter__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(14px, 1.8vw, 30px); }
.mcs-catfilter__field { display: flex; flex-direction: column; gap: 7px; }
.mcs-catfilter__label {
  font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mcs-ink-2);
}
.mcs-select { position: relative; display: inline-flex; align-items: center; }
.mcs-select select {
  appearance: none; height: 42px; padding: 0 38px 0 13px;
  border: 1px solid var(--mcs-line-strong); background: var(--mcs-bg); color: inherit;
  font-family: var(--mcs-font-body); font-size: 0.8125rem; letter-spacing: .02em;
  min-width: 190px; cursor: pointer;
}
.mcs-select select:focus-visible { outline: 2px solid var(--mcs-aqua-deep); outline-offset: 2px; }
.mcs-select svg { position: absolute; right: 13px; pointer-events: none; opacity: .7; }
.mcs-catfilter__range { display: inline-flex; align-items: center; gap: 9px; }
.mcs-catfilter__range input {
  height: 42px; width: 96px; padding: 0 12px;
  border: 1px solid var(--mcs-line-strong); background: var(--mcs-bg); color: inherit;
  font-family: var(--mcs-font-body); font-size: 0.8125rem;
}
.mcs-catfilter__unit { font-size: 0.8125rem; color: var(--mcs-ink-2); }
.mcs-catfilter__reset { align-self: center; font-size: 0.8125rem; color: var(--mcs-ink-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.mcs-catfilter__reset:hover { color: var(--mcs-ink); }
.mcs-catfilter__apps { margin-top: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 10px; }

.mcs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mcs-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
/* L'input resta focusabile: sparisce alla vista, non alla tastiera. */
.mcs-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mcs-chip > span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--mcs-line-strong);
  font-size: 0.8125rem; letter-spacing: .02em; color: var(--mcs-ink-2);
  transition: border-color .25s var(--mcs-ease), color .25s var(--mcs-ease), background .25s var(--mcs-ease);
}
.mcs-chip:hover > span { border-color: var(--mcs-ink); color: var(--mcs-ink); }
.mcs-chip input:checked + span { background: var(--mcs-ink); border-color: var(--mcs-ink); color: #fff; }
.mcs-chip input:focus-visible + span { outline: 2px solid var(--mcs-aqua-deep); outline-offset: 2px; }
/* Conteggio di faccetta: lo scrive il middleware. Vuoto resta invisibile. */
.mcs-chip__n { font-weight: 400; font-size: 0.6875rem; opacity: .65; }
.mcs-chip__n:empty { display: none; }

/* --- Griglia dei sistemi -------------------------------------------------- */
.mcs-catlist { padding-block: clamp(40px, 5vw, 76px); }
.mcs-catgrid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  background: var(--mcs-line);
  border: 1px solid var(--mcs-line);
}
.mcs-syscard {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(16px, 1.6vw, 24px);
  background: var(--mcs-surface); color: inherit; text-decoration: none;
  transition: background .3s var(--mcs-ease);
}
.mcs-syscard:hover { background: var(--mcs-bg); }
.mcs-syscard__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--mcs-line); }
.mcs-syscard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--mcs-ease); }
.mcs-syscard:hover .mcs-syscard__media img { transform: scale(1.04); }
.mcs-syscard__line {
  font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mcs-aqua-deep);
  margin-top: 6px;
}
.mcs-syscard__name { font-family: var(--mcs-font-display); font-weight: 300; font-size: 1.3rem; letter-spacing: -.02em; }
.mcs-syscard__spec { font-size: 0.875rem; line-height: 1.6; color: var(--mcs-ink-2); }
.mcs-syscard__go {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; letter-spacing: .04em; color: var(--mcs-ink);
}
.mcs-syscard__go svg { transition: transform .3s var(--mcs-ease); }
.mcs-syscard:hover .mcs-syscard__go svg { transform: translateX(4px); }

/* Il middleware svuota il contenitore quando non c'e' nessun risultato:
   il messaggio si accende da CSS, senza JavaScript. */
.mcs-catempty { display: none; padding: clamp(30px, 4vw, 56px) 0; color: var(--mcs-ink-2); }
.mcs-catgrid:empty { display: none; }
.mcs-catgrid:empty + .mcs-catempty { display: block; }
.mcs-catempty a { color: var(--mcs-ink); }

.mcs-catcta { background: var(--mcs-surface); border-top: 1px solid var(--mcs-line); padding-block: clamp(48px, 6vw, 92px); }
.mcs-catcta h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin: 0 0 14px; }
.mcs-catcta p { max-width: 58ch; color: var(--mcs-ink-2); line-height: 1.72; margin: 0 0 26px; }

/* --- Scheda del sistema --------------------------------------------------- */
.mcs-syshead { padding: clamp(34px, 4vw, 62px) 0 clamp(36px, 4.4vw, 64px); }
.mcs-syshead__grid { display: grid; gap: clamp(26px, 3.4vw, 58px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .mcs-syshead__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.mcs-syshead__line { display: block; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mcs-aqua-deep); margin-bottom: 12px; }
.mcs-syshead__title { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; margin: 0 0 clamp(14px, 1.6vw, 22px); }
.mcs-syshead__lead { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.72; color: var(--mcs-ink-2); margin: 0 0 clamp(22px, 2.4vw, 32px); max-width: 52ch; }
.mcs-syshead__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mcs-line); }
.mcs-syshead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mcs-sysspec { background: var(--mcs-surface); border-block: 1px solid var(--mcs-line); padding-block: clamp(44px, 5.4vw, 82px); }
.mcs-sysspec__title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 10px; }
.mcs-sysspec__note { font-size: 0.875rem; color: var(--mcs-ink-2); margin: 0 0 clamp(24px, 2.8vw, 38px); max-width: 62ch; }
.mcs-spectable { margin: 0; }
/* Le righe vuote le nasconde il middleware con [hidden]: la regola serve
   perche' `display:grid` batterebbe `hidden`, che vale solo su display:none. */
.mcs-specrow[hidden] { display: none; }
.mcs-specrow {
  display: grid; gap: 6px clamp(20px, 3vw, 48px);
  grid-template-columns: 1fr; align-items: baseline;
  padding-block: clamp(13px, 1.4vw, 18px);
  border-top: 1px solid var(--mcs-line);
}
.mcs-specrow:last-child { border-bottom: 1px solid var(--mcs-line); }
@media (min-width: 720px) { .mcs-specrow { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.mcs-specrow dt { font-size: 0.8125rem; letter-spacing: .02em; color: var(--mcs-ink-2); }
.mcs-specrow dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

.mcs-sysbody { padding-block: clamp(44px, 5.4vw, 82px); }
.mcs-sysbody[hidden] { display: none; }
.mcs-richtext { max-width: 68ch; }
.mcs-richtext p { font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.78; color: var(--mcs-ink-2); margin: 0 0 1.1em; }
.mcs-richtext strong { color: var(--mcs-ink); font-weight: 500; }
.mcs-richtext em { font-style: italic; }
/* Elenchi dentro la scheda di un sistema: servono da quando il cliente scrive
   le configurazioni una per riga (Pocket Glass, round 19). Senza queste regole
   il browser stampa i pallini con il rientro suo e il testo non si allinea al
   paragrafo che li introduce. */
.mcs-richtext ul { margin: 0 0 1.1em; padding-left: 1.15em; list-style: none; }
.mcs-richtext li {
  position: relative;
  font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.78; color: var(--mcs-ink-2);
  margin-bottom: .5em;
}
.mcs-richtext li::before {
  content: ""; position: absolute; left: -1.15em; top: .78em;
  width: 6px; height: 1px; background: var(--mcs-aqua-deep);
}
.mcs-richtext li:last-child { margin-bottom: 0; }

.mcs-sysgal { padding-bottom: clamp(44px, 5.4vw, 82px); }
.mcs-sysgal[hidden], .mcs-sysdl[hidden], .mcs-sysvideo[hidden] { display: none; }
.mcs-sysgal h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 clamp(20px, 2.4vw, 32px); }
.mcs-sysgal__grid { display: grid; gap: clamp(10px, 1.2vw, 18px); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.mcs-sysgal__item { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mcs-line); }
.mcs-sysgal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mcs-sysdl { padding-bottom: clamp(44px, 5.4vw, 82px); }
.mcs-sysdl h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 clamp(16px, 2vw, 26px); }
.mcs-sysdl__list { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.mcs-sysdl__list li { border-top: 1px solid var(--mcs-line); }
.mcs-sysdl__list li:last-child { border-bottom: 1px solid var(--mcs-line); }
.mcs-sysdl__list a { display: block; padding: 15px 0; font-size: 0.9375rem; color: inherit; text-decoration: none; }
.mcs-sysdl__list a:hover { color: var(--mcs-aqua-deep); }

.mcs-sysvideo { padding-bottom: clamp(44px, 5.4vw, 82px); }
.mcs-sysvideo__link { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--mcs-ink); text-decoration: none; border-bottom: 1px solid var(--mcs-line-strong); padding-bottom: 4px; }
.mcs-sysvideo__link:hover { border-bottom-color: currentColor; }

/* --- Richiesta di preventivo --------------------------------------------- */
.mcs-syslead { background: var(--mcs-ink); color: var(--mcs-ink-on-dark); padding-block: clamp(48px, 6vw, 96px); }
.mcs-syslead__grid { display: grid; gap: clamp(28px, 3.4vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .mcs-syslead__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.mcs-syslead h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin: 0 0 14px; }
.mcs-syslead p { color: rgba(242, 241, 238, .72); line-height: 1.72; margin: 0; max-width: 46ch; }
.mcs-form { display: flex; flex-direction: column; gap: 16px; }
.mcs-form__field { display: flex; flex-direction: column; gap: 7px; }
.mcs-form__field label { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(242, 241, 238, .6); }
.mcs-form__field input, .mcs-form__field textarea {
  padding: 13px 15px; border: 1px solid rgba(242, 241, 238, .22);
  background: rgba(255, 255, 255, .04); color: var(--mcs-ink-on-dark);
  font-family: var(--mcs-font-body); font-size: 0.9375rem;
}
.mcs-form__field input:focus-visible, .mcs-form__field textarea:focus-visible { outline: 2px solid var(--mcs-aqua); outline-offset: 1px; }
.mcs-form__check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: rgba(242, 241, 238, .72); }
.mcs-form__check input { margin-top: 3px; flex: none; }
.mcs-form__check a { color: var(--mcs-aqua); }
.mcs-syslead .mcs-btn--solid { align-self: flex-start; background: var(--mcs-aqua); border-color: var(--mcs-aqua); color: var(--mcs-ink); }
.mcs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mcs-form__ok { display: none; }
.mcs-form__ok.is-on { display: block; }

/* --- Iscrizione agli aggiornamenti nel footer ---------------------------
   Dal 04/09 sta in una fascia propria sotto le colonne, non piu' nella
   colonna del marchio: la' allungava la colonna e il campo email restava
   stretto. Titolo e testo a sinistra, campo e bottone a destra, sulla
   stessa riga; sotto i 900px la fascia torna a una colonna. */
.mcs-footer__nl {
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mcs-nlform {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 12px clamp(32px, 5vw, 90px);
  align-items: center;
}
.mcs-nlform__title { grid-column: 1; margin: 0 0 6px; font-family: var(--mcs-font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mcs-ink-on-dark); opacity: .72; }
.mcs-nlform__text { grid-column: 1; margin: 0; font-size: .875rem; line-height: 1.55; opacity: .72; max-width: 62ch; }
.mcs-nlform__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mcs-nlform__row { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap; }
.mcs-nlform__row input {
  flex: 1 1 200px; min-width: 0; height: 44px; padding: 0 14px;
  font: inherit; font-size: .875rem; color: var(--mcs-ink-on-dark);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); border-radius: 3px;
}
.mcs-nlform__row input::placeholder { color: rgba(242,241,238,.45); }
.mcs-nlform__row input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mcs-nlform__row .mcs-btn { flex: none; height: 44px; }
.mcs-nlform .cf-turnstile { grid-column: 2; }
/* Casella di consenso, non una postilla: un consenso al buio non e' un
   consenso, quindi qui niente opacity da nota a pie' di pagina. Il bersaglio
   e' la casella piu' l'etichetta, e il link all'informativa resta sottolineato
   su fondo scuro. */
.mcs-nlform__consent {
  grid-column: 2; margin: 0; max-width: 52ch;
  display: flex; align-items: flex-start; gap: 10px;
}
.mcs-nlform__consent input[type="checkbox"] {
  flex: none; width: 17px; height: 17px; margin: 2px 0 0;
  accent-color: var(--mcs-aqua-deep);
  /* Qui c'erano un bordo bianco al 40% e un raggio di 2px. Non hanno mai
     disegnato niente: la casella resta `appearance: auto`, e su un controllo
     nativo il browser scarta bordo e raggio dell'autore — computati `none` e
     `0px`, verificati. A tingerla e' `accent-color`, ed e' l'unica cosa che
     fa. Un 2px fuori dalla scala del sistema segnalava un difetto che non
     esisteva, e portarlo a 3px avrebbe solo spostato la bugia. Per darle
     davvero un bordo servirebbe `appearance: none` e ridisegnare la spunta. */
  cursor: pointer;
}
.mcs-nlform__consent input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mcs-nlform__consent label {
  font-size: .75rem; line-height: 1.55; color: var(--mcs-ink-on-dark); opacity: .78;
  cursor: pointer;
}
.mcs-nlform__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mcs-nlform__consent a:hover { opacity: 1; }
.mcs-nlform__msg { grid-column: 2; margin: 0; font-size: .8125rem; line-height: 1.5; }
@media (max-width: 900px) {
  .mcs-nlform { grid-template-columns: 1fr; }
  .mcs-nlform__row, .mcs-nlform .cf-turnstile, .mcs-nlform__consent, .mcs-nlform__msg { grid-column: 1; grid-row: auto; }
}

/* === SFOGLIATORE DEL CATALOGO (/catalogo) ===============================
   Una doppia per volta sopra i 900px, una pagina sola sotto. Le pagine sono
   webp su R2 e non il PDF: 22 MB prima di vedere la copertina sono una porta
   chiusa, soprattutto da telefono.
   Il fondo e' scuro perche' le pagine sono bianche: e' il tavolo su cui sta
   il catalogo, e fa risaltare la carta invece di confonderla col sito. */
.mcs-reader {
  --reader-bar: 54px;
  --reader-foot: 56px;
  --reader-pad: clamp(20px, 3.2vw, 56px);
  display: grid;
  grid-template-rows: var(--reader-bar) 1fr var(--reader-foot);
  height: calc(100dvh - var(--mcs-header-h));
  background: var(--mcs-dark);
  color: var(--mcs-ink-on-dark);
  position: relative;
  overflow: hidden;
}

.mcs-reader__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-inline: var(--mcs-gutter);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mcs-reader__id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mcs-reader__back {
  display: inline-flex; align-items: center; gap: 7px;
  color: inherit; text-decoration: none; opacity: .72;
  font-size: .8125rem; letter-spacing: .04em;
  transition: opacity .25s var(--mcs-ease);
}
.mcs-reader__back:hover { opacity: 1; }
.mcs-reader__titolo {
  font-family: var(--mcs-font-display); font-weight: 300;
  font-size: 1rem; letter-spacing: .01em;
  padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcs-reader__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.mcs-reader__tool {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent; color: inherit;
  font-family: var(--mcs-font-body); font-size: .75rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--mcs-ease), border-color .25s var(--mcs-ease);
}
.mcs-reader__tool:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.mcs-reader__tool[aria-expanded="true"] { background: #fff; border-color: #fff; color: var(--mcs-dark); }

/* --- la doppia --------------------------------------------------------- */
.mcs-reader__stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: calc(var(--reader-pad) / 2) clamp(48px, 6vw, 104px);
}
.mcs-reader__spread {
  display: flex; align-items: center; justify-content: center;
  gap: 1px; max-width: 100%; max-height: 100%;
}
.mcs-reader__pagina {
  padding: 0; border: 0; margin: 0; line-height: 0; min-width: 0;
  background: #fff; cursor: zoom-in;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
}
.mcs-reader__pagina img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100dvh - var(--mcs-header-h) - var(--reader-bar) - var(--reader-foot) - var(--reader-pad));
}
.mcs-reader__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 88px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05); color: inherit;
  cursor: pointer;
  transition: background .25s var(--mcs-ease), border-color .25s var(--mcs-ease), opacity .25s var(--mcs-ease);
}
.mcs-reader__nav:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.mcs-reader__nav:disabled { opacity: .22; cursor: default; }
.mcs-reader__nav--prev { left: clamp(6px, 1vw, 22px); }
.mcs-reader__nav--next { right: clamp(6px, 1vw, 22px); }

/* --- piede: cursore di scorrimento e conteggio ------------------------- */
.mcs-reader__foot {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
  padding-inline: var(--mcs-gutter);
  border-top: 1px solid rgba(255,255,255,.12);
}
.mcs-reader__slider {
  flex: 1 1 auto; min-width: 0; height: 2px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.22); cursor: pointer;
}
.mcs-reader__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--mcs-aqua); border: 0; cursor: grab;
}
.mcs-reader__slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--mcs-aqua); border: 0; cursor: grab;
}
.mcs-reader__slider:focus-visible { outline: 2px solid var(--mcs-aqua); outline-offset: 6px; }
.mcs-reader__conta {
  flex: none; font-size: .8125rem; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; opacity: .78;
}

/* --- indice: tutte le pagine in miniatura ------------------------------ */
.mcs-reader__indice {
  position: absolute; inset: 0; z-index: 20;
  display: grid; grid-template-rows: var(--reader-bar) 1fr;
  /* Pieno, non quasi: al 98% la barra del lettore trapelava da sotto e si
     leggevano due intestazioni sovrapposte. */
  background: var(--mcs-dark);
}
.mcs-reader__indice[hidden] { display: none; }
.mcs-reader__indice-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--mcs-gutter);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}
.mcs-reader__chiudi {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: inherit;
  cursor: pointer;
}
.mcs-reader__chiudi:hover { background: rgba(255,255,255,.12); }
.mcs-reader__griglia {
  overflow: auto;
  padding: clamp(18px, 2.4vw, 34px) var(--mcs-gutter);
  display: grid; gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  align-content: start;
}
.mcs-reader__mini {
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; gap: 6px; justify-items: center;
}
.mcs-reader__mini img {
  display: block; width: 100%; height: auto; background: #fff;
  outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px;
  transition: outline-color .2s var(--mcs-ease);
}
.mcs-reader__mini span { font-size: .6875rem; opacity: .6; font-variant-numeric: tabular-nums; }
.mcs-reader__mini:hover img { outline-color: rgba(255,255,255,.55); }
.mcs-reader__mini[aria-current="true"] img { outline: 2px solid var(--mcs-aqua); outline-offset: -2px; }
.mcs-reader__mini[aria-current="true"] span { opacity: 1; color: var(--mcs-aqua); }

/* --- lente: la pagina alla sua misura ---------------------------------- */
.mcs-reader__lente {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: var(--reader-bar, 54px) 1fr;
  /* Copre tutta la finestra, header del sito compreso: la lente serve a
     guardare una pagina sola, e qualunque cosa trasparisca la disturba. */
  background: #101214;
  color: var(--mcs-ink-on-dark);
}
.mcs-reader__lente[hidden] { display: none; }
.mcs-reader__lente-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--mcs-gutter);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem; letter-spacing: .06em; opacity: .85;
}
.mcs-reader__lente-box {
  overflow: auto; padding: clamp(14px, 2vw, 30px);
  display: grid; place-items: start center;
  cursor: grab; touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}
.mcs-reader__lente-box.is-drag { cursor: grabbing; }
.mcs-reader__lente-box img {
  display: block; width: 1241px; max-width: none; height: auto;
  background: #fff; user-select: none;
}

@media (max-width: 900px) {
  .mcs-reader { --reader-bar: 48px; --reader-foot: 50px; }
  .mcs-reader__titolo { display: none; }
  .mcs-reader__tool span { display: none; }
  .mcs-reader__stage { padding-inline: 8px; }
  /* Sul telefono le frecce coprirebbero mezza pagina: si scorre con il dito,
     e il cursore in basso resta per i salti lunghi. */
  .mcs-reader__nav { display: none; }
  .mcs-reader__griglia { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  /* La pagina ingrandita si adatta alla larghezza: a 1241px su uno schermo da
     390 si vedrebbe un terzo di riga e si trascinerebbe alla cieca. */
  .mcs-reader__lente-box img { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mcs-reader__tool, .mcs-reader__nav, .mcs-reader__back, .mcs-reader__mini img { transition: none; }
}

/* --- Round del 05/10: foto dei sistemi piu' grandi ------------------------
   Chiesto da Francesca il 29/09, l'1/10 e il 02/10. Elenco a tre colonne al
   massimo (prima quattro), foto 4:3; nella scheda la foto passa sopra al
   testo a tutta larghezza, e la galleria va a due colonne. */
.mcs-catgrid { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.mcs-syscard__media { aspect-ratio: 4 / 3; }
.mcs-syscard__name { font-size: clamp(1.4rem, 1.8vw, 1.75rem); }
.mcs-syscard__spec { font-size: 0.9375rem; }
@media (min-width: 900px) {
  .mcs-syshead__grid { grid-template-columns: 1fr; }
  .mcs-syshead__media { order: 2; aspect-ratio: 16 / 9; }
}
.mcs-sysgal__grid { grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.mcs-sysgal__item { aspect-ratio: 4 / 3; }
/* 05/10: i massimi di gamma sotto la griglia. Testata piu' corta, cosi' le
   foto arrivano nel primo schermo. */
.mcs-catinfo { padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--mcs-line); }
.mcs-catinfo .mcs-cathead__specs { margin-top: 0; }
.mcs-cathead { padding-bottom: clamp(24px, 3vw, 40px); }
.mcs-catinfo .mcs-cathead__lead { margin: 0 0 clamp(28px, 3vw, 44px); }
/* Scheda sistema: foto prima, nome e informazioni a seguire (Francesca, 02/10). */
.mcs-syshead__media { order: -1; }
@media (min-width: 900px) { .mcs-syshead__media { order: -1; } }

/* Pagina Sistemi, 06/10: le foto devono stare nella prima schermata anche su
   uno schermo largo. Testata compatta, filtri su una riga, tre schede per riga. */
.mcs-cathead { padding: clamp(22px, 2.6vw, 40px) 0 clamp(16px, 2vw, 26px); }
.mcs-cathead .mcs-crumb { margin-bottom: clamp(10px, 1.2vw, 16px); }
.mcs-cathead__title { font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 0; }
.mcs-catfilter { padding-block: clamp(14px, 1.4vw, 20px); }
.mcs-catfilter .mcs-select select { min-width: 210px; }
.mcs-catlist { padding-block: clamp(24px, 2.6vw, 40px) clamp(40px, 5vw, 76px); }
@media (min-width: 640px) { .mcs-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mcs-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Con un filtro i risultati possono essere meno di tre: niente cella grigia. */
.mcs-catgrid { background: transparent; border: 0; gap: 0; }
.mcs-syscard { box-shadow: 0 0 0 1px var(--mcs-line); }
@media (max-width: 639px) {
  .mcs-catfilter__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mcs-catfilter .mcs-select, .mcs-catfilter .mcs-select select { width: 100%; min-width: 0; }
  .mcs-catfilter__range input { width: 70px; }
  .mcs-catfilter__reset { grid-column: 1 / -1; justify-self: start; }
}

/* --- Scheda sistema, 09/10/2026: galleria, descrizione lunga, Download ------
   Call con il cliente: foto piu' chiare o una galleria, la descrizione presa
   dal catalogo, due riquadri per scheda prodotto e scheda tecnica. Sopra i
   1000px galleria e testo stanno affiancati, cosi' il nome del sistema e le
   foto entrano insieme nella prima schermata. */
.mcs-syshead--gal .mcs-syshead__grid { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) {
  .mcs-syshead--gal .mcs-syshead__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.mcs-syshead--gal .mcs-syshead__media { order: 0; aspect-ratio: 4 / 3; }
.mcs-sysgal2:not([hidden]) ~ .mcs-syshead__media--single { display: none; }
.mcs-sysgal2[hidden] { display: none; }
.mcs-sysgal2__stage {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; background: var(--mcs-line); aspect-ratio: 4 / 3;
}
.mcs-sysgal2__stage::-webkit-scrollbar { display: none; }
.mcs-sysgal2__stage:focus-visible { outline: 2px solid var(--mcs-aqua-deep); outline-offset: 3px; }
.mcs-sysgal2__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.mcs-sysgal2__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcs-sysgal2__bar { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.mcs-sysgal2__nav {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--mcs-line-strong); background: var(--mcs-surface); color: var(--mcs-ink);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.mcs-sysgal2__nav:hover { border-color: var(--mcs-ink); }
.mcs-sysgal2__nav:focus-visible { outline: 2px solid var(--mcs-aqua-deep); outline-offset: 2px; }
.mcs-sysgal2__count { font-size: 0.8125rem; letter-spacing: .04em; color: var(--mcs-ink-2); min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
.mcs-sysgal2__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 12px; }
.mcs-sysgal2__thumb {
  padding: 0; border: 0; background: var(--mcs-line); aspect-ratio: 4 / 3; cursor: pointer;
  opacity: .55; transition: opacity .2s; outline-offset: 2px;
}
.mcs-sysgal2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcs-sysgal2__thumb:hover, .mcs-sysgal2__thumb[aria-current="true"] { opacity: 1; }
.mcs-sysgal2__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--mcs-aqua-deep); }
.mcs-sysgal2__thumb:focus-visible { outline: 2px solid var(--mcs-aqua-deep); }
.mcs-sysgal2.is-single .mcs-sysgal2__bar, .mcs-sysgal2.is-single .mcs-sysgal2__thumbs { display: none; }
@media (scripting: none) { .mcs-sysgal2__bar { display: none; } }
@media (max-width: 640px) { .mcs-sysgal2__thumbs { display: none; } }

.mcs-syshead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.mcs-syshead__dl {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--mcs-ink);
  text-decoration: none; border-bottom: 1px solid var(--mcs-line-strong); padding-bottom: 3px;
}
.mcs-syshead__dl:hover { border-bottom-color: currentColor; }
.mcs-syshead__dl[hidden] { display: none; }

/* Descrizione: titolo a sinistra, testo a destra sui grandi schermi. */
.mcs-sysbody { border-top: 1px solid var(--mcs-line); }
.mcs-sysbody__grid { display: grid; gap: clamp(14px, 2vw, 28px) clamp(26px, 3.4vw, 58px); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .mcs-sysbody__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.mcs-sysbody__title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }
.mcs-richtext h3 {
  font-family: var(--mcs-font-display); font-weight: 500; color: var(--mcs-ink);
  font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.3; margin: 1.9em 0 .6em;
}
.mcs-richtext > :first-child { margin-top: 0; }
@media (min-width: 1200px) { .mcs-richtext ul.mcs-cols { columns: 2; column-gap: 48px; } .mcs-richtext ul.mcs-cols li { break-inside: avoid; } }

/* Download: riquadri con la copertina del PDF e le righe con la freccia (round 36). */
.mcs-sysdocs { background: var(--mcs-surface); border-block: 1px solid var(--mcs-line); padding-block: clamp(44px, 5.4vw, 82px); }
.mcs-sysdocs:not(:has(.mcs-doccard:not([hidden]))) { display: none; }
.mcs-sysdocs__title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 clamp(20px, 2.4vw, 32px); }
.mcs-sysdocs__grid { display: grid; gap: clamp(14px, 1.6vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .mcs-sysdocs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mcs-doccard[hidden], .mcs-doccard__cover[hidden] { display: none; }
.mcs-doccard { display: grid; grid-template-columns: 1fr; border: 1px solid var(--mcs-line); background: var(--mcs-bg); }
@media (min-width: 640px) { .mcs-doccard { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.mcs-doccard__cover { display: grid; place-items: center; background: var(--mcs-line); padding: clamp(18px, 2.4vw, 34px); }
.mcs-doccard__cover img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 260px;
  box-shadow: 0 1px 2px rgba(35, 38, 42, .08), 0 10px 26px rgba(35, 38, 42, .14);
  transition: transform .3s;
}
.mcs-doccard__cover:hover img { transform: translateY(-3px); }
.mcs-doccard__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2.4vw, 34px); }
.mcs-doccard__kind { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mcs-aqua-deep); margin-bottom: 10px; }
.mcs-doccard__name { font-family: var(--mcs-font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.7rem); margin: 0 0 10px; }
.mcs-doccard__body p { color: var(--mcs-ink-2); line-height: 1.7; margin: 0 0 22px; max-width: 52ch; }
.mcs-doccard__body .mcs-btn { margin-top: auto; }
/* Riquadri a elenco (istruzioni e moduli d'ordine, round 34): niente copertina,
   una colonna sola, e i documenti come righe con filetto: un sistema puo'
   averne sei, e sei bottoni pieni peserebbero piu' del titolo. */
/* Con l'anteprima (15/10/2026) tornano due colonne come gli altri due riquadri;
   senza anteprima resta la colonna sola. */
.mcs-doccard--list:not(:has(> .mcs-doccard__cover:not([hidden]))) { grid-template-columns: 1fr; }
.mcs-doccard__files { list-style: none; margin: auto 0 0; padding: 0; width: 100%; border-top: 1px solid var(--mcs-line); }
.mcs-doccard__files li { border-bottom: 1px solid var(--mcs-line); }
.mcs-doccard__files a {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  color: var(--mcs-ink); font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: color .3s var(--mcs-ease);
}
.mcs-doccard__files a svg { flex: none; color: var(--mcs-ink); }
.mcs-doccard__files a:hover svg { color: var(--mcs-aqua-deep); }
.mcs-doccard__files a:hover { color: var(--mcs-aqua-deep); }
@media (prefers-reduced-motion: reduce) { .mcs-doccard__cover img { transition: none; } }
/* Punti di forza a quattro voci sul telefono: una colonna. La correzione vera
   sta in blocks/McsStrengths/styles.css, ma il CSS dei blocchi vive nel Worker
   comune e arriva col suo prossimo rilascio; questa copia piu' specifica vale
   da subito (13/10/2026). */
@media (max-width: 620px) {
  .mcs-strengths .mcs-strengths__grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}

/* 09/10 pomeriggio: la descrizione sta nella testata, sotto la sintesi. */
.mcs-syshead__desc { margin: 0 0 clamp(22px, 2.4vw, 32px); max-width: 62ch; }
.mcs-syshead__desc[hidden] { display: none; }
.mcs-syshead__desc p, .mcs-syshead__desc li { font-size: 0.9375rem; line-height: 1.72; }
.mcs-syshead--gal .mcs-syshead__lead { margin-bottom: clamp(14px, 1.6vw, 20px); }
.mcs-syshead--gal + .mcs-sysdocs { border-top: 1px solid var(--mcs-line); }
/* Pulsante pausa/riproduci dello scorrimento automatico della galleria. */
.mcs-sysgal2__play[hidden] { display: none; }
.mcs-sysgal2__play .i-play, .mcs-sysgal2__play.is-paused .i-pause { display: none; }
.mcs-sysgal2__play.is-paused .i-play { display: block; }

/* --- Mega menu Sistemi a due linee, 09/10/2026 ------------------------------
   Call con il cliente: sotto Sistemi solo Exterior e Interior, ognuna divisa
   in sezioni (Vetrate panoramiche, Porte intelaiate, Linea Bath...). Exterior
   prende una parte, Interior due, la nota dell'ufficio tecnico resta in coda. */
.mcs-mega__inner--lines { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(200px, .8fr); }
.mcs-mega__inner--lines .mcs-mega__note { grid-column: auto; }
.mcs-mega__inner--lines .mcs-mega__thumb { aspect-ratio: auto; height: clamp(96px, 8.5vw, 150px); }
.mcs-mega__sections { display: grid; gap: 18px clamp(20px, 2.2vw, 40px); grid-template-columns: 1fr; }
.mcs-mega__col:nth-child(2) .mcs-mega__sections { display: block; columns: 3; column-gap: clamp(20px, 2.2vw, 40px); }
.mcs-mega__col:nth-child(2) .mcs-mega__sec { break-inside: avoid; margin-bottom: 18px; }
.mcs-mega__sec { display: flex; flex-direction: column; min-width: 0; }
.mcs-mega__kicker { font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mcs-aqua-deep); margin-bottom: 4px; }
.mcs-mega__stitle {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mcs-ink); text-decoration: none; padding-bottom: 4px;
}
a.mcs-mega__stitle:hover { color: var(--mcs-aqua-deep); }
.mcs-mega__sec ul a { padding-block: 4px; }
@media (max-width: 1280px) {
  .mcs-mega__inner--lines { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .mcs-mega__inner--lines .mcs-mega__note { display: none; }
}
.mcs-mobilenav__sub h5 { font-size: 0.8125rem; font-weight: 500; color: var(--mcs-ink); margin: 12px 0 2px; }
.mcs-mobilenav__sub h5 a { color: inherit; padding: 0; font-size: inherit; }

/* Supporto: i punti elenco presi in carico da chrome-scripts diventano link
   al contatto del servizio (Francesca Biagini, 15/10/2026). */
.mcs-split__checklink { color: var(--mcs-ink); text-decoration: underline; text-decoration-color: var(--mcs-line-strong); text-underline-offset: 3px; transition: color .3s var(--mcs-ease), text-decoration-color .3s var(--mcs-ease); }
.mcs-split__checklink:hover { color: var(--mcs-aqua-deep); text-decoration-color: currentColor; }

/* Video del sistema: miniatura piccola, il lettore si apre in un dialog. */
.mcs-sysclip[hidden] { display: none; }
.mcs-sysclip { padding-block: clamp(44px, 5.4vw, 82px) 0; }
.mcs-sysclip__title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 clamp(16px, 2vw, 24px); }
.mcs-sysclip__thumb {
  position: relative; display: grid; width: min(100%, 380px); padding: 0; border: 1px solid var(--mcs-line);
  background: var(--mcs-surface); color: var(--mcs-ink); text-align: left; cursor: pointer; font: inherit;
}
.mcs-sysclip__media { position: relative; display: block; }
.mcs-sysclip__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mcs-sysclip__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--mcs-ink); box-shadow: 0 6px 20px rgba(35, 38, 42, .22);
  transition: transform .3s var(--mcs-ease);
}
.mcs-sysclip__play svg { margin-left: 3px; }
.mcs-sysclip__thumb:hover .mcs-sysclip__play { transform: translate(-50%, -50%) scale(1.08); }
.mcs-sysclip__thumb:focus-visible { outline: 2px solid var(--mcs-aqua-deep); outline-offset: 3px; }
.mcs-sysclip__label { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; font-size: .9375rem; font-weight: 500; }
.mcs-sysclip__label small { font-size: .8125rem; font-weight: 400; color: var(--mcs-aqua-deep); }
.mcs-sysclip__dialog { width: min(92vw, 1100px); padding: 0; border: 0; background: #000; overflow: visible; }
.mcs-sysclip__dialog::backdrop { background: rgba(20, 22, 25, .82); }
.mcs-sysclip__dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.mcs-sysclip__close {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 8px; display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mcs-surface); color: var(--mcs-ink); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .mcs-sysclip__play, .mcs-split__checklink { transition: none; } }

/* Telefono (15/10/2026). Le stesse due correzioni stanno nei CSS dei blocchi,
   ma quelli girano nel Worker comune e arrivano solo al suo prossimo rilascio:
   finche' non c'e', le tiene questo foglio.
   - Area riservata: la regola del 02/10 sulle due colonne, scritta dopo la
     media query, teneva il riquadro «Non hai ancora l'accesso» largo 118 px
     accanto al login, e la pagina scorreva di lato.
   - Numeri utili: la riga del centralino non andava a capo, usciva tagliata
     e spingeva il blocco 16 px fuori dallo schermo. */
@media (max-width: 900px) {
  .mcs-arealogin .mcs-arealogin__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .mcs-statement .mcs-statement__note { white-space: normal; flex: initial; max-width: 100%; }
}