/* La Squadra, 17 settembre 2026: una voce sola, Mona Sans (SIL OFL), larga nei titoli e normale nel testo; Martian Mono (SIL OFL) solo per numeri, misure ed etichette. Entrambi autoserviti, subset latino. */
@font-face { font-family: "Mona Sans"; src: url("fonts/mona-sans-latin-var.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-latin-var.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
:root {
  --fondo: #0b0f0d; --carta: #f7fbf9; --verde: #34d399; --verde-scuro: #10b981; --grigio: rgba(247,251,249,.76);   /* .6 dava APCA 48 sul fondo: portato a .76 il 17 settembre per la soglia di casa (APCA >= 60); a .82 misurava 78, troppo chiaro per un testo secondario */ --filo: rgba(247,251,249,.12);
  --curva: cubic-bezier(.22,1,.36,1); --gutter: clamp(20px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--fondo); color: var(--carta); font-family: "Mona Sans", system-ui, sans-serif; font-stretch: 100%; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* 25/9: su iPhone la pagina si poteva rimpicciolire e spostare di lato oltre la sua larghezza (visto dal committente): il
   titolo del DOM, largo per Safari, sporgeva dal body e overflow-x: hidden sul body non basta a iOS. clip su html e body
   taglia senza fare del body un contenitore a scorrimento (hidden su html lo farebbe e romperebbe lo scroll). Sui Safari
   prima del 16, che non conoscono clip, resta hidden sul body come prima. Con minimum-scale=1 nel meta viewport. */
html, body { overflow-x: clip; }
a { color: inherit; } ol { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.riga-p { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); position: relative; }
p, li, small, dd, .servizio .testo, .apri .sotto-titolo, .principi small { text-wrap: pretty; }   /* 18/9: niente parola sola in ultima riga nei testi di lettura */
h1:not(.sr), h2, h3, .spezza .riga > span, .servizio .titolo, .apri .titolo, .passo-principi .principi strong, .principi li strong, .stack strong, .caso h2, .fascia-nome, .piano-nome, .tariffe li, .legale-titolo { text-wrap: balance; }   /* 18/9: titoli su righe bilanciate, niente ultima parola sola */
.nb { white-space: nowrap; }
/* 18/9 sera: dove lo sciame passa sul testo, il testo resta leggibile per conto suo: un alone del colore del fondo
   intorno alle lettere spegne i punti solo sotto la scrittura, senza riquadri. Si agisce sul testo, non sulla motion. */
.corpo-grande, .servizio .testo, .servizio .titolo, .passo p, .passo h3, .principi small, .principi strong, .sotto, h2, .occhiello { text-shadow: 0 0 2px var(--fondo), 0 0 6px var(--fondo), 0 0 12px var(--fondo), 0 0 18px var(--fondo); }   /* le parole composte col trattino non si spezzano al trattino */

.campo { position: fixed; inset: 0 0 auto 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }   /* 25/9: alto quanto lo schermo con la barra di Safari ritirata, fisso: non si stira piu' scorrendo (gl.js, GL.altezza) */

/* 18/9: la fascia «unofficial preview» in fondo allo schermo e' stata tolta su richiesta del committente; resta il noindex e il prefisso nel titolo */

.testata { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: transform .5s var(--curva); }
.testata.nascosta { transform: translateY(-100%); }
.testata::before { content: ""; position: absolute; inset: 0; background: rgba(11,15,13,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--filo); opacity: 0; transition: opacity .35s var(--curva); z-index: -1; }
.testata.scorsa::before { opacity: 1; }
.testata nav { display: flex; align-items: center; gap: 8px; min-height: 76px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 12px; text-decoration: none; font-weight: 800; letter-spacing: .08em; font-size: 13px; text-transform: uppercase; }
.ancore { display: flex; gap: 2px; margin-left: auto; }
.ancore a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .7; transition: opacity .2s; }
.ancore a:hover, .ancore a:focus-visible { opacity: 1; }

.azione { position: relative; display: inline-flex; font-family: inherit; font-stretch: inherit; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 6px; font-weight: 800; font-size: 15px; text-decoration: none; color: var(--fondo); background: var(--verde); overflow: hidden;   /* #34d399: testo scuro a APCA 67,2. Su #10b981 stava a 54,5 (soglia 60), deciso il 18 settembre */ isolation: isolate; transition: transform .3s var(--curva), color .3s; }
.azione > span { position: relative; z-index: 1; }
.azione::before { content: ""; position: absolute; inset: 0; background: var(--carta); transform: translateY(110%); transition: transform .45s var(--curva); }
.azione:hover::before { transform: none; } .azione:hover { transform: translateY(-2px); }
.azione:active { transform: scale(.98); }
.azione:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.azione.secondaria { background: transparent; color: var(--carta); border: 1px solid rgba(247,251,249,.22); }
.azione.secondaria::before { background: var(--carta); } .azione.secondaria:hover { color: var(--fondo); }
.azione-piccola { min-height: 40px; padding: 0 16px; font-size: 13px; margin-left: 8px; background: var(--carta); }
.azione-piccola::before { background: var(--verde); }
.azioni { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------------- prima schermata: il titolo vive nel canvas, qui solo sottotitolo e azioni */
.piega { position: relative; height: 100svh; z-index: 1; }
.piega-fissa { position: relative; height: 100svh; }
.piega.a-scorrere { height: calc(100svh + var(--pin, 0px)); } .piega.a-scorrere .piega-fissa { position: sticky; top: 0; }   /* 25/9, telefono: la prima schermata la tiene ferma il CSS, non il pin di GSAP (app.js) */
.piega-dentro { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(64px, 13vh, 150px); width: min(100% - 48px, 1100px); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; opacity: 0; }
.sotto { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--grigio); max-width: 44rem; }
.sotto b { color: var(--carta); font-weight: 800; }
.indizio { position: absolute; right: var(--gutter); bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); opacity: 0; }
.indizio i { width: 1px; height: 48px; background: var(--filo); position: relative; overflow: hidden; }
.indizio i::after { content: ""; position: absolute; inset: 0; background: var(--verde); transform: translateY(-100%); animation: scende 1.8s var(--curva) infinite; }
@keyframes scende { to { transform: translateY(100%); } }

/* ---------------- scene */
.scena { position: relative; z-index: 1; padding-block: clamp(96px, 14vw, 200px); }
.titolo-spazio { height: var(--h2, 100px); }
.titolo-dom { position: absolute; inset: 0; color: var(--carta); font-family: "Mona Sans", system-ui, sans-serif; font-weight: 800; font-stretch: 125%; letter-spacing: 0; white-space: nowrap; pointer-events: none; }   /* 23/9: i titoli composti sul telefono, testo vero (vedi app.js) */
.dopo, .servizio, .dopo-c { opacity: 0; }
.titolo-spazio-c { height: var(--h2c, 300px); }
.intesta { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 96px); max-width: 44rem; }
.occhiello { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
h2 { font-size: clamp(44px, 6.5vw, 104px); font-weight: 800; line-height: .95; letter-spacing: -.03em; }
.spezza .riga { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; } .spezza .riga > span { display: block; }
.corpo-grande { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--grigio); }

.servizi { border-top: 1px solid var(--filo); margin-bottom: 48px; }
.servizio a { display: grid; grid-template-columns: 72px 1.1fr 1fr 56px; gap: 32px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--filo); text-decoration: none; position: relative; }
.servizio a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--curva); }
.servizio a:hover::before, .servizio a:focus-visible::before { transform: scaleX(1); }
.servizio .n { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--verde); }
.servizio .titolo { font-size: clamp(26px, 3vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; transition: transform .5s var(--curva); }
.servizio a:hover .titolo { transform: translateX(14px); }
.servizio .testo { color: var(--grigio); font-size: 16px; max-width: 34rem; }
.servizio .freccia { width: 56px; height: 56px; border: 1px solid var(--filo); border-radius: 50%; position: relative; justify-self: end; transition: background .4s var(--curva), border-color .4s, transform .5s var(--curva); }
.servizio .freccia::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-60%,-50%) rotate(45deg); transition: transform .4s var(--curva); }
.servizio a:hover .freccia { background: var(--verde); border-color: var(--verde); color: var(--fondo); transform: rotate(-45deg); }

/* ---------------- le ancore dello sciame: ogni forma dice qualcosa della sua sezione */
.sciame-numero { display: block; width: 100%; height: 280px; }   /* il numero del principio attivo, composto dai punti */
.sciame-mese { position: relative; height: 140px; margin: 56px 0 40px; border-bottom: 1px solid var(--filo); }   /* trenta giorni, l'onda della cura */
.mese-etichetta, .mese-nota { position: absolute; top: 100%; margin-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); }
.mese-etichetta { left: 0; } .mese-nota { right: 0; text-align: right; color: var(--verde); transition: opacity .35s; }
@media (max-width: 900px) { .sciame-numero { height: 200px; margin-top: 28px; } .sciame-mese { height: 96px; margin: 40px 0 44px; } .mese-nota { display: none; } }

/* ---------------- perché */
/* un principio alla volta: la sezione si ancora e lo scroll fa avanzare numero e voce (pin in app.js) */
#why { padding-block: 0; }
#why .riga-p { min-height: 100vh; padding-block: 96px; align-content: center; }
.perche { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.passo-principi { display: flex; flex-direction: column; gap: 24px; }
.passo-principi .principi { position: relative; height: var(--principi-h, 150px); border: 0; }   /* l'altezza la misura lo script: a certe larghezze la voce supera i 150 px e le tacche le finivano sopra */
.passo-principi .principi li { position: absolute; inset: 0 auto auto 0; padding: 0; border: 0; display: block; font-size: inherit; max-width: 34rem;
  opacity: 0; transform: translateY(28px); transition: opacity .6s var(--curva), transform .8s var(--curva); }
.passo-principi .principi li.attiva { opacity: 1; transform: none; }
.passo-principi .principi li > span { display: none; }
.passo-principi .principi strong { display: block; font-size: clamp(26px, 2.5vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; max-width: 17ch; }
.passo-principi .principi small { display: block; margin-top: 16px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--grigio); max-width: 30rem; }
.tacche { display: flex; gap: 8px; }
.tacche i { width: 36px; height: 2px; background: var(--filo); transition: background .4s; }
.tacche i.attiva { background: var(--verde); }
.perche h2 { font-size: clamp(40px, 5.4vw, 84px); max-width: 14ch; }
.perche .corpo-grande { margin-top: 22px; max-width: 32rem; }
.perche .occhiello { margin-bottom: 18px; }
.principi { list-style: none; border-top: 1px solid var(--filo); }
.principi li { display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--filo); font-size: clamp(18px, 1.6vw, 24px); font-weight: 800; letter-spacing: -.01em; }
.principi li > span { font-size: 13px; font-weight: 800; color: var(--verde); letter-spacing: .12em; }
.principi li { color: rgba(247,251,249,.55); transition: color .5s var(--curva); cursor: default; }   /* la voce attiva e' quella che lo sciame sta scrivendo */
.principi li.attiva { color: var(--carta); }

/* ---------------- how it works */
#process .intesta { max-width: 46rem; }   /* 18/9: a 40rem «time.» restava orfano sulla quarta riga a 1440 */
#process h2 { font-size: clamp(36px, 4.6vw, 72px); }
.passi { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-top: 44px; list-style: none; }
.passi-linea { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--filo); }
.passi-linea i { position: absolute; inset: 0; background: var(--verde); transform: scaleX(0); transform-origin: left; }
.passo { position: relative; }
.passo::before { content: ""; position: absolute; top: -44px; left: 0; width: 14px; height: 14px; background: var(--verde); transform: translateY(-50%) skewX(-36.87deg); opacity: .3; transition: opacity .15s; }   /* 25/9: .15 s, era .4: il segno si accendeva dopo il passaggio della linea */
.passo.acceso::before { opacity: 1; }
.passo-n { display: block; font-size: 13px; font-weight: 800; color: var(--verde); letter-spacing: .12em; margin-bottom: 14px; }
.passo h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.25; margin-bottom: 12px; }
.passo p { color: var(--grigio); font-size: 15px; }

/* ---------------- piani */
.intesta-due { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; max-width: none; }
.intesta-due .corpo-grande { max-width: 30rem; }
.piani { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.piano { border: 1px solid var(--filo); border-radius: 10px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; background: rgba(247,251,249,.02); transition: transform .5s var(--curva), border-color .4s, background .4s; }
@media (hover: hover) { .piano:hover { transform: translateY(-6px); border-color: rgba(52,211,153,.6); background: rgba(247,251,249,.04); } }   /* 26/9: solo dove c'e' un mouse: su iPhone il :hover restava appeso sulla card toccata e sembrava una scelta */
.piano.scelta { border-color: rgba(52,211,153,.6); background: rgba(247,251,249,.04); }   /* 26/9: la card del piano che il grafico dei 30 giorni sta mostrando (gl.js, SCELTA_PIANI) */
#care .piano, .sciame-mese ~ .piani .piano { cursor: pointer; }
.piano-forte { border-color: var(--verde-scuro); background: rgba(16,185,129,.07); }
.piano-nome { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); display: flex; justify-content: space-between; align-items: center; }
.piano-forte .piano-nome { color: var(--verde); }
.piano-nome { min-height: 26px; }   /* 19/9: il distintivo «Most popular» alzava la riga del nome solo in Growth e il contenuto scendeva di 5 px rispetto alle altre due card */
.piano-nome em { font-style: normal; font-size: 11px; letter-spacing: .06em; background: var(--verde); color: var(--fondo); padding: 4px 8px; border-radius: 4px; }
.piano-prezzo b { font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.piano-prezzo > span { color: var(--grigio); margin-left: 6px; }
.piano-per { color: var(--grigio); font-size: 15px; min-height: 2.6em; }
.piano ul { list-style: none; display: flex; flex-direction: column; margin-block: 8px 12px; flex: 1; }
.piano li { padding: 9px 0 9px 22px; border-top: 1px solid var(--filo); font-size: 15px; position: relative; text-wrap: pretty; }
.piano li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; background: var(--verde); }
.piano .azione { align-self: flex-start; }
.azione-grande { min-height: 64px; padding: 0 34px; font-size: clamp(17px, 1.6vw, 22px); }

/* ---------------- chiusura */
.chiusura { padding-block: clamp(120px, 18vw, 240px) clamp(100px, 14vw, 200px); }
.chiusura .riga-p { display: flex; flex-direction: column; gap: 28px; }
.chiusura-titolo { font-size: clamp(52px, 9vw, 150px); max-width: 12ch; letter-spacing: -.035em; line-height: .95; }
.chiusura .corpo-grande { max-width: 34rem; }

/* ---------------- piede */
.piede { position: relative; z-index: 1; border-top: 1px solid var(--filo); padding-block: 56px 48px; }
.piede-griglia { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; margin-bottom: 48px; }
.piede-marca p { color: var(--grigio); font-size: 15px; max-width: 22rem; margin: 16px 0 12px; }
.piede-mail { text-decoration: none; font-weight: 800; color: var(--verde); }
.piede h3 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); margin-bottom: 14px; }
.piede-griglia div a:not(.marchio) { display: block; text-decoration: none; padding: 3px 0; font-size: 13px; opacity: .8; }   /* 18/9: da 15 a 14; 22/9: da 14 a 13 (richieste del committente) */
.piede-griglia div a:hover { opacity: 1; color: var(--verde); }
.piede-dati { color: var(--grigio); font-size: 11px; }   /* 18/9: da 13 a 12; 22/9: da 12 a 11 su richiesta del committente, sotto la soglia di 12 delle etichette in mono (decisione 1 del 18): scelta sua, a verbale */

@media (max-width: 900px) {
  .ancore { display: none; } .azione-piccola { margin-left: auto; min-height: 44px; }
  .piede-griglia div a:not(.marchio) { display: flex; align-items: center; min-height: 44px; padding: 0; } .piede-mail { display: inline-block; padding: 10px 0; }   /* aree di tocco: 44 px, col testo a 13 */
  .servizio a { grid-template-columns: 40px 1fr 48px; grid-template-areas: "n titolo freccia" "n testo freccia"; gap: 12px 16px; padding: 28px 0; align-items: start; }
  .servizio .n { grid-area: n; padding-top: 6px; } .servizio .titolo { grid-area: titolo; } .servizio .testo { grid-area: testo; }
  .servizio .freccia { grid-area: freccia; width: 48px; height: 48px; align-self: center; }
  .indizio { display: none; }
  .perche, .intesta-due, .piani { grid-template-columns: 1fr; gap: 24px; }
  #why { padding-block: clamp(96px, 14vw, 200px); } #why .riga-p { min-height: 0; padding-block: 0; }
  /* 18/9: un principio alla volta anche sul telefono (il blocco si ancora, vedi app.js); l'altezza della voce la misura lo script */
  .passo-principi { gap: 20px; }
  .passo-principi .principi { height: var(--principi-h, 150px); font-size: 18px; }
  .passo-principi .principi strong { font-size: 24px; line-height: 1.15; max-width: none; }
  .passo-principi .principi small { margin-top: 10px; font-size: 16px; }
  /* con movimento ridotto la lista resta impilata, tutta in vista */
  .passo-principi.impilata .principi { height: auto; border-top: 1px solid var(--filo); }
  .passo-principi.impilata .principi li { position: static; opacity: 1; transform: none; display: grid; grid-template-columns: 48px 1fr; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--filo); max-width: none; }
  .passo-principi.impilata .principi li > span { display: block; padding-top: 5px; }
  .passo-principi.impilata .principi strong { font-size: 19px; line-height: 1.3; }
  .passo-principi.impilata .principi small { font-size: 15px; margin-top: 8px; }
  .passo-principi.impilata .tacche { display: none; }
  .passi { grid-template-columns: 1fr; gap: 28px; padding-top: 0; padding-left: 28px; }
  .passi-linea { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .passi-linea i { transform: scaleY(0); transform-origin: top; }
  .passo::before { top: 6px; left: -28px; }
  .piede-griglia { grid-template-columns: 1fr 1fr; gap: 24px; }
  .piede-marca { grid-column: 1 / -1; }
  /* 18/9 sera: i piani corrono in orizzontale; la card accanto si vede per un pezzo, sotto ci sono tacche e frecce */
  .piani { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .piani::-webkit-scrollbar { display: none; }
  .piano { flex: 0 0 min(82%, 360px); scroll-snap-align: center; }
  .piano { transition: border-color .4s, background .4s; }
  .piano:hover { transform: none; }
  .piani-nav { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
  .piani-nav .tacche { display: flex; }
  .piani-prec, .piani-succ { width: 44px; height: 44px; border: 1px solid var(--filo); background: transparent; color: var(--carta); position: relative; cursor: pointer; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 18px, 100% 100%, 0 100%); }
  .piani-prec::after, .piani-succ::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-40%,-50%) rotate(45deg); }
  .piani-prec::after { transform: translate(-60%,-50%) rotate(-135deg); }
  .mese-etichetta { color: var(--carta); }
}
.piani-nav { display: none; }   /* solo sul telefono */
@media (max-width: 900px) { .piani-nav { display: flex; } }
@media (prefers-reduced-motion: reduce) { .indizio { display: none; } }

/* ==== LA SQUADRA · il sistema 3-4-5 (deciso il 17 settembre 2026; tinta: il verde del sito originale, non la sinopia della bozza) ==== */
/* una voce sola: Mona Sans. Larga (125 %) e pesante nei titoli, normale nel testo. Il monospazio solo per cio' che e' numero, misura o etichetta. */
h1, h2, h3, .servizio .titolo, .passo-principi .principi strong, .chiusura-titolo, .piano-prezzo b { font-family: "Mona Sans", system-ui, sans-serif; font-stretch: 125%; font-weight: 800; letter-spacing: -.025em; }
.piano-prezzo b { font-stretch: 112%; }
.marchio span { font-stretch: 125%; font-weight: 800; letter-spacing: .02em; }
.mono, .occhiello, .servizio .n, .principi li > span, .passo-n, .piano-nome, .piano-prezzo > span, .mese-etichetta, .mese-nota, .ancore a, .indizio, .tacche, .piede-dati, .piede h3, .spec { font-family: "Martian Mono", ui-monospace, monospace; font-stretch: 87.5%; font-weight: 400; letter-spacing: .04em; }   /* 400, non 500: due pesi in tutto il sito (400 e 800), deciso il 18 settembre */
.occhiello { font-size: 12px; text-transform: uppercase; color: var(--verde); position: relative; padding-left: 22px; }
/* la squadra: il triangolo 3-4-5 del taglio della F, davanti a ogni titolo di sezione */
.occhiello::before { content: ""; position: absolute; left: 0; top: .1em; width: 12px; height: 16px; background: var(--verde); clip-path: polygon(0 0, 100% 0, 0 100%); }
/* la corda a dodici nodi: il divisore di sezione */
.scena > .riga-p::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 4px; background: radial-gradient(circle, var(--carta) 1.6px, transparent 1.8px) 0 50% / calc(100% / 11) 4px repeat-x; opacity: .5; }
.scena > .riga-p { padding-top: 40px; }
#why .riga-p::before, #services .riga-p::before { display: none; }
/* il taglio 3:4 sulle card e sui pulsanti: 30 orizzontali ogni 40 verticali */
.piano { border-radius: 0; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 32px, 100% 100%, 0 100%); }
.piano::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 32px; background: linear-gradient(to bottom left, transparent 50%, var(--filo) 50%, var(--filo) calc(50% + 1px), transparent calc(50% + 1px)); }
.azione { border-radius: 0; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 12px, 100% 100%, 0 100%); }
.servizio .freccia { border-radius: 0; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 20px, 100% 100%, 0 100%); }
/* il prezzo scritto: la riga di specifica sotto la prima schermata, in mono */
.spec { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 80px); bottom: 60px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 12px; text-transform: uppercase; color: var(--grigio); opacity: 0; animation: appari 1s 3.4s var(--curva) forwards; }
@keyframes appari { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spec { opacity: 1; animation: none; } }
.spec b { color: var(--carta); font-weight: 400; }
.spec span::before { content: ""; display: inline-block; width: 6px; height: 8px; margin-right: 10px; background: var(--verde); clip-path: polygon(0 0, 100% 0, 0 100%); vertical-align: 1px; }
.tacche i { width: 30px; height: 2px; }
@media (max-width: 900px) { .spec { right: var(--gutter); bottom: 44px; font-size: 12px; gap: 7px; display: grid; grid-template-columns: 1fr; } .piega-dentro { bottom: 176px; gap: 20px; }   /* 18/9 sera: 35 px fra i pulsanti e la riga di specifica, prima erano 7 */ .sotto { font-size: 16px; } h1, h2 { letter-spacing: -.02em; } }
.piede-riga { display: block; margin-top: 18px; font-size: 12px; text-transform: uppercase; color: var(--grigio); }

/* ==== PIANI, VARIANTE CORTA (studio del 18/9 notte, approvata dal committente il 19/9: la classe piani-corti sta fissa su #care) ====
   Tre voci che distinguono il piano invece di 7-9, il rimando alla lista completa su /maintenance, e sul telefono tre schede
   con nome e prezzo al posto di frecce e tacche: i tre prezzi si confrontano senza scorrere. */
.piano-tutto, .piani-schede { display: none; }
.piani-corti .piano li:not(.chiave) { display: none; }
.piani-corti .piano ul { flex: 0 0 auto; margin-block: 4px 4px; }
.piani-corti .piano-per { min-height: 3.1em; }   /* 22/9: la frase di Growth va su due righe: le tre liste partono alla stessa altezza */
.piani-corti .piano-tutto { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; font-family: "Martian Mono", ui-monospace, monospace; font-stretch: 87.5%; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--grigio); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--filo); margin-bottom: 8px; }
.piani-corti .piano-tutto:hover { color: var(--verde); }
.piani-corti .piano .azione { margin-top: auto; }
@media (max-width: 900px) {
  .piani-corti .piani-nav { display: none; }
  .piani-corti .piani-schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 16px; border: 1px solid var(--filo); }
  .piani-schede button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 12px; background: transparent; border: 0; border-right: 1px solid var(--filo); color: var(--grigio); font-family: "Martian Mono", ui-monospace, monospace; font-stretch: 87.5%; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; text-align: left; cursor: pointer; transition: background .3s, color .3s; }
  .piani-schede button:last-child { border-right: 0; }
  .piani-schede button b { font-family: "Mona Sans", system-ui, sans-serif; font-stretch: 112%; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--carta); text-transform: none; }
  .piani-schede button.attiva { background: rgba(16,185,129,.12); color: var(--verde); box-shadow: inset 0 -2px 0 var(--verde); }
}

/* ---------------- 23/9: il menu del telefono (lo comanda menu.js). Sul desktop non esiste. */
.menu-apri, .menu { display: none; }
@media (max-width: 900px) {
  .menu-apri { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 2px 0 14px; margin-left: 4px; background: none; border: 0; color: var(--carta); cursor: pointer; font-size: 12px; text-transform: uppercase; }
  .menu-apri:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
  .menu-apri i { position: relative; width: 20px; height: 10px; }
  .menu-apri i::before, .menu-apri i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .35s var(--curva), top .35s var(--curva); }
  .menu-apri i::before { top: 0; } .menu-apri i::after { top: 8px; }
  .menu-apri[aria-expanded="true"] i::before { top: 4px; transform: rotate(45deg); }
  .menu-apri[aria-expanded="true"] i::after { top: 4px; transform: rotate(-45deg); }
  .menu { display: block; position: fixed; inset: 0; z-index: 39; background: var(--fondo); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .35s var(--curva); padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
  .menu[hidden] { display: none; }
  .menu-aperto .menu { opacity: 1; }
  .menu-aperto .testata { transform: none; }
  .menu-aperto .testata::before { opacity: 0; }
  .menu-dentro { display: flex; flex-direction: column; min-height: calc(100% - 1px); padding-block: 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .menu-voci { list-style: none; border-top: 1px solid var(--filo); }
  .menu-voci a { display: flex; align-items: baseline; gap: 18px; min-height: 44px; padding: 13px 0; border-bottom: 1px solid var(--filo); text-decoration: none; font-weight: 800; font-stretch: 125%; font-size: clamp(24px, 7.4vw, 34px); letter-spacing: -.02em; line-height: 1.1; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--curva), transform .6s var(--curva), color .2s; }
  .menu-voci a .mono { font-size: 12px; font-weight: 400; font-stretch: 87.5%; letter-spacing: .04em; color: var(--verde); min-width: 22px; }
  .menu-voci a[aria-current="page"] { color: var(--verde); }
  .menu-voci a:active { color: var(--verde); }
  .menu-aperto .menu-voci a { opacity: 1; transform: none; }
  .menu-voci li:nth-child(2) a { transition-delay: .03s; } .menu-voci li:nth-child(3) a { transition-delay: .06s; } .menu-voci li:nth-child(4) a { transition-delay: .09s; }
  .menu-voci li:nth-child(5) a { transition-delay: .12s; } .menu-voci li:nth-child(6) a { transition-delay: .15s; } .menu-voci li:nth-child(7) a { transition-delay: .18s; }
  .menu-piede { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .menu-piede .piede-mail { display: inline-block; padding: 10px 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .menu, .menu-voci a, .menu-apri i::before, .menu-apri i::after { transition: none; } .menu-voci a { transform: none; } }
@media (max-width: 419px) { .menu-apri .mono { display: none; } .menu-apri { padding: 0 2px 0 12px; } }   /* 23/9: a 390 l'etichetta mandava a capo il marchio: sotto i 420 px resta l'icona (il nome lo da' aria-label) */
@media (max-width: 900px) { .testata .marchio { white-space: nowrap; } }

/* ---------------- 23/9: i pacchetti in home (#prezzi), prima dei piani: stessa card corta, in griglia; sul telefono una sotto l'altra */
.pacchetti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .pacchetti { grid-template-columns: 1fr; gap: 14px; } }

/* ---------------- 23/9, verifica completa: le correzioni */
/* nelle intestazioni a due colonne occhiello e titolo stanno in un div, fuori dalla griglia di .intesta (gap 22): si toccavano */
.intesta-due > div > .occhiello + h2, .griglia-due > div > .occhiello + h2 { margin-top: 22px; }
/* prezzo e unita' («una tantum», «/mese»): se non stanno su una riga vanno a capo con aria, invece di toccarsi */
.piano-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 8px; }
.piano-prezzo > span { margin-left: 0; }
.piano-prezzo b { line-height: 1.05; }
/* tablet e ogni schermo touch: aree di tocco da 44 px anche nel piede e sul pulsante della testata */
@media (pointer: coarse) {
  .piede-griglia div a:not(.marchio) { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .piede-mail { display: inline-flex; align-items: center; min-height: 44px; }
  .azione-piccola { min-height: 44px; }
}
/* col movimento ridotto la lista dei principi (home) e dei valori (Chi siamo) resta impilata e tutta in vista, su ogni schermo */
.passo-principi.impilata .sciame-numero { height: 0; margin: 0; }
.passo-principi.impilata .principi { height: auto; border-top: 1px solid var(--filo); }
.passo-principi.impilata .principi li { position: static; opacity: 1; transform: none; display: grid; grid-template-columns: 48px 1fr; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--filo); max-width: none; }
.passo-principi.impilata .principi li > span { display: block; padding-top: 5px; }
.passo-principi.impilata .principi strong { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; }
.passo-principi.impilata .principi small { font-size: 15px; margin-top: 8px; }
.passo-principi.impilata .tacche { display: none; }
.passo-principi.impilata .principi li strong, .passo-principi.impilata .principi li small { color: var(--carta); opacity: 1; }   /* 23/9: impilati sono tutti accesi, non solo il primo */
.passo-principi.impilata .principi li small { color: var(--grigio); }
/* 23/9 sera: barra dei passi (desktop), fluida. Il passo raggiunto si evidenzia: i passi non ancora raggiunti hanno il
   titolo in grigio, quello corrente e i precedenti in bianco; il segno del passo si accende come prima (.acceso) */
.passi.a-scatti .passo h3 { transition: color .3s; }
.passi.a-scatti .passo:not(.acceso) h3 { color: var(--grigio); }