/* ==========================================================================
   Pagina: Siti web (MT·WEB)
   Oggetto dell'hero: «il disegno tecnico del sito». Una tavola a linee sottili
   con quote e richiami che si costruisce fino a diventare la pagina finita;
   l'interruttore computer ↔ telefono la ricompone (GSAP Flip).
   Le quote misurano davvero il disegno: la geometria è in px esatti, in tre
   taglie della tavola, e lo script rilegge le misure dal disegno.
   Stato base = stato finale: senza JS e con movimento ridotto si vede la
   pagina finita, con quote e richiami. Gli stati di partenza li imposta lo script.
   ========================================================================== */

.page-siti-web {
  --web-wire: #8CC0E6;                    /* la matita della tavola: blu tempra */
  --web-wire-2: rgba(140, 192, 230, .58);
  --web-wire-3: rgba(140, 192, 230, .26);
  --web-ink-sheet: #141B20;               /* fondo della tavola */
  --web-label: #A9C8E0;
  /* il sito d'esempio: carta calda, inchiostro scuro, un verde acqua sobrio */
  --web-paper: #F5F2EB;
  --web-ink: #1F2B29;
  --web-ink-2: #56625F;
  --web-teal: #2F6B5E;
  --web-teal-soft: #DDE9E4;
  --web-rule: #E1DBCE;
}

/* ---------- Testata ---------- */
.web-hero h1 { font-size: clamp(2.4rem, 4.3vw, 4rem); }
.web-hero .page-hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.web-hero .page-hero__text { align-content: center; }
.web-hero .page-hero__object { min-height: 0; }

.web-ticks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--fg-2);
  font-size: var(--fs-small);
}
.web-ticks li { display: inline-flex; align-items: center; gap: 10px; }
.web-ticks li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  border-left: 1.6px solid var(--blu);
  border-bottom: 1.6px solid var(--blu);
  transform: translateY(-2px) rotate(-45deg);
}

@media (max-width: 1180px) {
  .web-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .web-hero .page-hero__text { max-width: 46rem; }
}
/* sui telefoni stretti il titolo resta su due righe, senza «online.» da solo */
@media (max-width: 420px) {
  .web-hero h1 { font-size: 9.2vw; }
}

/* ==========================================================================
   La tavola
   ========================================================================== */
.web-drawing {
  container: web / inline-size;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* inclinazione: proprietà registrate e non ereditate, così cambiarle a ogni movimento del mouse
   ricalcola solo la tavola e non tutto il disegno che contiene */
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.web-sheet {
  --rx: 0deg;
  --ry: 0deg;
  --pad: 18px;
  --sw: 560px; --sh: 432px;
  position: relative;
  isolation: isolate;
  /* larghezza esatta: la tavola più i margini, senza farsi allargare dal cartiglio */
  width: calc(var(--sw) + 2 * var(--pad));
  max-width: 100%;
  margin-inline: auto;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(140, 192, 230, .045) 1px, transparent 1px) -1px -1px / 12px 12px,
    linear-gradient(90deg, rgba(140, 192, 230, .045) 1px, transparent 1px) -1px -1px / 12px 12px,
    linear-gradient(rgba(140, 192, 230, .085) 1px, transparent 1px) -1px -1px / 60px 60px,
    linear-gradient(90deg, rgba(140, 192, 230, .085) 1px, transparent 1px) -1px -1px / 60px 60px,
    linear-gradient(180deg, #172027 0%, var(--web-ink-sheet) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(140, 192, 230, .16),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1px 0 rgba(0, 0, 0, .5),
    0 44px 80px -44px rgba(0, 0, 0, .9);
  transform: perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--ease-out);
}
/* filo interno della tavola */
.web-sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .1);
  pointer-events: none;
}
/* riflesso che segue il puntatore: il .light-spot del core, un alone già disegnato che si sposta
   in transform (lo muove core.js, la tavola è [data-light]). Si vede solo mentre il mouse inclina
   la tavola (.is-tilt, vedi script). */
.web-sheet > .light-spot {
  --spot-w: .88;
  --spot-h: 1;
  --spot-color: rgba(255, 255, 255, .07);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.web-sheet.is-tilt > .light-spot { opacity: 1; }
.web-sheet.is-still { --rx: 0deg !important; --ry: 0deg !important; transition-duration: .26s; }
/* durante la ricomposizione (Flip) cornice e parti si spostano su livelli propri: la tavola non si
   ridisegna a ogni fotogramma */
.web-sheet.is-still .web-frame,
.web-sheet.is-still .web-part { will-change: transform; }

.web-tag { position: absolute; top: -11px; left: 18px; z-index: 6; background: var(--web-ink-sheet); }

/* ---------- Il foglio di disegno: tre taglie, misure in px esatti ----------
   --fx/--fy/--fw/--fh: la cornice (schermo del computer o del telefono) nel foglio.
   --hd: distanza fra la cornice e la quota d'altezza. --p: margine interno, --g: spazio fra le parti. */
.web-stage {
  --lab: 10px; --lo: 16px;
  --fx: 128px; --fy: 125px; --fw: 336px; --fh: 210px; --hd: 84px;
  --p: 8px; --g: 6px; --bar: 13px; --r: 3px;
  --t-h: 12px; --t-s: 5.4px;
  position: relative;
  width: var(--sw);
  height: var(--sh);
  margin-inline: auto;
}
.web-stage[data-mode="telefono"] {
  --fx: 190px; --fy: 50px; --fw: 180px; --fh: 360px; --hd: 30px;
  --p: 7px; --g: 5px; --top: 18px; --bot: 12px; --r: 14px;
  --t-h: 13.5px; --t-s: 6.4px;
}
@container web (max-width: 599.98px) {
  .web-sheet { --pad: 18px; --sw: 460px; --sh: 388px; }
  .web-stage {
    --lab: 9px;
    --fx: 106px; --fy: 121px; --fw: 272px; --fh: 170px; --hd: 80px;
    --p: 7px; --g: 5px; --bar: 11px;
    --t-h: 9.8px; --t-s: 4.5px;
  }
  .web-stage[data-mode="telefono"] {
    --fx: 150px; --fy: 46px; --fw: 160px; --fh: 320px; --hd: 30px;
    --p: 6px; --g: 4px; --top: 16px; --bot: 11px;
    --t-h: 12px; --t-s: 5.7px;
  }
}
@container web (max-width: 499.98px) {
  .web-sheet { --pad: 10px; --sw: 296px; --sh: 364px; }
  .web-stage {
    --lab: 9px; --lo: 12px;
    --fx: 34px; --fy: 118px; --fw: 244px; --fh: 152px; --hd: 20px;
    --p: 6px; --g: 4px; --bar: 10px;
    --t-h: 8.8px; --t-s: 4px;
  }
  .web-stage[data-mode="telefono"] {
    --fx: 66px; --fy: 44px; --fw: 150px; --fh: 300px; --hd: 26px;
    --p: 6px; --g: 4px; --top: 15px; --bot: 10px;
    --t-h: 11.2px; --t-s: 5.4px;
  }
}

/* ---------- Cornice (schermo) ---------- */
.web-frame {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  z-index: 1;
}
/* il tratto sta dentro la cornice: le quote misurano proprio questo riquadro */
.web-outline {
  position: absolute;
  left: .5px;
  top: .5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  overflow: visible;
  z-index: 3;
  fill: none;
  stroke: var(--web-wire);
  stroke-width: 1;
  stroke-dasharray: 1 2;   /* trattino lungo quanto il tracciato, vuoto più lungo: da nascosto non resta nessun punto */
  stroke-dashoffset: 0;
  pointer-events: none;
}
.web-outline__tel { display: none; }
.web-stage[data-mode="telefono"] .web-outline__pc { display: none; }
.web-stage[data-mode="telefono"] .web-outline__tel { display: inline; }

.web-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r);
}
.web-screen > span { position: absolute; inset: 0; }
.web-screen__block {
  background: rgba(140, 192, 230, .07);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .75);
  border-radius: inherit;
  opacity: 0;
}
.web-screen__wire { opacity: 0; }
.web-screen__real { background: var(--web-paper); }
.web-screen__glint {
  opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, .5) 53%, transparent 70%);
  z-index: 4;
}
.web-frame__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(140, 192, 230, .22), 0 0 38px rgba(140, 192, 230, .2), 0 22px 44px -18px rgba(0, 0, 0, .7);
}

/* barra del browser (computer), altoparlante e barra di chiusura (telefono) */
.web-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 2.5px;
  padding: 0 5px;
}
.web-bar i { width: 3.6px; height: 3.6px; border-radius: 50%; flex: none; }
.web-bar b { margin-left: 7px; flex: 0 1 44%; height: 5px; border-radius: 3px; }
.web-screen__wire .web-bar { box-shadow: inset 0 -1px 0 var(--web-wire-3); }
.web-screen__wire .web-bar i, .web-screen__wire .web-bar b { box-shadow: inset 0 0 0 1px var(--web-wire-2); }
.web-screen__real .web-bar { background: #E7E2D8; box-shadow: inset 0 -1px 0 #D8D1C4; }
.web-screen__real .web-bar i { background: #CFC6B6; }
.web-screen__real .web-bar i:first-child { background: #D99A8F; }
.web-screen__real .web-bar b { background: #FBF9F4; box-shadow: inset 0 0 0 1px #DCD5C8; }
.web-ear {
  position: absolute;
  top: calc(var(--top, 16px) * .38);
  left: 36%; right: 36%;
  height: 5px;
  border-radius: 3px;
}
.web-home {
  position: absolute;
  bottom: calc(var(--bot, 10px) * .36);
  left: 33%; right: 33%;
  height: 2.5px;
  border-radius: 2px;
}
.web-screen__wire .web-ear, .web-screen__wire .web-home { box-shadow: inset 0 0 0 1px var(--web-wire-2); }
.web-screen__real .web-ear, .web-screen__real .web-home { background: #2A3432; }
.web-stage[data-mode="telefono"] .web-bar,
.web-stage[data-mode="computer"] .web-ear,
.web-stage[data-mode="computer"] .web-home { display: none; }

/* ---------- Le parti: calcolate dalla cornice, come una griglia disegnata ---------- */
.web-stage[data-mode="computer"] {
  --cx: calc(var(--fx) + var(--p));
  --cy: calc(var(--fy) + var(--bar) + var(--p));
  --cw: calc(var(--fw) - 2 * var(--p));
  --ch: calc(var(--fh) - var(--bar) - 2 * var(--p));
  --cl: calc((var(--cw) - var(--g)) * .56);
  --cr: calc(var(--cw) - var(--g) - var(--cl));
  --rt: calc(var(--ch) * .16);
  --rm: calc((var(--ch) - var(--rt) - 2 * var(--g)) * .55);
  --rb: calc(var(--ch) - var(--rt) - 2 * var(--g) - var(--rm));
}
.web-stage[data-mode="computer"] .web-part--testata  { --x: var(--cx); --y: var(--cy); --w: var(--cw); --h: var(--rt); }
.web-stage[data-mode="computer"] .web-part--invito   { --x: var(--cx); --y: calc(var(--cy) + var(--rt) + var(--g)); --w: var(--cl); --h: var(--rm); }
.web-stage[data-mode="computer"] .web-part--foto     { --x: calc(var(--cx) + var(--cl) + var(--g)); --y: calc(var(--cy) + var(--rt) + var(--g)); --w: var(--cr); --h: var(--rm); }
.web-stage[data-mode="computer"] .web-part--domande  { --x: var(--cx); --y: calc(var(--cy) + var(--rt) + 2 * var(--g) + var(--rm)); --w: var(--cl); --h: var(--rb); }
.web-stage[data-mode="computer"] .web-part--contatti { --x: calc(var(--cx) + var(--cl) + var(--g)); --y: calc(var(--cy) + var(--rt) + 2 * var(--g) + var(--rm)); --w: var(--cr); --h: var(--rb); }

.web-stage[data-mode="telefono"] {
  --cx: calc(var(--fx) + var(--p));
  --cy: calc(var(--fy) + var(--top));
  --cw: calc(var(--fw) - 2 * var(--p));
  --rest: calc(var(--fh) - var(--top) - var(--bot) - 4 * var(--g));
}
.web-stage[data-mode="telefono"] .web-part--testata  { --x: var(--cx); --y: var(--cy); --w: var(--cw); --h: calc(var(--rest) * .09); }
.web-stage[data-mode="telefono"] .web-part--invito   { --x: var(--cx); --y: calc(var(--cy) + var(--rest) * .09 + var(--g)); --w: var(--cw); --h: calc(var(--rest) * .28); }
.web-stage[data-mode="telefono"] .web-part--foto     { --x: var(--cx); --y: calc(var(--cy) + var(--rest) * .37 + 2 * var(--g)); --w: var(--cw); --h: calc(var(--rest) * .21); }
.web-stage[data-mode="telefono"] .web-part--domande  { --x: var(--cx); --y: calc(var(--cy) + var(--rest) * .58 + 3 * var(--g)); --w: var(--cw); --h: calc(var(--rest) * .28); }
.web-stage[data-mode="telefono"] .web-part--contatti { --x: var(--cx); --y: calc(var(--cy) + var(--rest) * .86 + 4 * var(--g)); --w: var(--cw); --h: calc(var(--rest) * .14); }

.web-part {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  z-index: 2;
}
@supports (left: round(1.5px, 1px)) {
  .web-part { left: round(var(--x), 1px); top: round(var(--y), 1px); width: round(var(--w), 1px); height: round(var(--h), 1px); }
}
.web-box {
  position: absolute;
  left: .5px;
  top: .5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  overflow: visible;
  z-index: 2;
  fill: none;
  pointer-events: none;
  opacity: 0;
}
.web-box__m { stroke: #fff; stroke-width: 3; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.web-box__r { stroke: var(--web-wire); stroke-width: 1; stroke-dasharray: 3 2.5; }
.web-part__block {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(140, 192, 230, .14);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .72);
  opacity: 0;
}
.web-part__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
}

/* contenuto: la pagina vera (.web-real) e la sua copia a matita (.web-wire, creata dallo script) */
.web-real, .web-wire {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--t-s) * .9);
  padding: calc(var(--t-s) * 1.3) calc(var(--t-s) * 1.6);
  font-family: var(--font-body);
  font-size: var(--t-s);
  font-weight: 450;
  line-height: 1.3;
  color: var(--web-ink);
  text-align: left;
}
.web-real { background: var(--web-paper); }
.web-wire { opacity: 0; color: transparent; }
.web-real > *, .web-wire > * { max-width: 100%; }

/* testata */
.web-part--testata :is(.web-real, .web-wire) { flex-direction: row; align-items: center; justify-content: space-between; padding-block: 0; }
.web-part--testata .web-real { background: #FFFFFF; box-shadow: inset 0 -1px 0 var(--web-rule); }
.web-logo { display: inline-flex; align-items: center; gap: .55em; font-weight: 700; font-size: calc(var(--t-s) * 1.3); white-space: nowrap; }
.web-logo__mark { width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--web-teal); box-shadow: inset 0 0 0 .22em #BFD8CF; flex: none; }
.web-nav { display: flex; gap: 1.3em; color: var(--web-ink-2); white-space: nowrap; }
.web-burger { display: grid; gap: 2px; width: 10px; }
.web-burger i { height: 1.3px; border-radius: 1px; background: var(--web-ink); }
.web-stage[data-mode="telefono"] .web-nav,
.web-stage[data-mode="computer"] .web-burger { display: none; }

/* invito */
.web-h {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 760;
  font-size: var(--t-h);
  line-height: 1.04;
  letter-spacing: -.01em;
  max-width: 9.5em;
}
.web-p { color: var(--web-ink-2); max-width: 24em; }
.web-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55em 1.1em;
  border-radius: 3px;
  background: var(--web-teal);
  color: #FFFFFF;
  font-weight: 650;
  white-space: nowrap;
}
.web-btn--line { background: transparent; color: var(--web-teal); box-shadow: inset 0 0 0 1px var(--web-teal); }

/* foto */
.web-part--foto :is(.web-real, .web-wire) { padding: 0; }
.web-photo { position: absolute; inset: 0; display: block; }
.web-photo svg { display: block; width: 100%; height: 100%; }

/* domande */
.web-part--domande :is(.web-real, .web-wire) { gap: 0; }
.web-k { font-weight: 700; font-size: calc(var(--t-s) * 1.28); margin-bottom: .3em; white-space: nowrap; }
.web-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  width: 100%;
  padding: .45em 0;
  border-bottom: 1px solid var(--web-rule);
  white-space: nowrap;
}
.web-q i {
  flex: none;
  width: .8em;
  height: .8em;
  background:
    linear-gradient(var(--web-teal), var(--web-teal)) center / 100% 1px no-repeat,
    linear-gradient(var(--web-teal), var(--web-teal)) center / 1px 100% no-repeat;
}

/* contatti: riquadro sul computer, barra in fondo sul telefono */
.web-part--contatti :is(.web-real, .web-wire) { flex-direction: row; align-items: center; justify-content: space-between; gap: .8em; }
.web-part--contatti .web-real { background: var(--web-teal-soft); }
.web-cinfo { display: grid; gap: .25em; white-space: nowrap; }
.web-cinfo .web-k { margin: 0; }
.web-c { color: var(--web-ink-2); }
.web-cta { display: grid; gap: .45em; }
.web-stage[data-mode="telefono"] .web-part--contatti .web-real { background: #FFFFFF; box-shadow: inset 0 1px 0 var(--web-rule); }
.web-stage[data-mode="telefono"] .web-cinfo { display: none; }
.web-stage[data-mode="telefono"] .web-cta { display: flex; width: 100%; gap: .6em; }
.web-stage[data-mode="telefono"] .web-cta .web-btn { flex: 1; padding-block: .75em; }

/* la copia a matita: testo in barre, bottoni e foto in contorno */
.web-wire .t {
  background: linear-gradient(var(--web-wire-2), var(--web-wire-2)) 0 60% / 100% 40% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 1px;
}
.web-wire .web-h .t { background-image: linear-gradient(var(--web-wire), var(--web-wire)); background-size: 100% 46%; }
.web-wire .web-btn { background: none; box-shadow: inset 0 0 0 1px var(--web-wire); }
.web-wire .web-btn .t { background-size: 100% 32%; }
.web-wire .web-logo__mark { background: none; box-shadow: inset 0 0 0 1px var(--web-wire); }
.web-wire .web-q { border-bottom-color: var(--web-wire-3); }
.web-wire .web-q i { background-image: linear-gradient(var(--web-wire), var(--web-wire)), linear-gradient(var(--web-wire), var(--web-wire)); }
.web-wire .web-burger i { background: var(--web-wire); }
.web-wire .web-photo {
  background:
    linear-gradient(to top right, transparent calc(50% - .7px), var(--web-wire-2) calc(50% - .7px), var(--web-wire-2) calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--web-wire-2) calc(50% - .7px), var(--web-wire-2) calc(50% + .7px), transparent calc(50% + .7px));
}

/* ---------- Richiami ---------- */
.web-call {
  position: absolute;
  top: 50%;
  left: calc(100% - 3.5px);   /* il punto sta nel margine della parte: non copre il testo */
  width: 0;
  height: 0;
  z-index: 4;
}
.web-call__dot {
  position: absolute;
  left: -3.5px;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--web-ink-sheet);
  box-shadow: 0 0 0 1.2px var(--web-wire);
}
.web-call__dot i { position: absolute; inset: 0; border-radius: 50%; }
.web-call__amber { background: var(--scintilla); box-shadow: 0 0 7px rgba(224, 160, 80, .9); opacity: 0; }
.web-call__blue { background: var(--web-wire); box-shadow: 0 0 0 1.6px rgba(20, 27, 32, .92), 0 0 9px rgba(140, 192, 230, .9); }
.web-call__line {
  position: absolute;
  left: 4px;
  top: -.5px;
  width: calc(var(--p) + var(--lo) - .5px);
  height: 1px;
  background: var(--web-wire-2);
  transform-origin: 0 50%;
}
.web-call__label {
  position: absolute;
  left: calc(3.5px + var(--p) + var(--lo) + 5px);
  top: 0;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--lab);
  font-stretch: 80%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--web-label);
}
/* sul computer invito e domande si annotano a sinistra; sul telefono tutto a destra */
.web-stage[data-mode="computer"] :is(.web-part--invito, .web-part--domande) .web-call { left: auto; right: calc(100% - 3.5px); }
.web-stage[data-mode="computer"] :is(.web-part--invito, .web-part--domande) .web-call__dot { left: auto; right: -3.5px; }
.web-stage[data-mode="computer"] :is(.web-part--invito, .web-part--domande) .web-call__line { left: auto; right: 4px; transform-origin: 100% 50%; }
.web-stage[data-mode="computer"] :is(.web-part--invito, .web-part--domande) .web-call__label { left: auto; right: calc(3.5px + var(--p) + var(--lo) + 5px); }
/* sulla tavola piccola il computer resta senza richiami: non c'è spazio ai lati */
@container web (max-width: 499.98px) {
  .web-stage[data-mode="computer"] .web-call { display: none; }
}

/* ---------- Quote ---------- */
.web-dim { position: absolute; z-index: 3; pointer-events: none; }
.web-dim > span { position: absolute; display: block; }
.web-dim__ext { background: var(--web-wire-3); }
.web-dim__line { background: var(--web-wire-2); }
.web-dim__arr { width: 7px; height: 5px; background: var(--web-wire); }
.web-dim__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--web-wire);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.web-dn-l, .web-dn-s { display: none; }
@container web (max-width: 599.98px) { .web-dn-xl { display: none; } .web-dn-l { display: inline; } }
@container web (max-width: 499.98px) { .web-dn-l { display: none; } .web-dn-s { display: inline; } }

/* larghezza: sopra la cornice */
.web-dim--w { left: var(--fx); width: var(--fw); top: calc(var(--fy) - 40px); height: 40px; }
.web-dim--w .web-dim__ext { top: 12px; bottom: 3px; width: 1px; transform-origin: 50% 100%; }
.web-dim--w .web-dim__ext--a { left: 0; }
.web-dim--w .web-dim__ext--b { right: 0; }
.web-dim--w .web-dim__line { left: 0; right: 0; top: 18px; height: 1px; transform-origin: 0 50%; }
.web-dim--w .web-dim__arr { top: 16px; }
.web-dim--w .web-dim__arr--a { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.web-dim--w .web-dim__arr--b { right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.web-dim--w .web-dim__num { left: 50%; top: 3px; transform: translateX(-50%); }

/* altezza: a sinistra, oltre i richiami */
.web-dim--h { top: var(--fy); height: var(--fh); left: calc(var(--fx) - var(--hd)); width: var(--hd); }
.web-dim--h .web-dim__ext { left: -4px; right: 3px; height: 1px; transform-origin: 100% 50%; }
.web-dim--h .web-dim__ext--a { top: 0; }
.web-dim--h .web-dim__ext--b { bottom: 0; }
.web-dim--h .web-dim__line { left: 0; top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; }
.web-dim--h .web-dim__arr { left: -2px; width: 5px; height: 7px; }
.web-dim--h .web-dim__arr--a { top: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.web-dim--h .web-dim__arr--b { bottom: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.web-dim--h .web-dim__num { left: -9px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

/* ---------- Cartiglio ---------- */
.web-cart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 10px calc(-1 * var(--pad)) 0;
  border-top: 1px solid rgba(140, 192, 230, .18);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #93A9B9;
}
.web-cart > span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 16px; }
.web-cart > span + span { border-left: 1px solid rgba(140, 192, 230, .18); }
.web-cart__code { color: var(--fg); font-weight: 600; }
.web-cart__title { display: block !important; }
/* il cartiglio: il titolo della tavola e, sotto, la nota sulle misure */
.web-cart__note { display: block; margin-top: 3px; color: #7B90A0; letter-spacing: .1em; }
.web-status { color: var(--fg-2); }
.web-status__led, .web-status__txt { display: grid; }
.web-status__led > i, .web-status__txt > span { grid-area: 1 / 1; }
.web-status__txt > span { white-space: nowrap; }
.web-status__led > i { width: 7px; height: 7px; border-radius: 50%; }
.web-status__led .web-s0 { background: #2A3136; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7); }
.web-status__led .web-s1 { background: var(--scintilla); box-shadow: 0 0 8px rgba(224, 160, 80, .85); }
.web-status__led .web-s2 { background: var(--blu); box-shadow: 0 0 0 3px rgba(140, 192, 230, .16), 0 0 10px rgba(140, 192, 230, .85); }
.web-status .web-s0, .web-status .web-s1 { opacity: 0; }
@container web (max-width: 599.98px) {
  .web-cart__note { display: none; }
}
@container web (max-width: 499.98px) {
  .web-cart { grid-template-columns: auto minmax(0, 1fr); font-size: .52rem; }
  .web-cart > span { padding: 9px 12px; }
  .web-cart__title { grid-column: 1 / -1; grid-row: 2; border-left: 0 !important; border-top: 1px solid rgba(140, 192, 230, .18); }
  .web-status { justify-content: flex-end; }
}

/* ---------- Interruttore computer ↔ telefono ---------- */
.web-controls { display: none; justify-content: center; margin-top: 22px; }
.web-drawing.web-ready .web-controls { display: flex; }
.web-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0D1113, #161B1E);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 0 rgba(255, 255, 255, .06);
}
.web-switch__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(180deg, #E9EDF0 0%, #BCC4CA 55%, #D9DEE2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .8);
  transition: transform .5s var(--ease-clack);
}
.web-switch[data-on="telefono"] .web-switch__thumb { transform: translateX(100%); }
.web-switch__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg-3);
  font: 600 .9rem/1 var(--font-body);
  font-stretch: 104%;
  cursor: pointer;
  transition: color .3s var(--ease-out);
}
.web-switch__btn svg { width: 18px; height: 18px; flex: none; }
.web-switch__btn:hover { color: var(--fg); }
.web-switch__btn[aria-pressed="true"] { color: var(--inchiostro); }
.web-switch__btn:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* In attesa dello script: niente disegno finito che poi si svuota.
   Se lo script non arriva, il disegno compare comunque dopo 3,5 s. */
.js-motion .web-drawing:not(.web-ready) .web-stage {
  opacity: 0;
  animation: web-failsafe .6s var(--ease-out) 3.5s forwards;
}
@keyframes web-failsafe { to { opacity: 1; } }

/* ==========================================================================
   Ogni parte ha un compito
   ========================================================================== */
.web-anat {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.web-anat__fig { margin: 0; }
.web-anat__cap { margin-top: 18px; }
.web-anat__mock {
  position: relative;
  padding: 0 46px 58px 0;
  container-type: inline-size;
}
.web-anat__browser {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #2A3034, #1E2327);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 40px 70px -40px rgba(0, 0, 0, .9);
}
.wa-chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; }
.wa-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #454E54; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.wa-chrome span { margin-left: 12px; flex: 0 1 50%; height: 14px; border-radius: 7px; background: #13171A; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.wa-page {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2.4cqi;
  padding: 0 3.2cqi 3.2cqi;
  background: var(--web-paper);
  color: var(--web-ink);
  font-family: var(--font-body);
  font-size: clamp(7px, 1.45cqi, 11px);
  line-height: 1.35;
}
.wa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -3.2cqi;
  padding: 2cqi 3.2cqi;
  background: #FFFFFF;
  box-shadow: inset 0 -1px 0 var(--web-rule);
}
.wa-logo { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; font-size: 1.2em; white-space: nowrap; }
.wa-logo i { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--web-teal); box-shadow: inset 0 0 0 .24em #BFD8CF; }
.wa-nav { display: flex; gap: 1.6em; color: var(--web-ink-2); white-space: nowrap; }
.wa-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3cqi; align-items: center; }
.wa-hero__text { display: grid; gap: 1.2em; justify-items: start; }
.wa-h {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 760;
  font-size: 2.35em;
  line-height: 1.02;
  letter-spacing: -.012em;
}
.wa-p { color: var(--web-ink-2); max-width: 26em; }
.wa-btn {
  display: inline-flex;
  align-items: center;
  padding: .75em 1.3em;
  border-radius: 4px;
  background: var(--web-teal);
  color: #FFFFFF;
  font-weight: 650;
  white-space: nowrap;
}
.wa-photo { display: block; aspect-ratio: 16 / 11; border-radius: 6px; overflow: hidden; }
.wa-photo svg { display: block; width: 100%; height: 100%; }
/* la riga in basso finisce prima del telefono sovrapposto: nessuna regione numerata resta coperta */
.wa-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3cqi; align-items: start; margin-right: calc(26cqi - 46px); }
.wa-faq { display: grid; }
.wa-k { font-weight: 700; font-size: 1.15em; margin-bottom: .4em; }
.wa-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8em;
  padding: .55em 0;
  border-bottom: 1px solid var(--web-rule);
  white-space: nowrap;
}
.wa-q i {
  flex: none;
  width: .8em;
  height: .8em;
  background:
    linear-gradient(var(--web-teal), var(--web-teal)) center / 100% 1.2px no-repeat,
    linear-gradient(var(--web-teal), var(--web-teal)) center / 1.2px 100% no-repeat;
}
.wa-gallery { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: .6em; aspect-ratio: 16 / 9.5; }
.wa-shot { position: relative; display: block; min-height: 0; border-radius: 4px; overflow: hidden; }
.wa-shot svg, .wa-mshot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wa-shot--a { grid-row: 1 / 3; }

/* il telefono, sovrapposto al browser */
.web-anat__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  aspect-ratio: 9 / 18.6;
  padding: 5px;
  border-radius: 22px;
  container-type: inline-size;
  background: linear-gradient(180deg, #3A4247, #1E2327 40%, #2A3034);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 34px 60px -28px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(0, 0, 0, .5);
}
.wa-screen {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  border-radius: 17px;
  overflow: hidden;
  background: var(--web-paper);
  color: var(--web-ink);
  font-family: var(--font-body);
  font-size: 5.6cqi;
  line-height: 1.3;
}
.wa-head--m { margin: 0; padding: 9cqi 7cqi 4cqi; }
.wa-head--m .wa-logo { font-size: 1em; }
.wa-burger { display: grid; gap: 2px; width: 11px; }
.wa-burger i { height: 1.4px; background: var(--web-ink); border-radius: 1px; }
.wa-m { display: grid; align-content: start; gap: 5cqi; padding: 6cqi 7cqi; min-height: 0; overflow: hidden; }
.wa-m .wa-h { font-size: 2em; }
.wa-m .wa-btn { justify-self: start; font-size: .95em; }
.wa-mshot { display: block; aspect-ratio: 16 / 9; border-radius: 4px; }
.wa-mshot > svg { border-radius: inherit; }
/* sul telefono le foto scorrono: tre puntini dicono che ce ne sono altre */
.wa-dots { position: absolute; left: 0; right: 0; bottom: 6cqi; display: flex; justify-content: center; gap: 2.4cqi; }
.wa-dots i { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.wa-dots i:first-child { background: #FFFFFF; }
.wa-mfaq { display: grid; }
/* sul telefono una domanda lunga va a capo: non allarga la colonna né spinge il contenuto
   oltre il bordo dello schermo */
.wa-m { grid-template-columns: minmax(0, 1fr); }
.wa-mfaq .wa-q { font-size: .92em; white-space: normal; }
.wa-bar {
  display: flex;
  gap: 4cqi;
  padding: 5cqi 6cqi 7cqi;
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 var(--web-rule), 0 -8px 16px -10px rgba(0, 0, 0, .25);
}
.wa-bar__btn {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 2.4em;
  border-radius: 4px;
  background: var(--web-teal);
  color: #FFFFFF;
  font-weight: 650;
  font-size: .95em;
}
.wa-bar__btn--line { background: none; color: var(--web-teal); box-shadow: inset 0 0 0 1px var(--web-teal); }

/* regioni, richiami numerati e legenda collegati (una coppia si accende insieme) */
.wa-region {
  position: relative;
  border-radius: 4px;
  outline: 1.5px solid transparent;
  outline-offset: 4px;
  transition: outline-color .3s var(--ease-out), opacity .35s var(--ease-out);
}
.wa-region.is-hot { outline-color: #2F6E9E; }
.web-anat.has-hot .wa-region:not(.is-hot) { opacity: .4; }
/* il richiamo sta nell'angolo in alto a destra della sua parte, dove non copre il testo */
.web-pin {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font: 600 10px/1 var(--font-mono);
  color: #EEF1F3;
  background: #1E2327;
  box-shadow: 0 0 0 2px var(--web-paper), 0 0 0 3px rgba(47, 110, 158, .45), 0 6px 12px -4px rgba(0, 0, 0, .55);
  transition: transform .3s var(--ease-clack), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.wa-hero__text .wa-h > .web-pin { right: -18px; }
.wa-faq > .web-pin { top: -3px; right: 0; }
.wa-gallery > .web-pin { top: 6px; right: 6px; }
.wa-mfaq > .web-pin { top: 0; }
.wa-bar .web-pin { top: -11px; right: 12%; }
.wa-region.is-hot > .web-pin {
  background: #2F6E9E;
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--web-paper), 0 0 0 6px rgba(47, 110, 158, .22), 0 0 16px rgba(47, 110, 158, .75);
}
.web-pin--m { display: none; }
/* durante la sequenza la scala dei richiami la guida lo script: niente transizione CSS sul transform */
.web-anat.is-seq .web-pin { transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }

.web-legend { list-style: none; display: grid; gap: 4px; }
.web-legend li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px 16px 14px;
  border-radius: 8px;
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.web-legend__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font: 600 .72rem/1 var(--font-mono);
  color: var(--fg-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-clack);
}
.web-legend h3 { margin-top: 3px; }
.web-legend p { margin-top: 6px; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
.web-legend li.is-hot { background: rgba(140, 192, 230, .055); box-shadow: inset 2px 0 0 var(--blu); }
.web-legend li.is-hot .web-legend__n {
  background: var(--blu);
  color: var(--inchiostro);
  box-shadow: 0 0 0 4px rgba(140, 192, 230, .14), 0 0 14px rgba(140, 192, 230, .7);
  transform: scale(1.08);
}

@media (max-width: 1100px) {
  .web-anat { grid-template-columns: minmax(0, 1fr); }
  .web-anat__fig { max-width: 720px; }
  .web-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* su telefono: solo il telefono, con tutti e cinque i richiami */
@media (max-width: 760px) {
  .web-anat__mock { padding: 0; display: grid; justify-items: center; }
  .web-anat__browser { display: none; }
  .web-anat__phone { position: relative; width: min(236px, 70%); }
  .web-pin--m { display: grid; }
  .web-anat__cap { display: flex; justify-content: center; }
  .web-legend { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Fatto bene, anche dove non si vede (alluminio)
   ========================================================================== */
.web-bench { overflow: hidden; padding: clamp(24px, 3vw, 40px); }
.web-bench__head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.web-bench__head .plate__code { margin: 0; }
.web-bench__rule { flex: 1; height: 1px; background: var(--line); }
.web-checks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-check {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 14px;
  padding: 26px 26px 26px 22px;
  border-top: 1px solid var(--line);
}
.web-check:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.web-check .led { margin-top: 6px; --led-lit: 1; }   /* colori del LED sull'alluminio: dal core */
.web-check p { margin-top: 6px; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
.web-bench__sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 34%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 44%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .55) 56%, rgba(255, 255, 255, 0));
}
.web-bench__sweep::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(47, 110, 158, .45);
  box-shadow: 0 0 10px rgba(47, 110, 158, .5);
}
/* prima del collaudo i LED sono spenti; la luce passa colonna per colonna e li accende */
.js-motion .web-bench:not(.is-in) .web-check .led { --led-lit: 0; }
.js-motion .web-bench.is-in .web-check .led { transition-delay: calc(.35s + var(--wn) * .22s); }
@media (min-width: 961px) {
  .js-motion .web-bench.is-in .web-bench__sweep { animation: web-sweep 1.9s var(--ease-in-out) .25s both; }
  .js-motion .web-bench.is-in .web-check .led { transition-delay: calc(.9s + var(--wc) * .26s + var(--wr) * .06s); }
}
@keyframes web-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}
@media (max-width: 960px) {
  .web-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-check:not(:nth-child(3n + 1)) { border-left: 0; }
  .web-check:nth-child(2n) { border-left: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .web-checks { grid-template-columns: minmax(0, 1fr); }
  .web-check:nth-child(2n) { border-left: 0; }
  .web-check { padding: 22px 4px; }
}

/* ==========================================================================
   Dall'officina: il sito di Maranatha
   ========================================================================== */
.web-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding: clamp(26px, 3.6vw, 56px);
}
.web-case__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.web-case__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.web-case h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.web-case__lead { margin-top: 18px; color: var(--fg-2); max-width: 34em; }
.web-spec { list-style: none; display: grid; gap: 11px; margin-top: 24px; }
.web-spec li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; align-items: baseline; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; }
.web-spec .led { transform: translateY(-1px); }
.web-case .link-arrow { margin-top: 26px; }
.web-case__note {
  max-width: 34em;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.web-case .web-case__note + .link-arrow { margin-top: 12px; }
.web-case__obj { display: grid; justify-items: start; gap: 16px; min-width: 0; }
.web-case__obj .web-lang { justify-self: stretch; }

.web-lang {
  border-radius: 12px;
  overflow: hidden;
  background: #0F1316;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 36px 60px -34px rgba(0, 0, 0, .9);
}
.web-lang__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: linear-gradient(180deg, #2A3034, #1E2327); }
.web-lang__bar i { width: 8px; height: 8px; border-radius: 50%; background: #454E54; }
.web-lang__url {
  margin-left: 12px;
  flex: 0 1 58%;
  height: 18px;
  padding: 0 10px;
  border-radius: 9px;
  background: #13171A;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
  font: 500 .6rem/18px var(--font-mono);
  letter-spacing: .08em;
  color: var(--fg-3);
}
.web-lang__page {
  display: grid;
  gap: 14px;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #F8F4EC, #F1ECE2);
  color: #2B2925;
}
.web-lang__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.web-lang__mark { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #F8F4EC 0 30%, transparent 31%), #B98A4E; }
.web-lang__chips { position: relative; display: flex; gap: 2px; }
.web-lang__chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  font: 600 .64rem/1 var(--font-mono);
  letter-spacing: .06em;
  color: #6B655B;
}
.web-lang__thumb {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #B07A3A;
  box-shadow: 0 0 8px rgba(176, 122, 58, .6);
}
.web-lang__words { display: grid; margin-top: 6px; }
.web-lang__word {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-stretch: 116%;
  font-weight: 760;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: #2B2925;
}
.web-lang__word + .web-lang__word { opacity: 0; }
.web-lang__line { display: block; height: 8px; width: 88%; border-radius: 4px; background: #E2DACB; }
.web-lang__line--short { width: 62%; }
.web-lang__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
/* tre schede: una fascia d'immagine e una riga di testo */
.web-lang__blocks span {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 4 / 3.3;
  border-radius: 6px;
  overflow: hidden;
  background: #FBF8F2;
  box-shadow: inset 0 0 0 1px #E6DECF, 0 6px 14px -10px rgba(43, 41, 37, .35);
}
.web-lang__blocks span::before { content: ""; background: linear-gradient(180deg, #E8DFCF, #DCD1BE); }
.web-lang__blocks span:nth-child(2)::before { background: linear-gradient(180deg, #D9E2D6, #BFCDBB); }
.web-lang__blocks span:nth-child(3)::before { background: linear-gradient(180deg, #EFE0C8, #E3CBA8); }
.web-lang__blocks span::after { content: ""; width: 58%; height: 5px; margin: 9px 10px 10px; border-radius: 3px; background: #E2DACB; }
.web-lang__auto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font: 500 .58rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B655B;
}
.web-lang__auto .led { --led-color: #B07A3A; --led-ring: rgba(176, 122, 58, .16); --led-halo: rgba(176, 122, 58, .7); --led-blur: 8px; }

@media (max-width: 900px) {
  .web-case { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .web-lang__page { padding: 18px 18px 16px; }
  .web-lang__auto { letter-spacing: .06em; white-space: nowrap; }
}
/* sui telefoni più stretti la targa stringe i margini: «Chiedeteci una dimostrazione» resta
   su una riga, con la freccia accanto al testo */
@media (max-width: 380px) {
  .web-case { padding-inline: 20px; }
}

/* ==========================================================================
   Come lo costruiamo
   ========================================================================== */
.web-fasi {
  --rail: 10px;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px);
  padding-top: 40px;
}
/* il binario: tratteggiato (da fare), poi blu (fatto) */
.web-fasi::before,
.web-fasi::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 0;
  top: var(--rail);
  height: 1px;
}
.web-fasi::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.web-fasi::after { background: var(--blu); box-shadow: 0 0 8px rgba(140, 192, 230, .55); transform-origin: 0 50%; }
.web-fase { position: relative; display: grid; align-content: start; gap: 10px; }
.web-fase__node {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--pozzo);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.web-fase__node .led { --led-lit: 1; --led-blur: 12px; }
.web-fase__icon { width: 44px; height: 44px; margin-top: 10px; fill: none; stroke: var(--argento); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.web-draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.web-fase__n { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; color: var(--fg-3); }
.web-fase h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
.web-fase p { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
.web-fase__online {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 4px;
  padding: 7px 11px;
  border-radius: 5px;
  font: 500 .64rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu);
  box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .3);
}
.web-fase__online .led { --led-lit: 1; --led-blur: 12px; }

/* stati di partenza, solo con movimento permesso */
.js-motion .web-fasi:not(.is-in)::after { transform: scaleX(0); }
.js-motion .web-fasi:not(.is-in) .web-fase__node .led,
.js-motion .web-fasi:not(.is-in) .web-fase__online .led { --led-lit: 0; }
.js-motion .web-fasi:not(.is-in) .web-draw { stroke-dashoffset: 1.01; }
.js-motion .web-fasi.is-in::after { transition: transform 1.9s var(--ease-in-out) .2s; }
.js-motion .web-fasi.is-in .web-fase__node .led { transition-delay: calc(.35s + var(--wi) * .52s); }
.js-motion .web-fasi.is-in .web-fase__online .led { transition-delay: 2.1s; }
.js-motion .web-fasi.is-in .web-draw { transition: stroke-dashoffset 1.1s var(--ease-in-out); transition-delay: calc(.3s + var(--wi) * .52s); }

@media (max-width: 900px) {
  .web-fasi { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 0 0 0 44px; }
  .web-fasi::before, .web-fasi::after { left: 10px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .web-fasi::before { background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px); }
  .web-fasi::after { transform-origin: 50% 0; }
  .js-motion .web-fasi:not(.is-in)::after { transform: scaleY(0); }
  .web-fase__node { top: 0; left: -44px; }
  .web-fase__icon { margin-top: 0; }
}


/* ---------- WebKit (Safari e iOS): ingresso del disegno su livelli composti ----------
   WebKit rasterizza la pittura in gran parte col processore: una dissolvenza guidata da GSAP
   su un elemento senza livello proprio lo ridipinge a ogni fotogramma, e il bagliore della
   cornice (ombra sfocata di 38px) è il pezzo più caro da ridipingere. Qui le superfici che
   sfumano durante la costruzione hanno un livello loro: si disegnano una volta e poi il
   compositore ne cambia solo l'opacità. La pagina vera scende con translate (vedi siti-web.js). */
html.is-webkit.js-motion .web-frame__glow,
html.is-webkit.js-motion .web-outline,
html.is-webkit.js-motion .web-box,
html.is-webkit.js-motion .web-part__block,
html.is-webkit.js-motion .web-screen > span,
html.is-webkit.js-motion .web-wire,
html.is-webkit.js-motion .web-real { will-change: opacity, transform; }
@media print { html.is-webkit :is(.web-frame__glow, .web-outline, .web-box, .web-part__block, .web-screen > span, .web-wire, .web-real) { will-change: auto; } }