/* =========================================================================
   15-taste.css, @layer taste
   Caricato solo da definitiva-taste.html, copia di lavoro della definitiva.
   Revisione estetica con la skill taste: nessun testo cambia, nessun file
   condiviso cambia. Ogni blocco dice cosa corregge e perche'.

   Il layer taste e' dichiarato per ultimo nell'head della copia, quindi
   vince su tokens, reset, primitives, components, skin e overrides senza
   bisogno di !important. Tutti i selettori partono da .c-definitiva.
   ========================================================================= */

@layer taste {

  /* =====================================================================
     1. HERO RICOMPOSTA
     Il volto di Michele stava dietro il pannello "Growth system" ed era la
     sola foto reale del primo schermo. L'H1 andava su 4 righe per il limite
     di 14ch, e il pavimento di contrasto disegnava un rettangolo piu' scuro
     con i bordi netti sulla scena.
     ===================================================================== */

  @media (min-width: 901px) {
    /* Piu' spazio al titolo, pannello piu' stretto e allineato a destra:
       il volto resta libero sopra il pannello. */
    .c-definitiva .hero-grid {
      --hero-copy-fr: 1.3fr;
      --hero-aside-fr: .7fr;
      align-items: end;
    }

    /* La hero riempie il primo schermo: senza, a 1440x900 restava in fondo
       una striscia di carta di 7px che sembrava un errore di resa. */
    .c-definitiva #top {
      min-height: calc(100svh - var(--header-h) - 1px);
    }

    /* Niente rettangolo dietro il testo: il contrasto lo regge lo scrim,
       che nel primo quarto della scena e' gia' all'inchiostro al 94%. */
    .c-definitiva .hero-copy {
      padding-inline-end: 0;
      background: none;
    }

    .c-definitiva .hero .panel[data-variant="hero"] {
      justify-self: end;
      width: min(100%, 392px);
    }

    .c-definitiva .hero .panel[data-variant="hero"] .panel-list > li {
      padding-block: 10px;
    }

    /* Lo scroll cue cade sopra la maglietta chiara del ritratto: gia' oggi
       si fermava a 3,4:1 a 1440 e 2,6:1 a 1024 (campionato sui pixel, il
       verify conta i gradienti come ignoti). Un gradino di inchiostro in piu'
       lo porta sopra 5,8:1 nel punto peggiore. */
    .c-definitiva .hero-scroll {
      color: var(--ink-2);
    }

    /* La foto sfuma anche a sinistra, cosi' non chiude piu' con un bordo
       verticale netto a meta' scena. Lo spostamento orizzontale usa left e
       non transform: dove animation-timeline non esiste (Firefox, parte di
       Safari) la parallasse di site.js riscrive transform in linea a ogni
       scroll, e la foto tornava sotto il testo. translate e scale restano
       alla parallasse CSS. */
    .c-definitiva .ph-hero[data-photo-focus="portrait-immersive"] > img {
      position: relative;
      transform: none;
      -webkit-mask-image:
        linear-gradient(to right, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 18%),
        linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 12%, rgb(var(--black-rgb)) 76%, rgb(var(--black-rgb) / 0) 100%);
      mask-image:
        linear-gradient(to right, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 18%),
        linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 12%, rgb(var(--black-rgb)) 76%, rgb(var(--black-rgb) / 0) 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }
  }

  /* Fra 901 e 1180 la colonna del pannello si stringe e copriva di nuovo il
     volto: il pannello riprende un po' di larghezza, la foto si allarga,
     rientra e sale. Il titolo resta quello della definitiva, su quattro
     righe con una frase per riga. */
  @media (min-width: 901px) and (max-width: 1180px) {
    .c-definitiva .hero-grid {
      --hero-copy-fr: 1.12fr;
      --hero-aside-fr: .88fr;
    }

    .c-definitiva .ph-hero[data-photo-focus="portrait-immersive"] > img {
      left: calc(min(70vw, 940px) * .14);
      width: min(70vw, 940px);
      object-position: 50% 70%;
    }
  }

  /* Sopra i 1180 il titolo va su tre righe. Dal 28/09 il titolo e' "Quasi
     mai il problema e' quanto spendi, ma come e dove lo fai.": la parte in
     ambra resta intera sull'ultima riga invece di spezzarsi dopo "come".
     La misura massima (10,6em) la tiene su una riga fino a 1181px.

     Il pannello scende fino al filetto del piede: cosi' fra testata e
     pannello c'e' posto per il volto intero, testa compresa, invece della
     fronte tagliata dalla testata. La foto si rimpicciolisce quanto basta e
     mette il volto sopra il centro del pannello. I coefficienti vengono dal
     file: la testa comincia al 19% dell'altezza del ritratto e il volto sta
     al 52,5% della larghezza; 196px e' meta' del pannello. Con questi valori
     la testa parte circa 30px sotto la testata e il mento resta sopra il
     pannello, da 1181 a 1759px, con e senza parallasse. */
  @media (min-width: 1181px) {
    .c-definitiva #hero-title {
      max-width: 10.6em;
      font-size: clamp(2.75rem, .6rem + 4.2vw, 4rem);
      text-wrap: wrap;
    }

    .c-definitiva #hero-title em {
      white-space: nowrap;
    }

    .c-definitiva .hero .panel[data-variant="hero"] {
      margin-bottom: calc(clamp(32px, 4vw, 56px) * -1);
    }

    .c-definitiva .ph-hero[data-photo-focus="portrait-immersive"] > img {
      --hero-photo-w: min(44vw, 620px);
      top: calc(24px - var(--hero-photo-w) * .2635);
      left: calc(var(--hero-photo-w) * .475 - 196px - (100vw - var(--page)) / 2);
      width: var(--hero-photo-w);
      height: auto;
      aspect-ratio: 1066 / 1600;
      object-position: 50% 50%;
    }
  }

  /* Da 1760px c'e' posto per il volto a destra del pannello, come nella
     definitiva: foto grande, pannello di nuovo in alto accanto all'occhiello.
     Stessi valori della definitiva, ma con left al posto di transform. */
  @media (min-width: 1760px) {
    .c-definitiva .hero-grid {
      align-items: start;
    }

    .c-definitiva .hero .panel[data-variant="hero"] {
      margin-bottom: 0;
    }

    .c-definitiva .ph-hero[data-photo-focus="portrait-immersive"] > img {
      top: 0;
      left: calc(min(64vw, 940px) * .3);
      width: min(64vw, 940px);
      height: 100%;
      aspect-ratio: auto;
      object-position: 50% 27%;
    }
  }

  /* Sotto i 900: il pavimento sotto il testo non e' piu' un rettangolo
     chiuso. Resta lo stesso fondo, ma su uno pseudo-elemento che esce fino
     al bordo dello schermo e sfuma in alto e in basso: il bordo che si
     vedeva accanto alla CTA sparisce, la garanzia di contrasto no. */
  @media (max-width: 900px) {
    .c-definitiva .hero-copy {
      background: none;
    }

    .c-definitiva .hero-copy::before {
      position: absolute;
      z-index: -1;
      inset: calc(var(--s-6) * -1) calc(var(--gutter) * -1) calc(var(--s-7) * -1);
      background: var(--hero-floor-mobile);
      -webkit-mask-image: linear-gradient(180deg, rgb(var(--black-rgb) / 0) 0, rgb(var(--black-rgb)) var(--s-6), rgb(var(--black-rgb)) calc(100% - var(--s-8)), rgb(var(--black-rgb) / 0) 100%);
      mask-image: linear-gradient(180deg, rgb(var(--black-rgb) / 0) 0, rgb(var(--black-rgb)) var(--s-6), rgb(var(--black-rgb)) calc(100% - var(--s-8)), rgb(var(--black-rgb) / 0) 100%);
      content: "";
      pointer-events: none;
    }
  }

  /* Tablet, 700-900: la hero diventa come il desktop, testo a sinistra e
     volto a destra. Il testo finisce entro il 72% del pavimento, dove
     --hero-floor e' ancora pieno al 92%: per questo la riserva a destra. */
  @media (min-width: 700px) and (max-width: 900px) {
    .c-definitiva .hero {
      --hero-scrim-mobile: linear-gradient(100deg, rgb(var(--ink-rgb) / .94) 0%, rgb(var(--ink-rgb) / .86) 46%, rgb(var(--ink-rgb) / .30) 78%, rgb(var(--ink-rgb) / .40) 100%);
    }

    .c-definitiva .hero-copy {
      max-width: 66%;
      padding-inline-end: 18%;
    }

    .c-definitiva .hero-copy::before {
      right: 0;
      background: var(--hero-floor);
    }

    .c-definitiva .ph-hero[data-photo-focus="portrait-immersive"] > img {
      width: 62%;
      margin-left: auto;
      object-position: 50% 20%;
      transform: none;
      -webkit-mask-image:
        linear-gradient(to right, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 24%),
        linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 12%, rgb(var(--black-rgb)) 76%, rgb(var(--black-rgb) / 0) 100%);
      mask-image:
        linear-gradient(to right, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 24%),
        linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 12%, rgb(var(--black-rgb)) 76%, rgb(var(--black-rgb) / 0) 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }
  }

  /* Telefono, sotto i 700: la testa non veniva mai vista. La foto faceva da
     fondo a tutta la hero (1.332px di altezza a 390, ingrandita di oltre due
     volte), il volto cadeva dietro il titolo sotto il pavimento di contrasto
     e fra CTA e pannello restava solo il busto. Qui il ritratto entra nel
     flusso con un posto suo: testo, poi il volto intero, poi il pannello che
     sale a coprire il petto, come sul desktop sopra i 1180.

     Come: la hero diventa una griglia a una colonna e .hero-grid sparisce
     con display: contents, cosi' testo, foto e pannello sono fratelli e la
     foto si mette nella riga fra i due. La figura e' aria-hidden: l'ordine
     di lettura e di tabulazione non cambia. Resta la stessa <img>, quindi
     nessun file in piu' da scaricare.

     Inquadratura, dai coefficienti del file: la testa comincia al 19% della
     altezza del ritratto, il mento sta al 39%, il volto al 52,5% della
     larghezza. L'immagine e' larga il 125% della scena (al massimo 560px,
     oltre il volto diventa piu' grande del titolo), centrata sul volto, e
     mostra le righe dal 14% al 56%: testa, spalle e petto. Niente parallasse
     qui: la corsa spingeva la dissolvenza sotto il bordo della figura e in
     fondo restava un taglio netto. La luminosita' sale rispetto al desktop
     perche' a questa misura il volto a .62 si leggeva come un'ombra. */
  @media (max-width: 699px) {
    .c-definitiva .hero[data-variant="portrait-system"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
    }

    .c-definitiva .hero .hero-grid {
      display: contents;
    }

    .c-definitiva .hero .hero-copy,
    .c-definitiva .hero .panel[data-variant="hero"] {
      width: var(--page);
      margin-inline: auto;
    }

    .c-definitiva .hero .hero-copy {
      grid-row: 1;
    }

    .c-definitiva .hero .ph-hero {
      position: relative;
      inset: auto;
      grid-row: 2;
      margin-top: var(--s-5);
      background: none;
    }

    .c-definitiva .hero .ph-hero[data-photo-focus="portrait-immersive"] > img {
      --hero-photo-w: min(125%, 560px);
      width: var(--hero-photo-w);
      max-width: none;
      height: auto;
      margin-left: calc(50% - var(--hero-photo-w) * .525);
      aspect-ratio: 1.588;
      object-position: 50% 24%;
      filter: grayscale(.72) contrast(1.06) brightness(1.05) saturate(.9);
      animation: none;
      scale: 1;
      translate: none;
    }

    .c-definitiva .hero .panel[data-variant="hero"] {
      position: relative;
      z-index: var(--z-content);
      grid-row: 3;
      margin-top: calc(var(--s-8) * -1);
    }

    .c-definitiva .hero .hero-foot {
      grid-row: 4;
    }
  }

  /* Piede della hero a 390: .status-line era inline-flex, quindi il grassetto
     e la frase diventavano due colonne e "Poche aziende per volta." andava su
     tre righe in 90px. Torna testo continuo. Lo scroll cue in maiuscolo andava
     a capo staccando la freccia: sotto i 680 passa in minuscolo. */
  @media (max-width: 680px) {
    .c-definitiva .status-line {
      display: block;
    }

    .c-definitiva .status-line .status-dot {
      display: inline-block;
      margin-inline-end: var(--s-3);
      vertical-align: .12em;
    }

    .c-definitiva .hero-scroll {
      font-size: var(--fs-caption);
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }
  }

  /* L'occhiello della hero, dove non sta su una riga (fino a 424px e fra
     700 e 880, quando la colonna del testo e' al 66%), lasciava
     "ORCHESTRATOR" da solo o spezzava il nome del ruolo. La misura in em
     accoglie "Fractional Growth Manager ·" e non la parola successiva: il
     ruolo resta intero sulla prima riga, "AI Orchestrator" sulla seconda. */
  @media (max-width: 424px), (min-width: 700px) and (max-width: 880px) {
    .c-definitiva .hero-copy .kicker {
      max-width: 21.8em;
      text-wrap: wrap;
    }
  }

  /* =====================================================================
     2. AMBRA E OCCHIELLI AL LORO POSTO
     Sedici occhielli identici (Inter 12px maiuscolo, tracking largo, ambra)
     sopra sedici titoli: lo stesso stampo dall'hero al finale. La skill ne
     ammette uno ogni tre sezioni, il brand vuole l'ambra solo su numero
     chiave, parola evidenziata, barra, freccia e CTA.
     ===================================================================== */

  /* Il maiuscoletto ambra resta dove apre qualcosa: la hero e il
     calcolatore, l'unico strumento della pagina. Altrove l'occhiello
     diventa una riga di testo in minuscolo, piu' grande e piu' quieta:
     il titolo sotto torna a essere l'unico protagonista. Inter Medium, come
     il brand indica per kicker e label. Stessa grammatica per l'indice
     "01 / Principio guida", che sta sulla stessa riga dell'occhiello della
     tesi. */
  .c-definitiva main section:not(#top, #calcolatore) .kicker,
  .c-definitiva .manifesto-index {
    color: var(--ink-3);
    font-size: var(--fs-body-s);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
  }

  /* La riga credenziali era la terza zona ambra della hero, dopo il titolo
     e la CTA. Resta in evidenza con il peso, non col colore. */
  .c-definitiva .hero-credential {
    color: var(--ink-2);
    font-weight: 600;
  }

  /* Indici e etichette di servizio: sono dati di struttura, non parole
     evidenziate. Tornano nella scala dei grigi del proprio fondo. */
  .c-definitiva .growth-primer dt span,
  .c-definitiva .lever-flow > li > span,
  .c-definitiva .matrix[data-variant="cards"] .matrix-cell > span b {
    color: var(--ink-4);
  }

  .c-definitiva .case-trajectory-head span,
  .c-definitiva .photo-journal .portrait-note span {
    color: var(--on-light-3);
  }

  /* Dentro il dossier aperto del caso il fondo e' sempre scuro: le etichette
     scendono al grigio del capitolo scuro. L'ambra resta sui numeri, sulle
     barre dei punteggi e sulla velatura del risultato. */
  .c-definitiva .case-deep[data-presentation="editorial"] .case-deep-cell span,
  .c-definitiva .case-transition-note > span {
    color: var(--on-dark-4);
  }

  /* Due etichette stanno sopra una velatura ambra, che schiarisce il fondo:
     "Performance / Anno 01" nell'alone del grafico e l'etichetta della
     tessera "Handover". Con il grigio minimo scendevano a 4,5 e 4,2:1
     (misurati sui pixel); un gradino piu' chiaro le porta sopra 6:1 e le
     tiene sopra la riga di supporto che le segue. */
  .c-definitiva .case-scoreboard-intro .case-chart-head,
  .c-definitiva .case-transition-card > p {
    color: var(--on-dark-3);
  }

  /* L'etichetta dei passi del metodo era a 15-16px maiuscolo con 2px di
     tracking: pesava piu' dell'h3 che introduce. Torna alla scala delle
     altre etichette di dato della pagina. */
  .c-definitiva .step-meta {
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
  }

  /* L'alone dello stack usava l'ambra profonda al 14%, sopra il tetto del
     10% che il brand fissa per gli aloni: su carta si leggeva come una
     macchia beige. Stessa luce, al 6%. */
  .c-definitiva .stack-mass {
    background:
      radial-gradient(circle at 12% 18%, var(--amber-a06), transparent 30%),
      radial-gradient(circle at 88% 74%, var(--raised-surface), transparent 34%),
      var(--panel-surface);
  }

  /* Stesso tetto per gli altri due aloni ambra della pagina: il grafico del
     caso aperto e la tessera "Handover" erano al 12% (misurato sui pixel).
     Stessa geometria, all'8%. */
  .c-definitiva .case-deep[data-presentation="editorial"] .case-chart {
    background:
      radial-gradient(circle at 4% 0%, var(--amber-a08), transparent 38%),
      var(--surface-100);
  }

  .c-definitiva .case-transition > li[data-milestone="handover"] .case-transition-card {
    background:
      linear-gradient(145deg, var(--amber-a08), transparent 62%),
      var(--surface-300);
  }

  /* Il pallino di stato della hero aveva un anello al 12% con il bordo
     netto: il brand vuole i punti di stato piatti. Resta il solo pallino. */
  .c-definitiva .status-dot {
    box-shadow: none;
  }

  /* =====================================================================
     3. ORNAMENTI RIPETUTI TOLTI
     Lo stesso segno davanti a ogni voce, sotto ogni tessera, sul fianco di
     ogni didascalia: e' il tic che Michele ha gia' fatto togliere dagli
     occhielli. Il segno non aggiungeva informazione; il vuoto che lascia si
     compensa con la spaziatura, non con un altro segno.
     ===================================================================== */

  /* Trattini ambra davanti alle 12 voci delle card offerta e alle 10 voci
     "Ha senso / Non ha senso". Il si' e il no restano distinti dal glifo e
     dal titolo della card. Voci piu' distanziate, da 8 a 12px. */
  .c-definitiva :is(.card-list, .fit-list) {
    gap: var(--s-3);
  }

  .c-definitiva :is(.card-list, .fit-list) li {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Senza il trattino le voci delle card offerta avevano la stessa taglia,
     lo stesso grigio e la stessa distanza della descrizione sopra: le righe
     che andavano a capo sembravano voci di una parola. La lista si stacca
     dalla descrizione, l'interlinea delle voci si stringe (cosi' lo stacco
     fra voci supera quello fra le righe di una voce) e le voci prendono il
     grigio piu' scuro: sono i contenuti, la descrizione e' il riassunto. */
  .c-definitiva .card-list {
    margin-top: var(--s-2);
  }

  .c-definitiva .card-list li {
    color: var(--ink-2);
    line-height: 1.4;
  }

  .c-definitiva :is(.card-list, .fit-list) li::before,
  .c-definitiva .step-out::before {
    content: none;
  }

  /* Tre card offerta con lo stesso filetto ambra in testa: la card core non
     si distingueva piu' per il filetto. Resta solo a lei, con la cornice. */
  .c-definitiva .card[data-variant="frame"]:not([data-emphasis="core"]) {
    border-top: 1px solid var(--card-line);
  }

  /* Card clienti: filetto ambra in testa a tutte e tre e cornice dentro la
     cornice attorno al logo. Resta una sola cornice; l'ambra torna come
     luce all'hover, dove il bordo gia' si accende. */
  .c-definitiva .client-feature-card {
    border-top: 1px solid var(--card-line);
  }

  .c-definitiva .client-feature-logo {
    border-color: transparent;
  }

  /* Trattino ambra in fondo alle 19 tessere (38 con i cloni del carosello).
     Reso trasparente e non rimosso: la geometria della tessera resta quella
     misurata a 0px di scarto (trappola 1 dell'handoff). All'hover e al focus
     torna come filetto che si allunga: e' uno stato, non un ornamento. */
  .c-definitiva .logo-card-rule {
    background: transparent;
  }

  @media (hover: hover) and (pointer: fine) {
    .c-definitiva .logo-item:is(:hover, :focus-within) .logo-card-rule {
      background: var(--logo-card-accent);
    }
  }

  /* Filetto ambra sul fianco di didascalie, nota del ritratto e note-box.
     Ne resta uno solo in pagina, sull'esempio concreto del primer: un segno
     che compare una volta e' una scelta. */
  .c-definitiva :is(.field-caption, .portrait-note, .note-box) {
    border-left: 0;
  }

  /* =====================================================================
     4. TITOLI E INTESTAZIONI CON UN RITMO SOLO
     Titoli dello stesso rango a 40, 52 e 64px senza una logica di capitolo,
     e undici intestazioni con lo stesso schema "titolo a sinistra, paragrafo
     a destra": ogni sezione si leggeva come la stessa tavola. Sotto i 720 la
     scala mobile e' gia' tarata nei token e resta quella.
     ===================================================================== */

  @media (min-width: 721px) {
    /* Due gradini. 56px per i tre titoli che il markup marca come display
       (la mappa, l'offerta, lo stack), 44px per gli altri h2. La gerarchia
       la fanno peso e posizione, non la dimensione che grida. Il titolo del
       punto resta alla misura della definitiva: a 44px "Manca" restava in
       coda alla prima frase, e la verifica critica ha giudicato la sezione
       invariata, quindi l'intervento li' non si tiene. */
    .c-definitiva main h2.u-display-m {
      max-width: 20ch;
      font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
    }

    .c-definitiva main :is(h2.u-h1, h2.u-h2):not(#punto-title) {
      max-width: 20ch;
      font-size: clamp(2rem, 1.3rem + 2.2vw, 2.75rem);
    }

    /* Nel titolo dello stack la frase breve finale ("Sono la leva.") deve
       avere la sua riga: a 20ch tornava in coda alla precedente. 16em chiude
       la riga dopo "strategia."; senza balance, che la rimetterebbe in coda. */
    .c-definitiva #stack-title {
      max-width: 16em;
      text-wrap: wrap;
    }

    /* I sottotitoli di sezione in h3 (stack e matrice) erano a 40px, a un
       passo dagli h2: scendono di un gradino per restare sotto. */
    .c-definitiva main h3.u-h2 {
      font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem);
    }
  }

  /* Intestazioni impilate dove la colonna di destra era solo testo di
     supporto: titolo sopra, paragrafo sotto, un messaggio per volta.
     Restano affiancate dove le due colonne portano contenuto vero: cos'e'
     il growth, il punto, la mappa, il metodo. Se si impilassero tutte, la
     pila diventerebbe il nuovo stampo. Racconto fotografico e calcolatore
     restano come nella definitiva: impilati non miglioravano (verifica
     critica) e costavano 100px ciascuno. */
  @media (min-width: 781px) {
    .c-definitiva :is(#prova, #offerta, #stack, #quando) .section-heading[data-layout="split"],
    .c-definitiva #quando .matrix-intro {
      align-items: start;
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s-5);
    }
  }

  /* Il finale chiudeva in una colonna stretta che partiva a 360px e non si
     allineava a niente, con il titolo spezzato su 3 righe dai 14ch.
     Ora chiude sull'asse della hero, su 2 righe, un gradino sotto l'H1:
     il display piu' grande della pagina resta la promessa iniziale. */
  .c-definitiva #finale .final-cta {
    width: var(--page);
  }

  /* La riga sotto "Scrivimi" dice cosa succede al clic (revisione copy del
     28/09): sta attaccata al bottone, come la nota sotto il bottone del
     calcolatore, non a distanza di paragrafo. */
  .c-definitiva #finale .final-cta-note {
    margin-top: calc(var(--s-3) * -1);
    color: var(--ink-3);
    font-size: var(--fs-caption);
  }

  @media (min-width: 721px) {
    .c-definitiva #finale-title {
      max-width: 20ch;
      font-size: clamp(2.75rem, .6rem + 3.9vw, 3.75rem);
    }

    .c-definitiva #finale .btn {
      min-height: 56px;
      padding-inline: var(--s-6);
      font-size: var(--fs-body);
    }
  }

  /* =====================================================================
     5. MATERIALI E ASSI
     Undici raggi diversi (0, 4, 8, 16-22, 28, 30, 32, 34, 42px, pillola,
     cerchio), card dentro card dentro card nei casi, pannelli invisibili
     che spostano il contenuto fuori asse.

     Regola dei raggi di questa pagina, da qui in avanti:
     - 8px (--radius-sm) per card, celle, pannelli e riquadri;
     - 32px (--radius-xl) per i contenitori che ospitano altre superfici:
       l'isola del calcolatore, il dossier aperto del caso, il campo degli
       strumenti;
     - pillola per tutto cio' che si clicca;
     - eccezione dichiarata: le tessere delle app nello stack restano a
       20px, perche' imitano un'icona d'app.
     ===================================================================== */

  .c-definitiva :is(.case-deep, .stack-mass) {
    border-radius: var(--radius-xl);
  }

  .c-definitiva :is(.case-chart, .case-score, .case-trajectory, .note-box) {
    border-radius: var(--radius-sm);
  }

  /* Nel dossier aperto le cinque voci (Situazione, Obiettivo, Intervento,
     Risultato, Lezione) erano cinque card dentro il pannello, dentro
     l'isola. Diventano testo sul fondo del dossier, senza cornice e senza
     filetto: cinque filetti uguali in testa a cinque voci sarebbero di nuovo
     il segno ripetuto. Lo stacco lo da' lo spazio fra le righe della
     griglia, piu' largo di quello fra le righe di testo. */
  .c-definitiva .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] {
    row-gap: clamp(var(--s-5), 3vw, var(--s-7));
    column-gap: var(--s-6);
  }

  .c-definitiva .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell,
  .c-definitiva .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(2) {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* Nella matrice resta sollevata solo la cella consigliata: le altre tre
     diventano testo su carta, senza cornice e senza filetto, e la quota
     torna a dire qualcosa. */
  .c-definitiva .matrix[data-variant="cards"] .matrix-cell:not([data-fit="high"]) {
    border-color: transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* Il blocco "Prima il processo" aveva un pannello color carta, invisibile,
     con 52px di padding: rientrava a 172px contro l'asse di 120. Senza
     pannello torna sull'asse. */
  .c-definitiva .stack-process {
    padding: 0;
    border-radius: 0;
    background: none;
  }

  /* Le note-box della mappa e della matrice erano larghe 1.200px con 490px
     di testo: 700px di cornice vuota. Ora sono larghe quanto il testo. */
  .c-definitiva :is(#sistema, #quando) > .container > .note-box {
    width: fit-content;
    max-width: 100%;
  }

  /* Senza orfani: a 1024 il punto dopo "apri il calcolatore" finiva da
     solo su una riga. */
  .c-definitiva .note-box > p {
    text-wrap: pretty;
  }

  /* Il cerchio del manifesto non c'e' piu' (Michele, 28/09: "mi sembra
     messo li' a caso"). Era l'ultima lente del brand rimasta in pagina,
     dopo quella della hero tolta il 19/09: non racchiudeva e non indicava
     niente, e su desktop tagliava l'etichetta del principio. Lo span resta
     nel markup, condiviso con la definitiva in archivio. */
  .c-definitiva .manifesto[data-variant="thesis"] .lens {
    display: none;
  }

  /* Il binario dell'acceleratore centrato come il motore decisionale in
     cima alla mappa (Michele, 28/09): la mappa si legge su un asse solo.
     Sotto i 900 la frase va a capo su una riga sua, anche lei centrata. */
  .c-definitiva .system-map-rail {
    justify-content: center;
    justify-items: center;
    text-align: center;
  }

  /* =====================================================================
     6. NUMERI PROTAGONISTI NELLA STRISCIA DI PROVA
     7+, 200+ e 393k sono i primi dati reali dopo la hero, e il brand li
     vuole grandi. Erano a 32px, in linea con etichette da 14px che andavano
     a capo su 2-3 righe: tre blocchi di altezza diversa, numeri a tre
     quote diverse.
     ===================================================================== */

  /* nowrap: dal 28/09 il terzo numero e' "393k €", e sul telefono l'euro
     finiva da solo sulla riga sotto. */
  .c-definitiva .proof-strip:not(.container) strong {
    font-size: var(--fs-metric-l);
    white-space: nowrap;
  }

  /* Sopra i 480 il numero sta sopra la sua etichetta e i tre blocchi
     partono dalla stessa linea. Sotto resta la riga numero piu' etichetta,
     che su una colonna sola regge meglio. */
  @media (min-width: 481px) {
    .c-definitiva .proof-strip:not(.container) {
      align-items: start;
    }

    .c-definitiva .proof-strip:not(.container) > div {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--s-2);
    }

    .c-definitiva .proof-strip:not(.container) > div > span {
      max-width: 24ch;
      text-wrap: wrap;
    }

    .c-definitiva main h2#sistema-title em {
      display: inline-block;
    }
  }

  /* L'occhiello della sezione successiva stava a 8px dal filetto di chiusura
     della striscia: numeri e intestazione si toccavano. */
  .c-definitiva #prova .proof-strip {
    margin-bottom: clamp(40px, 5vw, 64px);
  }

  @media (min-width: 1001px) {
    .c-definitiva .proof-strip:not(.container) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
    }
  }

  /* Fra 481 e 1000 cadeva in quattro colonne da 150px: tre colonne per i
     numeri e la frase a tutta riga sotto. */
  @media (min-width: 481px) and (max-width: 1000px) {
    .c-definitiva .proof-strip:not(.container) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .c-definitiva .proof-strip:not(.container) > p {
      grid-column: 1 / -1;
      max-width: 60ch;
    }
  }

  /* =====================================================================
     7. MOBILE E TABLET: CALCOLATORE, FOTO, CASI, OFFERTA
     ===================================================================== */

  /* L'isola del calcolatore non aveva margine interno sotto i 1.280px: a
     390 occhiello, titolo e card toccavano il bordo del fondo scuro, e il
     raggio da 32px tagliava l'angolo sopra l'occhiello. Ora il contenuto
     rientra sempre; a 1440 resta largo 1.200px come oggi. */
  .c-definitiva .tr-inset > .container {
    width: min(var(--page), calc(100% - 2 * clamp(20px, 5vw, 56px)));
  }

  /* Con il margine interno dell'isola le tre caselle delle metriche si
     stringono (a 1024 da 93 a 77px) e le etichette, che nella definitiva
     stanno su una riga sola con i puntini di troncamento, uscivano mozzate:
     "DIFFEREN...", "COSTO M...". La definitiva le troncava gia' fra 900 e
     1100. Fino a 1100 le metriche diventano righe di scontrino come sul
     telefono (etichetta a sinistra, valore a destra); fra 1101 e 1279
     restano tre caselle, l'etichetta va a capo quando serve e il valore
     scende in fondo, cosi' i tre valori restano allineati. */
  @media (min-width: 621px) and (max-width: 1100px) {
    .c-definitiva .calc-metrics {
      grid-template-columns: minmax(0, 1fr);
    }

    .c-definitiva .calc-metric {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-3);
      padding: 12px 16px;
    }

    .c-definitiva .calc-metric span {
      overflow: visible;
      white-space: normal;
    }

    .c-definitiva .calc-metric strong {
      margin-top: 0;
    }
  }

  @media (min-width: 1101px) and (max-width: 1279px) {
    .c-definitiva .calc-metric {
      display: flex;
      flex-direction: column;
    }

    .c-definitiva .calc-metric span {
      overflow: visible;
      white-space: normal;
    }

    .c-definitiva .calc-metric strong {
      margin-top: auto;
      padding-top: 4px;
    }
  }

  /* Il pallino davanti a "Configura lo scenario" e' un segno decorativo
     che non porta stato. */
  .c-definitiva .calc-kicker::before {
    content: none;
  }

  @media (max-width: 620px) {
    /* Etichetta sopra, indicazione sotto: affiancate spezzavano "RAL annua
       del ruolo / senior" accanto a "Ipotesi / modificabile". */
    .c-definitiva .calc-label-row {
      display: grid;
      gap: 2px;
    }

    /* Presenza: tre bottoni da 100px spezzavano "guida nel / team" su tre
       righe. Diventano tre righe da 48px, giorni a sinistra e ruolo a
       destra. La durata resta su tre colonne: "3 mesi" ci sta. */
    .c-definitiva .calc-segmented {
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
    }

    .c-definitiva .calc-segmented button {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-3);
      min-height: 48px;
      padding: 10px 14px;
      font-size: var(--fs-body-s);
      text-align: left;
    }

    .c-definitiva .calc-segmented button span {
      margin-top: 0;
      font-size: var(--fs-caption);
    }

    .c-definitiva .calc-segmented[aria-labelledby$="duration-label"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .c-definitiva .calc-segmented[aria-labelledby$="duration-label"] button {
      justify-content: center;
      padding-inline: 6px;
      white-space: nowrap;
    }

    /* Tre valori corti in tre box alti 77px: diventano righe di scontrino,
       etichetta a sinistra e valore a destra. */
    .c-definitiva .calc-metric {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-3);
      padding: 12px 16px;
    }

    .c-definitiva .calc-metric strong {
      margin-top: 0;
    }

    /* L'arco della lente restava tagliato nell'angolo del pannello. */
    .c-definitiva .calc-result::before {
      content: none;
    }
  }

  /* Racconto fotografico sotto i 700: la nota "Verita' scomoda" copriva il
     volto nel ritratto e le didascalie coprivano il 40% degli scatti con un
     velo nero. Le foto tornano intere, didascalia e nota vanno sotto. */
  @media (max-width: 699px) {
    /* Fra una foto e la successiva 40px, fra la foto e la sua didascalia
       12px, fra nota e didascalia dello stesso ritratto 24px: ogni testo
       appartiene alla foto sopra, non a meta' fra due. */
    .c-definitiva .photo-journal[data-layout="editorial"] {
      row-gap: var(--s-7);
    }

    .c-definitiva .photo-journal[data-layout="editorial"] .portrait-note {
      margin-bottom: var(--s-3);
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > .photo-journal-shot {
      display: grid;
      gap: var(--s-3);
      aspect-ratio: auto;
      overflow: visible;
      border: 0;
      background: none;
      box-shadow: none;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > .photo-journal-shot > img {
      height: auto;
      aspect-ratio: 4 / 5;
      border: 1px solid var(--card-line);
      border-radius: var(--card-radius);
      box-shadow: var(--card-elev);
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="training"] > img {
      aspect-ratio: 16 / 9;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="credential"] > img {
      aspect-ratio: 3 / 2;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="portrait"] > img {
      object-position: 50% 20%;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] :is(.field-caption, .portrait-note) {
      position: static;
      max-width: none;
      padding: 0;
      border: 0;
      color: var(--ink-1);
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      transform: none;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] .field-caption span {
      color: var(--ink-4);
    }

    /* La nota "Verita' scomoda" torna sopra la foto come sul desktop
       (richiesta di Michele del 28/09): sotto la foto diventava una
       didascalia qualunque e la pagina cambiava tra desktop e telefono.
       Non torna in alto, dove copriva il volto: foto e nota condividono la
       stessa cella della griglia e la nota si appoggia in basso a sinistra,
       sulla maglietta. La didascalia resta sotto, nella riga successiva. */
    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="portrait"] {
      grid-template-areas: "foto" "didascalia";
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="portrait"] > img {
      grid-area: foto;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="portrait"] > .field-caption {
      grid-area: didascalia;
    }

    .c-definitiva .photo-journal[data-layout="editorial"] > [data-shot="portrait"] > .portrait-note {
      z-index: var(--z-content);
      grid-area: foto;
      align-self: end;
      justify-self: start;
      max-width: min(22ch, calc(100% - var(--s-4) * 2));
      margin: 0 0 var(--s-4) var(--s-4);
      padding: var(--s-3) var(--s-4);
      border-left: 3px solid var(--amber);
      color: var(--on-light-1);
      background: rgb(var(--white-rgb) / .94);
      box-shadow: var(--elev-3);
      transform: rotate(-1.2deg);
    }
  }

  /* Caso studio sotto i 560: titolo, etichetta e numero stavano in 210px
     fra indice e toggle, il titolo andava su tre righe. Ora indice e toggle
     stanno in alto, il resto a tutta larghezza; il toggle sale a 44px di
     area di tocco. Il pannello dei punteggi perde la cornice doppia. */
  @media (max-width: 560px) {
    .c-definitiva .case-deep[data-presentation="editorial"] > summary {
      grid-template-columns: 38px minmax(0, 1fr) 44px;
      row-gap: var(--s-3);
    }

    .c-definitiva .case-deep[data-presentation="editorial"] :is(.case-deep-title, .case-deep-metric) {
      grid-column: 1 / -1;
    }

    .c-definitiva .case-deep[data-presentation="editorial"] .case-deep-toggle {
      grid-column: 3;
      grid-row: 1;
      width: 44px;
      height: 44px;
    }

    .c-definitiva .case-deep[data-presentation="editorial"] .case-scoreboard {
      padding: var(--s-2) 0 0;
      border: 0;
      background: none;
      box-shadow: none;
    }

    .c-definitiva .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell,
    .c-definitiva .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(2) {
      padding-inline: var(--s-1);
    }
  }

  /* Fra 561 e 800 la cella "Lezione" restava sola su mezza riga. */
  @media (min-width: 561px) and (max-width: 800px) {
    .c-definitiva .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:last-child {
      grid-column: 1 / -1;
    }
  }

  /* Offerta fra 700 e 879: una colonna sola da 719px portava i paragrafi a
     89 caratteri per riga. Due colonne, la core a tutta riga. */
  @media (min-width: 700px) and (max-width: 879px) {
    .c-definitiva .grid[data-variant="offer"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-definitiva .grid[data-variant="offer"] > :is([data-emphasis="core"], .note-box) {
      grid-column: 1 / -1;
    }
  }

  /* =====================================================================
     8. STATI E MOVIMENTO
     Il movimento resta quello di oggi; si aggiunge solo cio' che risponde
     a un gesto (pressione, apertura del menu, swipe) e si toglie cio' che
     si muove senza dire niente.
     ===================================================================== */

  /* A reveal concluso ogni blocco restava con clip-path: inset(0), che
     taglia tutto cio' che esce dal bordo: le ombre di card, casi, pannelli
     e foto sparivano, e l'anello di focus del carosello (outline-offset
     3px) non si vedeva affatto. Nella pagina non c'e' nessun reveal a
     maschera, l'unico che ha bisogno del clip. Via anche i 49 will-change
     rimasti accesi dopo l'ingresso. */
  .html-has-js .c-definitiva [data-reveal]:not([data-reveal="mask"]).is-visible {
    clip-path: none;
  }

  .html-has-js .c-definitiva [data-reveal].is-visible {
    will-change: auto;
  }

  /* Pressione: sul telefono gli hover non esistono e toccare una CTA non
     dava alcun segnale. Il bottone cede di un soffio e torna. L'evidenziazione
     di sistema si toglie solo dagli elementi che qui ricevono uno stato di
     pressione proprio; gli altri la tengono, cosi' nessun tocco resta muto. */
  .c-definitiva :is(.btn, .calc-segmented button, .nav-toggle, .carousel-toggle, .text-link, .nav-menu a, .foot-col a, .growth-comparison-link, .case-deep:not([open]) > summary) {
    -webkit-tap-highlight-color: transparent;
  }

  .c-definitiva .btn:active {
    transform: scale(.98);
    transition-duration: 80ms;
  }

  .c-definitiva :is(.calc-segmented button, .nav-toggle, .carousel-toggle):active {
    transform: scale(.97);
  }

  .c-definitiva :is(.text-link, .nav-menu a, .foot-col a, .growth-comparison-link):active {
    color: var(--accent-text);
  }

  /* Testata e menu sono scuri a ogni larghezza, ma --accent-text li'
     risolve nella variante per la carta (3,3:1): serve l'Ambra Sole piena. */
  .c-definitiva .nav-menu a:active {
    color: var(--amber);
  }

  .c-definitiva .case-deep:not([open]) > summary:active {
    background: var(--surface-l-050);
  }

  /* Controlli che cambiavano stato di colpo, con transizione a 0s. */
  .c-definitiva :is(.nav-toggle, .carousel-toggle) {
    transition:
      border-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      transform var(--dur-exit) var(--ease-exit);
  }

  .c-definitiva .calc-input-wrap input {
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }

  /* Menu mobile: passava da display none a grid senza transizione, con la
     hero a piena luce sotto e due CTA ambra visibili insieme. Ora entra in
     dissolvenza, la pagina sotto si vela, e a menu chiuso visibility:
     hidden tiene le voci fuori dalla tabulazione come faceva display none.
     Un tocco sul velo chiude il menu (lo gestisce gia' site.js). Il velo e'
     al 72%: al 56% la CTA ambra sotto diventava bronzo, cioe' metallo. */
  @media (max-width: 900px) {
    .c-definitiva .nav-menu {
      transition:
        opacity var(--dur-2) var(--ease-out),
        translate var(--dur-3) var(--ease-out),
        visibility 0s linear 0s;
    }

    .c-definitiva .nav-menu[data-open="false"] {
      display: grid;
      visibility: hidden;
      opacity: 0;
      translate: 0 calc(var(--s-2) * -1);
      pointer-events: none;
      transition:
        opacity var(--dur-exit) var(--ease-exit),
        translate var(--dur-exit) var(--ease-exit),
        visibility 0s linear var(--dur-exit);
    }

    .c-definitiva:has(.nav-menu[data-open="true"])::before {
      position: fixed;
      z-index: calc(var(--z-header) - 1);
      inset: 0;
      background: rgb(var(--ink-rgb) / .72);
      content: "";
    }
  }

  /* Su tablet il pannello era largo 719px per quattro voci. */
  @media (min-width: 681px) and (max-width: 900px) {
    .c-definitiva .nav-menu {
      left: auto;
      width: min(360px, calc(100% - var(--gutter) * 2));
    }
  }

  /* Carosello loghi sul touch. Sotto i 740 il nastro esce fino al bordo
     dello schermo invece di fermarsi al margine, cosi' la tessera tagliata
     si legge come nastro che continua. L'anello di focus rientra, perche'
     ai bordi dello schermo non si vedrebbe. */
  @media (max-width: 740px) {
    .c-definitiva .logo-viewport {
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
      scroll-padding-inline: var(--gutter);
    }

    .c-definitiva .logo-viewport:focus-visible {
      outline-offset: -3px;
    }
  }

  /* Dove l'hover non esiste i loghi restavano grigi al 72% per sempre, e
     sulle tessere scure il marchio si leggeva appena. Sul touch sale solo
     l'opacita': il grigio resta, perche' i colori pieni dei marchi (il
     rosso, i blu, i verdi) sono fuori dalla palette. */
  @media (hover: none) {
    .c-definitiva .logo-card-body > img {
      filter: grayscale(1) opacity(.92);
    }

    .c-definitiva .logo-card[data-surface="dark"][data-logo-contrast="invert"] img {
      filter: brightness(0) invert(1) opacity(.92);
    }
  }

  /* 23 strumenti che galleggiano all'infinito, con 23 livelli will-change:
     sul telefono e' movimento che non comunica niente. L'ingresso a cascata
     resta; il galleggiamento resta solo dove c'e' un puntatore fine. */
  @media (max-width: 760px), (hover: none) {
    .c-definitiva .stack-tool-orbit {
      animation: none;
      will-change: auto;
    }
  }

  /* --- Capitolo tesi + mappa: allineamenti (Michele, 29/09).
     1. L'indice "Principio guida" aveva 10px di padding e finiva sotto
        l'occhiello "La mia tesi": stessa riga, stessa linea di base.
     2. Il paragrafo di supporto stava a destra su un asse suo: ora parte
        sull'asse del titolo, con il filetto visibile e meno vuoto sopra.
     3. Occhiello e titolo della mappa quasi si toccavano: stesso respiro
        della tesi (--s-4).
     4. I due paragrafi introduttivi avevano corpi diversi (lead 22px,
        body-l 19px): stessa misura e stessa interlinea nel capitolo.
     5. Il paragrafo della mappa partiva alla quota dell'occhiello: si
        allinea alla base del titolo. */
  @media (min-width: 681px) {
    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-index {
      padding-top: 0;
    }

    .c-definitiva .manifesto[data-variant="thesis"] {
      row-gap: clamp(28px, 3.5vw, 48px);
    }

    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-support {
      justify-self: start;
      padding-top: var(--s-5);
      border-top-color: var(--hair);
    }
  }

  .c-definitiva #sistema .section-heading > div {
    display: grid;
    gap: var(--s-4);
  }

  .c-definitiva #sistema .manifesto-support,
  .c-definitiva #sistema .section-heading .u-lead {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body);
    letter-spacing: 0;
  }

  @media (min-width: 781px) {
    .c-definitiva #sistema .section-heading[data-layout="split"] {
      align-items: end;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    }

    .c-definitiva #sistema .section-heading .u-lead {
      max-width: 36ch;
    }
  }

  /* "si" restava solo in fondo alla prima riga: la rottura cade dopo "rompe". */
  @media (min-width: 721px) {
    .c-definitiva main h2#sistema-title {
      max-width: 24ch;
      text-wrap: wrap;
    }

    .c-definitiva main h2#sistema-title em {
      display: inline-block;
    }
  }

  /* --- Imbuto bucato ai due lati della tesi (Michele, 29/09). Il disegno
     copre l'altezza del testo centrale, dalla prima riga del titolo
     all'ultima del paragrafo: l'aside occupa le due righe della griglia e
     l'SVG riempie lo spazio sotto l'indice senza pesare sul dimensionamento
     (e' in position absolute). preserveAspectRatio "meet" lo scala
     sull'altezza e lo ancora al bordo: a sinistra sull'asse dell'indice, a
     destra sul bordo del contenitore. Il disegno e' stretto (120x236)
     perche' a destra del titolo, da 1650px in su, restano 217px.
     Tratto neutro, ambra piatta solo sulle monete. */
  .c-definitiva .manifesto-aside {
    display: grid;
    align-content: start;
    gap: var(--s-4);
  }

  .c-definitiva .manifesto-art {
    display: none;
  }

  @media (min-width: 901px) {
    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-aside {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: stretch;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-statement {
      grid-column: 2;
      grid-row: 1;
    }

    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-support {
      grid-row: 2;
    }

    .c-definitiva .manifesto-art:not([data-side]) {
      display: block;
      position: relative;
      min-height: 0;
    }

    .c-definitiva .manifesto-funnel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      color: var(--ink-4);
    }
  }

  /* Il gemello a destra solo dove accanto al titolo c'e' posto: sotto i
     1180px la prima riga arriverebbe a toccarlo. Il margine alto e'
     l'altezza dell'occhiello piu' il suo passo, cosi' parte con il titolo. */
  @media (min-width: 1180px) {
    .c-definitiva .manifesto-art[data-side="end"] {
      display: block;
      position: relative;
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: stretch;
      min-height: 0;
      margin-top: calc(var(--fs-body-s) * 1.35 + var(--s-4));
      pointer-events: none;
    }
  }

  /* --- Liste "Ha senso se / Non ha senso se" (Michele, 29/09): senza
     segno davanti, le voci che vanno a capo sembravano voci separate.
     Qui il segno torna, solo qui: e' la struttura di un elenco, non un
     ornamento ripetuto sulle card. Pallino nella colonna del glifo del
     titolo (28px) e testo sull'asse del titolo, ambra nella lista del si',
     grigio in quella del no. Le voci passano a 16px nel grigio del testo
     secondario forte, con lo stacco fra voci piu' largo dell'interlinea.
     Tolti anche ";" e "." in coda: con il segno sono doppi. */
  .c-definitiva .fit-list {
    gap: var(--s-4);
  }

  .c-definitiva .fit-list li {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: var(--s-3);
    align-items: start;
    color: var(--ink-2);
    font-size: var(--fs-body);
    line-height: 1.5;
    text-wrap: pretty;
  }

  .c-definitiva .fit-list li::before {
    justify-self: center;
    width: 6px;
    height: 6px;
    margin-top: calc(.75em - 3px);
    border-radius: 50%;
    background: var(--accent-line);
    content: "";
  }

  .c-definitiva .fit-card[data-fit="no"] .fit-list li::before {
    background: var(--ink-4);
  }

  /* La nota sotto la mappa si legge sull'asse della mappa, come il motore
     decisionale e il binario dell'acceleratore (Michele, 29/09). */
  .c-definitiva #sistema > .container > .note-box {
    margin-inline: auto;
  }

  /* =====================================================================
     MODULO CONTATTI, CHIAMATA E ROBOT (Michele, 29-30/09)
     ===================================================================== */

  /* --- Fee del calcolatore in sola lettura: si vede, segue i giorni
     scelti, ma non si scrive. Niente cornice da campo, resta il valore. */
  .c-definitiva .calc-input-wrap input[readonly] {
    border-color: transparent;
    background: transparent;
    cursor: default;
  }

  /* --- Chiusura: due strade affiancate (Michele, 30/09).
     Prima il modulo era una card pesca larga quanto la pagina, con le
     scelte a pillola che andavano a capo lasciando un buco e il testo del
     progetto gonfiato a forza per pareggiare le colonne; la chiamata era
     una sezione scura a parte. Ora, sotto il titolo, a sinistra c'e' il
     modulo (bianco, piu' stretto) e a destra l'isola scura della chiamata
     con il robot, che e' nato su fondo inchiostro.
     Raggio 32px per tutte e due, come l'isola del calcolatore: sono
     contenitori che ospitano altre superfici. Niente fondo ambra sulla
     card: nel modulo l'ambra si accende solo su cio' che si sceglie e sul
     bottone, come nel calcolatore. */
  .c-definitiva .final-intro {
    display: grid;
    justify-items: start;
    gap: var(--s-5);
  }

  .c-definitiva .final-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    justify-self: stretch;
    margin-top: var(--s-4);
  }

  @media (min-width: 1024px) {
    .c-definitiva .final-grid {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: var(--s-5);
    }
  }

  .c-definitiva :is(.contact-form, .contact-done) {
    border: 1px solid var(--hair);
    border-radius: var(--radius-xl);
    background: var(--surface-l-100);
    box-shadow:
      0 1px 2px rgb(var(--ink-rgb) / .04),
      0 28px 56px -36px rgb(var(--ink-rgb) / .28);
  }

  .c-definitiva .contact-form {
    display: grid;
    align-content: start;
    gap: 20px;
    min-width: 0;
    padding: clamp(24px, 3vw, 40px);
  }

  /* Dati di contatto nello stesso ordine del markup, su tre righe: la
     persona (nome, a tutta larghezza), i recapiti (email e telefono),
     l'azienda (nome e sito web, facoltativo). */
  .c-definitiva .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .c-definitiva .contact-grid > :is(.contact-field:first-child, .contact-choice) {
    grid-column: 1 / -1;
  }

  .c-definitiva .contact-optional {
    margin-left: 6px;
    color: var(--ink-4);
    font-weight: 500;
  }

  .c-definitiva .contact-field {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    min-width: 0;
  }

  .c-definitiva .contact-field label,
  .c-definitiva .contact-choice legend {
    color: var(--ink-1);
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1.3;
  }

  /* Il bordo dei campi e' --on-light-5 (3,3:1 sul bianco): con i filetti
     di pagina (11-20%) il campo vuoto non si distingueva dalla card. */
  .c-definitiva .contact-field :is(input, textarea) {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--on-light-5);
    border-radius: var(--field-radius);
    color: var(--ink-1);
    background: var(--surface-l-100);
    font: inherit;
    font-size: var(--fs-body);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }

  .c-definitiva .contact-field textarea {
    min-height: 108px;
    line-height: 1.5;
    resize: vertical;
  }

  .c-definitiva .contact-field :is(input, textarea)::placeholder {
    color: var(--ink-4);
  }

  @media (hover: hover) and (pointer: fine) {
    .c-definitiva .contact-field :is(input, textarea):hover {
      border-color: var(--ink-3);
    }
  }

  .c-definitiva .contact-field :is(input, textarea):focus-visible {
    border-color: var(--amber-deep);
    outline: none;
    box-shadow: 0 0 0 4px var(--focus-halo);
  }

  /* --- Le scelte parlano la lingua del calcolatore: un binario con le
     celle, una sola accesa. Su carta le celle sono tasti bianchi sul
     binario grigio (senza, le quattro voci sembravano testo dentro un
     riquadro); la cella scelta prende il fondo del bottone (Ambra Sole,
     testo inchiostro) e un filetto Ambra Profonda, che da' allo stato il
     contrasto da elemento grafico (4,3:1). */
  .c-definitiva .contact-choice {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Lo stacco fra legenda e binario lo da' il gap del fieldset (8px),
     lo stesso che separa etichetta e campo di testo. */
  .c-definitiva .contact-choice legend {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .c-definitiva .contact-options {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: var(--field-radius);
    background: var(--surface-l-000);
    transition: border-color var(--dur-2) var(--ease-out);
  }

  .c-definitiva .contact-choice[data-field="situazione"] .contact-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cinque situazioni su due colonne: "Altro" chiude la griglia a tutta
     riga invece di restare solo su mezza riga. */
  .c-definitiva .contact-choice[data-field="situazione"] .contact-options > label:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .c-definitiva .contact-options label {
    position: relative;
    display: grid;
    min-width: 0;
    cursor: pointer;
  }

  .c-definitiva .contact-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .c-definitiva .contact-options span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: calc(var(--field-radius) - 2px);
    color: var(--ink-2);
    background: var(--surface-l-100);
    box-shadow: inset 0 0 0 1px var(--hair);
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }

  .c-definitiva .contact-options input:checked + span {
    color: var(--ink);
    background: var(--amber);
    box-shadow: inset 0 0 0 1px var(--amber-deep);
  }

  .c-definitiva .contact-options input:focus-visible + span {
    box-shadow:
      inset 0 0 0 1px var(--hair),
      0 0 0 4px var(--focus-halo);
  }

  .c-definitiva .contact-options input:checked:focus-visible + span {
    box-shadow:
      inset 0 0 0 1px var(--amber-deep),
      0 0 0 4px var(--focus-halo);
  }

  .c-definitiva .contact-options label:active span {
    transform: scale(.97);
  }

  @media (hover: hover) and (pointer: fine) {
    .c-definitiva .contact-options input:not(:checked) + span:hover {
      color: var(--ink-1);
      box-shadow: inset 0 0 0 1px var(--ink-4);
    }
  }

  /* Errori: il bordo in Rosso Brace (contrasto da elemento grafico), il
     testo del messaggio in inchiostro pieno, perche' il rosso su carta a
     14px non arriva al 4,5:1. */
  .c-definitiva .contact-field[data-invalid] :is(input, textarea),
  .c-definitiva .contact-choice[data-invalid] .contact-options {
    border-color: var(--ember);
  }

  .c-definitiva .contact-error {
    color: var(--ink-1);
    font-size: var(--fs-caption);
    font-weight: 600;
  }

  .c-definitiva .contact-scenario {
    display: grid;
    justify-items: start;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--hair);
    border-radius: var(--field-radius);
    background: var(--surface-l-050);
  }

  .c-definitiva .contact-scenario[hidden] {
    display: none;
  }

  .c-definitiva .contact-scenario-head {
    color: var(--ink-1);
    font-size: var(--fs-caption);
    font-weight: 600;
  }

  .c-definitiva .contact-scenario pre {
    margin: 0;
    color: var(--ink-3);
    font-family: inherit;
    font-size: var(--fs-caption);
    line-height: 1.55;
    white-space: pre-wrap;
  }

  .c-definitiva .contact-scenario .text-link {
    margin-top: var(--s-1);
    padding-inline: 0;
    border-width: 0 0 1px;
    background: none;
    font-size: var(--fs-caption);
    cursor: pointer;
  }

  .c-definitiva .contact-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .c-definitiva .contact-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    padding-top: var(--s-1);
  }

  .c-definitiva .contact-submit .btn {
    white-space: nowrap;
  }

  .c-definitiva .contact-submit .btn[disabled] {
    opacity: .6;
    cursor: progress;
  }

  .c-definitiva .contact-note {
    flex: 1 1 15rem;
    color: var(--ink-3);
    font-size: var(--fs-caption);
    text-wrap: balance;
  }

  .c-definitiva .contact-note .nowrap {
    white-space: nowrap;
  }

  .c-definitiva .contact-status:empty {
    display: none;
  }

  .c-definitiva .contact-status {
    color: var(--ink-1);
    font-size: var(--fs-caption);
    font-weight: 600;
  }

  .c-definitiva .contact-status a {
    color: inherit;
  }

  .c-definitiva .contact-done {
    display: grid;
    align-content: center;
    gap: var(--s-2);
    min-height: 320px;
    padding: clamp(24px, 3vw, 40px);
    color: var(--ink-2);
    outline: none;
  }

  .c-definitiva .contact-done-title {
    color: var(--ink-1);
    font-family: var(--display);
    font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
  }

  /* Telefono: una colonna per i dati, il tipo di azienda su due righe da
     due, la situazione in colonna con il testo a sinistra, come le righe
     della presenza nel calcolatore. */
  @media (max-width: 640px) {
    .c-definitiva .contact-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .c-definitiva .contact-options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-definitiva .contact-choice[data-field="situazione"] .contact-options {
      grid-template-columns: minmax(0, 1fr);
    }

    .c-definitiva .contact-choice[data-field="situazione"] .contact-options span {
      justify-content: flex-start;
      padding-inline: 14px;
      text-align: left;
    }

    .c-definitiva .contact-submit .btn {
      width: 100%;
    }
  }

  /* --- L'isola della chiamata. Il robot e' la scena Spline della pagina di
     manutenzione: scala sull'altezza del canvas, le braccia aperte
     occupano il 75% dell'altezza, la testa parte al 13,3%. Il testo sta in
     alto, il robot riempie il resto dell'isola e sfuma verso il fondo.
     Da 1024px l'isola e' alta quanto il modulo (la riga della griglia),
     quindi il robot prende l'altezza che resta; sotto, ha un'altezza sua. */
  .c-definitiva .call-island {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    overflow: clip;
    padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
    border-radius: var(--radius-xl);
    background: var(--surface-050);
    isolation: isolate;
  }

  .c-definitiva .call-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: var(--s-4);
  }

  .c-definitiva .call-copy h3 {
    max-width: 12ch;
    font-size: clamp(2rem, 1.1rem + 1.5vw, 2.625rem);
    line-height: 1.02;
  }

  .c-definitiva .call-copy .btn {
    margin-top: var(--s-2);
  }

  .c-definitiva .call-robot {
    --h: min(100cqh, 130cqw);
    --cx: 50cqw;
    --testa: calc(.133 * var(--h));
    --fa: 72cqh;
    --fb: 100cqh;
    position: relative;
    min-height: 300px;
    margin-inline: calc(clamp(24px, 3vw, 40px) * -1);
    container-type: size;
    opacity: 0;
    transition: opacity .9s var(--ease-out);
  }

  .c-definitiva .call-robot[data-ready] {
    opacity: 1;
  }

  /* Il runtime scrive le misure del canvas in linea: da qui !important. */
  .c-definitiva .call-robot canvas {
    --top: calc(var(--testa) - .133 * var(--h));
    position: absolute;
    top: var(--top);
    left: calc(var(--cx) - .45 * var(--h));
    display: block;
    width: calc(.9 * var(--h)) !important;
    height: var(--h) !important;
    outline: none;
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) min(70%, calc(var(--fa) - var(--top))), rgb(0 0 0 / 0) min(100%, calc(var(--fb) - var(--top))));
    mask-image: linear-gradient(to bottom, rgb(0 0 0) min(70%, calc(var(--fa) - var(--top))), rgb(0 0 0 / 0) min(100%, calc(var(--fb) - var(--top))));
  }

  @media (max-width: 1023px) {
    .c-definitiva .call-robot {
      height: clamp(320px, 80vw, 460px);
    }
  }

  /* Tablet: l'isola sta sotto il modulo a tutta larghezza e, con il testo
     sopra il robot, lasciava un vuoto alto quanto mezzo schermo. Testo a
     sinistra e robot a destra, come nella vecchia sezione della chiamata. */
  @media (min-width: 641px) and (max-width: 1023px) {
    .c-definitiva .call-island {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: none;
      column-gap: var(--s-5);
    }

    .c-definitiva .call-copy {
      align-self: center;
      padding-bottom: clamp(24px, 3vw, 40px);
    }

    .c-definitiva .call-robot {
      height: 380px;
      margin-inline: 0 calc(clamp(24px, 3vw, 40px) * -1);
    }
  }

  /* =====================================================================
     PASSATA MOBILE (30/09), dall'audit a tre voci (UX, visivo, codice).
     Tutto dentro media query sotto i 1024/900/740/720/560/480/430: il
     desktop non cambia di un pixel. Le soglie nuove stanno su 720 (i token
     tipografici mobile girano li'); dove un componente ha gia' una soglia
     sua (client 740, ruoli 900, folio e passi 560, robot 1024) si usa
     quella, per non aprire una finestra in cui valgono due regole.
     ===================================================================== */

  /* --- Radio del form: la pill visibile e' 44px ma l'input nascosto
     restava 13x13 in un angolo. L'input copre tutta la pill: l'area di
     tocco reale, il focus e gli hit-test coincidono con cio' che si vede.
     Vale a ogni larghezza, non cambia nulla di visibile. */
  .c-definitiva .contact-options input {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  /* --- Robot sul telefono (Michele, 30/09: "lo lascerei anche da mobile,
     magari piu' piccolo"). Sotto il testo occupava 320px, piu' della
     meta' dell'isola: scende a ~230px a 390. Con "riduci movimento" o
     "risparmio dati" non si carica (contact.js) e lo spazio sparisce. */
  @media (max-width: 640px) {
    .c-definitiva .call-robot {
      min-height: 0;
      height: clamp(200px, 58vw, 260px);
    }
  }

  /* Robot escluso da contact.js (hidden): l'isola si chiude sul testo. */
  .c-definitiva .call-island:has(> .call-robot[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding-bottom: clamp(24px, 3vw, 40px);
  }

  /* --- Tabella dei ruoli sotto i 900 (Michele, 30/09: impilata "fa
     schifo"). Un confronto non si legge in colonna per tre schermate: le
     tre colonne diventano tre card affiancate su un nastro orizzontale
     con lo snap, una per schermata, la successiva che fa capolino dal
     bordo come nel nastro dei loghi. Il Growth Manager resta il primo e
     tiene la testata scura; l'ordine del DOM e la lettura con screen
     reader non cambiano, cambia solo la direzione dello scorrimento.
     Da ~2.400px impilati a un blocco alto quanto una card. */
  @media (max-width: 900px) {
    .c-definitiva .growth-roles {
      display: grid;
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: min(84%, 360px);
      column-gap: var(--s-4);
      margin-inline: calc(var(--gutter) * -1);
      padding: 4px var(--gutter) var(--s-5);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      overscroll-behavior-x: contain;
    }

    .c-definitiva .growth-roles:focus-visible {
      outline-offset: -3px;
    }

    .c-definitiva .growth-role {
      display: flex;
      flex-direction: column;
      scroll-snap-align: start;
    }

    /* Tutte e tre le card con lo stesso vestito (il manager ce l'ha gia'
       dalla regola base): sul nastro sono oggetti, non paragrafi. */
    .c-definitiva .growth-role:not([data-role="manager"]) {
      border: 1px solid var(--card-line);
      border-radius: var(--card-radius);
      background: var(--card-surface);
      box-shadow: var(--card-elev);
      overflow: hidden;
    }

    .c-definitiva .growth-role[data-role="manager"] {
      margin-block: 0;
    }

    .c-definitiva .growth-role:not([data-role="manager"]) .growth-role-head {
      padding-top: var(--s-4);
    }

    .c-definitiva .growth-role:not([data-role="manager"]) .growth-role-head,
    .c-definitiva .growth-role:not([data-role="manager"]) .growth-role-list > div {
      padding-inline: var(--s-5);
    }

    /* Dentro la card l'ultima riga la chiude il bordo, non un filetto. */
    .c-definitiva .growth-role .growth-role-list > div:last-child {
      padding-bottom: var(--s-5);
      border-bottom: 0;
    }
  }

  /* --- Matrice "Il problema decide il formato" sotto i 680 (Michele,
     30/09: "anche questo mettilo a card come il mio ruolo"). Impilata
     erano quattro blocchi di testo su carta, uno solo con la cornice.
     Stesso nastro a scatto dei ruoli: quattro card con lo stesso vestito,
     la consigliata (Fractional) prima e con il filetto ambra, il verdetto
     in fondo a tutte alla stessa quota. */
  @media (max-width: 680px) {
    .c-definitiva .matrix[data-variant="cards"] {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: min(84%, 360px);
      gap: var(--s-4);
      margin-inline: calc(var(--gutter) * -1);
      padding: 4px var(--gutter) var(--s-5);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      overscroll-behavior-x: contain;
    }

    .c-definitiva .matrix[data-variant="cards"]:focus-visible {
      outline-offset: -3px;
    }

    .c-definitiva .matrix[data-variant="cards"] .matrix-cell {
      scroll-snap-align: start;
      background: var(--card-surface);
    }

    .c-definitiva .matrix[data-variant="cards"] .matrix-cell:not([data-fit="high"]) {
      border-color: var(--card-line);
      border-radius: var(--card-radius);
      background: var(--card-surface);
      box-shadow: var(--card-elev);
    }
  }

  /* --- Imbuti della tesi sotto i 900 (Michele, 30/09: "mettiamoli in
     background con una sfumatura che non rovini la scritta, se no sembra
     un sito piatto da mobile"). Sul desktop stanno ai lati del testo;
     qui non c'e' un lato libero, quindi diventano sfondo: il grande in
     alto a destra dietro la tesi, che esce un poco dal bordo, il piccolo
     in basso a sinistra dietro il paragrafo, in diagonale. Sfumano verso
     il testo e restano sotto di lui (isolation + z-index -1). L'aside
     torna statico cosi' l'imbuto si posiziona sul capitolo, non
     sull'etichetta "Principio guida". */
  @media (max-width: 900px) {
    .c-definitiva .manifesto[data-variant="thesis"] {
      isolation: isolate;
    }

    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-aside {
      position: static;
      will-change: auto;
    }

    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-art {
      display: block;
      position: absolute;
      z-index: -1;
      aspect-ratio: 120 / 236;
      pointer-events: none;
    }

    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-art .manifesto-funnel {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      color: var(--ink-4);
    }

    /* Il grande copre etichette e tesi e si spegne prima del paragrafo:
       a 44vw il sacchetto con l'euro cadeva dietro "Mappo il processo". */
    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-art:not([data-side]) {
      top: calc(var(--s-3) * -1);
      right: calc(var(--gutter) * -.6);
      width: clamp(130px, 36vw, 200px);
      opacity: .5;
      -webkit-mask-image:
        linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0) 60%),
        linear-gradient(to bottom, rgb(0 0 0) 62%, rgb(0 0 0 / 0) 100%);
      mask-image:
        linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0) 60%),
        linear-gradient(to bottom, rgb(0 0 0) 62%, rgb(0 0 0 / 0) 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }

    /* Il piccolo scende nel respiro sotto il paragrafo: dietro il testo
       resta solo la bocca dell'imbuto, a un quinto di intensita'. */
    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-art[data-side="end"] {
      bottom: calc(var(--s-8) * -1);
      left: calc(var(--gutter) * -.6);
      width: clamp(84px, 24vw, 130px);
      opacity: .22;
      -webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 0) 0%, rgb(0 0 0) 65%);
      mask-image: linear-gradient(to left, rgb(0 0 0 / 0) 0%, rgb(0 0 0) 65%);
    }
  }

  /* Sul telefono il testo e' a tutta larghezza e sotto il paragrafo ci
     sono 60px: il piccolo finiva con le monete fra le lettere di "Mappo
     il processo". Resta il grande; il piccolo torna da 681px, di fianco. */
  @media (max-width: 680px) {
    .c-definitiva .manifesto[data-variant="thesis"] .manifesto-art[data-side="end"] {
      display: none;
    }
  }

  /* --- Le tre leve del primer (Acquisizione, Retention, Monetizzazione)
     sotto i 700 (Michele, 30/09: "tre card che una persona puo' fare
     sliding"). Impilate erano tre righe divise da filetti; diventano lo
     stesso nastro a scatto delle altre sezioni. Altezze simili (2-4 righe
     di testo): si pareggiano. La soglia e' quella del primer (700). */
  @media (max-width: 700px) {
    .c-definitiva .growth-primer-levers {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: min(84%, 360px);
      gap: var(--s-4);
      margin-inline: calc(var(--gutter) * -1);
      padding: 4px var(--gutter) var(--s-5);
      border-block: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      overscroll-behavior-x: contain;
    }

    .c-definitiva .growth-primer-levers > div,
    .c-definitiva .growth-primer-levers > div:first-child,
    .c-definitiva .growth-primer-levers > div + div {
      overflow: hidden;
      padding: var(--s-5);
      border: 1px solid var(--card-line);
      border-radius: var(--card-radius);
      background: var(--card-surface);
      box-shadow: var(--card-elev);
      scroll-snap-align: start;
    }

    /* Il nome della leva su una fascia Ambra Sole (Michele, 30/09: "cosi'
       gli dai valore"). Ambra piatta, un valore solo, testo inchiostro come
       nei bottoni (9,5:1). Una fascia e mezza in vista resta sotto il 10%
       della schermata che il brand concede all'ambra. */
    .c-definitiva .growth-primer-levers dt {
      margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
      padding: var(--s-4) var(--s-5);
      color: var(--ink);
      background: var(--amber);
    }

    .c-definitiva .growth-primer-levers dt span {
      color: rgb(var(--ink-rgb) / .68);
      font-weight: 700;
    }

    .c-definitiva .growth-primer-levers dd {
      margin-top: 0;
    }
  }

  /* --- Offerta "Tre modi per mettere ordine" sotto i 700 (Michele,
     30/09: "le tre card falle in sliding come il mio ruolo"). Stesso
     nastro a scatto; la card core (Fractional) prima, col filetto ambra.
     Altezze naturali: la core e' alta 772px a 390 (ha anche la scheda
     presenza/durata/cadenza/uscita), le altre ~480; pareggiate avrebbero
     300px di bianco dentro. La nota "Non sai quale dei tre ti serve?"
     diventa l'ultima slide, dopo le tre di cui parla: sul desktop resta
     sotto la card core, per questo non si sposta nel markup. */
  @media (max-width: 699px) {
    .c-definitiva .grid[data-variant="offer"] {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: min(84%, 360px);
      align-items: start;
      gap: var(--s-4);
      margin-inline: calc(var(--gutter) * -1);
      padding: 4px var(--gutter) var(--s-5);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      overscroll-behavior-x: contain;
    }

    .c-definitiva .grid[data-variant="offer"]:focus-visible {
      outline-offset: -3px;
    }

    .c-definitiva .grid[data-variant="offer"] > * {
      scroll-snap-align: start;
    }

    /* L'ingresso a cascata e' pensato per la colonna: nel nastro le slide
       fuori schermo restavano a opacita' 0 e si accendevano in ritardo
       durante lo swipe. Qui sono visibili da subito. */
    .html-has-js .c-definitiva .grid[data-variant="offer"] > [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* --- Card clienti impilate (fino a 740): tre card da ~485px per tre
     loghi, quasi due schermate di bianco. Logo contenuto, card compatta. */
  @media (max-width: 740px) {
    .c-definitiva .client-feature-card {
      min-height: 0;
    }

    .c-definitiva .client-feature-logo {
      min-height: 0;
      margin-block: var(--s-3);
      padding: var(--s-5) var(--s-4);
    }

    .c-definitiva .client-feature-logo img {
      max-width: 70%;
      max-height: 56px;
    }
  }

  /* --- Ritmo verticale sotto i 720: la pagina misurava 30.972px a 390.
     Scendono solo i minimi dei clamp (a 1440 i clamp sono gia' sul ramo
     alto, quindi il desktop resta identico) e i min-height che a 390
     garantivano vuoto invece di contenuto. */
  @media (max-width: 720px) {
    .c-definitiva {
      --section-y: clamp(48px, 7.8vw, 112px);
      --section-y-lg: clamp(64px, 9.6vw, 138px);
      --section-y-sm: clamp(36px, 4.8vw, 68px);
    }

    .c-definitiva .case-score,
    .c-definitiva .case-transition-card {
      min-height: 0;
    }

    /* Le righe dei ruoli respiravano come sul desktop: 15 righe x 8px. */
    .c-definitiva .growth-role-list > div {
      padding-block: var(--s-3);
    }

    /* Fra metodo e stack cadevano nello stesso schermo due filetti (la
       chiusura dei passi e il tr-hairline) con 70px di vuoto in mezzo:
       ne resta uno, quello dei passi. */
    .c-definitiva #metodo + .tr-hairline {
      display: none;
    }

    /* Area di tocco >=44px su link testuali e footer senza spostare nulla:
       il padding aggiunge, il margine negativo restituisce (stesso pattern
       di --hero-scroll-tap). */
    .c-definitiva .text-link {
      margin-block: -5px;
      padding-block: 9px;
    }

    .c-definitiva .foot-col a {
      display: inline-block;
      margin-block: -9px;
      padding-block: 9px;
    }

    /* "Settimane 1 e 2 / Lettura" e' contenuto, non etichetta di sistema:
       13px maiuscolo era sotto la soglia comoda. */
    .c-definitiva .step-meta {
      font-size: var(--fs-caption);
      letter-spacing: .08em;
    }

    /* "Lavorare con / me ha senso": la rottura cadeva dopo la
       preposizione. */
    .c-definitiva #quando-title {
      text-wrap: balance;
    }

    /* Campo strumenti: gli scarti verticali di +10/-5/+6px raccontano il
       galleggiamento, che sotto i 760 e' spento: da fermi leggono come
       griglia storta. GoHighLevel rendeva un blocco nero 120x55 fra
       tessere 64x64. In coda il campo teneva mezzo schermo di padding. */
    .c-definitiva .stack-tools[data-layout="mass"] .stack-tool {
      top: 0;
    }

    .c-definitiva .stack-tool[data-logo="wide"] .stack-tool-mark img {
      width: auto;
      max-height: 40px;
    }

    .c-definitiva .stack-mass {
      padding-bottom: clamp(24px, 5vw, 40px);
    }

    /* La traiettoria del caso a 390 e' una riga orizzontale su card
       bianca: l'alone sfocato era l'unico "oggetto" ambra della pagina
       (il brand li vuole senza contorno percepibile). Resta il filetto. */
    .c-definitiva .case-trajectory-line::after {
      box-shadow: none;
    }

    /* Le foto lazy in arrivo apparivano come buchi di carta: il campo
       tonalizzato dice "foto in caricamento". */
    .c-definitiva .photo-journal-shot > img {
      background: var(--surface-l-050);
    }

    /* Decine di [data-reveal] in attesa tenevano un layer GPU prenotato
       (will-change) su una pagina da 30k px: la transizione resta
       identica, sparisce solo la prenotazione di memoria. */
    .html-has-js .c-definitiva [data-reveal] {
      will-change: auto;
    }
  }

  /* =====================================================================
     DAL CALCOLATORE IN GIU', TELEFONO (Michele, 30/09: "puoi migliorare
     molto l'esperienza di navigazione"). Tre problemi misurati a 390:
     il calcolatore stava in tre cornici annidate (isola, card, pannello)
     con 264px utili per i controlli; il risultato stava una schermata
     sotto i controlli, quindi toccando "3 giorni" non si vedeva l'effetto;
     il modulo era una colonna di nove campi alta 1.200px.
     ===================================================================== */
  @media (max-width: 720px) {
    /* L'isola scura va a tutto schermo: resta l'apertura di capitolo con
       gli angoli alti, spariscono i 48px di cornice di carta ai lati. */
    .c-definitiva #calcolatore.tr-inset {
      margin-inline: 0;
      border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
    }

    .c-definitiva .tr-inset > .container {
      width: calc(100% - var(--gutter) * 2);
    }

    /* Il reveal scatta al 12% del blocco visibile: su un calcolatore alto
       2.000px erano ~340px di isola vuota prima che comparisse. */
    .html-has-js .c-definitiva .calculator-shell[data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* Una cornice sola: i controlli stanno sul fondo dell'isola, il
       risultato e' l'unica card, cioe' la cosa che si guarda. */
    .c-definitiva .calc-card {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }

    .c-definitiva .calc-controls {
      padding: 0 0 var(--s-6);
      border-bottom: 0;
    }

    .c-definitiva .calc-result {
      padding: var(--s-5) var(--s-4);
      border: 1px solid var(--calc-line);
      border-radius: var(--card-radius);
      scroll-margin-top: calc(var(--header-h) + var(--s-4));
    }

    /* Compatta il piede: tre righe di informazioni in 350px. */
    .c-definitiva .site-foot {
      padding-block: var(--s-7) calc(var(--s-7) + var(--dock-safe, 0px));
    }

    .c-definitiva .foot-grid {
      gap: var(--s-5);
    }
  }

  /* --- I paragrafi introduttivi a 19px andavano a 8-10 righe sul
     telefono: scendono al corpo lungo (17px) in tutta la pagina. Circa il
     15% di altezza in meno, nessuna parola cambiata. */
  @media (max-width: 720px) {
    .c-definitiva main .u-lead {
      font-size: var(--fs-body-l);
      line-height: var(--lh-body);
    }
  }

  /* --- Capitoli scuri del telefono (taste.js mette data-tone="invert"
     sulle sezioni con data-tone-mobile). La rampa di colori la da' gia'
     la skin; qui solo i componenti che hanno un fondo chiaro scritto a
     mano e i separatori che cadevano proprio sul taglio di tono. */
  @media (max-width: 720px) {
    /* Il caso chiuso era una card bianca: nel capitolo scuro il testo
       diventava chiaro su bianco. Diventa una card del capitolo; quella
       aperta sale di un gradino, altrimenti sparirebbe nel fondo. */
    .c-definitiva [data-tone="invert"] .case-deep[data-presentation="editorial"] {
      border: 1px solid var(--card-line);
      background: var(--card-surface);
      box-shadow: var(--card-elev);
    }

    .c-definitiva [data-tone="invert"] .case-deep[data-presentation="editorial"][open] {
      border-color: var(--hair-strong);
      background: var(--surface-100);
    }

    .c-definitiva [data-tone="invert"] .case-deep[data-presentation="editorial"]:not([open]) .case-deep-toggle {
      background: var(--surface-200);
    }

    .c-definitiva [data-tone="invert"] .case-deep:not([open]) > summary:active {
      background: var(--surface-200);
    }

    .c-definitiva [data-tone="invert"] .case-trajectory-head span {
      color: var(--ink-3);
    }

    /* Un filetto sul taglio netto fra nero e carta non separa niente. */
    .c-definitiva :is(#cos-e-il-growth, #casi) + .tr-hairline {
      display: none;
    }

    /* Le etichette "02 / Metodo" e "03 / Evidenze" stanno fra due sezioni:
       sulla carta, a filo del nero, sembravano tagliate. Scendono dentro il
       capitolo che annunciano, come prima riga, con i colori del fondo
       scuro; la sezione fa posto sopra l'occhiello. Il loro posto sulla
       carta resta, e diventa il respiro prima del taglio. */
    .c-definitiva .tr-folio:has(+ [data-tone="invert"]) {
      --ink-3: var(--on-dark-3);
      --hair: var(--hair-d-2);
      --panel-surface: var(--surface-200);
      position: relative;
      z-index: var(--z-content);
      translate: 0 calc(30px + var(--s-6));
    }

    .c-definitiva .tr-folio + [data-tone="invert"] {
      padding-top: calc(var(--section-y) + 30px + var(--s-4));
    }

    /* Dentro il capitolo dei casi il numero "03" ripeteva l'etichetta
       "03 / Evidenze" una riga sopra. */
    .c-definitiva .tr-folio + #casi[data-tone="invert"] .section-heading[data-layout="folio"] .section-number {
      display: none;
    }
  }

  /* --- Risultato in vista mentre si configura (taste.js crea la barra).
     Compare solo quando i controlli sono sullo schermo e la cifra no;
     riporta etichetta e valore del pannello, il tocco porta al dettaglio.
     E' uno specchio: per gli screen reader parla gia' la regione live
     del risultato, quindi la barra e' aria-hidden. */
  .c-definitiva .calc-peek {
    display: none;
  }

  @media (max-width: 720px) {
    .c-definitiva .calc-peek {
      position: fixed;
      z-index: var(--z-dock);
      right: var(--gutter);
      bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
      left: var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-3);
      min-height: 56px;
      padding: 10px 18px 10px 20px;
      border: 1px solid rgb(var(--amber-rgb) / .45);
      border-radius: var(--radius-pill);
      color: var(--on-dark-2);
      background: rgb(var(--ink-rgb) / .94);
      box-shadow: 0 18px 40px -16px rgb(var(--black-rgb) / .6);
      font: 600 var(--fs-caption) / 1.2 var(--body);
      text-align: left;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      translate: 0 calc(100% + var(--s-4));
      transition:
        opacity var(--dur-2) var(--ease-out),
        translate var(--dur-3) var(--ease-out);
    }

    .c-definitiva .calc-peek[data-show="true"] {
      opacity: 1;
      pointer-events: auto;
      translate: 0 0;
    }

    .c-definitiva .calc-peek strong {
      margin-left: auto;
      color: var(--amber);
      font: 700 1.375rem / 1 var(--display);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .c-definitiva .calc-peek i {
      color: var(--amber);
      font-style: normal;
    }

    .c-definitiva .calc-peek:active {
      transform: scale(.98);
    }
  }

  @media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .c-definitiva .calc-peek {
      translate: none;
      transition: none;
    }
  }

  /* --- Modulo a passi (contact.js, solo sotto i 720). Tre passi, i
     campi che non sono del passo corrente si nascondono ma restano nel
     modulo e partono con l'invio. Sopra i 720, o senza JavaScript, il
     modulo resta quello intero di oggi. */
  .c-definitiva :is(.contact-steps, .contact-steps-nav)[hidden] {
    display: none;
  }

  @media (max-width: 720px) {
    .c-definitiva .contact-form[data-step="1"] [data-step]:not([data-step="1"]),
    .c-definitiva .contact-form[data-step="2"] [data-step]:not([data-step="2"]),
    .c-definitiva .contact-form[data-step="3"] [data-step]:not([data-step="3"]),
    .c-definitiva .contact-form[data-step="3"] .contact-grid,
    .c-definitiva .contact-form[data-step]:not([data-step="3"]) .contact-submit .btn {
      display: none;
    }

    .c-definitiva .contact-steps {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--s-3) var(--s-4);
    }

    .c-definitiva .contact-steps-count {
      display: grid;
      gap: 2px;
      margin: 0;
      color: var(--ink-3);
      font-size: var(--fs-caption);
      line-height: 1.3;
    }

    .c-definitiva .contact-steps-count strong {
      color: var(--ink-1);
      font: 700 var(--fs-h4) / 1.15 var(--display);
    }

    .c-definitiva .contact-steps .contact-back {
      min-height: 44px;
      padding: 0 2px;
      border: 0;
      border-bottom: 1px solid var(--hair);
      color: var(--ink-2);
      background: none;
      font: 600 var(--fs-caption) / 1 var(--body);
      cursor: pointer;
    }

    .c-definitiva .contact-steps .contact-back[hidden] {
      display: none;
    }

    /* Binario a tre celle, la stessa grammatica del calcolatore: le
       celle fatte e quella corrente si accendono. */
    .c-definitiva .contact-steps-rail {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
    }

    .c-definitiva .contact-steps-rail span {
      height: 4px;
      border-radius: 2px;
      background: var(--hair);
      transition: background-color var(--dur-2) var(--ease-out);
    }

    .c-definitiva .contact-steps-rail span[data-on] {
      background: var(--amber);
    }

    .c-definitiva .contact-steps-nav .btn {
      width: 100%;
    }
  }

  /* --- Titolo dei casi e passi del metodo sotto i 560: la colonna
     numerata del desktop strozzava il testo a ~270-280px. Il folio passa
     sopra il titolo come indice; nei passi la colonna si stringe alla
     larghezza del numero. */
  @media (max-width: 560px) {
    .c-definitiva .section-heading[data-layout="folio"] {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--s-2);
    }

    .c-definitiva .section-heading[data-layout="folio"] .section-number {
      grid-row: auto;
      font-size: var(--fs-h3);
    }

    .c-definitiva .steps > li {
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--s-3);
    }
  }

  /* --- Sotto i 480: la freccia del link MayerMoover restava sola sulla
     seconda riga; l'etichetta del campo strumenti andava su tre righe per
     il tracking largo. */
  @media (max-width: 480px) {
    .c-definitiva .growth-comparison-link {
      max-width: 22ch;
    }

    .c-definitiva .stack-mass-label {
      margin-bottom: var(--s-6);
      letter-spacing: .06em;
    }
  }

  /* --- Primo schermo a 390: kicker + titolo su 5 righe + lead su 8 righe
     + CTA riempivano tutta la prima schermata, il ritratto partiva dal
     bordo. Il lead scende di un gradino (resta sopra i 17px) e la foto
     si avvicina: gli occhi del volto salgono verso la piega. */
  @media (max-width: 430px) {
    .c-definitiva .hero-copy .u-lead {
      font-size: var(--fs-body-l);
      line-height: var(--lh-body);
    }

    .c-definitiva .hero .ph-hero {
      margin-top: var(--s-4);
    }
  }

  /* --- iPad 721-1279: i tre input delle ipotesi del calcolatore
     restavano a 15px e iPadOS Safari zoomma al focus. Il desktop >=1280
     non cambia. */
  @media (min-width: 721px) and (max-width: 1279px) {
    .c-definitiva .calc-detail-grid input {
      font-size: var(--fs-body);
    }
  }
}