/* =========================================================================
   04-components.css — @layer components
   Tutta la geometria condivisa dai quattro concept.

   CONTRATTO: qui vive la geometria, nelle skin vivono solo le custom
   property. Le varianti si dichiarano con attributi data-variant, mai con
   classi, cosi' due skin non possono collidere per sbaglio.
   Nessun colore letterale: solo token.
   ========================================================================= */

@layer components {
  /* ====================================================================== */
  /* 1. Testata e navigazione                                               */
  /* ====================================================================== */

  .site-head {
    position: sticky;
    z-index: var(--z-header);
    top: 0;
    min-height: var(--header-h);
    border-bottom: 1px solid var(--header-line);
    background: var(--header-bg);
    backdrop-filter: blur(14px) saturate(1.2);
  }

  .site-head > .container {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: var(--header-h);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-inline-end: auto;
    color: var(--ink-1);
    text-decoration: none;
  }

  .brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--brand-mark-radius, var(--radius-sm));
    color: var(--accent-on);
    background: var(--accent);
    font: 800 var(--fs-label) / 1 var(--body);
    letter-spacing: .06em;
  }

  /* Variante a punto: un solo segno ambra, per le testate piu' asciutte */
  .brand-mark[data-variant="dot"] {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
    border-radius: 50%;
    font-size: 0;
  }

  /* Variante a barre: legge come un piccolo grafico, non come un monogramma */
  .brand-mark[data-variant="bars"] {
    align-items: end;
    gap: 2px;
    padding: 8px 7px;
    background: var(--panel-surface);
    grid-auto-flow: column;
  }

  .brand-mark[data-variant="bars"] i {
    width: 4px;
    background: var(--accent);
  }

  .brand-mark[data-variant="bars"] i:nth-child(1) { height: 7px; }
  .brand-mark[data-variant="bars"] i:nth-child(2) { height: 12px; }
  .brand-mark[data-variant="bars"] i:nth-child(3) { height: 17px; }

  /* Variante ritratto: al posto del monogramma, il volto. Sale a 40px perche'
     sotto i 38 una faccia diventa una macchia. Il fondo della foto e'
     praticamente l'inchiostro della pagina, quindi sul fondo scuro il cerchio
     sparirebbe: il filetto ambra lo ridisegna e tiene il segno di brand che il
     monogramma perde. */
  .brand-mark[data-variant="photo"] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-100);
    box-shadow: inset 0 0 0 1px var(--hair-accent);
    font-size: 0;
  }

  .brand-mark[data-variant="photo"] img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .brand-copy {
    display: grid;
    gap: 1px;
  }

  .brand-copy strong {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-metric-s);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
  }

  .brand-copy small {
    color: var(--ink-4);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 28px);
  }

  .nav-menu a {
    color: var(--ink-2);
    font-size: var(--fs-body-s);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-exit) var(--ease-exit);
  }

  .nav-toggle {
    display: none;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--hair);
    border-radius: var(--btn-radius);
    color: var(--ink-1);
    background: transparent;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .nav-toggle i {
    display: grid;
    gap: 3px;
    width: 16px;
  }

  .nav-toggle i::before,
  .nav-toggle i::after {
    height: 1.5px;
    background: currentcolor;
    content: "";
    transition: transform var(--dur-2) var(--ease-out);
  }

  .nav-toggle[aria-expanded="true"] i::before {
    transform: translateY(2px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] i::after {
    transform: translateY(-3px) rotate(-45deg);
  }

  @media (hover: hover) and (pointer: fine) {
    .nav-menu a:hover {
      color: var(--ink-1);
    }

    .nav-toggle:hover {
      border-color: var(--hair-strong);
    }
  }

  /* Sotto i 420px il sottotitolo del marchio va a capo e la testata cresce
     oltre --header-h, che e' anche lo scroll-padding delle ancore: sul
     telefono resta il solo wordmark. */
  @media (max-width: 420px) {
    .brand-copy small {
      display: none;
    }
  }

  @media (max-width: 900px) {
    .nav-toggle {
      display: inline-flex;
    }

    .nav-menu {
      position: absolute;
      z-index: var(--z-overlay);
      top: 100%;
      right: var(--gutter);
      left: var(--gutter);
      display: grid;
      gap: var(--s-2);
      padding: var(--s-5);
      border: 1px solid var(--hair);
      border-radius: var(--card-radius);
      background: var(--panel-surface);
      box-shadow: var(--card-elev-hover);
    }

    .nav-menu[data-open="false"] {
      display: none;
    }

    .nav-menu a {
      padding-block: 10px;
      font-size: var(--fs-body-l);
    }
  }

  /* ====================================================================== */
  /* 2. Bottoni e link                                                      */
  /* ====================================================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    font-size: var(--fs-body-s);
    font-weight: 700;
    text-decoration: none;
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-exit) var(--ease-exit),
      transform var(--dur-exit) var(--ease-exit);
  }

  .btn[data-variant="primary"] {
    --focus-ring: var(--accent-on);
    color: var(--accent-on);
    background: var(--accent);
    box-shadow: var(--btn-shadow, none);
  }

  .btn[data-variant="outline"] {
    border-color: var(--hair-strong);
    color: var(--ink-1);
  }

  .btn[data-variant="ghost"] {
    padding-inline: 0;
    color: var(--ink-1);
  }

  .btn[data-variant="primary"]:focus-visible {
    box-shadow: 0 0 0 5px var(--focus-halo);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding-block: 4px;
    border-bottom: 1px solid var(--hair-strong);
    color: var(--ink-1);
    font-size: var(--fs-body-s);
    font-weight: 700;
    text-decoration: none;
    transition:
      border-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover {
      box-shadow: var(--card-elev);
      transform: translateY(var(--lift-btn, -2px));
      transition-duration: var(--dur-2), var(--dur-2), var(--dur-2), var(--dur-3), var(--dur-3);
      transition-timing-function: var(--ease-out);
    }

    .btn[data-variant="outline"]:hover {
      border-color: var(--accent-line);
    }

    .text-link:hover {
      border-color: var(--accent-line);
      color: var(--accent-text);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn:hover {
      transform: none;
    }
  }

  /* ====================================================================== */
  /* 3. Intestazione di sezione                                             */
  /* ====================================================================== */

  .section-heading {
    display: grid;
    gap: var(--s-4);
    margin-bottom: clamp(32px, 4vw, 56px);
  }

  .section-heading[data-layout="split"] {
    align-items: end;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(24px, 4vw, 64px);
  }

  .section-heading[data-layout="folio"] {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 48px);
  }

  .section-heading[data-layout="folio"] .section-number {
    grid-row: span 2;
  }

  /* Il kicker e' un marcatore su una riga sola: non deve ereditare la misura
     da .u-label, che a 40ch lo manderebbe a capo. */
  .kicker {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    max-width: none;
    color: var(--accent-text);
  }

  /* Il filetto davanti all'occhiello NON e' il default. Ripetuto su tutte e
     venti le sezioni smetteva di essere un segno e diventava un tic: lo
     stesso ornamento prima di ogni etichetta e' uno dei gesti che fanno
     leggere una pagina come generata. L'etichetta in maiuscoletto ambra si
     distingue gia' da sola. Resta disponibile come scelta esplicita, per i
     casi in cui serva agganciare l'occhiello a una colonna. */
  .kicker[data-variant="rule"]::before {
    width: 18px;
    height: 1px;
    flex: 0 0 18px;
    /* allineato alla mediana della maiuscoletta, non alla baseline */
    translate: 0 -.35em;
    background: currentcolor;
    content: "";
  }

  .kicker[data-variant="dot"]::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-basis: 7px;
    translate: 0 -.05em;
    border-radius: 50%;
    background: var(--accent-line);
    box-shadow: 0 0 0 5px var(--accent-quiet);
  }

  .kicker[data-variant="plain"]::before {
    display: none;
  }

  .section-number {
    color: var(--ink-4);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-metric-m);
    font-weight: 760;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  @media (max-width: 780px) {
    .section-heading[data-layout="split"] {
      grid-template-columns: 1fr;
    }
  }

  /* ====================================================================== */
  /* 4. Transizioni fra sezioni                                             */
  /* ====================================================================== */

  /* Filetto neutro: fra due sezioni dello stesso tono. Max 3 per pagina. */
  .tr-hairline {
    width: var(--page-wide);
    height: 1px;
    margin-inline: auto;
    background: linear-gradient(90deg, transparent 0, var(--hair) 12%, var(--hair) 88%, transparent 100%);
  }

  /* Separatore con numero di sezione: legge come marcatore editoriale */
  .tr-folio {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: var(--s-5);
    width: var(--page);
    margin-inline: auto;
  }

  .tr-folio > span {
    padding: 6px 14px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-pill);
    color: var(--ink-3);
    background: var(--panel-surface);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .tr-folio > i {
    height: 1px;
    background: linear-gradient(90deg, var(--hair) 0, var(--hair) 88%, transparent 100%);
  }

  /* Filetto firma: una sola volta per pagina, solo fra due sezioni dark */
  .tr-seam {
    width: 100%;
    height: 1px;
    background: var(--hair-amber-2);
    box-shadow: var(--glow-amber-seam);
  }

  /* Dissolvenza: obbligatoria a ogni passaggio chiaro-scuro. La sezione
     entrante porta in testa una fascia del colore della sezione precedente,
     cosi' la cucitura sparisce. */
  .tr-fade {
    position: relative;
  }

  .tr-fade::before {
    position: absolute;
    z-index: var(--z-decor);
    top: 0;
    right: 0;
    left: 0;
    height: clamp(80px, 10vw, 180px);
    background: linear-gradient(to bottom, var(--tr-from) 0%, transparent 100%);
    content: "";
    pointer-events: none;
  }

  .tr-fade[data-from="page"] { --tr-from: var(--page-bg); }
  .tr-fade[data-from="card"] { --tr-from: var(--card-surface); }
  .tr-fade[data-from="well"] { --tr-from: var(--well-surface); }
  .tr-fade[data-from="paper"] { --tr-from: var(--surface-l-050); }
  .tr-fade[data-from="ink"] { --tr-from: var(--surface-050); }

  /* Apertura di capitolo: il fondo precedente resta visibile come cornice */
  .tr-inset {
    margin-inline: var(--gutter);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--tr-inset-shadow);
  }

  /* Scavalco: una figura straddle il confine. Una sola volta per pagina. */
  .tr-overlap {
    position: relative;
    z-index: var(--z-content);
    margin-bottom: calc(var(--overlap) * -1);
  }

  /* ====================================================================== */
  /* 5. Hero                                                                */
  /* ====================================================================== */

  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(72px, 9vw, 120px);
  }

  /* Tutto cio' che non e' foto o scrim sta sopra lo scrim. Senza questa riga
     il velo di scena copre il piede della hero e le coordinate, che leggono
     smorti come se fossero disabilitati. */
  .hero > *:not(.ph-hero):not(.hero-scrim) {
    position: relative;
    z-index: var(--z-content);
  }

  .hero-grid {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, var(--hero-copy-fr, 1.05fr)) minmax(0, var(--hero-aside-fr, .95fr));
    gap: clamp(32px, 5vw, 80px);
  }

  .hero-grid[data-layout="single"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    justify-items: start;
    gap: var(--s-5);
    padding-inline-end: clamp(24px, 6vw, 96px);
    /* Pavimento di contrasto sotto il testo: e' questo che rende la garanzia
       di leggibilita' calcolabile qualunque foto venga caricata sopra. */
    background: var(--hero-floor);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-6);
    margin-top: var(--s-2);
  }

  .hero-credential {
    color: var(--accent-text);
    font-size: var(--fs-body-s);
    font-weight: 700;
  }

  /* Piede della hero: occupa lo spazio che altrimenti resterebbe vuoto sotto
     il blocco di testo, con disponibilita' e indicatore di scroll. */
  .hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: var(--s-5);
    border-top: 1px solid var(--hair-soft);
  }

  .hero-scroll {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-decoration: none;
  }

  .status-line {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .status-line strong {
    color: var(--ink-1);
  }

  .status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--accent-line);
    box-shadow: 0 0 0 5px var(--accent-quiet);
  }

  /* Coordinate tecniche: stanno DENTRO la griglia di pagina, non ancorate ai
     bordi del viewport, altrimenti non si allineano al contenuto sottostante. */
  .hero-coordinates {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    width: var(--page);
    margin: 0 auto clamp(24px, 3vw, 40px);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--hair-soft);
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  @media (max-width: 900px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero-copy {
      padding-inline-end: 0;
      background: var(--hero-floor-mobile);
    }

    .hero-coordinates span:nth-child(2) {
      display: none;
    }

    /* Nella hero editoriale il system panel diventa una mappa 2x2 fra 681 e
       900px: le celle reggono titolo e sottotitolo su una o due righe senza
       spezzare le parole. Sotto i 680 torna colonna singola (blocco successivo). */
    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list > li + li {
      border-top: 0;
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list > li:nth-child(even) {
      border-left: 1px solid var(--hair-soft);
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list > li:nth-child(n + 3) {
      border-top: 1px solid var(--hair-soft);
    }
  }

  @media (max-width: 680px) {
    .hero[data-variant="portrait-system"] {
      padding-block: var(--s-7) var(--s-8);
    }

    .hero[data-variant="portrait-system"] .hero-grid {
      gap: var(--s-5);
    }

    .hero[data-variant="portrait-system"] .hero-copy {
      gap: var(--s-4);
    }

    .hero[data-variant="portrait-system"] .hero-actions {
      display: grid;
      justify-items: start;
      width: 100%;
      gap: var(--s-4);
      margin-top: var(--s-1);
    }

    .hero[data-variant="portrait-system"] .hero-actions .btn {
      justify-content: center;
      width: 100%;
    }

    /* Sul telefono la mappa 2x2 non regge: celle da 170px spezzavano i
       sottotitoli su tre righe. Colonna singola, righe compatte. */
    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-head,
    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-foot {
      padding: var(--s-3) var(--s-4);
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list > li {
      grid-template-columns: var(--s-6) minmax(0, 1fr);
      gap: var(--s-3);
      padding: var(--s-3) var(--s-4);
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list > li + li {
      border-top: 1px solid var(--hair-soft);
    }

    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list > li:nth-child(even) {
      border-left: 0;
    }

    /* A 16px di titolo il sottotitolo scende di un gradino, altrimenti i due
       corpi si leggono uguali e la gerarchia della riga sparisce. */
    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-list small {
      font-size: var(--fs-micro);
    }

    /* Il piede: etichetta e frase sulla stessa linea di base, la frase va a
       capo dentro la propria colonna invece di rientrare sotto l'etichetta. */
    .hero[data-variant="portrait-system"] .panel[data-variant="hero"] .panel-foot {
      display: flex;
      align-items: baseline;
      gap: var(--s-3);
    }

    .hero[data-variant="portrait-system"] .hero-foot {
      display: grid;
      justify-items: start;
      gap: var(--s-4);
      margin-top: var(--s-5);
      padding-top: var(--s-4);
    }
  }

  /* ====================================================================== */
  /* 6. Striscia di prova                                                   */
  /* ====================================================================== */

  .proof-strip {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-5) var(--s-7);
    padding-block: var(--s-5);
    border-top: 1px solid var(--hair-soft);
    border-bottom: 1px solid var(--hair-soft);
  }

  .proof-strip > div {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
  }

  .proof-strip dt,
  .proof-strip strong {
    color: var(--accent-text);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-metric-m);
    font-weight: 780;
    font-variant-numeric: tabular-nums;
    /* Il numero e' display: senza questa riga eredita l'interlinea di lettura
       (1.6) e a 32px si porta dietro mezzo rigo di aria. */
    line-height: var(--lh-h3);
    letter-spacing: -.03em;
  }

  /* Figlio diretto: dentro <strong> vive lo <span> del contatore, che e' il
     numero, non l'etichetta. Con il selettore discendente prendeva anche
     quello. */
  .proof-strip dd,
  .proof-strip > div > span {
    margin: 0;
    color: var(--ink-3);
    font-size: var(--fs-caption);
  }

  .proof-strip > p {
    max-width: 42ch;
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  /* ====================================================================== */
  /* 7. Card                                                                */
  /* ====================================================================== */

  .grid {
    display: grid;
    gap: var(--grid-gap, clamp(16px, 2vw, 24px));
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  }

  .grid[data-cols="2"] { --cols: 2; }
  .grid[data-cols="3"] { --cols: 3; }
  .grid[data-cols="4"] { --cols: 4; }

  .card {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--card-pad);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    transition:
      border-color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-exit) var(--ease-exit),
      transform var(--dur-exit) var(--ease-exit);
  }

  /* Cornice editoriale: il filetto d'accento in testa e nessun raggio */
  .card[data-variant="frame"] {
    border-top: 2px solid var(--accent-line);
  }

  /* Piastra tecnica: crocini agli angoli, come una scheda da archivio */
  .card[data-variant="plate"]::before {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--accent-line);
    border-left: 1px solid var(--accent-line);
    content: "";
  }

  .card[data-variant="plate"]::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--accent-line);
    border-bottom: 1px solid var(--accent-line);
    content: "";
  }

  /* Silenziosa: nessun fondo, solo un filetto. Per gli impaginati minimali. */
  .card[data-variant="quiet"] {
    padding-inline: 0;
    border: 0;
    border-top: 1px solid var(--hair);
    border-radius: 0;
    background: transparent;
  }

  .card-index {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .card-title {
    color: var(--ink-1);
  }

  .card-body {
    color: var(--ink-3);
    font-size: var(--fs-body-s);
    line-height: 1.6;
  }

  .card-note {
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--hair-soft);
    color: var(--ink-4);
    font-size: var(--fs-micro);
  }

  .card-list {
    display: grid;
    gap: var(--s-2);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .card-list li {
    display: grid;
    align-items: baseline;
    grid-template-columns: 14px 1fr;
    gap: var(--s-2);
  }

  .card-list li::before {
    width: 7px;
    height: 2px;
    margin-top: .62em;
    background: var(--accent-line);
    content: "";
  }

  .card[data-emphasis="core"] {
    background: var(--card-surface-2);
    box-shadow: var(--card-elev);
  }

  .card-badge {
    align-self: start;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    color: var(--accent-on);
    background: var(--accent);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  @media (hover: hover) and (pointer: fine) {
    .card:hover {
      border-color: var(--hair-strong);
      background: var(--card-surface-2);
      box-shadow: var(--card-elev);
      transform: translateY(var(--lift-card, -3px));
      transition-duration: var(--dur-2), var(--dur-2), var(--dur-3), var(--dur-3);
      transition-timing-function: var(--ease-out);
    }

    .card[data-variant="quiet"]:hover {
      border-top-color: var(--accent-line);
      background: transparent;
      box-shadow: none;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card:hover {
      transform: none;
    }
  }

  @media (max-width: 980px) {
    .grid[data-cols="3"],
    .grid[data-cols="4"] {
      --cols: 2;
    }
  }

  /* L'attributo data-cols pesa (0,2,0): un `.grid` nudo dentro una media query
     non lo batterebbe mai, e le griglie a 2 colonne resterebbero a 2 anche a
     390px. Il selettore va quindi riportato allo stesso peso. */
  @media (max-width: 680px) {
    .grid,
    .grid[data-cols] {
      --cols: 1;
    }
  }

  /* ====================================================================== */
  /* 8. Liste numerate: metodo, timeline, percorso                          */
  /* ====================================================================== */

  .steps {
    display: grid;
    gap: 0;
  }

  .steps > li {
    display: grid;
    align-items: start;
    grid-template-columns: var(--steps-col, 64px) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 32px);
    padding-block: clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--hair-soft);
    transition: transform var(--dur-exit) var(--ease-exit);
  }

  .steps > li:last-child {
    border-bottom: 1px solid var(--hair-soft);
  }

  .step-index {
    color: var(--accent-text);
    font: 800 var(--fs-label) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: .13em;
  }

  .step-meta {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .step-body {
    display: grid;
    gap: var(--s-3);
  }

  .step-body p {
    max-width: 54ch;
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .step-out {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-4);
    font-size: var(--fs-micro);
    font-weight: 600;
  }

  .step-out::before {
    width: 14px;
    height: 1px;
    background: var(--accent-line);
    content: "";
  }

  @media (hover: hover) and (pointer: fine) {
    .steps > li:hover {
      transform: translateX(var(--shift-row, 4px));
      transition-duration: var(--dur-3);
      transition-timing-function: var(--ease-out);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .steps > li:hover {
      transform: none;
    }
  }

  /* Colonna sticky accanto a una lista lunga */
  .sticky-col {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    display: grid;
    gap: var(--s-4);
    align-self: start;
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, var(--split-a, .82fr)) minmax(0, var(--split-b, 1.18fr));
    gap: clamp(28px, 5vw, 80px);
  }

  @media (max-width: 900px) {
    .split {
      grid-template-columns: minmax(0, 1fr);
    }

    .sticky-col {
      position: static;
    }
  }

  /* ====================================================================== */
  /* 9. Pannello (console, system card)                                     */
  /* ====================================================================== */

  .panel {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-elev);
  }

  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--hair-soft);
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .panel-foot {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--hair-soft);
    background: var(--well-surface);
  }

  .panel-foot p {
    color: var(--ink-3);
    font-size: var(--fs-micro);
  }

  .panel-list > li {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    transition: background-color var(--dur-2) var(--ease-out);
  }

  .panel-list > li + li {
    border-top: 1px solid var(--hair-soft);
  }

  .panel-list > li > span:first-child {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
  }

  .panel-list strong {
    display: block;
    color: var(--ink-1);
    font-size: var(--fs-body-s);
    font-weight: 700;
  }

  .panel-list small {
    color: var(--ink-4);
    font-size: var(--fs-micro);
  }

  .panel-list i {
    width: 7px;
    height: 7px;
    border: 1px solid var(--hair-strong);
    border-radius: 50%;
  }

  .panel-list > li[data-active] i {
    border-color: transparent;
    background: var(--accent-line);
  }

  @media (hover: hover) and (pointer: fine) {
    .panel-list > li:hover {
      background: var(--card-surface-2);
    }
  }

  /* Variante hero (definitiva): un indice editoriale, non una tabella.
     Il numerale in Fraunces e' il protagonista della riga e porta da solo lo
     stato della leva: acceso in ambra se attiva, grigio se no. Nessun
     pallino, nessun secondo segnale. Il badge "AI layer" da pillola piena
     diventa etichetta con filetto: l'AI arriva dopo, non deve gridare. */
  .panel[data-variant="hero"] .panel-head {
    padding-block: var(--s-3);
  }

  .panel[data-variant="hero"] .panel-list > li {
    align-items: baseline;
    grid-template-columns: var(--s-7) minmax(0, 1fr);
    padding: var(--s-4) var(--s-5);
  }

  .panel[data-variant="hero"] .panel-list > li > span:first-child {
    color: var(--ink-4);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h3);
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    font-variation-settings: "SOFT" var(--fv-soft, 0), "WONK" 0;
    line-height: 1;
    letter-spacing: -.02em;
  }

  .panel[data-variant="hero"] .panel-list > li[data-active] > span:first-child {
    color: var(--accent-text);
  }

  .panel[data-variant="hero"] .panel-list strong {
    font-size: var(--fs-body);
    line-height: var(--lh-h4);
    letter-spacing: -.01em;
  }

  .panel[data-variant="hero"] .panel-list small {
    display: block;
    margin-top: var(--s-1);
    color: var(--ink-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-h4);
  }

  .panel[data-variant="hero"] .card-badge {
    flex: none;
    align-self: center;
    white-space: nowrap;
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--hair-accent);
    border-radius: var(--radius-xs);
    color: var(--accent-text);
    background: transparent;
  }

  /* Segnale: barre che leggono come un piccolo grafico di stato */
  .panel-signal {
    display: flex;
    gap: 5px;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--hair-soft);
  }

  .panel-signal span {
    height: 8px;
    flex: 1;
    background: var(--hair-strong);
  }

  .panel-signal span:nth-child(3n) {
    background: var(--accent-line);
  }

  /* ====================================================================== */
  /* 10. Mappa a nodi                                                       */
  /* ====================================================================== */

  /* Griglia esplicita: 4 colonne per 3 righe, con tutti gli elementi
     posizionati a mano. Nessuna cella resta vuota e bordata. */
  .node-map {
    display: grid;
    grid-template-columns: 1.15fr .85fr .85fr 1.15fr;
    grid-template-rows: repeat(3, minmax(96px, auto));
    gap: 1px;
    padding: 1px;
    background: var(--hair-soft);
  }

  .node {
    display: grid;
    align-content: center;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    min-width: 0;
    padding: var(--s-5);
    background: var(--card-surface);
  }

  .node-code {
    color: var(--accent-text);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  /* Le colonne laterali della mappa sono strette: a --fs-h4 una parola come
     Monetization sfonda la cella. Qui il nome del nodo e' un'etichetta, non un
     titolo, quindi sta sulla scala dei numeri. */
  /* Titoli dei nodi: sono display, quindi stanno sulla scala display. Prima
     leggevano --fs-metric-s, un token da metrica bloccato a 18px: Fraunces
     sotto i 20 e senza risposta al blocco mobile. */
  .node strong {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    font-weight: 700;
    letter-spacing: -.015em;
    overflow-wrap: break-word;
  }

  .node small {
    color: var(--ink-4);
    font-size: var(--fs-micro);
  }

  .node[data-cell="acquisition"] { grid-area: 1 / 1 / 2 / 2; }
  .node[data-cell="core"] { grid-area: 1 / 2 / 3 / 4; place-content: center; text-align: center; }
  .node[data-cell="retention"] { grid-area: 1 / 4 / 2 / 5; }
  .node[data-cell="monetization"] { grid-area: 2 / 4 / 3 / 5; }
  .node[data-cell="caption"] { grid-area: 2 / 1 / 3 / 2; }
  .node[data-cell="ai"] { grid-area: 3 / 1 / 4 / 5; grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--s-5); }

  .node[data-cell="core"] {
    background: var(--panel-surface);
  }

  .node[data-cell="core"] strong {
    font-size: var(--fs-h3);
    letter-spacing: -.02em;
  }

  .node[data-cell="caption"] {
    color: var(--ink-4);
    font-size: var(--fs-micro);
  }

  .node[data-cell="ai"] {
    background: var(--well-surface);
  }

  @media (max-width: 860px) {
    .node-map {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
    }

    .node[data-cell] {
      grid-area: auto;
    }

    .node[data-cell="core"],
    .node[data-cell="ai"] {
      grid-column: span 2;
    }
  }

  /* ====================================================================== */
  /* 11. Matrice di qualificazione                                          */
  /* ====================================================================== */

  .matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--hair-soft);
  }

  .matrix-cell {
    display: grid;
    align-content: start;
    gap: var(--s-3);
    padding: var(--card-pad);
    background: var(--card-surface);
    transition: background-color var(--dur-2) var(--ease-out);
  }

  .matrix-cell > span {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .matrix-cell p {
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .matrix-verdict {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
    color: var(--ink-2);
    font-size: var(--fs-body-s);
    font-weight: 700;
  }

  .matrix-cell[data-fit="high"] {
    background: var(--panel-surface);
  }

  .matrix-cell[data-fit="high"] .matrix-verdict {
    color: var(--accent-text);
  }

  @media (hover: hover) and (pointer: fine) {
    .matrix-cell:hover {
      background: var(--card-surface-2);
    }
  }

  @media (max-width: 680px) {
    .matrix {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* La lista sopra qualifica il rapporto; questa seconda parte sceglie il
     formato. Una pausa esplicita e card autonome evitano l'effetto tabella. */
  .matrix-intro {
    display: grid;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: clamp(24px, 4vw, 64px);
    margin-top: clamp(56px, 7vw, 88px);
    padding-top: clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--hair-soft);
  }

  .matrix-intro .kicker {
    margin-bottom: var(--s-3);
  }

  .matrix[data-variant="cards"] {
    gap: clamp(12px, 1.8vw, 22px);
    margin-top: clamp(28px, 4vw, 48px);
    padding: 0;
    background: transparent;
  }

  .matrix[data-variant="cards"] .matrix-cell {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: clamp(220px, 20vw, 260px);
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    box-shadow: var(--card-elev);
  }

  .matrix[data-variant="cards"] .matrix-cell[data-fit="high"] {
    border-color: var(--accent-line);
  }

  .matrix[data-variant="cards"] .matrix-cell > span {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .matrix[data-variant="cards"] .matrix-cell > span b {
    color: var(--accent-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
  }

  .matrix[data-variant="cards"] .matrix-verdict {
    align-self: end;
    padding-top: var(--s-4);
    border-top: 1px solid var(--hair-soft);
  }

  @media (max-width: 780px) {
    .matrix-intro {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 680px) {
    .matrix-intro {
      margin-top: var(--s-8);
      padding-top: var(--s-6);
    }

    .matrix[data-variant="cards"] .matrix-cell {
      min-height: 0;
      padding: var(--s-5);
    }
  }

  /* ====================================================================== */
  /* 12. Liste di adeguatezza (si / no)                                     */
  /* ====================================================================== */

  .fit-card {
    display: grid;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--card-pad);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    transition:
      border-color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

  .fit-card[data-fit="yes"] {
    --focus-ring: var(--accent-on);
    border-color: var(--accent-line);
  }

  .fit-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .fit-glyph {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    font-size: var(--fs-caption);
    font-weight: 800;
  }

  .fit-card[data-fit="yes"] .fit-glyph {
    color: var(--accent-on);
    background: var(--accent);
  }

  /* La croce era a 1,80:1 su questo fondo: illeggibile. Ora usa il minimo
     assoluto della rampa e non e' piu' l'unico portatore del significato. */
  .fit-card[data-fit="no"] .fit-glyph {
    color: var(--ink-4);
    border: 1px solid var(--hair-strong);
  }

  /* Sono blocchi di lettura, non schede cliccabili: niente lift, solo il
     gradino di superficie e il bordo. La ricetta resta quella del resto della
     pagina, senza promettere un click che non esiste. */
  @media (hover: hover) and (pointer: fine) {
    .fit-card:hover {
      border-color: var(--hair-strong);
      background: var(--card-surface-2);
    }

    .fit-card[data-fit="yes"]:hover {
      border-color: var(--accent-line);
    }
  }

  .fit-list {
    display: grid;
    gap: var(--s-3);
  }

  .fit-list li {
    display: grid;
    align-items: baseline;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: var(--s-3);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .fit-list li::before {
    width: 9px;
    height: 2px;
    margin-top: .62em;
    background: var(--accent-line);
    content: "";
  }

  .fit-card[data-fit="no"] .fit-list li::before {
    background: var(--hair-strong);
  }

  /* ====================================================================== */
  /* 13. Sezione stack di competenza                                        */
  /* ====================================================================== */

  /* Il titolo di ogni riga e' un risultato di business; gli strumenti stanno
     sotto, a dimensione caption, come nota a pie' di leva. Il nome del tool e'
     sempre testo visibile: la sezione e' completa anche con zero file logo. */
  .stack-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(280px, .9fr);
    gap: clamp(20px, 3vw, 48px);
    padding-block: clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--hair);
  }

  .stack-row:last-of-type {
    border-bottom: 1px solid var(--hair);
  }

  .stack-index {
    color: var(--accent-text);
    font: 800 var(--fs-label) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: .13em;
  }

  .stack-lever h3 {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h3);
    font-weight: 680;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  .stack-lever p {
    max-width: 46ch;
    margin-top: var(--s-3);
    color: var(--ink-3);
    font-size: var(--fs-body);
    line-height: 1.65;
  }

  .stack-tools {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--s-3) var(--s-5);
  }

  .stack-tool {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }

  .stack-tool-name {
    color: var(--ink-2);
    font-size: var(--fs-micro);
    font-weight: 500;
  }

  /* Il segno del tool e' 24px. Vuoto e' un'iniziale in una pastiglia, non un
     buco: quando i file logo arrivano, nulla si sposta. */
  .stack-tool-mark {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-xs);
    background: var(--panel-surface);
  }

  .stack-tool-mark[data-ph-empty]::before {
    color: var(--ink-4);
    font: 800 var(--tool-mark-size, 11px) / 1 var(--body);
    content: attr(data-initial);
  }

  .stack-tool-mark > img {
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
  }

  .stack-close {
    margin-top: clamp(40px, 5vw, 72px);
  }

  @media (max-width: 860px) {
    .stack-row {
      grid-template-columns: 40px minmax(0, 1fr);
    }

    .stack-tools {
      grid-column: 2;
    }
  }

  /* Una sola massa di strumenti. Nessuna orbita o separatore: il volume nasce
     dalla densita' dei marchi e da un campo di superficie continuo. */
  .stack-mass {
    position: relative;
    isolation: isolate;
    margin-top: clamp(36px, 5vw, 72px);
    padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 52px);
    overflow: hidden;
    border-radius: clamp(24px, 3vw, 42px);
    background:
      radial-gradient(circle at 12% 18%, var(--accent-quiet), transparent 30%),
      radial-gradient(circle at 88% 74%, var(--raised-surface), transparent 34%),
      var(--panel-surface);
  }

  .stack-mass-label {
    margin-bottom: clamp(32px, 4vw, 52px);
    color: var(--ink-4);
    font: 750 var(--fs-label) / 1.4 var(--body);
    letter-spacing: var(--track-label);
    text-align: center;
    text-transform: uppercase;
  }

  .stack-tools[data-layout="mass"] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: 108px;
    align-items: start;
    gap: clamp(12px, 1.8vw, 24px) clamp(8px, 1.4vw, 18px);
  }

  .stack-tools[data-layout="mass"] .stack-tool {
    position: relative;
    display: block;
    min-width: 0;
  }

  .stack-tools[data-layout="mass"] .stack-tool:nth-child(4n + 2) {
    top: 10px;
  }

  .stack-tools[data-layout="mass"] .stack-tool:nth-child(4n + 3) {
    top: -5px;
  }

  .stack-tools[data-layout="mass"] .stack-tool:nth-child(4n) {
    top: 6px;
  }

  .stack-tools[data-layout="mass"] .stack-tool[data-logo="wide"] {
    grid-column: span 2;
  }

  .stack-tool-orbit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    animation: stack-tool-float 7s var(--ease-in-out) calc(var(--i, 0) * -260ms) infinite alternate;
    will-change: transform;
  }

  .stack-tools[data-layout="mass"] .stack-tool:nth-child(3n + 2) .stack-tool-orbit {
    animation-duration: 8.2s;
  }

  .stack-tools[data-layout="mass"] .stack-tool:nth-child(3n) .stack-tool-orbit {
    animation-duration: 6.4s;
  }

  .html-has-js .stack-mass:not(.is-visible) .stack-tool {
    opacity: 0;
    transform: translateY(-18px) scale(.95);
  }

  .html-has-js .stack-mass.is-visible .stack-tool {
    animation: stack-tool-mass-in 640ms var(--ease-entrance) both;
    animation-delay: calc(var(--i, 0) * 34ms);
  }

  .stack-tools[data-layout="mass"] .stack-tool-mark {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border: 0;
    border-radius: 20px;
    background: var(--surface-l-100);
    box-shadow: var(--elev-2);
    transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }

  .stack-tools[data-layout="mass"] .stack-tool-mark > img {
    padding: 12px;
  }

  .stack-tools[data-layout="mass"] .stack-tool[data-logo="wide"] .stack-tool-mark {
    width: min(140px, 100%);
    background: var(--surface-000);
  }

  .stack-tools[data-layout="mass"] .stack-tool[data-logo="wide"] .stack-tool-mark > img {
    padding: 12px;
  }

  .stack-tools[data-layout="mass"] .stack-tool-name {
    max-width: 15ch;
    color: var(--ink-2);
    font-size: var(--fs-micro);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
  }

  .stack-tools[data-layout="mass"] .stack-tool:hover .stack-tool-mark {
    box-shadow: var(--elev-3);
    transform: scale(1.05);
  }

  .stack-process {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: clamp(28px, 5vw, 72px);
    margin-top: clamp(52px, 7vw, 96px);
    padding: clamp(28px, 4vw, 52px);
    border-radius: clamp(20px, 2vw, 30px);
    background: var(--panel-surface);
  }

  .stack-principle {
    align-self: center;
  }

  .stack-principle h3 {
    margin-top: var(--s-3);
  }

  .stack-principle > :last-child {
    margin-top: var(--s-4);
    line-height: 1.65;
  }

  .stack-process .lever-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-process .lever-flow > li {
    padding: var(--s-4);
    border-top: 0;
    border-radius: var(--card-radius);
    background: var(--raised-surface);
  }

  .stack-process .lever-flow-note {
    grid-column: 2;
    color: var(--ink-2);
    font: 650 var(--fs-body-s) / 1.5 var(--body);
  }

  @keyframes stack-tool-mass-in {
    from {
      opacity: 0;
      transform: translateY(-18px) scale(.95);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes stack-tool-float {
    from {
      transform: translate3d(0, -5px, 0) rotate(-1deg);
    }

    to {
      transform: translate3d(0, 6px, 0) rotate(1deg);
    }
  }

  @media (max-width: 1040px) {
    .stack-tools[data-layout="mass"] {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .stack-mass {
      padding-inline: var(--s-3);
    }

    .stack-tools[data-layout="mass"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: 100px;
    }

    .stack-tools[data-layout="mass"] .stack-tool-mark {
      width: 56px;
      height: 56px;
      flex-basis: 56px;
      border-radius: 17px;
    }

    .stack-tools[data-layout="mass"] .stack-tool[data-logo="wide"] .stack-tool-mark {
      width: min(124px, 100%);
    }

    .stack-process {
      grid-template-columns: minmax(0, 1fr);
    }

    .stack-process .lever-flow-note {
      grid-column: 1;
    }
  }

  @media (max-width: 430px) {
    .stack-tools[data-layout="mass"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 102px;
    }

    .stack-process .lever-flow {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .html-has-js .stack-mass:not(.is-visible) .stack-tool,
    .html-has-js .stack-mass.is-visible .stack-tool {
      opacity: 1;
      transform: none;
      animation: none;
    }

    .stack-tool-orbit {
      animation: none;
      will-change: auto;
    }
  }

  /* ====================================================================== */
  /* 14. Casi studio                                                        */
  /* ====================================================================== */

  .case-card {
    display: flex;
    flex-direction: column;
  }

  .case-metric {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    color: var(--accent-text);
  }

  .case-metric small {
    color: var(--ink-3);
    font-family: var(--body);
    font-size: var(--fs-body-s);
    font-weight: 600;
    letter-spacing: 0;
  }

  .case-lever {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--hair-soft);
    color: var(--ink-4);
    font-size: var(--fs-micro);
    font-weight: 600;
  }

  /* Registro: una riga per caso, quattro colonne */
  .ledger > li {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .9fr);
    gap: clamp(16px, 2.4vw, 40px);
    padding-block: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--hair-soft);
    transition: background-color var(--dur-2) var(--ease-out);
  }

  .ledger > li:last-child {
    border-bottom: 1px solid var(--hair-soft);
  }

  .ledger-field > span {
    display: block;
    margin-bottom: var(--s-2);
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .ledger-field p {
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .ledger-field strong {
    color: var(--ink-1);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.15;
  }

  @media (hover: hover) and (pointer: fine) {
    .ledger > li:hover {
      background: var(--card-surface);
    }
  }

  @media (max-width: 900px) {
    .ledger > li {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .ledger > li {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ====================================================================== */
  /* 15. Flusso verticale                                                   */
  /* ====================================================================== */

  .flow {
    display: grid;
    gap: var(--s-3);
  }

  .flow > div {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
  }

  .flow > div[data-active] {
    border-color: var(--accent-line);
    background: var(--panel-surface);
  }

  .flow > div > span {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-label);
  }

  .flow strong {
    color: var(--ink-1);
    font-size: var(--fs-body-s);
  }

  .flow small {
    color: var(--ink-4);
    font-size: var(--fs-micro);
  }

  .flow > i {
    justify-self: center;
    color: var(--accent-text);
    font-style: normal;
  }

  /* ====================================================================== */
  /* 16. Domande frequenti                                                  */
  /* ====================================================================== */

  .faq > details {
    border-top: 1px solid var(--hair-soft);
  }

  .faq > details:last-child {
    border-bottom: 1px solid var(--hair-soft);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-5);
    color: var(--ink-1);
    font-size: var(--fs-body-l);
    font-weight: 600;
    list-style: none;
    transition: color var(--dur-2) var(--ease-out);
  }

  .faq summary::after {
    color: var(--accent-text);
    font-size: var(--fs-h4);
    content: "+";
  }

  .faq details[open] summary::after {
    content: "\2212";
  }

  .faq details > p {
    max-width: 58ch;
    padding-bottom: var(--s-5);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  @media (hover: hover) and (pointer: fine) {
    .faq summary:hover {
      color: var(--accent-text);
    }
  }

  /* ====================================================================== */
  /* 17. Tabella di confronto                                               */
  /* ====================================================================== */

  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
  }

  .data-table th,
  .data-table td {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--hair-soft);
    text-align: left;
    vertical-align: top;
  }

  .data-table thead th {
    color: var(--ink-4);
    background: var(--panel-surface);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .data-table tbody th {
    color: var(--ink-1);
    font-size: var(--fs-body-s);
    font-weight: 700;
  }

  .data-table tbody td {
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .data-table tbody tr:last-child th,
  .data-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .data-table tbody th i {
    margin-right: var(--s-2);
    color: var(--accent-text);
    font-style: normal;
    font-variant-numeric: tabular-nums;
  }

  @media (hover: hover) and (pointer: fine) {
    .data-table tbody tr:hover th,
    .data-table tbody tr:hover td {
      background: var(--card-surface);
    }
  }

  /* Sotto i 620px la tabella si impila. Ogni cella porta la sua intestazione,
     altrimenti resterebbe orfana del significato. */
  @media (max-width: 620px) {
    .data-table thead {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
    }

    .data-table tbody tr {
      display: grid;
      gap: var(--s-2);
      padding-block: var(--s-4);
      border-bottom: 1px solid var(--hair);
    }

    .data-table tbody th,
    .data-table tbody td {
      padding: 2px var(--s-4);
      border: 0;
    }

    .data-table tbody td::before {
      display: block;
      margin-bottom: 2px;
      color: var(--ink-4);
      font: 700 var(--fs-label) / 1.2 var(--body);
      letter-spacing: var(--track-label);
      text-transform: uppercase;
      content: attr(data-label);
    }
  }

  /* ====================================================================== */
  /* 18. Carosello loghi collaborazioni                                     */
  /* ====================================================================== */

  .client-featured {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-block: clamp(28px, 4vw, 52px) clamp(32px, 5vw, 64px);
  }

  .client-feature-card {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    min-height: clamp(240px, 25vw, 340px);
    margin: 0;
    padding: clamp(18px, 2.2vw, 28px);
    overflow: hidden;
    border: 1px solid var(--card-line);
    border-top: 3px solid var(--accent-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--elev-1);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }

  .client-feature-card figcaption {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--s-3);
  }

  .client-feature-logo {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: clamp(124px, 14vw, 184px);
    margin-block: var(--s-4);
    padding: clamp(18px, 2vw, 28px);
    border: 1px solid var(--hair);
    background: var(--surface-l-100);
  }

  .client-feature-logo img {
    width: auto;
    max-width: 86%;
    height: auto;
    max-height: 118px;
    object-fit: contain;
    transition: transform var(--dur-3) var(--ease-out);
  }

  .client-feature-card figcaption strong {
    color: var(--ink-1);
    font: 650 var(--fs-h4) / 1.05 var(--display);
    text-align: right;
  }

  .client-archive-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid var(--hair);
  }

  .client-archive-head > :last-child {
    text-align: right;
  }

  .logo-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  [data-carousel-flow="continuous"] .logo-viewport {
    overscroll-behavior-inline: contain;
    scroll-snap-type: none;
  }

  .logo-viewport::-webkit-scrollbar {
    display: none;
  }

  .logo-track {
    --logo-gap: 12px;
    display: flex;
    gap: var(--logo-gap);
  }

  /* Dimensionamento senza numeri magici: il numero di tessere in vista e' una
     variabile, la larghezza si ricava. */
  .logo-item {
    --per-view: 6;
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--logo-gap)) / var(--per-view));
    scroll-snap-align: start;
  }

  /* Tre righe di griglia, nessun posizionamento assoluto: la sovrapposizione
     fra il numero di slot e l'etichetta di stato e' impossibile per
     costruzione, non evitata aggiustando delle coordinate. */
  /* Di default la tessera segue il contratto della skin: cosi' il markup dei 15
     <li> puo' restare byte-identico nelle quattro pagine (AC-26) e ogni concept
     la dipinge con i propri token. data-surface resta per l'eccezione: un muro
     di loghi montato sul tono opposto a quello della pagina. */
  .logo-card {
    --logo-card-bg: var(--card-surface);
    --logo-card-line: var(--card-line);
    --logo-card-meta: var(--ink-4);
    --logo-card-accent: var(--accent-line);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: var(--s-4);
    overflow: hidden;
    border: 1px solid var(--logo-card-line);
    border-radius: var(--card-radius);
    background: var(--logo-card-bg);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-exit) var(--ease-exit),
      transform var(--dur-exit) var(--ease-exit);
  }

  .logo-card-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    color: var(--logo-card-meta);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .logo-card-meta > :only-child {
    margin-left: auto;
    text-align: right;
  }

  .logo-card-body {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    color: var(--logo-card-meta);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-align: center;
  }

  /* Perche' l'immagine e' fuori flusso.
     La tessera ha aspect-ratio 4/3, quindi il corpo ha un'altezza reale
     (92px a 1440). Ma il corpo e' una traccia minmax(0, 1fr) con height:auto,
     e contro un'altezza auto le percentuali dei figli DECADONO: max-height:64%
     non si applicava e ogni logo tornava alla sua dimensione naturale. Un file
     quadrato da 180px diventava alto 178px dentro un box da 92 e la tessera lo
     tagliava (Evolution Travel, MayerMoover, Bubola & Naibo).
     Con inset su un corpo position:relative, il riquadro non e' piu' una
     percentuale che decade: e' il containing block, gia' risolto dal grid.
     object-fit:contain ci rientra dentro il logo INTERO, qualunque sia il suo
     rapporto, senza ingrandirlo. Per questo --logo-scale e --logo-zoom sono
     stati tolti dal markup: erano correttivi di un dimensionamento rotto e
     oggi non farebbero che ritagliare di nuovo il disegno. */
  .logo-card-body > img {
    position: absolute;
    inset: 0;
    /* width/height espliciti, non auto: su un elemento replaced gli inset da
       soli non dimensionano il box in modo prevedibile. Il respiro lo da' il
       padding (box-sizing: border-box), dentro cui object-fit incassa. */
    width: 100%;
    height: 100%;
    padding: 13% 10%;
    object-fit: contain;
    /* Grigio a riposo, colore in hover: e' il trattamento standard di un muro
       di loghi editoriale e risolve 15 palette aziendali che litigano fra loro. */
    filter: grayscale(1) opacity(.72);
    transition: filter var(--dur-2) var(--ease-out);
  }

  .logo-card-rule {
    width: 24px;
    height: 2px;
    background: var(--logo-card-accent);
    transition: width var(--dur-3) var(--ease-out);
  }

  [data-surface="light"] {
    --logo-card-bg: var(--surface-l-100);
    --logo-card-line: var(--hair-l-2);
    --logo-card-meta: var(--on-light-4);
    --logo-card-accent: var(--amber-deep);
  }

  [data-surface="dark"] {
    --logo-card-bg: var(--surface-100);
    --logo-card-line: var(--hair-d-2);
    --logo-card-meta: var(--on-dark-4);
    --logo-card-accent: var(--amber);
  }

  [data-surface="dark"] .logo-item[data-logo-mono] img {
    filter: brightness(0) invert(1) opacity(.72);
  }

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

  [data-surface="dark"] .logo-on-light,
  [data-surface="light"] .logo-on-dark {
    display: none;
  }

  .carousel-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--hair);
    border-radius: var(--btn-radius);
    color: var(--ink-2);
    background: transparent;
    font-size: var(--fs-micro);
    font-weight: 700;
  }

  .carousel-toggle:disabled {
    color: var(--ink-4);
    cursor: not-allowed;
  }

  .carousel-toggle-icon {
    width: 10px;
    height: 10px;
    border-left: 3px solid currentcolor;
    border-right: 3px solid currentcolor;
  }

  .carousel-toggle[aria-pressed="true"] .carousel-toggle-icon {
    border-right-width: 0;
    border-left-width: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    height: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .client-feature-card:hover {
      border-color: var(--accent-line);
      box-shadow: var(--elev-3);
      transform: translateY(var(--lift-logo, -5px));
    }

    .client-feature-card:hover .client-feature-logo img {
      transform: scale(1.04);
    }

    .logo-item:is(:hover, :focus-within) .logo-card {
      border-color: var(--logo-card-accent);
      box-shadow: var(--elev-2);
      transform: translateY(var(--lift-logo, -3px));
      transition-duration: var(--dur-2), var(--dur-3), var(--dur-3);
      transition-timing-function: var(--ease-out);
    }

    .logo-item:is(:hover, :focus-within) .logo-card-rule {
      width: 100%;
    }

    .logo-item:is(:hover, :focus-within) .logo-card-body > img {
      filter: grayscale(0) opacity(1);
    }

    .logo-item:is(:hover, :focus-within) .logo-card[data-surface="dark"][data-logo-contrast="invert"] img {
      filter: brightness(0) invert(1) opacity(1);
    }

    .carousel-toggle:hover:not(:disabled) {
      border-color: var(--accent-line);
      color: var(--ink-1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .client-feature-card:hover,
    .logo-item:is(:hover, :focus-within) .logo-card {
      transform: none;
    }
  }

  @media (max-width: 980px) {
    .logo-item {
      --per-view: 4;
    }
  }

  @media (max-width: 740px) {
    .client-featured {
      grid-template-columns: 1fr;
    }

    .client-feature-card {
      min-height: 248px;
    }

    .client-archive-head {
      align-items: start;
      flex-direction: column;
    }

    .client-archive-head > :last-child {
      text-align: left;
    }

    .logo-item {
      --per-view: 2.2; /* il .2 e' il peek: dice che la lista continua */
    }
  }

  /* ====================================================================== */
  /* 19. Calcolatore                                                        */
  /* ====================================================================== */

  .calculator-shell {
    --calc-bg: var(--card-surface);
    --calc-panel: var(--panel-surface);
    --calc-text: var(--ink-1);
    --calc-muted: var(--ink-4);
    --calc-line: var(--hair);
    --calc-input: var(--well-surface);
    --calc-accent: var(--accent);
    --calc-accent-text: var(--accent-text);
    --calc-accent-on: var(--accent-on);
    --calc-fill: var(--accent-fill);
    --calc-track: rgb(var(--white-rgb) / .10);
    color: var(--calc-text);
  }

  /* Tono chiaro: l'ambra piena su bianco e' a 2,03:1, quindi il testo e i
     glifi passano ad ambra profonda e la barra usa --amber-deep su traccia
     neutra. */
  .calculator-shell[data-tone="light"] {
    --calc-bg: var(--surface-l-100);
    --calc-panel: var(--surface-l-050);
    --calc-text: var(--on-light-1);
    --calc-muted: var(--on-light-4);
    --calc-line: var(--hair-l-2);
    --calc-input: var(--surface-l-100);
    --calc-accent: var(--amber);
    --calc-accent-text: var(--amber-text);
    --calc-accent-on: var(--ink);
    --calc-fill: var(--amber-deep);
    --calc-track: rgb(var(--ink-rgb) / .10);
  }

  .calc-card {
    overflow: hidden;
    border: 1px solid var(--calc-line);
    border-radius: var(--card-radius);
    background: var(--calc-bg);
    box-shadow: var(--card-elev-hover);
  }

  .calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  }

  .calc-controls,
  .calc-result {
    padding: clamp(24px, 4vw, 48px);
  }

  .calc-controls {
    border-right: 1px solid var(--calc-line);
  }

  .calc-result {
    position: relative;
    overflow: hidden;
    background: var(--calc-panel);
  }

  /* La lente sta nel piano decorativo, sotto ogni figlio del pannello, e non
     passa mai dietro la cifra. La garanzia non e' un valore azzeccato a
     occhio: il cerchio e' ancorato in modo che il suo punto piu' basso resti
     40px sotto il bordo del pannello, cioe' sopra la banda del numero. Cosi'
     regge anche con la cifra piu' lunga possibile (RAL massima, 12 mesi, fee
     minima), che con un ancoraggio fisso arrivava a incrociare l'arco.
     La dimensione scala sotto i 1100px insieme al pannello. */
  .calc-result::before {
    --lens-size: 240px;
    --lens-offset: -96px;
    --lens-dip: 40px;
    position: absolute;
    z-index: var(--z-decor);
    top: calc(var(--lens-dip) - var(--lens-size));
    right: var(--lens-offset);
    width: var(--lens-size);
    height: var(--lens-size);
    border: 1px solid var(--hair-accent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  @media (max-width: 1100px) {
    .calc-result::before {
      --lens-size: 160px;
      --lens-offset: -64px;
      --lens-dip: 28px;
    }
  }

  .calc-result > * {
    position: relative;
    z-index: var(--z-content);
  }

  .calc-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: var(--s-5);
    color: var(--calc-muted);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .calc-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--calc-fill);
    content: "";
    box-shadow: 0 0 0 5px var(--accent-quiet);
  }

  .calc-field + .calc-field {
    margin-top: var(--s-5);
  }

  .calc-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: 10px;
  }

  .calc-label-row label,
  .calc-label-row .calc-label {
    color: var(--calc-text);
    font-size: var(--fs-body-s);
    font-weight: 700;
  }

  .calc-label-row small {
    color: var(--calc-muted);
    font-size: var(--fs-label);
  }

  .calc-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 5px;
    border: 1px solid var(--calc-line);
    border-radius: var(--field-radius);
    background: var(--calc-panel);
  }

  .calc-segmented button {
    min-height: 52px;
    padding: 9px 8px;
    border: 0;
    border-radius: calc(var(--field-radius) - 2px);
    color: var(--calc-muted);
    background: transparent;
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1.15;
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

  .calc-segmented button span {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-label);
    font-weight: 500;
  }

  .calc-segmented button[aria-pressed="true"] {
    --focus-ring: var(--calc-accent-on);
    color: var(--calc-accent-on);
    background: var(--calc-accent);
  }

  .calc-segmented button[aria-pressed="true"]:focus-visible {
    box-shadow: 0 0 0 5px var(--focus-halo);
  }

  .calc-input-wrap {
    position: relative;
  }

  .calc-input-wrap::before {
    position: absolute;
    top: 50%;
    left: 16px;
    color: var(--calc-muted);
    font-weight: 700;
    content: "\20AC";
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* La casella di consenso e' un input come gli altri: senza il filtro sul
     tipo prenderebbe anche lei width 100% e min-height 50px, e diventerebbe un
     quadrato grigio grande quanto un campo di testo. */
  .calc-input-wrap input,
  .calc-detail-grid input,
  .calc-report input:is([type="email"], [type="text"]) {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--calc-line);
    border-radius: var(--field-radius);
    color: var(--calc-text);
    background: var(--calc-input);
    font-variant-numeric: tabular-nums;
  }

  .calc-input-wrap input {
    padding: 10px 16px 10px 38px;
    font-size: var(--fs-body);
    font-weight: 700;
  }

  .calculator-shell input[aria-invalid="true"] {
    border-color: var(--ember);
  }

  .calc-assumptions {
    margin-top: var(--s-5);
    border-top: 1px solid var(--calc-line);
  }

  .calc-assumptions summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-top: var(--s-4);
    color: var(--calc-muted);
    font-size: var(--fs-caption);
    font-weight: 700;
    list-style: none;
  }

  .calc-assumptions summary::after {
    color: var(--calc-accent-text);
    font-size: var(--fs-h4);
    content: "+";
  }

  .calc-assumptions[open] summary::after {
    content: "\2212";
  }

  .calc-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: var(--s-4);
  }

  .calc-detail-grid label {
    color: var(--calc-muted);
    font-size: var(--fs-label);
    font-weight: 700;
  }

  .calc-detail-grid input {
    min-height: 44px;
    margin-top: 6px;
    padding: 8px 10px;
    font-size: var(--fs-body-s);
  }

  /* Il box del valore si stringe sulla cifra invece di occupare tutta la
     larghezza del pannello: e' quello che tiene l'arco della lente fuori dal
     bounding box del numero senza doverne ridurre il corpo. */
  .calc-result-label,
  .calc-result-value {
    width: fit-content;
    max-width: 100%;
  }

  .calc-result-label {
    margin-bottom: var(--s-2);
    color: var(--calc-muted);
    font: 800 var(--fs-label) / 1.2 var(--body);
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .calc-result-value {
    color: var(--calc-accent-text);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-metric-xl);
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.050em;
    line-height: .92;
  }

  /* In questo scenario il numero non e' una buona notizia: l'ambra non deve
     celebrarlo, quindi la cifra torna neutra e l'accento passa alla barra
     dell'alternativa. */
  .calculator-shell[data-state="premium"] .calc-result-value {
    color: var(--calc-text);
  }

  .calculator-shell[data-state="premium"] [data-hire-bar] {
    background: var(--calc-muted);
  }

  .calculator-shell[data-state="premium"] [data-fractional-bar] {
    background: var(--calc-fill);
  }

  .calc-result-copy {
    max-width: 34ch;
    margin: var(--s-3) 0 var(--s-6);
    color: var(--calc-muted);
    font-size: var(--fs-body-s);
  }

  .calc-bars {
    display: grid;
    gap: 15px;
    margin-block: var(--s-6);
  }

  .calc-bar-head {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: 7px;
    color: var(--calc-muted);
    font-size: var(--fs-micro);
  }

  .calc-bar-head strong {
    color: var(--calc-text);
    font-variant-numeric: tabular-nums;
  }

  .calc-bar-track {
    height: 9px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--calc-track);
  }

  .calc-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--calc-fill);
    transition: width var(--dur-5) var(--ease-out);
  }

  .calc-bar-fill[data-fractional-bar] {
    background: var(--calc-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .calc-bar-fill {
      transition: none;
    }
  }

  .calc-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    margin-top: var(--s-6);
    border: 1px solid var(--calc-line);
    border-radius: var(--field-radius);
    background: var(--calc-line);
  }

  .calc-metric {
    min-width: 0;
    padding: 15px;
    background: var(--calc-bg);
  }

  .calc-metric span {
    display: block;
    overflow: hidden;
    color: var(--calc-muted);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .calc-metric strong {
    display: block;
    margin-top: 4px;
    color: var(--calc-text);
    font-size: var(--fs-body-s);
    font-variant-numeric: tabular-nums;
  }

  .calc-report {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--calc-line);
  }

  .calc-report h3 {
    margin-bottom: 5px;
    color: var(--calc-text);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.15;
  }

  .calc-report > p {
    margin-bottom: var(--s-3);
    color: var(--calc-muted);
    font-size: var(--fs-caption);
  }

  .calc-report-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
  }

  .calc-report input:is([type="email"], [type="text"]) {
    padding: 10px 12px;
    font-size: var(--fs-body-s);
  }

  .calc-report button {
    --focus-ring: var(--calc-accent-on);
    min-height: 50px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--field-radius);
    color: var(--calc-accent-on);
    background: var(--calc-accent);
    font-size: var(--fs-caption);
    font-weight: 800;
  }

  .calc-report button:focus-visible {
    box-shadow: 0 0 0 5px var(--focus-halo);
  }

  .calc-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    color: var(--calc-muted);
    font-size: var(--fs-micro);
    line-height: 1.4;
  }

  .calc-consent input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 2px;
    accent-color: var(--calc-accent);
  }

  .calc-status {
    min-height: 1.3em;
    margin-top: 9px;
    color: var(--calc-accent-text);
    font-size: var(--fs-micro);
    font-weight: 700;
  }

  .calc-disclaimer {
    margin-top: var(--s-4);
    color: var(--calc-muted);
    font-size: var(--fs-micro);
    line-height: 1.45;
  }

  @media (max-width: 880px) {
    .calc-grid {
      grid-template-columns: 1fr;
    }

    .calc-controls {
      border-right: 0;
      border-bottom: 1px solid var(--calc-line);
    }

    .calc-report-row {
      grid-template-columns: 1fr 1fr;
    }

    .calc-report button {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 620px) {
    .calc-controls,
    .calc-result {
      padding: var(--s-5) 18px;
    }

    .calc-segmented button {
      min-height: 58px;
      padding-inline: 4px;
      font-size: var(--fs-micro);
    }

    .calc-detail-grid,
    .calc-report-row,
    .calc-metrics {
      grid-template-columns: 1fr;
    }

    .calc-metric span {
      white-space: normal;
    }
  }

  /* ====================================================================== */
  /* 20. Chiusura, piede, dock                                              */
  /* ====================================================================== */

  .final-cta {
    display: grid;
    justify-items: start;
    gap: var(--s-5);
  }

  .site-foot {
    padding-block: var(--s-8) calc(var(--s-8) + var(--dock-safe));
    border-top: 1px solid var(--hair);
  }

  .foot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-6);
  }

  .foot-col {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  .foot-col > span {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .foot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--hair-soft);
    color: var(--ink-4);
    font-size: var(--fs-micro);
  }

  /* La dock e' fissa: ogni pagina le riserva --dock-safe in fondo, e lei
     rispetta la safe area dei telefoni con notch. */
  .concept-dock {
    position: fixed;
    z-index: var(--z-dock);
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--hair-d-3);
    border-radius: var(--radius-pill);
    color: var(--on-dark-1);
    background: rgb(var(--ink-rgb) / .88);
    box-shadow: var(--elev-4);
    backdrop-filter: blur(14px);
  }

  .concept-dock > span {
    padding-inline: 8px;
    color: var(--on-dark-3);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .concept-dock a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    color: var(--on-dark-2);
    font-size: var(--fs-micro);
    font-weight: 800;
    text-decoration: none;
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

  .concept-dock a[aria-current="page"] {
    --focus-ring: var(--ink);
    color: var(--ink);
    background: var(--amber);
  }

  @media (hover: hover) and (pointer: fine) {
    .concept-dock a:hover {
      color: var(--ink);
      background: var(--amber);
    }
  }

  @media (max-width: 620px) {
    .concept-dock > span {
      display: none;
    }
  }

  /* ====================================================================== */
  /* 21. Galleria dei concept (pagina indice)                               */
  /* ====================================================================== */

  .concept-list {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .concept-list[data-cols="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .concept-card {
    display: grid;
    position: relative;
    align-content: start;
    gap: var(--s-4);
    padding: var(--card-pad);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-exit) var(--ease-exit),
      transform var(--dur-exit) var(--ease-exit);
  }

  .concept-hit {
    position: absolute;
    z-index: var(--z-content);
    inset: 0;
    border-radius: inherit;
  }

  .concept-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-3);
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .concept-meta b {
    color: var(--accent-text);
  }

  /* Anteprima: una miniatura di pagina, non uno screenshot finto */
  .concept-preview {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--s-3);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    isolation: isolate;
    padding: var(--s-4);
    border: 1px solid var(--hair-soft);
    border-radius: var(--radius-sm);
    background: var(--preview-bg, var(--well-surface));
    color: var(--on-dark-1);
  }

  .concept-preview::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--preview-veil, linear-gradient(180deg, rgb(var(--black-rgb) / .32), rgb(var(--black-rgb) / .90)));
    content: "";
  }

  .concept-preview > img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--preview-filter, grayscale(.42) contrast(1.08));
    transition: filter var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
  }

  .concept-preview span {
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    opacity: .7;
  }

  .concept-preview strong {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h4);
    font-weight: 740;
    line-height: 1.05;
    letter-spacing: -.02em;
  }

  .concept-preview i {
    display: block;
    height: 4px;
    background: var(--preview-accent, var(--accent-line));
  }

  .concept-preview[data-preview="editorial"] { --preview-bg: var(--surface-l-050); --preview-accent: var(--amber-deep); --preview-veil: linear-gradient(180deg, rgb(var(--black-rgb) / .12), rgb(var(--black-rgb) / .88)); --preview-filter: grayscale(.14) contrast(1.05); }
  .concept-preview[data-preview="product"] { --preview-bg: var(--surface-000); --preview-veil: linear-gradient(105deg, rgb(var(--black-rgb) / .92) 0 34%, rgb(var(--black-rgb) / .34) 100%); }
  .concept-preview[data-preview="console"] { --preview-bg: var(--surface-100); --preview-veil: linear-gradient(135deg, rgb(var(--black-rgb) / .84), rgb(var(--black-rgb) / .22)); --preview-filter: grayscale(.62) contrast(1.12) brightness(.72); }
  .concept-preview[data-preview="lab"] { --preview-bg: var(--surface-050); --preview-accent: var(--amber); --preview-veil: linear-gradient(180deg, rgb(var(--black-rgb) / .24), rgb(var(--black-rgb) / .88)); --preview-filter: grayscale(.30) contrast(1.06); }

  .concept-preview[data-preview="editorial"] > img { object-position: 50% 22%; }
  .concept-preview[data-preview="product"] > img { object-position: 50% 26%; }
  .concept-preview[data-preview="console"] > img { object-position: 43% 50%; }
  .concept-preview[data-preview="lab"] > img { object-position: 64% 42%; }

  .concept-open {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--accent-text);
    font-size: var(--fs-body-s);
    font-weight: 700;
  }

  @media (hover: hover) and (pointer: fine) {
    .concept-card:has(.concept-hit:hover),
    .concept-card:has(.concept-hit:focus-visible) {
      border-color: var(--accent-line);
      box-shadow: var(--card-elev-hover);
      transform: translateY(-3px);
      transition-duration: var(--dur-2), var(--dur-3), var(--dur-3);
      transition-timing-function: var(--ease-out);
    }

    .concept-card:has(.concept-hit:hover) .concept-preview > img,
    .concept-card:has(.concept-hit:focus-visible) .concept-preview > img {
      filter: var(--preview-filter, grayscale(.42) contrast(1.08)) saturate(1.12);
      transform: scale(1.04);
    }
  }

  @media (max-width: 980px) {
    .concept-list,
    .concept-list[data-cols="4"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 680px) {
    .concept-list,
    .concept-list[data-cols="4"] {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ====================================================================== */
  /* 22. Blocchi editoriali ricorrenti                                      */
  /* ====================================================================== */

  /* Inversione di tono. Il componente dichiara solo che qui il fondo e
     l'inchiostro cambiano: quali valori assumano lo decide la skin, che
     rimappa l'intera rampa dentro il blocco. */
  [data-tone="invert"],
  [data-tone="well"] {
    color: var(--ink-1);
    background: var(--tone-bg);
  }

  .manifesto {
    display: grid;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
  }

  .manifesto blockquote {
    max-width: 22ch;
  }

  /* La tesi apre davvero il capitolo: l'indice resta nella campata laterale,
     mentre frase e spiegazione costruiscono una sequenza verticale. */
  .tr-fade[data-transition="thesis"]::before {
    height: clamp(48px, 6vw, 88px);
  }

  .section[data-transition="thesis"] {
    padding-top: clamp(88px, 9vw, 124px);
  }

  .manifesto[data-variant="thesis"] {
    position: relative;
    align-items: start;
    grid-template-columns: minmax(120px, .26fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4.5vw, 72px);
    row-gap: clamp(40px, 5vw, 68px);
  }

  .manifesto[data-variant="thesis"] .lens {
    top: 44%;
    left: clamp(-112px, -7vw, -64px);
  }

  .manifesto-index {
    align-self: start;
    padding-top: var(--s-2);
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }

  .manifesto-statement {
    display: grid;
    gap: var(--s-4);
    max-width: 880px;
  }

  .manifesto[data-variant="thesis"] blockquote {
    max-width: 22ch;
  }

  .manifesto-support {
    grid-column: 2;
    justify-self: end;
    width: min(100%, 48ch);
    max-width: none;
    padding-top: var(--s-6);
    border-top: 1px solid var(--hair-soft);
  }

  @media (min-width: 901px) {
    .manifesto[data-variant="thesis"] blockquote {
      font-size: clamp(2.625rem, 3.25vw, 3.25rem);
      line-height: 1.12;
    }
  }

  @media (max-width: 900px) {
    .manifesto[data-variant="thesis"] {
      grid-template-columns: 88px minmax(0, 1fr);
      column-gap: clamp(24px, 4vw, 40px);
      row-gap: var(--s-7);
    }

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

  @media (max-width: 680px) {
    .section[data-transition="thesis"] {
      padding-top: var(--s-9);
    }

    .manifesto[data-variant="thesis"] {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-5);
    }

    .manifesto[data-variant="thesis"] .manifesto-index,
    .manifesto[data-variant="thesis"] .manifesto-support {
      grid-column: auto;
    }

    .manifesto[data-variant="thesis"] .manifesto-index {
      padding-top: 0;
    }

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

    .manifesto[data-variant="thesis"] .lens {
      top: 42%;
      left: calc(var(--lens-d) / -2);
    }
  }

  .note-box {
    display: grid;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--card-pad);
    border-left: 2px solid var(--accent-line);
    background: var(--card-surface);
    color: var(--ink-2);
    font-size: var(--fs-body-s);
  }

  /* Il box sta in contenitori larghi e il testo non aveva misura: a 1440
     arrivava a 146 caratteri per riga, il doppio della banda leggibile. */
  .note-box > p {
    max-width: 52ch;
    margin: 0;
    line-height: var(--lh-body);
  }

  .note-box > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--accent-on);
    background: var(--accent);
    font-weight: 800;
  }

  .inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
  }

  @media (max-width: 680px) {
    .manifesto {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ====================================================================== */
  /* 23. Timeline del percorso professionale                                 */
  /* ====================================================================== */

  .journey-shell {
    display: grid;
    gap: clamp(32px, 4vw, 56px);
    padding: clamp(28px, 4vw, 56px);
    overflow: hidden;
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    color: var(--ink-1);
    background: var(--tone-bg);
    box-shadow: var(--card-elev-hover);
  }

  .journey-head {
    display: grid;
    align-items: end;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: clamp(24px, 5vw, 80px);
  }

  .journey-head > div {
    display: grid;
    gap: var(--s-4);
  }

  .journey-visual {
    display: grid;
  }

  .journey-ruler,
  .journey-lane {
    display: grid;
    grid-template-columns: minmax(152px, 1.35fr) repeat(9, minmax(54px, 1fr));
    gap: var(--s-2);
  }

  .journey-ruler {
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--hair-strong);
  }

  .journey-ruler span {
    color: var(--ink-4);
    font: 700 var(--fs-micro) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
  }

  .journey-ruler span:first-child {
    text-align: left;
  }

  .journey-lanes {
    display: grid;
    gap: var(--s-3);
    padding-block: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--hair-strong);
  }

  .journey-lane {
    align-items: stretch;
    min-height: 82px;
  }

  .journey-lane-label {
    display: grid;
    align-content: center;
    gap: var(--s-1);
    grid-column: 1;
  }

  .journey-lane-label span,
  .journey-bar span,
  .journey-cert-head span,
  .journey-cert > span {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .journey-lane-label strong {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.15;
  }

  .journey-bar {
    display: grid;
    position: relative;
    align-content: center;
    gap: var(--s-2);
    grid-column: var(--journey-start) / span var(--journey-span);
    min-width: 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-sm);
    background: var(--card-surface);
    box-shadow: var(--card-elev);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }

  .journey-bar strong {
    overflow-wrap: anywhere;
    color: var(--ink-1);
    font-size: var(--fs-body-s);
    line-height: 1.35;
  }

  .journey-bar[data-current] {
    border-color: var(--accent-line);
    background: var(--card-surface-2);
  }

  .journey-bar[data-current]::after {
    position: absolute;
    top: 50%;
    right: -5px;
    width: 9px;
    height: 9px;
    translate: 0 -50%;
    border: 2px solid var(--tone-bg);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--glow-amber-sm);
    content: "";
  }

  .journey-certifications {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(152px, 1.35fr) minmax(0, 9fr);
    gap: var(--s-2);
    padding-top: var(--s-5);
  }

  .journey-cert-head {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    padding-top: var(--s-3);
  }

  .journey-cert-head strong {
    max-width: 12ch;
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.15;
  }

  .journey-cert-list {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(9, minmax(54px, 1fr));
    gap: var(--s-2);
  }

  .journey-cert {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    grid-column: var(--cert-start) / span var(--cert-span);
    min-width: 0;
    padding: var(--s-4);
    border-top: 2px solid var(--accent-line);
    background: var(--card-surface);
    box-shadow: var(--card-elev);
  }

  .journey-cert strong {
    overflow-wrap: anywhere;
    color: var(--ink-1);
    font-family: var(--display);
    font-size: var(--fs-body-l);
    line-height: 1.25;
  }

  .journey-cert p {
    color: var(--ink-3);
    font-size: var(--fs-caption);
    line-height: 1.5;
  }

  @media (hover: hover) and (pointer: fine) {
    .journey-bar:hover,
    .journey-cert:hover {
      border-color: var(--accent-line);
      box-shadow: var(--card-elev-hover);
      transform: translateY(-2px);
    }
  }

  @media (max-width: 780px) {
    .journey-shell {
      padding: var(--s-5);
    }

    .journey-head {
      grid-template-columns: minmax(0, 1fr);
    }

    .journey-ruler {
      display: none;
    }

    .journey-lanes {
      gap: var(--s-5);
      padding-top: 0;
    }

    .journey-lane {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }

    .journey-lane-label,
    .journey-bar {
      grid-column: 1;
    }

    .journey-lane-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-4);
    }

    .journey-bar {
      min-height: 84px;
    }

    .journey-certifications {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-4);
    }

    .journey-cert-head strong {
      max-width: none;
    }

    .journey-cert-list {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-3);
    }

    .journey-cert {
      grid-column: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .journey-bar,
    .journey-cert {
      transition: none;
    }

    .journey-bar:hover,
    .journey-cert:hover {
      transform: none;
    }
  }

  /* ====================================================================== */
  /* 24. Growth Evidence Lab: report consultabile, bento e casi profondi     */
  /* ====================================================================== */

  /* Luce da puntatore ispirata allo Spotlight Card di 21st.dev. E' un velo
     percettivo, non un livello informativo: tastiera e reduced motion non
     perdono nulla quando l'effetto non e' presente. */
  [data-spotlight] {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  [data-spotlight]::before {
    position: absolute;
    z-index: var(--z-decor);
    inset: 0;
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--accent-quiet), transparent 70%);
    content: "";
    opacity: var(--spot-o, 0);
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
  }

  [data-spotlight] > * {
    position: relative;
    z-index: var(--z-content);
  }

  .audit-shell {
    display: grid;
    min-width: 0;
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    color: var(--ink-1);
    background: var(--card-surface);
    box-shadow: var(--audit-elev, var(--card-elev-hover));
  }

  .audit-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 54px;
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--hair-soft);
  }

  .audit-window-brand,
  .audit-window-state {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ink-3);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .audit-window-brand::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px var(--accent-quiet);
    content: "";
  }

  .audit-window-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
  }

  .audit-intro {
    display: grid;
    gap: var(--s-3);
    padding: clamp(24px, 3vw, 40px) var(--s-5) var(--s-5);
  }

  .audit-intro > span {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .audit-intro strong {
    max-width: 22ch;
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-weight: 720;
    line-height: 1.12;
    letter-spacing: -.02em;
  }

  .audit-tablist {
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-inline: var(--s-5);
    border-bottom: 1px solid var(--hair-soft);
  }

  .audit-tablist button {
    min-width: 0;
    padding: var(--s-3) var(--s-2) var(--s-4);
    border: 0;
    color: var(--ink-4);
    background: transparent;
    font-size: var(--fs-micro);
    font-weight: 700;
    transition: color var(--dur-2) var(--ease-out);
  }

  .audit-tablist button[aria-selected="true"] {
    color: var(--ink-1);
  }

  .audit-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: var(--tab-w, 25%);
    height: 2px;
    background: var(--accent);
    transform: translateX(var(--tab-x, 0));
    transition:
      width var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
    pointer-events: none;
  }

  .audit-panel {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-5);
  }

  .audit-panel[hidden] {
    display: none;
  }

  .audit-panel-top {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-5);
  }

  .audit-panel-copy {
    display: grid;
    gap: var(--s-2);
  }

  .audit-panel-copy span,
  .audit-kpi span,
  .audit-foot {
    color: var(--ink-4);
    font-size: var(--fs-caption);
  }

  .audit-panel-copy strong {
    max-width: 28ch;
    font-size: var(--fs-body-l);
    line-height: 1.35;
  }

  .audit-score {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 1;
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    color: var(--accent-text);
    background: var(--accent-quiet);
    font: 780 var(--fs-h3) / 1 var(--display);
  }

  .audit-chart {
    display: flex;
    align-items: end;
    gap: var(--s-2);
    min-height: 108px;
    padding: var(--s-4);
    border: 1px solid var(--hair-soft);
    background: var(--well-surface);
  }

  .audit-chart i {
    width: 100%;
    height: var(--bar, 30%);
    min-height: 6px;
    background: var(--hair-strong);
    transition: height var(--dur-4) var(--ease-out);
  }

  .audit-chart i[data-hot] {
    background: var(--accent);
  }

  .audit-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--hair-soft);
    border-bottom: 1px solid var(--hair-soft);
  }

  .audit-kpi {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-4);
    border-right: 1px solid var(--hair-soft);
  }

  .audit-kpi:last-child {
    border-right: 0;
  }

  .audit-kpi strong {
    font-family: var(--display);
    font-size: var(--fs-h4);
    font-variant-numeric: tabular-nums;
  }

  .audit-foot {
    padding: 0 var(--s-5) var(--s-5);
  }

  /* Prova fotografica: il ritratto presenta la persona, le tre immagini di
     contesto dimostrano formazione, corporate e percorso Growth senza
     trasformare una certificazione nella promessa principale della pagina. */
  .field-proof {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: var(--s-4);
  }

  .field-profile,
  .field-shot {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--well-surface);
    box-shadow: var(--card-elev);
  }

  .field-profile {
    min-height: 560px;
  }

  .field-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(230px, .78fr) minmax(300px, 1fr);
    gap: var(--s-4);
  }

  .field-shot[data-size="wide"] {
    grid-column: 1 / -1;
  }

  .field-profile img,
  .field-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88) contrast(1.02);
    transition:
      filter var(--dur-3) var(--ease-out),
      transform var(--dur-4) var(--ease-out);
  }

  .field-profile img {
    object-position: 50% 28%;
  }

  .field-shot:not([data-size="wide"]):first-of-type img {
    object-position: 50% 46%;
  }

  .field-caption {
    position: absolute;
    z-index: var(--z-content);
    right: var(--s-4);
    bottom: var(--s-4);
    left: var(--s-4);
    display: grid;
    gap: var(--s-1);
    padding: var(--s-4);
    border-left: 2px solid var(--amber);
    color: var(--on-dark-1);
    background: var(--veil-deep);
    box-shadow: var(--elev-d-2);
    backdrop-filter: blur(12px);
  }

  .field-caption span {
    color: var(--on-dark-3);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .field-caption strong {
    font-family: var(--display);
    font-size: var(--fs-h4);
    line-height: 1.2;
  }

  @media (hover: hover) and (pointer: fine) {
    .field-profile:hover img,
    .field-shot:hover img {
      filter: saturate(1) contrast(1.02);
      transform: scale(1.03);
    }
  }

  /* Racconto fotografico della sintesi: un panorama d'azione, una verticale
     di processo e una prova di percorso. La geometria editoriale e' diversa
     dal mosaico Evidence Lab, cosi' le due direzioni restano confrontabili. */
  .photo-journal {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(250px, 1fr) minmax(230px, .9fr);
    gap: var(--s-4);
    min-height: clamp(540px, 52vw, 720px);
  }

  .photo-journal-shot {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--well-surface);
    box-shadow: var(--card-elev);
  }

  .photo-journal-shot[data-shot="training"] {
    grid-column: 1 / 9;
    grid-row: 1;
  }

  .photo-journal-shot[data-shot="corporate"] {
    grid-column: 9 / 13;
    grid-row: 1 / 3;
  }

  .photo-journal-shot[data-shot="credential"] {
    grid-column: 1 / 9;
    grid-row: 2;
  }

  .photo-journal-shot > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88) contrast(1.02);
    transition: filter var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
  }

  .photo-journal-shot[data-shot="training"] > img { object-position: 43% 50%; }
  .photo-journal-shot[data-shot="corporate"] > img { object-position: 58% 44%; }
  .photo-journal-shot[data-shot="credential"] > img { object-position: 56% 39%; }

  @media (hover: hover) and (pointer: fine) {
    .photo-journal-shot:hover > img {
      filter: saturate(1) contrast(1.03);
      transform: scale(1.03);
    }
  }

  /* Bento operativo: la composizione di 21st diventa una mappa decisionale,
     non una galleria. Le campate sono intenzionalmente asimmetriche. */
  .evidence-bento {
    display: grid;
    grid-auto-rows: minmax(176px, auto);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .evidence-card {
    display: grid;
    align-content: space-between;
    gap: var(--s-6);
    min-width: 0;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-elev);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }

  .evidence-card[data-size="anchor"] {
    grid-column: span 7;
    grid-row: span 2;
  }

  .evidence-card[data-size="side"] {
    grid-column: span 5;
  }

  .evidence-card[data-size="third"] {
    grid-column: span 4;
  }

  .evidence-card[data-tone="invert"] {
    color: var(--ink-1);
  }

  .evidence-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .evidence-index {
    color: var(--accent-text);
    font: 780 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
  }

  .evidence-glyph {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--hair-strong);
    border-radius: 50%;
    color: var(--accent-text);
    font-weight: 800;
  }

  .evidence-card-copy {
    display: grid;
    gap: var(--s-3);
  }

  .evidence-card-copy p {
    max-width: 52ch;
    color: var(--ink-3);
    font-size: var(--fs-body-s);
    line-height: 1.6;
  }

  .diagnostic-map {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-3);
  }

  .diagnostic-row {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(90px, .7fr) minmax(100px, 1fr) auto;
    gap: var(--s-3);
    color: var(--ink-3);
    font-size: var(--fs-caption);
  }

  .diagnostic-row i {
    position: relative;
    height: 5px;
    overflow: hidden;
    background: var(--well-surface);
  }

  .diagnostic-row i::after {
    display: block;
    width: var(--signal, 50%);
    height: 100%;
    background: var(--accent-fill);
    content: "";
  }

  .diagnostic-row strong {
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
  }

  @media (hover: hover) and (pointer: fine) {
    .evidence-card:hover {
      border-color: var(--accent-line);
      box-shadow: var(--card-elev-hover);
      transform: translateY(-3px);
    }
  }

  /* Casi a doppia profondita': la metrica si vede subito, il ragionamento
     completo si apre senza cambiare pagina. */
  .case-deep {
    border-top: 1px solid var(--hair-strong);
  }

  .case-deep:last-child {
    border-bottom: 1px solid var(--hair-strong);
  }

  .case-deep summary {
    display: grid;
    align-items: center;
    grid-template-columns: 72px minmax(0, 1fr) minmax(140px, .35fr) 40px;
    gap: var(--s-5);
    padding-block: var(--s-6);
    cursor: pointer;
    list-style: none;
  }

  .case-deep summary::-webkit-details-marker {
    display: none;
  }

  .case-deep-index,
  .case-deep-label {
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-deep-title {
    display: grid;
    gap: var(--s-2);
  }

  .case-deep-title strong {
    font-family: var(--display);
    font-size: var(--fs-h3);
    line-height: 1.15;
  }

  .case-deep-metric {
    color: var(--accent-text);
    font-family: var(--display);
    font-size: var(--fs-h2);
    font-weight: 760;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .case-deep-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--hair-strong);
    border-radius: 50%;
    color: var(--ink-1);
    font-size: var(--fs-h4);
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }

  .case-deep[open] .case-deep-toggle {
    color: var(--accent-on);
    background: var(--accent);
    transform: rotate(45deg);
  }

  .case-deep-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: var(--s-6);
    padding: 1px;
    background: var(--hair-soft);
  }

  .case-deep-cell {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    min-height: 150px;
    padding: var(--s-5);
    background: var(--card-surface);
  }

  .case-deep-cell span {
    color: var(--accent-text);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-deep-cell p {
    color: var(--ink-3);
    font-size: var(--fs-body-s);
    line-height: 1.6;
  }

  /* Timeline con trave di progresso. */
  .process-layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(48px, 8vw, 120px);
  }

  .process-sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    display: grid;
    gap: var(--s-5);
  }

  .process-list {
    position: relative;
    display: grid;
    gap: var(--s-8);
  }

  .process-list::before,
  .process-list::after {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 18px;
    width: 1px;
    content: "";
  }

  .process-list::before {
    background: var(--hair-strong);
  }

  .process-list::after {
    bottom: auto;
    height: var(--process-progress, 0%);
    background: var(--accent-line);
    box-shadow: var(--glow-amber-seam);
  }

  .process-step {
    display: grid;
    position: relative;
    gap: var(--s-3);
    min-height: 210px;
    padding-left: 68px;
    opacity: .64;
    transition: opacity var(--dur-3) var(--ease-out);
  }

  .process-step::before {
    position: absolute;
    z-index: var(--z-content);
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--hair-strong);
    border-radius: 50%;
    color: var(--ink-3);
    background: var(--tone-bg);
    content: attr(data-step-number);
    font-size: var(--fs-micro);
    font-weight: 800;
  }

  .process-step[aria-current="step"] {
    opacity: 1;
  }

  .process-step[aria-current="step"]::before {
    border-color: var(--accent-line);
    color: var(--accent-on);
    background: var(--accent);
    box-shadow: var(--glow-amber-sm);
  }

  .process-step p {
    max-width: 50ch;
    color: var(--ink-3);
    font-size: var(--fs-body);
    line-height: 1.65;
  }

  .process-output {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    width: fit-content;
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--hair-soft);
    color: var(--ink-2);
    background: var(--card-surface);
    font-size: var(--fs-caption);
    font-weight: 700;
  }

  .process-output::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-line);
    content: "";
  }

  @media (max-width: 900px) {
    .field-proof {
      grid-template-columns: minmax(0, 1fr);
    }

    .field-profile {
      min-height: 540px;
    }

    .evidence-card[data-size] {
      grid-column: span 6;
      grid-row: auto;
    }

    .evidence-card[data-size="anchor"] {
      grid-column: 1 / -1;
    }

    .case-deep-body {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .process-sticky {
      position: static;
    }
  }

  @media (max-width: 680px) {
    .field-profile {
      min-height: 460px;
    }

    .field-mosaic {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
    }

    .field-shot,
    .field-shot[data-size="wide"] {
      grid-column: auto;
      min-height: 300px;
    }

    .field-shot[data-size="wide"] {
      min-height: 210px;
    }

    .photo-journal {
      display: flex;
      min-height: 0;
      gap: var(--s-3);
      margin-inline: calc(var(--gutter) * -1);
      padding: 0 var(--gutter) var(--s-3);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
      scrollbar-width: thin;
    }

    .photo-journal-shot {
      flex: 0 0 min(84vw, 380px);
      min-height: 440px;
      scroll-snap-align: center;
    }

    .photo-journal-shot[data-shot="training"] {
      flex-basis: min(92vw, 520px);
      min-height: 300px;
    }

    .photo-journal-shot[data-shot="credential"] {
      flex-basis: min(90vw, 460px);
      min-height: 340px;
    }

    .audit-window-state,
    .audit-tablist button span {
      display: none;
    }

    .audit-tablist {
      margin-inline: var(--s-4);
    }

    .audit-panel,
    .audit-foot {
      padding-inline: var(--s-4);
    }

    .audit-panel-top {
      grid-template-columns: minmax(0, 1fr);
    }

    .audit-score {
      width: 64px;
    }

    .audit-kpis {
      grid-template-columns: minmax(0, 1fr);
    }

    .audit-kpi {
      border-right: 0;
      border-bottom: 1px solid var(--hair-soft);
    }

    .audit-kpi:last-child {
      border-bottom: 0;
    }

    .evidence-bento {
      grid-template-columns: minmax(0, 1fr);
    }

    .evidence-card[data-size] {
      grid-column: auto;
    }

    .case-deep summary {
      grid-template-columns: 44px minmax(0, 1fr) 38px;
      gap: var(--s-3);
    }

    .case-deep-metric {
      grid-column: 2;
      font-size: var(--fs-h3);
    }

    .case-deep-toggle {
      grid-column: 3;
      grid-row: 1 / span 2;
    }

    .case-deep-body {
      grid-template-columns: minmax(0, 1fr);
    }

    .case-deep-cell {
      min-height: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .field-profile img,
    .field-shot img {
      transition: none;
    }

    .field-profile:hover img,
    .field-shot:hover img {
      transform: none;
    }

    [data-spotlight]::before {
      display: none;
    }

    .audit-tab-indicator,
    .evidence-card,
    .case-deep-toggle,
    .process-step {
      transition: none;
    }

    .process-step {
      opacity: 1;
    }
  }

  /* =======================================================================
     Caso studio MayerMoover — prova in movimento
     ======================================================================= */

  [data-module~="case-study"] [data-count-to] {
    font-variant-numeric: tabular-nums lining-nums;
  }

  .case-trajectory {
    display: grid;
    gap: var(--s-5);
    margin-top: clamp(32px, 5vw, 64px);
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid var(--hair-strong);
    color: var(--ink-1);
    background: var(--card-surface);
    box-shadow: var(--case-elev, none), inset 0 1px 0 var(--hair-soft);
    overflow: hidden;
  }

  .case-trajectory-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
  }

  .case-trajectory-head span {
    color: var(--accent-text);
    font: 800 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-trajectory-head strong {
    color: var(--ink-2);
    font-size: var(--fs-body-s);
  }

  .case-trajectory-line {
    position: relative;
    height: 2px;
    background: var(--hair-strong);
  }

  .case-trajectory-line::after {
    position: absolute;
    inset: 0;
    background: var(--accent-line);
    box-shadow: var(--glow-amber-seam);
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
  }

  .is-case-active .case-trajectory-line::after {
    transform: scaleX(1);
    transition: transform 1300ms var(--ease-out) 120ms;
  }

  .case-trajectory-phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
    list-style: none;
  }

  .case-trajectory-phase {
    display: grid;
    gap: var(--s-2);
    opacity: .45;
    transform: translateY(8px);
  }

  .is-case-active .case-trajectory-phase {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 480ms var(--ease-out) calc(260ms + var(--phase, 0) * 150ms),
      transform 480ms var(--ease-out) calc(260ms + var(--phase, 0) * 150ms);
  }

  .case-trajectory-phase span {
    color: var(--ink-4);
    font: 800 var(--fs-micro) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-trajectory-phase strong {
    color: var(--ink-1);
    font-size: var(--fs-body-s);
    line-height: 1.35;
  }

  .case-trajectory-phase p {
    color: var(--ink-3);
    font-size: var(--fs-caption);
    line-height: 1.55;
  }

  .case-credit {
    max-width: 52ch;
    margin-top: var(--s-5);
    color: var(--ink-3);
    font-size: var(--fs-body-s);
    line-height: var(--lh-body);
  }

  .case-credit strong {
    color: var(--ink-1);
  }

  @media (hover: hover) {
    [data-module~="case-study"] .case-card {
      transition:
        transform var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
    }

    [data-module~="case-study"] .case-card:hover {
      border-color: var(--accent-line);
      box-shadow: var(--case-elev-hover, none), inset 0 1px 0 var(--hair-soft);
      transform: translateY(var(--lift-case, -5px));
    }
  }

  @media (max-width: 760px) {
    .case-trajectory-head {
      display: grid;
      gap: var(--s-2);
    }

    .case-trajectory-phases {
      grid-template-columns: minmax(0, 1fr);
    }

    .case-trajectory-phase {
      padding-left: var(--s-4);
      border-left: 1px solid var(--hair-strong);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .case-trajectory-line::after {
      transform: scaleX(1);
    }

    .case-trajectory-phase {
      opacity: 1;
      transform: none;
      transition: none;
    }

    [data-module~="case-study"] .case-card {
      transition: none;
    }
  }

  /* ====================================================================== */
  /* 25. Pagina definitiva                                                  */
  /* ====================================================================== */

  /* Geometria propria di definitiva.html: carta editoriale che ospita tre
     oggetti scuri. In questa sezione l'hover non sposta e non ingrandisce
     nulla: il bordo si accende, la superficie sale di un gradino, il filetto
     ambra si ispessisce. Tutto e' dichiarato come data-variant sui componenti
     esistenti, cosi' le altre sei pagine restano identiche a riposo. */

  /* --- Offerta: la card core occupa due righe a sinistra, le altre due si
     impilano a destra. Sotto 880px torna una colonna sola. */
  .grid[data-variant="offer"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-4);
    margin: var(--s-4) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--hair);
  }

  .card-facts > div {
    display: grid;
    gap: var(--s-1);
  }

  .card-facts dt {
    font: 700 var(--fs-label) / 1 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-4);
  }

  .card-facts dd {
    margin: 0;
    font: 500 var(--fs-body-s) / 1.4 var(--body);
    color: var(--ink-2);
  }

  @media (min-width: 880px) {
    .grid[data-variant="offer"] {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* La card core riempie le due righe: il vuoto non resta sulla carta
       ma dentro la cornice, e il link con la nota chiudono la card in
       basso come un piede. */
    .grid[data-variant="offer"] > [data-emphasis="core"] {
      grid-column: 1 / span 7;
      grid-row: 1 / span 2;
      align-self: start;
    }

    /* Scheda dei fatti dentro la card core: riempie lo span di due righe
       con informazioni vere (presenza, durata, cadenza, uscita) invece di
       lasciare carta vuota dentro la cornice. */
    .grid[data-variant="offer"] > [data-emphasis="core"] > .card-facts {
      margin-top: var(--s-5);
    }

    .grid[data-variant="offer"] > [data-emphasis="core"] > .text-link {
      margin-top: var(--s-4);
    }

    /* La nota di orientamento sta sotto la card core, nella stessa colonna:
       lo spazio che avanza resta fuori dalla cornice, come respiro di
       griglia, non dentro la card. */
    .grid[data-variant="offer"] > .note-box[data-span="core"] {
      grid-column: 1 / span 7;
      grid-row: 3;
      align-self: start;
    }

    .grid[data-variant="offer"] > [data-emphasis="core"] > .card-note {
      margin-top: 0;
    }

    .grid[data-variant="offer"] > :not([data-emphasis="core"]) {
      grid-column: 8 / span 5;
      align-self: start;
    }

    /* L'ultima card della colonna destra copre le righe 2 e 3: le tre card
       e la nota hanno tutte l'altezza del loro contenuto. */
    .grid[data-variant="offer"] > .card:not([data-emphasis="core"]):last-of-type {
      grid-row: 2 / span 2;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .grid[data-variant="offer"] > .card:hover {
      --edge-a: .68;
      background: var(--card-surface-2);
      box-shadow: inset 0 3px 0 var(--accent-line);
    }

    /* La core non perde in hover cio' che la distingue a riposo: il
       bordo resta ambra e l'ombra sale di un gradino invece di sparire. */
    .grid[data-variant="offer"] > [data-emphasis="core"]:hover {
      border-color: var(--accent-line);
      box-shadow: inset 0 3px 0 var(--accent-line), var(--card-elev-hover);
    }
  }

  /* --- Striscia di prova con contatori: il numero sta in uno span dentro
     lo strong, quindi eredita la scala del metric invece di quella della
     didascalia. Scoped alla strip senza .container, cioe' solo la pagina
     definitiva: la galleria resta com'e'. */
  .proof-strip:not(.container) strong > [data-count-to] {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  @media (max-width: 480px) {
    .proof-strip:not(.container) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --- Racconto fotografico a proporzioni dichiarate: nessuna altezza
     minima in pixel, ogni scatto porta il suo aspect-ratio e la griglia si
     misura da sola. Il ritratto regge due righe. */
  .photo-journal[data-variant="ratio"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 0;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .photo-journal[data-variant="ratio"] > .photo-journal-shot {
    flex: none;
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .photo-journal[data-variant="ratio"] > .photo-journal-shot[data-shot="training"] {
    aspect-ratio: 16 / 9;
  }

  .photo-journal[data-variant="ratio"] > .photo-journal-shot[data-shot="credential"] {
    aspect-ratio: 3 / 2;
  }

  .photo-journal[data-variant="ratio"] > .photo-journal-shot > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Da 700px, non 780: a 768 il tablet verticale deve gia' avere la
     griglia, altrimenti impila quattro foto a piena larghezza. */
  @media (min-width: 700px) {
    .photo-journal[data-variant="ratio"] {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: auto auto;
    }

    /* Il ritratto regge due righe: l'altezza gliela danno le righe, quindi
       il rapporto resta libero, altrimenti la larghezza si ricava
       dall'altezza e invade la colonna accanto. */
    .photo-journal[data-variant="ratio"] > .photo-journal-shot[data-shot="portrait"] {
      grid-column: 1 / span 5;
      grid-row: 1 / span 2;
      align-self: stretch;
      aspect-ratio: auto;
    }

    .photo-journal[data-variant="ratio"] > .photo-journal-shot[data-shot="training"] {
      grid-column: 6 / span 7;
      grid-row: 1;
    }

    .photo-journal[data-variant="ratio"] > .photo-journal-shot[data-shot="corporate"] {
      grid-column: 6 / span 3;
      grid-row: 2;
    }

    .photo-journal[data-variant="ratio"] > .photo-journal-shot[data-shot="credential"] {
      grid-column: 9 / span 4;
      grid-row: 2;
    }

    /* Impaginato della definitiva: l'azione guida la lettura a sinistra,
       mentre il ritratto diventa la quinta colonna stabile sul lato destro. */
    .photo-journal[data-variant="ratio"][data-layout="editorial"] {
      grid-template-rows: minmax(300px, 1.08fr) minmax(250px, .82fr);
      min-height: clamp(620px, 55vw, 780px);
    }

    .photo-journal[data-variant="ratio"][data-layout="editorial"] > .photo-journal-shot {
      align-self: stretch;
      aspect-ratio: auto;
    }

    .photo-journal[data-variant="ratio"][data-layout="editorial"] > .photo-journal-shot[data-shot="training"] {
      grid-column: 1 / span 7;
      grid-row: 1;
    }

    .photo-journal[data-variant="ratio"][data-layout="editorial"] > .photo-journal-shot[data-shot="portrait"] {
      grid-column: 8 / span 5;
      grid-row: 1 / span 2;
    }

    .photo-journal[data-variant="ratio"][data-layout="editorial"] > .photo-journal-shot[data-shot="corporate"] {
      grid-column: 1 / span 3;
      grid-row: 2;
    }

    .photo-journal[data-variant="ratio"][data-layout="editorial"] > .photo-journal-shot[data-shot="credential"] {
      grid-column: 4 / span 4;
      grid-row: 2;
    }
  }

  .photo-journal[data-layout="editorial"] .field-caption {
    right: var(--s-3);
    bottom: var(--s-3);
    left: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }

  /* La didascalia e' Fraunces, quindi display: il suo minimo non puo' essere
     un token di corpo. Con --fs-body-l come pavimento scendeva a 17,1px sul
     telefono, ed era il caso peggiore di serif editoriale piccola su schermo
     che il feedback segnalava. */
  .photo-journal[data-layout="editorial"] .field-caption strong {
    font-size: clamp(var(--fs-h4), 1.8vw, var(--fs-h3));
  }

  .photo-journal[data-layout="editorial"] [data-shot="corporate"] .field-caption strong {
    font-size: var(--fs-h4);
  }

  .photo-journal[data-layout="editorial"] .portrait-note {
    top: var(--s-4);
    left: var(--s-4);
    max-width: 22ch;
    padding: var(--s-3) var(--s-4);
  }

  @media (max-width: 699px) {
    .photo-journal[data-layout="editorial"] > .photo-journal-shot[data-shot="training"] { order: 1; }
    .photo-journal[data-layout="editorial"] > .photo-journal-shot[data-shot="portrait"] { order: 2; }
    .photo-journal[data-layout="editorial"] > .photo-journal-shot[data-shot="corporate"] { order: 3; }
    .photo-journal[data-layout="editorial"] > .photo-journal-shot[data-shot="credential"] { order: 4; }

    /* La nota resta in alto: in basso vive gia' la didascalia del ritratto. */
    .photo-journal[data-layout="editorial"] .portrait-note {
      top: var(--s-4);
      right: var(--s-4);
      bottom: auto;
      left: var(--s-4);
      max-width: none;
    }
  }

  /* --- Mappa a nodi stretta: la sillabazione la decide il markup (&shy;),
     non il browser. */
  .node-map[data-variant="tight"] .node strong {
    overflow-wrap: normal;
    hyphens: manual;
    word-break: keep-all;
  }

  /* Sotto 860px la mappa e' a due colonne e il nodo centrale, secondo nel
     DOM, lasciava vuota la cella accanto ad Acquisition: con dense i
     nodi singoli riempiono i buchi e nessuna cella resta bordata. */
  @media (max-width: 860px) {
    .node-map[data-variant="tight"] {
      grid-auto-flow: row dense;
    }
  }

  /* Sotto 680px il nodo "Acceleratore" torna in colonna: su una riga sola
     il codice collassava a zero e il titolo gli si sovrapponeva. */
  @media (max-width: 680px) {
    .node-map[data-variant="tight"] .node[data-cell="ai"] {
      grid-auto-flow: row;
      justify-content: stretch;
      gap: var(--s-2);
    }
  }

  /* --- Il seam fra tesi e mappa respira: senza margine il filetto ambra
     tagliava l'ultima riga del manifesto e attraversava la lente. Il
     margine lo decide la skin, con default zero per le altre pagine. */
  .manifesto + .tr-seam {
    margin-block: var(--seam-gap, 0);
  }

  /* --- Flusso della leva 03: prima il processo, poi l'automazione. Quattro
     tappe su una riga intera della stack-row. */
  .stack-row > .lever-flow {
    grid-column: 1 / -1;
    margin-top: var(--s-5);
  }

  .lever-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
    padding: 0;
    list-style: none;
  }

  .lever-flow > li {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--hair);
  }

  .lever-flow > li > span {
    color: var(--accent-text);
    font: 700 var(--fs-label) / 1 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .lever-flow > li > strong {
    color: var(--ink-1);
    font: 600 var(--fs-h4) / 1.2 var(--display);
    font-optical-sizing: auto;
    letter-spacing: -.01em;
  }

  .lever-flow > li > p {
    color: var(--ink-3);
    font: 400 var(--fs-body-s) / 1.5 var(--body);
  }

  .stack-row > .lever-flow-note {
    grid-column: 1 / -1;
    color: var(--ink-2);
    font: 600 var(--fs-body-s) / 1.5 var(--body);
  }

  @media (max-width: 780px) {
    .lever-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 480px) {
    .lever-flow {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --- Caso profondo con grafico: il grafico occupa la prima riga intera,
     le cinque celle stanno sotto su sei colonne (tre e poi due), cosi' nessuna
     cella della griglia a filetti resta vuota. */
  .case-deep-body[data-variant="chart"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .case-deep-body[data-variant="chart"] > .case-chart {
    grid-column: 1 / -1;
  }

  .case-deep-body[data-variant="chart"] > .case-deep-cell {
    grid-column: span 2;
  }

  .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(-n + 2) {
    grid-column: span 3;
  }

  @media (max-width: 900px) {
    .case-deep-body[data-variant="chart"] > .case-deep-cell {
      grid-column: span 3;
    }

    .case-deep-body[data-variant="chart"] > .case-deep-cell:last-child {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 680px) {
    .case-deep-body[data-variant="chart"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .case-deep-body[data-variant="chart"] > .case-deep-cell,
    .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(-n + 2) {
      grid-column: 1 / -1;
    }
  }

  /* --- KPI del summary nei casi con grafico: numero sopra, etichetta
     sotto per intero. Inline, l'ultima parola dell'etichetta finiva a capo
     da sola sotto il numero. Sotto 680px la metrica ha gia' la sua colonna. */
  @media (min-width: 681px) {
    .case-deep:has(> .case-deep-body[data-variant="chart"]) > summary .case-deep-metric {
      display: grid;
      align-content: center;
      gap: var(--s-1);
    }

    .case-deep:has(> .case-deep-body[data-variant="chart"]) > summary .case-deep-metric > small {
      line-height: 1.3;
    }
  }

  /* --- Grafico inline del caso: barre orizzontali con i soli numeri del
     documento. --v e' la frazione 0-1 della barra, come nel calcolatore. */
  .case-chart {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-5);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--panel-surface);
  }

  .case-chart-head {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    color: var(--ink-4);
    font: 700 var(--fs-label) / 1 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-chart-row {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(6rem, .45fr) minmax(0, 1fr) auto;
    gap: var(--s-3);
  }

  .case-chart-row > span {
    color: var(--ink-3);
    font: 500 var(--fs-body-s) / 1.3 var(--body);
  }

  .case-chart-row > i {
    display: block;
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--hair-soft);
  }

  .case-chart-row > i::after {
    position: absolute;
    inset: 0;
    width: calc(var(--v, 0) * 100%);
    min-width: 2px;
    border-radius: inherit;
    background: var(--accent-fill);
    content: "";
  }

  .case-chart-row[data-kind="target"] > i::after {
    background: var(--hair-strong);
  }

  .case-chart-row[data-kind="miss"] > i::after {
    background: var(--ink-4);
  }

  .case-chart-row > b {
    color: var(--ink-1);
    font: 700 var(--fs-metric-s) / 1 var(--body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .case-chart-caption {
    color: var(--ink-3);
    font: 400 var(--fs-body-s) / 1.5 var(--body);
  }

  .case-chart .case-sketch {
    width: 100%;
    height: auto;
    color: var(--accent-fill);
  }

  /* 14 unita' nel viewBox da 320: a 283px di larghezza restano 12,4px. */
  .case-chart .case-sketch text {
    color: var(--ink-2);
    font: 700 var(--fs-caption) / 1 var(--body);
    fill: var(--ink-2);
  }

  /* --- Chiusura del calcolatore: nessun form, un mailto con lo scenario
     gia' compilato. */
  .calc-cta[data-variant="mailto"] {
    display: grid;
    justify-items: start;
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--hair);
  }

  .calc-cta[data-variant="mailto"] > p {
    max-width: 48ch;
    color: var(--ink-3);
    font: 400 var(--fs-body-s) / 1.55 var(--body);
  }

  .calc-cta[data-variant="mailto"] > small {
    color: var(--ink-4);
    font: 400 var(--fs-caption) / 1.4 var(--body);
  }

  /* --- Chip autore in hero: ritratto piccolo e due righe, dentro una
     pastiglia che porta al blocco "chi sono". */
  .author-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius-pill);
    color: inherit;
    background: var(--card-surface);
    text-decoration: none;
    transition:
      border-color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

  .author-chip > img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
  }

  .author-chip > span {
    display: grid;
    line-height: 1.2;
  }

  .author-chip strong {
    color: var(--ink-1);
    font: 700 var(--fs-body-s) / 1.2 var(--body);
  }

  .author-chip small {
    color: var(--ink-3);
    font: 400 var(--fs-caption) / 1.2 var(--body);
  }

  .author-chip:focus-visible {
    box-shadow: 0 0 0 5px var(--focus-halo);
  }

  @media (hover: hover) and (pointer: fine) {
    .author-chip:hover {
      border-color: var(--accent-line);
      background: var(--card-surface-2);
    }
  }

  /* --- Segno del tool a 28px, iniziale sulla scala delle etichette. */
  .stack-tool-mark[data-variant="mono"] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .stack-tool-mark[data-variant="mono"][data-ph-empty]::before {
    font: 700 var(--fs-label) / 1 var(--body);
  }

  /* --- Metodo "acceso": al passaggio il filetto e l'indice prendono
     l'ambra, la riga non si sposta. A riposo l'indice sta sull'inchiostro di
     supporto, altrimenti l'accensione non si vedrebbe. */
  .steps[data-variant="lit"] > li {
    transition:
      transform var(--dur-exit) var(--ease-exit),
      border-top-color var(--dur-2) var(--ease-out);
  }

  .steps[data-variant="lit"] .step-index {
    color: var(--ink-3);
    transition: color var(--dur-2) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .steps[data-variant="lit"] > li:hover {
      border-top-color: var(--accent-line);
    }

    .steps[data-variant="lit"] > li:hover .step-index {
      color: var(--accent-text);
    }
  }

  /* --- Freccia del bottone: si sposta di un passo verso il basso a destra,
     il bottone resta fermo. */
  .btn[data-arrow] > span {
    display: inline-block;
    transition: translate var(--dur-2) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn[data-arrow]:hover > span {
      translate: 2px 2px;
    }
  }

  /* --- Area di tocco dello scroll cue: il padding la alza, il margine
     negativo la compensa, cosi' nulla si sposta a riposo. La misura la
     da' la skin, con default zero per le altre pagine. */
  .hero-scroll {
    margin-block: calc(var(--hero-scroll-tap, 0px) * -1);
    padding-block: var(--hero-scroll-tap, 0px);
  }

  /* --- Hover sui controlli che ne erano privi: casi, assunzioni del
     calcolatore, segmented non premuto, scroll della hero, marchio. Solo
     colore e bordo, nessuno spostamento. I colori arrivano dalla skin:
     il default e' lo stato di riposo, quindi le altre pagine non
     cambiano. I casi si riconoscono dal corpo con il grafico. */
  @media (hover: hover) and (pointer: fine) {
    .case-deep:has(> .case-deep-body[data-variant="chart"]) > summary:hover .case-deep-toggle {
      border-color: var(--accent-line);
      color: var(--accent-text);
    }

    .calc-assumptions summary:hover {
      color: var(--assumptions-hover-ink, var(--calc-muted));
    }

    .hero-scroll:hover {
      color: var(--hero-scroll-hover-ink, var(--ink-4));
    }

    .brand:hover {
      color: var(--brand-hover-ink, var(--ink-1));
    }

    .calc-segmented button:not([aria-pressed="true"]):hover {
      color: var(--segmented-hover-ink, var(--calc-muted));
      box-shadow: var(--segmented-hover-ring, none);
    }
  }

  /* --- Case study editoriale: non una tabella di report, ma un dossier.
     Il summary e' la copertina; quando si apre, numeri e racconto diventano
     un'unica tavola scura con profondita' e gerarchia tipografica. */
  .case-deep[data-presentation="editorial"] {
    margin-top: var(--s-4);
    overflow: clip;
    border: 0;
    border-radius: clamp(22px, 2.4vw, 34px);
    background: var(--surface-l-100);
    box-shadow: var(--elev-2);
    transition:
      background-color var(--dur-3) var(--ease-out),
      box-shadow var(--dur-3) var(--ease-out);
  }

  .case-deep[data-presentation="editorial"]:last-child {
    border-bottom: 0;
  }

  .case-deep[data-presentation="editorial"][open] {
    background: var(--surface-050);
    box-shadow: var(--elev-4);
  }

  .case-deep[data-presentation="editorial"] > summary {
    grid-template-columns: 52px minmax(0, 1fr) minmax(190px, .32fr) 46px;
    gap: clamp(18px, 2.6vw, 38px);
    min-height: 126px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: inherit;
    transition: background-color var(--dur-2) var(--ease-out);
  }

  .case-deep[data-presentation="editorial"] > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -6px;
  }

  .case-deep[data-presentation="editorial"] .case-deep-index {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--accent-text);
    background: var(--accent-quiet);
  }

  .case-deep[data-presentation="editorial"] .case-deep-title {
    gap: var(--s-2);
  }

  .case-deep[data-presentation="editorial"] .case-deep-title strong {
    max-width: 31ch;
    font-size: clamp(1.35rem, 1.1rem + .75vw, 2rem);
    line-height: 1.08;
  }

  .case-deep[data-presentation="editorial"] .case-deep-metric {
    display: grid;
    align-content: center;
    gap: var(--s-2);
    font-size: clamp(2rem, 1.5rem + 1.35vw, 3.25rem);
    letter-spacing: -.035em;
  }

  .case-deep[data-presentation="editorial"] .case-deep-metric > small {
    max-width: 24ch;
    color: var(--ink-3);
    font-family: var(--body);
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
  }

  .case-deep[data-presentation="editorial"] .case-deep-toggle {
    width: 46px;
    height: 46px;
    border-color: var(--hair-soft);
    background: var(--surface-l-050);
  }

  .case-deep[data-presentation="editorial"][open] > summary {
    color: var(--on-dark-1);
    background: var(--surface-050);
  }

  .case-deep[data-presentation="editorial"][open] .case-deep-index {
    color: var(--amber);
    background: var(--amber-a12);
  }

  .case-deep[data-presentation="editorial"][open] .case-deep-label {
    color: var(--on-dark-3);
  }

  .case-deep[data-presentation="editorial"][open] .case-deep-title strong {
    color: var(--on-dark-1);
  }

  .case-deep[data-presentation="editorial"][open] .case-deep-metric {
    color: var(--amber);
  }

  .case-deep[data-presentation="editorial"][open] .case-deep-metric > small {
    color: var(--on-dark-3);
  }

  .case-deep[data-presentation="editorial"][open] .case-deep-toggle {
    border-color: transparent;
    color: var(--surface-050);
    background: var(--amber);
  }

  .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
    background: var(--surface-050);
    animation: case-editorial-in 520ms var(--ease-entrance) both;
  }

  .case-deep[data-presentation="editorial"] .case-chart {
    grid-column: 1 / -1;
    gap: clamp(22px, 2.8vw, 38px);
    padding: clamp(24px, 3.6vw, 48px);
    border: 1px solid var(--hair-d-2);
    border-radius: clamp(18px, 2vw, 28px);
    color: var(--on-dark-1);
    background:
      radial-gradient(circle at 4% 0%, var(--amber-a12), transparent 38%),
      var(--surface-100);
    box-shadow: var(--elev-d-2);
  }

  .case-deep[data-presentation="editorial"] .case-scoreboard {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    align-items: stretch;
  }

  .case-scoreboard-intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: clamp(4px, 2vw, 26px);
  }

  .case-scoreboard-intro .case-chart-head {
    display: block;
    margin-bottom: auto;
    color: var(--amber);
  }

  .case-scoreboard-intro h3 {
    max-width: 12ch;
    margin-top: clamp(38px, 5vw, 76px);
    color: var(--on-dark-1);
    font-family: var(--display);
    font-size: clamp(2rem, 1.45rem + 1.4vw, 3.25rem);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: .98;
  }

  .case-scoreboard-intro > p:last-child {
    max-width: 36ch;
    margin-top: var(--s-4);
    color: var(--on-dark-3);
    font-size: var(--fs-body-s);
    line-height: 1.6;
  }

  .case-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }

  .case-score {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 180px;
    padding: clamp(20px, 2.4vw, 30px);
    overflow: hidden;
    border-radius: clamp(16px, 1.6vw, 22px);
    background: var(--surface-200);
    box-shadow: var(--sheen-1);
  }

  .case-score::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--amber);
    content: "";
  }

  .case-score[data-status="miss"]::before {
    background: var(--on-dark-4);
  }

  .case-score > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
  }

  .case-score span {
    color: var(--on-dark-3);
    font: 700 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-score em {
    padding: 6px 9px;
    border-radius: var(--radius-pill);
    color: var(--amber);
    background: var(--amber-a12);
    font: 700 var(--fs-micro) / 1 var(--body);
    white-space: nowrap;
  }

  .case-score[data-status="miss"] em {
    color: var(--on-dark-3);
    background: var(--surface-300);
  }

  .case-score > strong {
    margin-top: var(--s-5);
    color: var(--on-dark-1);
    font-family: var(--display);
    font-size: clamp(1.8rem, 1.5rem + .8vw, 2.65rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    line-height: 1;
  }

  .case-score > p {
    margin-top: var(--s-4);
    color: var(--on-dark-3);
    font-size: var(--fs-caption);
  }

  .case-score > p b {
    color: var(--on-dark-1);
    font-weight: 650;
  }

  .case-deep[data-presentation="editorial"] .case-chart:not(.case-scoreboard) .case-chart-head,
  .case-deep[data-presentation="editorial"] .case-chart-caption {
    color: var(--on-dark-3);
  }

  .case-deep[data-presentation="editorial"] .case-chart-row > span {
    color: var(--on-dark-3);
  }

  .case-deep[data-presentation="editorial"] .case-chart-row > i {
    background: var(--surface-300);
  }

  .case-deep[data-presentation="editorial"] .case-chart-row > b {
    color: var(--on-dark-1);
  }

  .case-deep[data-presentation="editorial"] .case-chart .case-sketch,
  .case-deep[data-presentation="editorial"] .case-chart .case-sketch text {
    color: var(--amber);
    fill: var(--amber);
  }

  .case-transition-chart {
    position: relative;
    overflow: hidden;
  }

  .case-transition-chart::after {
    position: absolute;
    inset: auto -12% -44% 34%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--amber-a08), transparent 66%);
    content: "";
    pointer-events: none;
  }

  .case-transition {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 22px);
  }

  .case-transition::before {
    position: absolute;
    z-index: -1;
    top: 21px;
    right: calc(100% / 6);
    left: calc(100% / 6);
    height: 1px;
    background: linear-gradient(90deg, var(--hair-d-3), var(--amber), var(--hair-d-3));
    content: "";
  }

  .case-transition > li {
    display: grid;
    justify-items: center;
    min-width: 0;
    animation: case-transition-enter 560ms var(--ease-entrance) both;
    animation-delay: calc(var(--transition-index, 0) * 90ms);
  }

  .case-transition > li:nth-child(2) {
    --transition-index: 1;
  }

  .case-transition > li:nth-child(3) {
    --transition-index: 2;
  }

  .case-transition-node {
    display: grid;
    z-index: 1;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hair-d-3);
    border-radius: 50%;
    color: var(--on-dark-3);
    background: var(--surface-200);
    box-shadow: 0 0 0 8px var(--surface-100);
    font: 750 var(--fs-micro) / 1 var(--body);
    font-variant-numeric: tabular-nums;
  }

  .case-transition > li[data-milestone="handover"] .case-transition-node {
    border-color: var(--amber);
    color: var(--surface-050);
    background: var(--amber);
    box-shadow: 0 0 0 8px var(--surface-100), var(--glow-amber-sm);
  }

  .case-transition-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 212px;
    margin-top: var(--s-4);
    padding: clamp(22px, 2.8vw, 32px);
    border: 1px solid var(--hair-d-1);
    border-radius: clamp(16px, 1.7vw, 22px);
    background: var(--surface-200);
    box-shadow: var(--sheen-1);
    transition:
      border-color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

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

  .case-transition-card > p {
    color: var(--amber);
    font: 750 var(--fs-label) / 1.35 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-transition-card > strong {
    max-width: 12ch;
    margin-top: auto;
    color: var(--on-dark-1);
    font-family: var(--display);
    font-size: clamp(2rem, 1.45rem + 1.25vw, 3rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: .98;
  }

  .case-transition-card > small {
    max-width: 30ch;
    margin-top: var(--s-3);
    color: var(--on-dark-3);
    font: 500 var(--fs-caption) / 1.45 var(--body);
  }

  .case-transition-note {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    padding-top: clamp(24px, 3vw, 38px);
    border-top: 1px solid var(--hair-d-2);
  }

  .case-transition-note > span {
    color: var(--amber);
    font: 750 var(--fs-label) / 1.2 var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .case-transition-note > strong {
    max-width: 36ch;
    color: var(--on-dark-1);
    font-family: var(--display);
    font-size: clamp(1.4rem, 1.18rem + .65vw, 2rem);
    line-height: 1.12;
    text-wrap: balance;
  }

  @keyframes case-transition-enter {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .case-transition-card:hover {
      border-color: var(--hair-d-3);
      background: var(--surface-300);
    }

    .case-transition > li[data-milestone="handover"] .case-transition-card:hover {
      border-color: var(--amber-a45);
    }
  }

  .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell {
    grid-column: span 4;
    min-height: 168px;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--hair-d-1);
    border-radius: clamp(16px, 1.6vw, 22px);
    background: var(--surface-100);
  }

  .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(2) {
    grid-column: span 7;
    background:
      linear-gradient(130deg, var(--amber-a12), transparent 52%),
      var(--surface-100);
  }

  .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:last-child {
    grid-column: span 5;
  }

  .case-deep[data-presentation="editorial"] .case-deep-cell span {
    color: var(--amber);
  }

  .case-deep[data-presentation="editorial"] .case-deep-cell p {
    color: var(--on-dark-3);
    font-size: var(--fs-body-s);
    line-height: 1.65;
  }

  @keyframes case-editorial-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .case-deep[data-presentation="editorial"]:not([open]) > summary:hover {
      background: var(--surface-l-200);
    }

    .case-deep[data-presentation="editorial"][open] > summary:hover {
      background: var(--surface-050);
    }

    .case-deep[data-presentation="editorial"][open] > summary:hover .case-deep-toggle {
      border-color: transparent;
      color: var(--surface-050);
    }
  }

  @media (max-width: 1000px) {
    .case-deep[data-presentation="editorial"] .case-scoreboard {
      grid-template-columns: minmax(0, 1fr);
    }

    .case-scoreboard-intro {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(260px, 1.2fr);
      gap: var(--s-5);
      padding-right: 0;
    }

    .case-scoreboard-intro .case-chart-head {
      grid-column: 1 / -1;
      margin-bottom: 0;
    }

    .case-scoreboard-intro h3 {
      margin-top: 0;
    }

    .case-scoreboard-intro > p:last-child {
      align-self: end;
      margin-top: 0;
    }
  }

  @media (max-width: 800px) {
    .case-deep[data-presentation="editorial"] > summary {
      grid-template-columns: 46px minmax(0, 1fr) 42px;
      gap: var(--s-3);
    }

    .case-deep[data-presentation="editorial"] .case-deep-index {
      width: 46px;
      height: 46px;
    }

    .case-deep[data-presentation="editorial"] .case-deep-metric {
      grid-column: 2;
      font-size: var(--fs-h2);
    }

    .case-deep[data-presentation="editorial"] .case-deep-toggle {
      grid-column: 3;
      grid-row: 1 / span 2;
      width: 42px;
      height: 42px;
    }

    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell,
    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(2),
    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:last-child {
      grid-column: span 6;
    }
  }

  @media (max-width: 560px) {
    .case-deep[data-presentation="editorial"] {
      margin-top: var(--s-3);
      border-radius: 20px;
    }

    .case-deep[data-presentation="editorial"] > summary {
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      min-height: 0;
      padding: 20px 16px;
    }

    .case-deep[data-presentation="editorial"] .case-deep-index,
    .case-deep[data-presentation="editorial"] .case-deep-toggle {
      width: 38px;
      height: 38px;
    }

    .case-deep[data-presentation="editorial"] .case-deep-title strong {
      font-size: 1.2rem;
    }

    .case-deep[data-presentation="editorial"] .case-deep-metric {
      font-size: 1.65rem;
    }

    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      padding: 0 12px 12px;
    }

    .case-deep[data-presentation="editorial"] .case-chart {
      padding: 22px 16px;
    }

    .case-scoreboard-intro {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-3);
    }

    .case-scoreboard-intro .case-chart-head {
      grid-column: auto;
    }

    .case-scoreboard-intro h3 {
      font-size: 2.1rem;
    }

    .case-score-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .case-score {
      min-height: 154px;
    }

    .case-transition {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .case-transition::before {
      top: 19px;
      right: auto;
      bottom: 19px;
      left: 19px;
      width: 1px;
      height: auto;
      background: linear-gradient(180deg, var(--hair-d-3), var(--amber), var(--hair-d-3));
    }

    .case-transition > li {
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: start;
      justify-items: stretch;
      gap: 12px;
    }

    .case-transition-node {
      width: 38px;
      height: 38px;
      box-shadow: 0 0 0 6px var(--surface-100);
    }

    .case-transition > li[data-milestone="handover"] .case-transition-node {
      box-shadow: 0 0 0 6px var(--surface-100), var(--glow-amber-sm);
    }

    .case-transition-card {
      min-height: 164px;
      margin-top: 0;
      padding: 20px;
    }

    .case-transition-card > strong {
      font-size: 2rem;
    }

    .case-transition-note {
      display: grid;
      align-items: start;
      gap: var(--s-3);
    }

    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell,
    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:nth-last-child(2),
    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"] > .case-deep-cell:last-child {
      grid-column: 1;
      min-height: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .case-deep[data-presentation="editorial"] > .case-deep-body[data-variant="chart"],
    .case-transition > li {
      animation: none;
    }
  }

  /* --- Passaggio dal calcolatore al profilo: una cucitura breve, poi una
     timeline continua. Il capitolo chiaro non nasce dentro una fascia grigia
     ma emerge dalla superficie scura con un solo filetto editoriale. */
  #chi-sono[data-transition="profile"] {
    padding-top: clamp(76px, 6.8vw, 104px);
    overflow: clip;
  }

  #chi-sono[data-transition="profile"]::before {
    height: clamp(54px, 5vw, 76px);
    background: linear-gradient(
      to bottom,
      var(--surface-050) 0%,
      rgb(var(--ink-rgb) / .68) 22%,
      rgb(var(--ink-rgb) / .18) 70%,
      transparent 100%
    );
  }

  #chi-sono[data-transition="profile"]::after {
    position: absolute;
    z-index: var(--z-decor);
    top: clamp(54px, 5vw, 76px);
    left: 50%;
    width: var(--page);
    height: 1px;
    background: linear-gradient(
      90deg,
      var(--accent-line) 0 34px,
      var(--hair-soft) 34px 82%,
      transparent 100%
    );
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  #chi-sono .background-layout {
    --split-a: .68fr;
    --split-b: 1.32fr;
    gap: clamp(56px, 8vw, 118px);
  }

  #chi-sono .background-layout > .sticky-col {
    position: sticky;
    padding-left: clamp(22px, 2.4vw, 34px);
  }

  #chi-sono .background-layout > .sticky-col::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--accent-line), var(--amber-deep-a14) 42%, transparent 88%);
    content: "";
  }

  #chi-sono .background-layout > .sticky-col h2 {
    max-width: 9ch;
    line-height: 1.02;
  }

  #chi-sono .background-layout > .sticky-col > p:last-child {
    max-width: 37ch;
    line-height: 1.72;
  }

  #chi-sono .steps[data-variant="profile"] {
    position: relative;
  }

  #chi-sono .steps[data-variant="profile"]::before {
    position: absolute;
    top: 19px;
    bottom: 19px;
    left: 19px;
    width: 1px;
    background: linear-gradient(180deg, var(--accent-line), var(--hair-strong) 35%, var(--hair-soft) 82%, transparent);
    content: "";
  }

  #chi-sono .steps[data-variant="profile"] > li {
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: clamp(20px, 2.8vw, 36px);
    padding: 0 0 clamp(42px, 5vw, 66px);
    border: 0;
  }

  #chi-sono .steps[data-variant="profile"] > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  #chi-sono .steps[data-variant="profile"] .step-index {
    display: grid;
    z-index: 1;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hair-strong);
    border-radius: 50%;
    color: var(--accent-text);
    background: var(--page-bg);
    box-shadow: 0 0 0 8px var(--page-bg);
    transition:
      color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

  #chi-sono .steps[data-variant="profile"] .step-body {
    gap: var(--s-3);
    padding-top: 2px;
  }

  #chi-sono .steps[data-variant="profile"] .step-meta {
    max-width: 58ch;
    color: var(--ink-4);
    line-height: 1.45;
  }

  #chi-sono .steps[data-variant="profile"] .step-body h3 {
    max-width: 25ch;
    font-size: clamp(1.45rem, 1.25rem + .55vw, 1.9rem);
    line-height: 1.1;
  }

  #chi-sono .steps[data-variant="profile"] .step-body > p:last-child {
    max-width: 58ch;
    line-height: 1.68;
  }

  @media (hover: hover) and (pointer: fine) {
    #chi-sono .steps[data-variant="profile"] > li:hover {
      transform: none;
    }

    #chi-sono .steps[data-variant="profile"] > li:hover .step-index {
      border-color: var(--accent-line);
      color: var(--surface-l-100);
      background: var(--accent-line);
    }
  }

  @media (max-width: 900px) {
    #chi-sono .background-layout {
      gap: clamp(42px, 7vw, 64px);
    }

    #chi-sono .background-layout > .sticky-col {
      position: static;
      padding-left: 24px;
    }

    #chi-sono .background-layout > .sticky-col h2 {
      max-width: 13ch;
    }
  }

  @media (max-width: 560px) {
    #chi-sono[data-transition="profile"] {
      padding-top: 70px;
    }

    #chi-sono[data-transition="profile"]::before {
      height: 46px;
    }

    #chi-sono[data-transition="profile"]::after {
      top: 46px;
    }

    #chi-sono .background-layout > .sticky-col {
      padding-left: 18px;
    }

    #chi-sono .steps[data-variant="profile"]::before {
      top: 17px;
      bottom: 17px;
      left: 17px;
    }

    #chi-sono .steps[data-variant="profile"] > li {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 16px;
      padding-bottom: 38px;
    }

    #chi-sono .steps[data-variant="profile"] .step-index {
      width: 34px;
      height: 34px;
      box-shadow: 0 0 0 6px var(--page-bg);
    }
  }

  /* --- Anteprima della card 06 nella galleria. */
  .concept-preview[data-preview="definitiva"] > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (prefers-reduced-motion: reduce) {
    .author-chip,
    .steps[data-variant="lit"] > li,
    .steps[data-variant="lit"] .step-index {
      transition: none;
    }

    .btn[data-arrow] > span {
      transition: none;
      translate: none;
    }
  }

  /* ====================================================================== */
  /* 46. Mappa del sistema (capitolo #sistema di definitiva)                */
  /* ====================================================================== */

  /* Schema a strati con collettore: il motore in alto e' l'unico oggetto
     acceso, uno stelo scende in un collettore che si apre in tre frecce
     verso le tre leve affiancate; l'acceleratore e' un binario tratteggiato
     agganciato sotto le leve con tre spinotti. Le relazioni stanno nella
     forma, non nelle etichette. Componente nuovo: .node-map e .panel-signal
     restano com'erano per gli altri concept. I connettori sono
     pseudo-elementi guidati da quattro misure:
       --map-v        altezza della zona connettori fra motore e leve
       --map-col-gap  distanza fra le leve affiancate
       --map-rail-gap distanza fra le leve e il binario
       --map-c        rientro della spina sul telefono */
  .system-map {
    --map-v: 52px;
    --map-col-gap: var(--s-4);
    --map-rail-gap: var(--s-4);
    --map-c: 28px;
    --map-line: rgb(var(--edge-rgb) / .45);
    --map-arrow: var(--accent-line);
    --map-soft: var(--hair-strong);
    --map-plug: rgb(var(--white-rgb) / .30);
    --map-glow: rgb(var(--edge-rgb) / .08);
  }

  .system-map-body {
    display: grid;
    padding: var(--s-6);
  }

  .system-map-code {
    color: var(--ink-4);
    font: 700 var(--fs-label) / var(--lh-label) var(--body);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .system-map-name {
    display: block;
    color: var(--ink-1);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h4);
    font-weight: var(--fw-h4, 700);
    line-height: var(--lh-h4);
    letter-spacing: var(--tr-h4);
    overflow-wrap: normal;
    hyphens: manual;
  }

  .system-map small {
    color: var(--ink-4);
    font-size: var(--fs-micro);
    line-height: var(--lh-small);
  }

  /* Il motore: la lampada. Filetto ambra, velatura e alone sotto l'8%;
     l'etichetta e' l'unico testo ambra della mappa. */
  .system-map-engine {
    position: relative;
    display: grid;
    gap: var(--s-2);
    justify-self: center;
    width: min(100%, 520px);
    padding: var(--s-5) var(--s-7);
    border: 1px solid var(--hair-accent);
    border-radius: var(--card-radius);
    background:
      radial-gradient(120% 90% at 50% 0%, var(--map-glow) 0%, transparent 62%),
      var(--panel-surface);
    box-shadow: 0 0 56px -16px var(--map-glow);
    text-align: center;
  }

  .system-map-engine .system-map-code {
    color: var(--accent-text);
  }

  .system-map-engine .system-map-name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3, 700);
    line-height: var(--lh-h3);
    letter-spacing: var(--tr-h3);
  }

  .system-map-engine small {
    color: var(--ink-3);
  }

  /* Stelo: dal motore al collettore. */
  .system-map-engine::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: calc(var(--map-v) / 2 + 1px);
    background: var(--map-line);
  }

  .system-map-levers {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--map-col-gap);
    margin: var(--map-v) 0 0;
    padding: 0;
    list-style: none;
  }

  /* Collettore: la barra orizzontale fra i centri della prima e dell'ultima
     leva. Con tre colonne uguali il centro della prima sta a un sesto della
     larghezza, meno un terzo del gap. */
  .system-map-levers::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--map-v) / 2);
    right: calc(100% / 6 - var(--map-col-gap) / 3);
    left: calc(100% / 6 - var(--map-col-gap) / 3);
    height: 1px;
    background: var(--map-line);
  }

  .system-map-lever {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--s-2);
    min-width: 0;
    padding: var(--s-5);
    border: 1px solid var(--hair);
    border-radius: var(--card-radius);
    background: var(--card-surface-2);
  }

  /* Freccia: dal collettore al bordo alto della leva. Il segmento e'
     l'elemento stesso, la punta e' un quadrato ruotato con due lati. */
  .system-map-link {
    position: absolute;
    top: calc(-1 * var(--map-v) / 2 - 1px);
    left: 50%;
    width: 1px;
    height: calc(var(--map-v) / 2 + 1px);
    background: var(--map-line);
  }

  .system-map-link::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--map-arrow);
    border-bottom: 1px solid var(--map-arrow);
    translate: -50% 0;
    rotate: 45deg;
  }

  /* Spinotto tratteggiato fra ogni leva e il binario sotto, con la punta
     verso la leva: l'acceleratore arriva dopo e spinge su ciascuna leva. */
  .system-map-plug {
    position: absolute;
    top: 100%;
    left: calc(50% + 1px);
    width: 0;
    height: calc(var(--map-rail-gap) + 1px);
    border-left: 1px dashed var(--map-plug);
  }

  /* La punta guarda la leva: e' l'acceleratore che spinge sulla leva, non
     la leva che alimenta l'acceleratore. */
  .system-map-plug::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 7px;
    height: 7px;
    border-left: 1px solid var(--map-plug);
    border-top: 1px solid var(--map-plug);
    translate: calc(-50% - 1px) 0;
    rotate: 45deg;
  }

  /* Il binario dell'acceleratore: tratteggiato, senza riempimento e senza
     ambra. E' uno strato che si aggiunge, non un fondamento. */
  .system-map-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--map-rail-gap);
    padding: var(--s-4) var(--s-5);
    border: 1px dashed var(--map-soft);
    border-radius: var(--card-radius);
  }

  .system-map-rail .system-map-name {
    color: var(--ink-2);
  }

  /* La frase-chiave: figcaption a piena larghezza, in display. */
  .system-map-caption {
    padding: var(--s-4) var(--s-6) var(--s-5);
    border-top: 1px solid var(--hair-soft);
    color: var(--ink-2);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: var(--lh-h4);
    letter-spacing: var(--tr-h4);
  }

  /* I connettori si accendono dopo che il pannello e' salito: prima lo
     stelo, poi il collettore, poi le frecce, per ultimi gli spinotti. */
  .html-has-js .system-map-engine::after,
  .html-has-js .system-map-levers::before,
  .html-has-js .system-map-link,
  .html-has-js .system-map-lever::before,
  .html-has-js .system-map-plug {
    opacity: 0;
    transition: opacity var(--dur-5) var(--ease-out) var(--map-delay, 360ms);
  }

  .html-has-js .system-map-levers::before { --map-delay: 480ms; }
  .html-has-js .system-map-link { --map-delay: 600ms; }
  .html-has-js .system-map-plug { --map-delay: 900ms; }

  .html-has-js .system-map.is-visible .system-map-engine::after,
  .html-has-js .system-map.is-visible .system-map-levers::before,
  .html-has-js .system-map.is-visible .system-map-link,
  .html-has-js .system-map.is-visible .system-map-lever::before,
  .html-has-js .system-map.is-visible .system-map-plug {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .html-has-js .system-map-engine::after,
    .html-has-js .system-map-levers::before,
    .html-has-js .system-map-link,
    .html-has-js .system-map-lever::before,
    .html-has-js .system-map-plug {
      opacity: 1;
      transition: none;
    }
  }

  /* Telefono: la stessa forma ruota. Motore in alto, spina verticale a
     sinistra con tre tacche-freccia nelle leve impilate, spinotto
     tratteggiato dall'ultima leva al binario in fondo. */
  /* Sotto i 900px la riga del binario non tiene etichetta, nome e frase
     insieme: la frase scende su una riga propria, allineata al bordo. */
  @media (max-width: 900px) {
    .system-map-rail small {
      flex-basis: 100%;
    }
  }

  @media (max-width: 680px) {
    .system-map {
      --map-v: 36px;
    }

    .system-map-body {
      padding: var(--s-5) var(--s-4);
    }

    .system-map-engine {
      width: 100%;
      padding: var(--s-5);
      text-align: left;
    }

    .system-map-engine::after {
      left: calc(var(--map-c) / 2 - 1px);
      height: var(--map-v);
    }

    .system-map-lever {
      padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    }

    .system-map-levers {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-3);
      margin-left: var(--map-c);
    }

    .system-map-levers::before {
      content: none;
    }

    /* La spina: ogni leva disegna il proprio tratto, cosi' l'altezza puo'
       variare con il testo. L'ultima si ferma al proprio centro. */
    .system-map-lever::before {
      content: "";
      position: absolute;
      top: calc(-1 * var(--s-3) - 1px);
      bottom: -1px;
      left: calc(-1 * var(--map-c) / 2 - 1px);
      width: 1px;
      background: var(--map-line);
    }

    .system-map-lever:first-child::before {
      top: -1px;
    }

    .system-map-lever:last-child::before {
      bottom: 50%;
    }

    .system-map-link {
      top: 50%;
      left: calc(-1 * var(--map-c) / 2 - 1px);
      width: calc(var(--map-c) / 2 + 1px);
      height: 1px;
    }

    .system-map-link::after {
      top: 50%;
      right: 2px;
      bottom: auto;
      left: auto;
      translate: 0 -50%;
      rotate: -45deg;
    }

    .system-map-plug {
      display: none;
    }

    .system-map-lever:last-child .system-map-plug {
      display: block;
      top: 50%;
      left: calc(-1 * var(--map-c) / 2);
      height: calc(50% + var(--map-rail-gap) + 1px);
    }

    .system-map-lever:last-child .system-map-plug::after {
      display: none;
    }

    .system-map-rail {
      display: grid;
      gap: var(--s-2);
      padding: var(--s-5) var(--s-4);
    }

    .system-map-caption {
      padding: var(--s-5) var(--s-4);
    }
  }
}