/* =========================================================
   PAGINE INTERNE — metodo, azienda, portfolio, assistenza
   ---------------------------------------------------------
   Fasi del metodo (anche in guida-email/), tavola del preventivo,
   condizioni, tappe della storia, scheda cliente del portfolio,
   e la scena di metodo e azienda.
   ========================================================= */

/* ---------------------------------------------------------
   FASI DEL METODO
   Celle contigue in colonna: numero grande a sinistra, il
   fatto a destra, e in coda chi c'e' e cosa resta al cliente.
   --------------------------------------------------------- */
.fasi{display:grid;gap:1px;background:var(--line-d)}
.fase{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(24px,3vw,52px);padding:clamp(34px,3.8vw,60px) var(--pad)}
.fase__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange)}
.fase__nn{
    display:block;font-size:clamp(46px,5.4vw,84px);line-height:.82;letter-spacing:-.06em;
    font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;
    color:var(--on-dark-2);margin-top:16px;
}
.blk--bone .fase__nn{color:var(--on-light-2)}
/* .fase__body porta testo e riepilogo affiancati sopra i 900px
   (stessa gabbia di .pintro, la sezione /00 appena sopra): il
   riepilogo (.fase__f) smette di stare in coda a tutta larghezza
   e diventa un filo di lettura suo, cosi' lo spazio che il testo
   corto lascia libero sui monitor larghi va a un contenuto vero,
   non a un filetto che corre a vuoto (misurato: a 1920px il .fase__l
   di prima riempiva ~30% della riga, il resto era il solo
   border-bottom). Sotto i 900px torna il flusso di sempre — vedi
   RESPONSIVE DELLE PAGINE INTERNE. */
.fase__c{min-width:0}
.fase__t{
    font-size:clamp(22px,2.8vw,38px);line-height:1;letter-spacing:-.04em;
    text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;margin-bottom:16px;
}
.fase__d{font-size:15px;line-height:1.62;opacity:.84;max-width:64ch;margin-bottom:26px}
.fase__l{max-width:64ch}
.fase__l li{display:flex;gap:12px;align-items:baseline;font-size:14px;line-height:1.55;padding:9px 0;border-bottom:1px solid var(--line-d)}
.blk--bone .fase__l li{border-bottom-color:var(--line-l)}
.fase__l li::before{content:'';width:7px;height:7px;background:var(--orange);flex:0 0 auto;transform:translateY(-2px)}
.blk--bone .fase__l li::before{background:var(--orange-ink)}
.fase__f{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border-top:1px solid var(--line-d)}
.blk--bone .fase__f{border-top-color:var(--line-l)}
.fase__f div{flex:1 1 240px;padding:18px 24px 0 0}
.fase__f div + div{padding-left:26px;border-left:1px solid var(--line-d)}
.blk--bone .fase__f div + div{border-left-color:var(--line-l)}
.fase__f dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.fase__f dd{margin:0;font-size:14.5px;line-height:1.5;font-variation-settings:'wdth' 104,'wght' 600}

/* Sopra i 900px il riepilogo lascia la coda a tutta larghezza e
   diventa il filo verticale a destra del testo: due fatti, uno
   sotto l'altro, con lo stesso filetto da 1px che altrove separa
   le celle contigue. */
@media (min-width:901px){
    .fase__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);column-gap:clamp(28px,3.4vw,48px)}
    .fase__f{flex-direction:column;flex-wrap:nowrap;margin-top:0;border-top:0;border-left:1px solid var(--line-d);padding-left:clamp(20px,2.6vw,30px)}
    .blk--bone .fase__f{border-left-color:var(--line-l)}
    .fase__f div{flex:none;padding:0 0 22px 0}
    .fase__f div + div{padding-left:0;border-left:0;padding-top:22px;border-top:1px solid var(--line-d);margin-top:0}
    .blk--bone .fase__f div + div{border-top-color:var(--line-l)}
    .blk--orange .fase__f div + div{border-top-color:rgba(35,18,4,.22)}
}

/* CONTRASTO DELLE CELLE FASE — misurato, non a occhio.
   L'arancio come testo vale su coal e basta: su steel #DE7B23 sta a
   3,1:1 e su arancio pieno sparisce del tutto. Stessa storia per il
   grigio --on-dark-2, 3,8:1 su steel e 1,2:1 su arancio. Su questi
   due fondi le micro-etichette passano al colore del testo del
   blocco, calato quel tanto che basta a restare sopra 4,5:1
   (--on-orange a .85 su arancio: 4,8:1; --on-dark a .8 su steel:
   6,0:1). Il numerone e' display type, gli basta 3:1. */
.blk--steel .fase__n,.blk--steel .fase__f dt{color:var(--on-dark);opacity:.8}
.blk--steel .fase__nn{color:var(--on-dark);opacity:.55}
.blk--orange .fase__n,.blk--orange .fase__f dt{color:var(--on-orange);opacity:.85}
.blk--orange .fase__nn{color:var(--on-orange);opacity:.7}
.blk--orange .fase__d{opacity:.92}
.blk--orange .fase__l li::before{background:var(--on-orange)}
.blk--orange .fase__l li,.blk--orange .fase__f{border-color:rgba(35,18,4,.22)}
.blk--orange .fase__f div + div{border-left-color:rgba(35,18,4,.22)}
.blk--orange .svc__rk{opacity:.85}

/* LE FASI IMPILATE — la stessa animazione dei pannelli di GARANZIE
   nella home (.stack/.pan): ogni fase si ferma sotto la testata,
   24px piu' in basso della precedente, e la successiva le sale
   sopra. E' solo position:sticky. Per questo le .fase non hanno
   data-anim="fade": un pannello ancora mezzo trasparente che sale
   sopra quello fermo farebbe leggere un testo sotto l'altro.
   Il filetto da 1px passa dal gap al border-top: il gap sta fuori
   dal pannello, e il pannello fermo di sopra lo coprirebbe.
   Pannello piu' alto dello spazio che resta: fermo sotto la
   testata, il suo fondo finirebbe sotto il successivo senza essere
   mai passato sullo schermo. Allora si ferma quando il FONDO tocca
   il fondo dello schermo — si perde la testa, non il contenuto
   (la stessa regola della Storia, main.js sezione 7). --fase-h la
   scrive main.js («FASI IMPILATE»); senza JS vale 520px, poco sopra
   la fase piu' alta misurata (510px a 1920), e 620px basta anche
   alla colonna singola del telefono (600-760px misurati).
   Oggi scatta sugli schermi bassi (a 960x600 le fasi 04 e 05) e
   su quasi tutti i telefoni.
   Dal 2026-09-14 vale ANCHE sotto i 900px, dove prima le fasi
   scorrevano via come un elenco qualunque: e' la stessa cosa che
   era gia' stata fatta per le .pan di GARANZIE, e il JS misura
   --fase-h a ogni larghezza, quindi non serviva altro. In
   colonna singola la fase e' piu' alta che larga e puo' superare
   lo schermo: allora si ferma sul suo FONDO — si perde la testa,
   non il contenuto. Lo scalino da 24px sopravvive finche' c'e'
   spazio (a 390x844 tutte e cinque); dove non ce n'e' le fasi si
   fermano a filo, che su un telefono e' quello che serve.
   Il top NON e' piu' limitato verso il basso da --hdr (c'era un
   max(var(--hdr), …)): con una fase piu' alta di 100svh - --hdr il
   fondo restava sotto la fase successiva e non si leggeva (bug fase
   03 da mobile). Ora top puo' diventare negativo, e la fase si ferma
   quando il suo fondo tocca il fondo dello schermo.
   Con prefers-reduced-motion restano in colonna, ferme. */
@media (prefers-reduced-motion:no-preference){
    .fasi{gap:0}
    .fase{position:sticky;top:min(calc(var(--hdr) + var(--fase-o,0px)),calc(100svh - var(--fase-h,620px)))}
    .fase + .fase{border-top:1px solid var(--line-d)}
    .fase:nth-child(2){--fase-o:24px}
    .fase:nth-child(3){--fase-o:48px}
    .fase:nth-child(4){--fase-o:72px}
    .fase:nth-child(5){--fase-o:96px}
}
/* Fasi compatte sotto i 900px: la fase piu' alta (la 03) superava lo
   spazio sotto la testata e, fermandosi sul fondo, perdeva la
   striscia a scalino delle precedenti. Accorciandole stanno tutte
   sotto la testata e l'impilamento torna come in GARANZIE. Se lo
   schermo e' comunque troppo basso, resta la regola del fondo. */
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
    .fase{padding-block:clamp(20px,3.2svh,30px);gap:8px}
    .fase__nn{display:none}
    .fase__t{margin-bottom:8px}
    .fase__d{font-size:14px;line-height:1.5;margin-bottom:14px}
    .fase__l li{font-size:13.5px;line-height:1.45;padding:6px 0}
    .fase__f{margin-top:12px}
    .fase__f div{padding-top:10px}
    .fase__f div + div{margin-top:0;padding-top:10px}
    .fase__f dt{margin-bottom:4px}
    .fase__f dd{font-size:13.5px;line-height:1.4}
}

/* ---------------------------------------------------------
   TAVOLA DEL PREVENTIVO — cosa e' a corpo, cosa a consumo,
   cosa non c'e' dentro. Una voce per riga, lo stato a destra.
   --------------------------------------------------------- */
.tav{border-top:1px solid var(--line-l)}
.tav li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-l)}
.tav span{font-size:15px;line-height:1.5;max-width:62ch}
.tav b{
    flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;
    text-transform:uppercase;padding:5px 11px;border:1px solid currentColor;
}
.tav .is-corpo{color:var(--orange-ink)}
.tav .is-consumo{color:var(--on-light-2)}
.tav .is-fuori{color:var(--on-light-2);border-style:dashed}

/* ---------------------------------------------------------
   CONDIZIONI — quattro celle, e in fondo cosa succede se manca
   --------------------------------------------------------- */
.cond{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,48px) var(--pad)}
.cond__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);margin-bottom:24px}
.cond__t{
    font-size:clamp(19px,2vw,26px);line-height:1.06;letter-spacing:-.035em;
    text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:14px;
}
.cond__d{font-size:14px;line-height:1.6;opacity:.8;margin-bottom:24px}
.cond__x{
    margin-top:auto;padding-top:18px;border-top:1px solid currentColor;
    font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;opacity:.72;
}

/* ---------------------------------------------------------
   TAPPE — la storia in verticale (la home ce l'ha in
   orizzontale, bloccata; qui e' una lettura, non una scena)
   --------------------------------------------------------- */
.tap{display:grid;gap:1px;background:var(--line-l);position:relative;--tap-pt:clamp(28px,3.2vw,48px)}
/* rientro a sinistra di 38px: ci passa il filo della storia (IL BINARIO DELLA STORIA, sotto) */
.tapx{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(20px,3vw,52px);position:relative;padding:var(--tap-pt) var(--pad) var(--tap-pt) calc(var(--pad) + 38px);background:var(--bone)}
.tap__y{
    display:block;font-size:clamp(34px,4vw,58px);line-height:.86;letter-spacing:-.06em;
    font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;color:var(--orange-ink);
}
.tap__t{
    font-size:clamp(19px,2.1vw,28px);line-height:1.06;letter-spacing:-.035em;
    text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:12px;
}
.tap__d{font-size:14.5px;line-height:1.62;color:var(--on-light-2);max-width:66ch}
.tapx--now{background:var(--orange);color:var(--on-orange)}
.tapx--now .tap__y{color:var(--on-orange)}
.tapx--now .tap__d{color:var(--on-orange);opacity:.88}

/* ---------------------------------------------------------
   PORTFOLIO — la scheda cliente (portfolio/)
   Una scheda per cliente, con lo stesso markup in tre misure:
   a sinistra (o sopra) la LASTRA coal con il marchio, la sigla
   PF-nn e i segni di taglio agli angoli; accanto il CORPO con
   nome, titolo del lavoro, descrizione e "cosa abbiamo fatto"
   a celle contigue; in fondo il PLINTO — settore, e l'area in
   una cella arancio piena, come la cella d'apertura del plinto
   della locandina.
   La misura segue il peso del lavoro:
     --xl  gestionali e consulenza: lastra 5/12, corpo 7/12
     --m   commercio online: tre in fila, lastra sopra
     --s   siti: righe, con il plinto in colonna a destra
   I marchi vanno a osso pieno come nel nastro (.mark img):
   la lastra e' sempre coal, qualunque sia il fondo del corpo.

   CONTRASTO — le regole di §11.2, rifatte sui fondi di qui:
   etichette mono arancio solo su coal/coal-2 (5,9:1); su steel
   --on-dark a .8 (6,0:1); su bone --orange-ink (4,60:1); su
   arancio --on-orange a .85 (4,8:1). La sigla PF sulla lastra
   e' arancio su coal (6,1:1). Le intestazioni di sezione (.shd)
   seguono la regola generale: --orange-ink-2 su .sec--bone (§2).
   I <dt> del plinto a .62 del testo stanno sopra 4,5:1 su coal
   e bone, ma su steel scenderebbero a 4,4:1: li' vanno a .8.
   --------------------------------------------------------- */

/* i tre contenitori: il filetto da 1px passa nel gap */
.pf__xl,.pf__m,.pf__s{display:grid;gap:1px;background:var(--line-d)}
.pf--bone .pf__s{background:var(--line-l)}
.pf__m{grid-template-columns:repeat(3,minmax(0,1fr))}

.pfc{
    --pfc-cr:clamp(14px,1.5vw,22px);  /* rientro dei segni di taglio */
    --pfc-lg:220px;                   /* larghezza del marchio */
    display:grid;gap:1px;background:inherit;min-width:0;
}

/* --- la lastra --- */
.pfc__mk{
    position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
    background:var(--coal);overflow:hidden;
    padding:clamp(56px,6vw,92px) clamp(28px,3vw,52px);
}
.pfc__lg{position:relative;display:block;width:var(--pfc-lg);max-width:100%}
.pfc__lg img{
    display:block;width:100%;height:auto;
    filter:brightness(0) invert(1);opacity:.9;transition:opacity .5s var(--ease);
}
.pfc:hover .pfc__lg img{opacity:1}
/* la riga della scansione: la fa correre main.js, a riposo non c'e' */
.pfc__sc{position:absolute;top:-16px;bottom:-16px;left:0;width:2px;background:var(--orange);opacity:0;pointer-events:none}
.pfc__id{
    position:absolute;z-index:1;top:calc(var(--pfc-cr) - 1px);left:calc(var(--pfc-cr) + 22px);
    font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);
}
.pfc__id b{font-weight:500;color:var(--orange)}
/* segni di taglio: a riposo grigi, sulla scheda sotto il mouse
   arancio e 4px piu' fuori — transform, non posizione */
.pfc__cr{position:absolute;inset:var(--pfc-cr);pointer-events:none}
.pfc__cr i{
    position:absolute;width:12px;height:12px;border:0 solid rgba(244,242,238,.34);
    transition:transform .55s var(--ease),border-color .55s var(--ease);
}
.pfc__cr i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;transform-origin:0 0}
.pfc__cr i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;transform-origin:100% 0}
.pfc__cr i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;transform-origin:0 100%}
.pfc__cr i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;transform-origin:100% 100%}
.pfc:hover .pfc__cr i,.pfc:focus-within .pfc__cr i{border-color:var(--orange)}
.pfc:hover .pfc__cr i:nth-child(1),.pfc:focus-within .pfc__cr i:nth-child(1){transform:translate(-4px,-4px)}
.pfc:hover .pfc__cr i:nth-child(2),.pfc:focus-within .pfc__cr i:nth-child(2){transform:translate(4px,-4px)}
.pfc:hover .pfc__cr i:nth-child(3),.pfc:focus-within .pfc__cr i:nth-child(3){transform:translate(-4px,4px)}
.pfc:hover .pfc__cr i:nth-child(4),.pfc:focus-within .pfc__cr i:nth-child(4){transform:translate(4px,4px)}

/* --- il corpo --- */
.pfc__b{display:flex;flex-direction:column;min-width:0}
.pfc__in{flex:1 1 auto;padding:clamp(34px,3.6vw,64px) var(--pad) clamp(30px,3.2vw,54px)}
.pfc__t{font-weight:inherit}
.pfc__n{
    display:flex;align-items:center;gap:10px;margin-bottom:clamp(12px,1.3vw,18px);
    font-size:clamp(15px,1.15vw,17px);line-height:1.25;letter-spacing:-.01em;
    font-variation-settings:'wdth' 100,'wght' 650;
}
.pfc__n::before{content:'';width:7px;height:7px;flex:0 0 auto;background:var(--orange)}
.pfc__tt{
    display:block;font-size:clamp(25px,2.6vw,42px);line-height:.96;letter-spacing:-.04em;
    text-transform:uppercase;font-variation-settings:'wdth' 110,'wght' 700;max-width:17ch;
}
.pfc__d{margin-top:clamp(16px,1.6vw,24px);font-size:15px;line-height:1.62;max-width:58ch;opacity:.84}
.pfc__f{margin-top:clamp(22px,2.4vw,34px)}
.pfc__fk{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
/* le voci del lavoro: celle contigue che vanno a capo da sole.
   I bordi si sovrappongono di 1px, cosi' fra due celle il
   filetto resta uno solo anche quando la riga si spezza. */
.pfc__s{display:flex;flex-wrap:wrap;padding:1px 0 0 1px}
.pfc__s li{
    margin:-1px 0 0 -1px;padding:8px 12px 7px;border:1px solid rgba(244,242,238,.22);
    font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:.02em;text-transform:uppercase;
}

/* --- il plinto --- */
.pfc__p{display:flex;border-top:1px solid var(--line-d)}
.pfc__p > div{flex:1 1 auto;display:flex;flex-direction:column;gap:7px;min-width:0;padding:15px var(--pad) 17px}
.pfc__p > div + div{border-left:1px solid var(--line-d)}
.pfc__p dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.62}
.pfc__p dd{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.3;font-variation-settings:'wdth' 106,'wght' 700}
.pfc__p > .pfc__pa{flex:0 0 auto;min-width:clamp(150px,13vw,210px);background:var(--orange);color:var(--on-orange)}
.pfc__pa dt{opacity:.85}
.pfc__pa dd{display:flex;flex-wrap:wrap;gap:4px 14px}
.pfc__pa a{
    font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
    padding-bottom:2px;border-bottom:1px solid currentColor;transition:box-shadow .3s var(--ease);
}
.pfc__pa a:hover{box-shadow:inset 0 -2px 0 currentColor}
.pfc__pa a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* i fondi del corpo */
.blk--bone .pfc__n::before{background:var(--orange-ink)}
.blk--bone .pfc__fk{color:var(--orange-ink)}
.blk--bone .pfc__s li{border-color:rgba(20,20,22,.22)}
.blk--bone .pfc__p,.blk--bone .pfc__p > div + div{border-color:var(--line-l)}
.blk--steel .pfc__fk{color:var(--on-dark);opacity:.8}
.blk--steel .pfc__n::before{background:var(--on-dark)}
.blk--steel .pfc__s li{border-color:rgba(244,242,238,.3)}
.blk--steel .pfc__p dt{opacity:.8}
.blk--steel .pfc__pa dt{opacity:.85}
.blk--orange .pfc__n::before{background:var(--on-orange)}
.blk--orange .pfc__fk{color:var(--on-orange);opacity:.85}
.blk--orange .pfc__d{opacity:.92}
.blk--orange .pfc__s li{border-color:rgba(35,18,4,.3)}
.blk--orange .pfc__p,.blk--orange .pfc__p > div + div{border-color:rgba(35,18,4,.22)}
.blk--orange .pfc__p dt{opacity:.85}
/* sul corpo arancio la cella dell'area non puo' essere arancio:
   passa a coal, e l'etichetta torna arancio (6,1:1) */
.blk--orange .pfc__pa{background:var(--coal);color:var(--on-dark)}
.blk--orange .pfc__pa dt{color:var(--orange);opacity:1}

/* --- la misura grande --- */
.pfc--xl{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pfc--xl .pfc__mk{--pfc-lg:clamp(170px,16vw,260px);min-height:clamp(320px,31vw,500px)}
.pfc--r .pfc__mk{order:2}

/* --- la misura media: la lastra sopra --- */
.pfc--m{grid-template-rows:auto minmax(0,1fr)}
.pfc--m .pfc__mk{--pfc-lg:clamp(150px,12vw,210px);aspect-ratio:16/9;padding-block:0}
.pfc--m .pfc__in{padding:clamp(28px,2.6vw,44px) var(--pad) clamp(26px,2.4vw,40px)}
.pfc--m .pfc__tt{font-size:clamp(21px,1.8vw,29px);line-height:1;max-width:none}
.pfc--m .pfc__d{font-size:14.5px}

/* --- la misura piccola: una riga --- */
.pfc--s{grid-template-columns:clamp(240px,22vw,340px) minmax(0,1fr)}
.pfc--s .pfc__mk{--pfc-lg:clamp(140px,11vw,190px);min-height:200px;padding:52px 24px}
.pfc--s .pfc__b{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,19vw,290px)}
.pfc--s .pfc__in{padding:clamp(26px,2.6vw,40px) clamp(24px,2.8vw,48px)}
.pfc--s .pfc__tt{font-size:clamp(19px,1.65vw,25px);line-height:1;max-width:none}
.pfc--s .pfc__d{font-size:14.5px;max-width:62ch}
.pfc--s .pfc__f{margin-top:clamp(16px,1.6vw,22px)}
.pfc--s .pfc__p{flex-direction:column;border-top:0;border-left:1px solid var(--line-l)}
.pfc--s .pfc__p > div{flex:0 0 auto;padding:18px var(--pad) 18px clamp(20px,2vw,30px)}
.pfc--s .pfc__p > div + div{border-left:0;border-top:1px solid var(--line-l)}
/* l'area nell'angolo in basso a destra della riga */
.pfc--s .pfc__p > .pfc__pa{margin-top:auto;min-width:0}

@media (max-width:1180px){
    .pf__m{grid-template-columns:minmax(0,1fr)}
    .pfc--m{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto}
    .pfc--m .pfc__mk{aspect-ratio:auto;min-height:260px;padding-block:56px}
    .pfc--s .pfc__b{grid-template-columns:minmax(0,1fr)}
    .pfc--s .pfc__p{flex-direction:row;border-left:0;border-top:1px solid var(--line-l)}
    .pfc--s .pfc__p > div{flex:1 1 auto;padding:15px clamp(24px,2.8vw,48px) 17px}
    .pfc--s .pfc__p > div + div{border-top:0;border-left:1px solid var(--line-l)}
    .pfc--s .pfc__p > .pfc__pa{margin-top:0;flex:0 0 auto}
}
@media (max-width:900px){
    .pfc--xl,.pfc--m,.pfc--s{grid-template-columns:minmax(0,1fr)}
    .pfc--r .pfc__mk{order:0}
    .pfc--xl .pfc__mk,.pfc--m .pfc__mk{min-height:220px;padding-block:52px}
    .pfc--s .pfc__mk{min-height:160px;padding-block:44px}
    .pfc--s .pfc__in,.pfc--s .pfc__p > div{padding-inline:var(--pad)}
    .pfc__tt{max-width:none}
}
@media (max-width:620px){
    .pfc__p,.pfc--s .pfc__p{flex-direction:column}
    .pfc__p > div + div,.pfc--s .pfc__p > div + div{border-left:0;border-top:1px solid var(--line-d)}
    .blk--bone .pfc__p > div + div,.pfc--s .pfc__p > div + div{border-top-color:var(--line-l)}
    .blk--orange .pfc__p > div + div{border-top-color:rgba(35,18,4,.22)}
    .pfc__p > .pfc__pa{min-width:0}
}

/* ---------------------------------------------------------
   RESPONSIVE (metodo, azienda)
   --------------------------------------------------------- */
@media (max-width:900px){
    .fase,.tapx{grid-template-columns:1fr;gap:14px}
    .fase__nn{margin-top:6px}
    .tav li{flex-direction:column;gap:10px;align-items:flex-start}
}
@media (max-width:620px){
    .fase__f div + div{padding-left:0;border-left:none;border-top:1px solid var(--line-d);margin-top:16px}
}

/* =========================================================
   SCENA DELLE PAGINE INTERNE
   ---------------------------------------------------------
   Qui sta solo cio' che il movimento ha bisogno di trovare
   gia' scritto in pagina, e sta sempre nello stato FINALE:
   nulla e' nascosto dal CSS in attesa del JS (CLAUDE.md
   par. 6, regola 1). Senza GSAP, o con prefers-reduced-motion,
   quello che si vede qui sotto e' la pagina finita.
   I gesti stanno in main.js, sezione 14.
   ========================================================= */

/* I quadratini arancio degli elenchi scattano uno dopo l'altro
   mentre la riga si stampa: l'apertura scrive --sq. Il valore
   di riposo e' 1, quindi senza JS sono tutti al loro posto. */

.fase__l li{--sq:1}
.fase__l li::before{transform:translateY(-2px) scale(var(--sq))}

/* ---------------------------------------------------------
   IL BINARIO DELLA STORIA (pagina Azienda)
   Il filo verticale a sinistra delle tappe. La traccia da 1px
   c'e' sempre; il pieno arancio lo tira lo scroll (scaleY, non
   height), e ogni tappa accende il suo marcatore quando arriva.
   Stato di riposo = tutto disegnato e tutti i marcatori pieni:
   senza JS si legge una storia ferma e intera, non vuota. E'
   main.js che, solo quando anima, mette .is-off per spegnerli.
   (position e rientro di .tap/.tapx stanno nella regola base, TAPPE.)
   --------------------------------------------------------- */

/* parte dal primo marcatore e arriva in fondo al gruppo: la
   storia non finisce sull'ultima tappa, e il filo che esce dal
   bordo lo dice meglio di un filo che si ferma a mezz'aria. */
.tap__rail{
    position:absolute;z-index:1;pointer-events:none;
    left:calc(var(--pad) + 11px);top:calc(var(--tap-pt) + 18px);bottom:0;
    width:1px;background:var(--line-l);
}
.tap__rail i{position:absolute;inset:0;background:var(--orange-ink);transform-origin:top center}

/* il marcatore di ogni tappa, sul binario. z-index 2: passa
   sopra al filo, che se no gli attraverserebbe il centro. */
.tapx::before{
    content:'';position:absolute;z-index:2;
    left:calc(var(--pad) + 6px);top:calc(var(--tap-pt) + 13px);
    width:11px;height:11px;background:var(--orange-ink);
    transition:background .45s var(--ease),transform .45s var(--ease);
}
.tapx.is-off::before{background:var(--bone-2);box-shadow:inset 0 0 0 1px var(--orange-ink);transform:scale(.7)}
/* sull'ultima tappa il fondo e' arancio pieno: li' il marcatore
   arancio sparirebbe, e passa al colore del testo del blocco.
   Fermo, non lampeggiante: l'anno in corso lo dice gia' la cella
   arancio, e un quadratino che pulsa a fianco di una data sarebbe
   decorazione (i pallini che lampeggiano, nella locandina, dicono
   uno stato che cambia davvero). */
.tapx--now::before{background:var(--on-orange)}
.tapx--now.is-off::before{background:transparent;box-shadow:inset 0 0 0 1px var(--on-orange)}

@media (max-width:620px){
    .tapx{padding-left:calc(var(--pad) + 30px)}
    .tap__rail{left:calc(var(--pad) + 7px)}
    .tapx::before{left:calc(var(--pad) + 2px)}
}

/* ---------------------------------------------------------
   GUIDE — L'INDICE (assistenza/)
   Sta qui e non in guide.css: assistenza/ e' una pagina Interne,
   e il page type Interne non carica guide.css.
   La famiglia di guide (.gu) e la riga di guida (.gr). Il resto
   sono le classi di sempre (.phero, .band, .shd, .grid2/3/4,
   .cell, .rec, .stats, .cta, .altre, il footer).
   Le due famiglie sono le due celle di una .grid2: si aprono dal
   filetto da 1px con la passata di main.js (§6.1) e sotto i 900px
   vanno in colonna da sole.
   CONTRASTO (§11.2) su coal: sigla arancio 6,4:1, titolo della riga
   --on-dark 17,1:1, stato --on-dark-2 7,9:1.
   MOVIMENTO: niente opacity:0 in attesa del JS (§6, regola 1); la
   freccia si muove in transform, non in width (regola 2).
   --------------------------------------------------------- */
.gu{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,48px) var(--pad)}
.gu__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:22px}
.gu__t{
    font-size:clamp(20px,2.1vw,28px);line-height:1.08;letter-spacing:-.035em;
    text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;margin-bottom:14px;
}
.gu__d{font-size:14px;line-height:1.62;opacity:.78;max-width:46ch}
.gu__l{margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line-d)}
.gu__n{margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.01em;opacity:.6}
.gu__n b{font-weight:500;opacity:1}

/* il titolo della famiglia come link: sottolineatura arancio, freccia che scatta */
.gu__go{
    color:inherit;text-decoration:underline 2px var(--orange);text-underline-offset:.2em;
    transition:color .35s var(--ease);
}
.gu__w{white-space:nowrap}
.gu__a{display:inline-block;margin-left:.35em;font-style:normal;color:var(--orange);transition:transform .35s var(--ease)}
.gu__go:hover,.gu__go:focus-visible{color:var(--orange)}
.gu__go:hover .gu__a,.gu__go:focus-visible .gu__a{transform:translateX(5px)}
.gu__go:focus-visible{outline:3px solid var(--orange);outline-offset:4px}

/* LA RIGA DI GUIDA — sigla, titolo, stato, freccia. Alta 52px: e' gia'
   un bersaglio da dito (§16.1). La freccia entra da sinistra all'hover,
   come le righe del footer (.ftr__l). */
.gr{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
    gap:6px 16px;align-items:baseline;padding:15px 0 16px;
    border-bottom:1px solid var(--line-d);color:var(--on-dark);
    transition:color .35s var(--ease);
}
.gr__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);font-variant-numeric:tabular-nums;transition:color .35s var(--ease)}
.gr__t{font-size:15px;line-height:1.4;font-variation-settings:'wdth' 104,'wght' 600}
.gr__s{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);text-align:right}
.gr__a{font-style:normal;opacity:0;transform:translateX(-7px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
a.gr:hover,a.gr:focus-visible{color:var(--orange)}
a.gr:hover .gr__a,a.gr:focus-visible .gr__a{opacity:1;transform:translateX(0)}
a.gr:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* la guida che non c'e' ancora: NON e' un link, e si vede. Sigla senza
   arancio, stato tratteggiato (come .tav .is-fuori). La freccia resta a
   opacita' zero per tenere le colonne allineate. Niente opacita' sulla
   riga intera: sigla e stato scenderebbero a 3,6:1, sotto AA. Si spegne
   solo il titolo (a .82 sta a ~10,9:1).
   Quando la pagina esiste: lo <span> diventa <a class="gr" href> e perde
   gr--soon. */
.gr--soon .gr__t{opacity:.82}
.gr--soon .gr__k{color:var(--on-dark-2)}
.gr--soon .gr__s{border-bottom:1px dashed currentColor;padding-bottom:3px}

/* sotto i 620px lo stato va sotto il titolo: accanto, «IN PREPARAZIONE»
   si prendeva meta' della riga (righe alte 119px a 390, 182px a 320). */
@media (max-width:620px){
    .gr{grid-template-columns:auto minmax(0,1fr) auto}
    .gr__s{grid-column:2;grid-row:2;justify-self:start;text-align:left}
    .gr__a{grid-column:3;grid-row:1}
}
/* sul telefono il :hover non scatta, o resta attaccato: la pressione ha
   il suo stato (§16.2). L'area di tocco del titolo a 44px (§16.1). */
@media (hover:none){
    a.gr:active{color:var(--orange)}
    a.gr:active .gr__a{opacity:1;transform:translateX(0)}
    .gu__go:active{color:var(--orange)}
    .gu__go:active .gu__a{transform:translateX(5px)}
}
@media (pointer:coarse){
    .gu__go{position:relative}
    .gu__go::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* ---------------------------------------------------------
   GOOGLE PARTNER — google-partner/
   Tutto il resto e' gia' altrove: .certc (sigillo), .stats,
   .risp, .grid3/.cell. Qui solo i due link verso il profilo
   pubblico su Google.
   --------------------------------------------------------- */
/* .cell e' una colonna flex: senza align-self il .lnk si allunga
   a tutta la cella e il suo filetto corre fino al bordo destro */
.gp__lnk{align-self:flex-start;margin-top:26px}
/* il link nel cartiglio della .certc (coal-2): il valore resta
   on-dark, l'arancio sta sul filetto — come a.rec__v */
.gp__a{border-bottom:1px solid var(--orange);padding-bottom:2px;transition:color .3s var(--ease)}
.gp__a:hover{color:var(--orange)}
.gp__a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
@media (hover:none){
    .gp__a:active{color:var(--orange)}
}
/* il segno e' una riga mono da 11px: l'area di tocco la porta a 44px
   un ::before, come .lnk in telefono.css (§16.1) */
@media (pointer:coarse){
    .gp__a{position:relative}
    .gp__a::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}