/* ============================================================================
   Host Pilot — foglio di stile del sito
   Costruito sui token del Brand Kit v3/v4 (03-colori-e-token/hostpilot-tokens.css)
   e sul linguaggio grafico "del pilota" (11-motivi).

   Regola d'oro ereditata dal brand: il chevron e' sempre l'arrivo della rotta,
   mai decorazione sparsa. Gradiente "Rotta" e motivo waypoint solo su hero e
   sezioni di apertura/chiusura, mai nell'interfaccia operativa.
   ========================================================================= */

/* ---------------------------------------------------------------- font
   I percorsi sono relativi a questo file (assets/hp.css), quindi valgono
   identici per le pagine in / e per quelle in /en/: una sola dichiarazione. */
@font-face{font-family:'Cabinet Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cabinet-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Cabinet Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cabinet-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Cabinet Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/cabinet-grotesk-800.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/switzer-400.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/switzer-500.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/switzer-600.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/switzer-700.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/spline-sans-mono-400-latin.woff2') format('woff2')}
/* Un file solo e nessun unicode-range: il secondo file copriva il Latin
   Extended-A, che il sito non usa in nessuna etichetta, e infatti il browser
   non lo scaricava mai. L'asse variabile e' stato ridotto da 300-700 ai tre
   pesi realmente usati (400, 500, 600). */

/* ---------------------------------------------------------------- token */
:root{
  /* blu — scala v4 "Blu + Velocita'" */
  --navy-950:#030E20; --navy-900:#061627; --navy-800:#0B2947; --navy-700:#12365C;
  --navy-500:#2A6076; --navy-300:#8AA3C2; --navy-100:#E9EFF6;
  --ink:#061627; --ink-2:#12365C; --ink-3:#56718D;
  /* smeraldo / menta */
  --em-700:#0B5E48; --em-600:#0E7D5F; --em-500:#14A67E; --em-300:#4FD6AC; --em-100:#DCF5EC;
  /* iris — accento secondario, solo dati e AI */
  --iris-600:#5A4BD1; --iris-300:#A99EF3; --iris-100:#EBE8FC;
  /* neutri in tinta */
  --mist:#F2F6FA; --cloud:#D9E4EF; --hairline:#E0E8F0;
  --warn:#C77E2E; --danger:#C0483C;
  --on-dark:#C9D6E8; --on-dark-2:#9AABC4;

  --grad-rotta:linear-gradient(135deg,#030E20 0%,#0B2947 55%,#0E4A63 100%);

  --font-display:'Cabinet Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-text:'Switzer',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* motion — durate e curva del brand v4 */
  --ease:cubic-bezier(0.2,0,0,1);
  --t-micro:140ms; --t-panel:240ms; --t-takeoff:550ms;

  --shell:1180px;
  --radius:16px;
  --radius-lg:22px;

  /* --- token semantici: sono questi, e solo questi, a cambiare col tema --- */
  --bg:#FFFFFF;                       /* fondo pagina */
  --panel:#FFFFFF;                    /* pannelli, form, tabelle, banner */
  --nav-bg:rgba(255,255,255,.88);
  --btn-fg:#FFFFFF;                   /* testo del bottone primario */
  --btn-bg-1:var(--em-600);           /* fondo del bottone primario */
  --btn-bg-2:var(--em-700);           /* ...al passaggio del mouse */
  --hp-col:linear-gradient(180deg,rgba(220,245,236,.62),rgba(220,245,236,.34));
  --icon-ink:var(--navy-800);         /* corpo delle icone */
  --icon-accent:var(--em-500);        /* accento delle icone */
  --data:var(--iris-600);             /* accento secondario: dati e AI */
  --logo-eco:#4FD6AC;                 /* chevron d'eco del marchio */
  --logo-chevron:#14A67E;             /* chevron di comando */
  --check:var(--em-600);
  --shadow-1:0 18px 44px rgba(3,14,32,.09);
  --shadow-2:0 20px 50px rgba(3,14,32,.07);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--em-600);text-decoration-thickness:1.5px;text-underline-offset:2px}
a:hover{color:var(--em-700)}
/* link dentro il testo corrente: la riga si disegna invece di stare li' */
.row__body a,.duo p a,.faq p a,.doc p a,.doc li a{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--em-500),var(--em-500));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1.5px;
  transition:background-size var(--t-panel) var(--ease),color var(--t-micro) var(--ease);
}
.row__body a:hover,.duo p a:hover,.faq p a:hover,.doc p a:hover,.doc li a:hover{
  color:var(--em-600);background-size:100% 2.5px;
}
input,select,textarea,button{font-family:inherit;font-size:inherit}
::selection{background:var(--em-100);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;margin:0;text-wrap:balance}
p{margin:0}

:focus-visible{outline:2px solid var(--em-500);outline-offset:3px;border-radius:4px}

/* Il salta-contenuto si nasconde traslando, non con left:-9999px: quella
   tecnica lo colloca fuori dal flusso a sinistra e fa figurare la pagina piu'
   larga del viewport a ogni strumento che misura il riflusso. */
.hp-skip{position:absolute;left:0;top:0;z-index:400;background:var(--navy-900);color:#FFF;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none;
  transform:translateY(-120%);transition:transform var(--t-micro) var(--ease)}
.hp-skip:focus{transform:translateY(0)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--shell);margin:0 auto;padding-inline:24px;position:relative}
.wrap--narrow{max-width:860px}
.wrap--mid{max-width:1000px}

.sec{padding-block:clamp(72px,9vw,112px);position:relative}
.sec--tight{padding-block:clamp(56px,7vw,80px)}
.sec--mist{background:var(--mist)}
.sec--white{background:var(--bg)}
.sec--dark{background:var(--navy-900);color:var(--navy-100)}
.sec--deep{background:var(--navy-950);color:var(--navy-100)}
.sec--rotta{background:var(--grad-rotta);color:#FFFFFF;overflow:hidden}
.sec--dark p,.sec--deep p,.sec--rotta p{color:var(--on-dark)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,
.sec--deep h1,.sec--deep h2,.sec--deep h3,
.sec--rotta h1,.sec--rotta h2,.sec--rotta h3{color:#FFFFFF}

/* filo di rotta fra due sezioni: hairline menta che chiude col chevron */
.seam{height:1px;background:linear-gradient(90deg,transparent,var(--em-300) 35%,var(--em-300) 65%,transparent);opacity:.35}

/* ---------------------------------------------------------------- tipografia */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--em-600);
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
}
.eyebrow::before{
  content:"";width:18px;height:9px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M1.6 7.4 9 1.6l7.4 5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M1.6 7.4 9 1.6l7.4 5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.sec--dark .eyebrow,.sec--deep .eyebrow,.sec--rotta .eyebrow{color:var(--em-300)}

.display{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,72px);line-height:1.02}
.h-page{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.8vw,56px);line-height:1.05}
.h-sec{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,46px);line-height:1.1}
.h-card{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-0.012em;color:var(--ink)}
.lede{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.7;color:var(--ink-3);max-width:58ch}
.sec--dark .lede,.sec--deep .lede,.sec--rotta .lede{color:var(--on-dark)}
.body{font-size:15px;line-height:1.72;color:var(--ink-3)}
.mono{font-family:var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;font-size:11.5px}

.sec-head{max-width:660px;margin-bottom:clamp(40px,5vw,60px)}
.sec-head--split{display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;max-width:none}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .lede{margin-inline:auto}
.sec-head .h-sec{margin-bottom:14px}

/* ---------------------------------------------------------------- bottoni */
.btn{
  /* --btn-fg NON si ridichiara qui: `--btn-fg:var(--btn-fg)` e' un
     riferimento a se stesso, quindi invalido, e il colore del testo
     ricadeva sull'inchiostro ereditato. Il valore arriva da :root e le
     varianti (mint, ghost, outline) lo riscrivono sull'elemento. */
  --btn-bg:var(--btn-bg-1); --btn-bd:transparent;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-weight:600;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:12px;text-decoration:none;cursor:pointer;
  position:relative;
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),
             background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.btn:hover{transform:translateY(-2px);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn--mint{--btn-bg:var(--em-300);--btn-fg:#041225}
.btn--mint:hover{--btn-bg:#6FE0BD;box-shadow:0 12px 34px rgba(79,214,172,.28)}
.btn--emerald:hover{--btn-bg:var(--btn-bg-2);box-shadow:0 12px 30px rgba(14,125,95,.26)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#FFFFFF;--btn-bd:rgba(255,255,255,.32)}
.btn--ghost:hover{--btn-bd:var(--em-300);--btn-fg:var(--em-300)}
.btn--outline{--btn-bg:var(--panel);--btn-fg:var(--ink);--btn-bd:var(--hairline)}
.btn--outline:hover{--btn-bd:var(--em-500);--btn-fg:var(--em-600)}
.btn--lg{font-size:16px;padding:17px 32px}
.btn__arrow{width:16px;height:16px;flex:0 0 auto;transition:transform var(--t-micro) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

.link-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  text-decoration:none;white-space:nowrap;color:var(--em-600)}
/* Nessuno dei tre font del brand contiene → ✓ ✕ ☰: da carattere renderebbero
   nel font di sistema. Qui la freccia e' una maschera, quindi segue currentColor. */
.link-more::after{
  content:"";width:15px;height:15px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--t-micro) var(--ease);
}
.link-more:hover::after{transform:translateX(5px)}

/* ---------------------------------------------------------------- pillole */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--em-700);background:var(--em-100);border-radius:999px;padding:6px 13px;white-space:nowrap;
}
.pill--dark{color:var(--em-300);background:rgba(79,214,172,.10);border:1px solid rgba(79,214,172,.30)}
.pill-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------------------------------------------------------- segni si/no */
.segno{width:15px;height:15px;flex:0 0 auto;display:inline-block;vertical-align:-2px}
.segno--si{color:var(--em-600)}
.segno--no{color:var(--danger)}
.compare .col-hp .segno--si{color:var(--em-700)}
.hero__mark .segno--si{color:var(--em-300)}
.compare td,.compare th{white-space:normal}
.compare td .segno{margin-right:6px}

/* ---------------------------------------------------------------- quadranti icona */
.dial{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:var(--em-100);
}
.dial::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--em-500);opacity:.28;
  transition:transform var(--t-panel) var(--ease),opacity var(--t-panel) var(--ease);
}
.dial .ico{width:24px;height:24px;display:block;color:var(--icon-ink)}
.dial--sm{width:40px;height:40px}
.dial--sm .ico{width:19px;height:19px}
.dial--dark{background:rgba(79,214,172,.12)}
.dial--dark::before{border-color:var(--em-300);opacity:.4}
.dial--dark{--icon-accent:var(--em-300)}
.dial--dark .ico{color:#FFFFFF}
/* quadrante dei dati: qui vive l'iris, l'accento che il kit riserva a dati e AI */
.dial--data{background:var(--iris-100);--icon-accent:var(--data)}
.dial--data::before{border-color:var(--data);opacity:.34}
.dial--plain{background:var(--mist)}
.dial--plain::before{border-color:var(--cloud);opacity:.9}

/* ---------------------------------------------------------------- pannelli */
.panel{
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:30px;position:relative;
  transition:transform var(--t-panel) var(--ease),box-shadow var(--t-panel) var(--ease),border-color var(--t-panel) var(--ease);
}
.panel .h-card{margin:18px 0 10px}
.panel > p{color:var(--ink-3);font-size:15px}
.panel--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-1);border-color:var(--cloud)}
.panel--hover:hover .dial::before{transform:scale(1.12);opacity:.55}
.panel--flag{border:1.5px solid var(--em-500);box-shadow:0 18px 44px rgba(20,166,126,.12)}
.panel--dark{background:var(--navy-800);border-color:rgba(255,255,255,.10);color:#FFFFFF}
.panel--dark > p,.panel--dark .body{color:var(--on-dark-2)}
/* I titoli dentro un pannello scuro: .h-card fissa color:var(--ink) e vinceva
   sul color:#FFFFFF del pannello, per cui il titolo finiva blu quasi nero su
   blu notte — 1,23:1 misurati. Il pannello e' una superficie scura come le
   sezioni .sec--dark, e come quelle deve ribaltare il testo. */
.panel--dark h1,.panel--dark h2,.panel--dark h3,.panel--dark h4,
.panel--dark .h-card{color:#FFFFFF}
.panel--lg{padding:34px}

/* ------------------------------------------------------------ ripartizione
   "Chi fa cosa": due colonne che si oppongono per fondo, non per decoro.
   Niente icone e niente pillole — il titolo della voce e' gia' la sua
   etichetta, e un cerchio in piu' accanto e' una cosa in piu' da decifrare.
   La separazione fra le voci e' un filo, che non aggiunge ne' colore ne'
   parole. */
.h-card--lg{font-size:22px}
.panel > .h-card:first-child{margin:0 0 18px}
.split__item{padding:15px 0}
.split__item:first-child{padding-top:0}
.split__item:last-child{padding-bottom:0}
.split__item + .split__item{border-top:1px solid var(--hairline)}
.panel--dark .split__item + .split__item{border-top-color:rgba(255,255,255,.10)}
.split__t{display:block;font-family:var(--font-text);font-weight:600;font-size:15.5px;
  line-height:1.4;color:var(--ink)}
.panel--dark .split__t{color:#FFFFFF}
.split__d{font-size:14px;line-height:1.6;margin-top:4px;color:var(--ink-3)}
.panel--dark .split__d{color:var(--on-dark-2)}

/* .glow resta come aggancio semantico, senza effetto: la luce che inseguiva
   il puntatore era ornamento e basta. */

/* ---------------------------------------------------------------- griglie */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.grid--split{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- righe elenco (alternativa alla card) */
.rows{border-top:1px solid var(--hairline)}
.row{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:22px;align-items:start;
  padding:28px 4px 28px 16px;border-bottom:1px solid var(--hairline);
  position:relative;transition:background var(--t-panel) var(--ease);
}
/* filo che si apre a sinistra: segnala la riga senza spostare una parola */
.row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--em-500);transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--t-panel) var(--ease)}
.row:hover::before{transform:scaleY(1)}
.row:hover{background:var(--mist)}
.row:hover .row__idx{color:var(--em-600)}
.row:hover .dial::before{transform:scale(1.14);opacity:.6}
.row__idx{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);padding-top:18px;letter-spacing:.1em}
.row__body{padding-top:5px}
.row__body .h-card{margin:0 0 8px}
.row__body p{color:var(--ink-3);font-size:15px;max-width:62ch}
.rows--dark{border-color:rgba(255,255,255,.12)}
.rows--dark .row{border-color:rgba(255,255,255,.12)}
.rows--dark .row:hover{background:rgba(255,255,255,.035)}
.rows--dark .row__idx{color:var(--em-300)}
.rows--dark .row__body p{color:var(--on-dark-2)}
@media (max-width:640px){
  .row{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:22px 4px}
  .row__idx{grid-row:1;grid-column:1;padding-top:14px}
  .row__body{grid-column:1/-1;padding-top:0}
}

/* ---------------------------------------------------------------- elenchi puntati */
.checks{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--ink-2)}
.checks li::before{
  content:"";width:18px;height:18px;flex:0 0 auto;margin-top:2px;border-radius:50%;
  background:var(--em-100);
  position:relative;
}
.checks li::after{
  content:"";position:absolute;width:18px;height:18px;flex:0 0 auto;margin-top:2px;
  background:var(--check);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.3 7.6 12.2l5.8-6.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/14px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.3 7.6 12.2l5.8-6.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/14px;
}
.checks li{position:relative}
.checks--dark li{color:var(--on-dark)}
.checks--dark li::before{background:rgba(79,214,172,.14)}
.checks--dark li::after{background:var(--em-300)}

/* ---------------------------------------------------------------- header */
.nav{
  position:sticky;top:0;z-index:120;
  background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline);
  transition:box-shadow var(--t-panel) var(--ease),background var(--t-panel) var(--ease);
}
.nav.is-scrolled{box-shadow:0 8px 30px rgba(4,18,27,.07)}
/* barra di avanzamento della lettura: la rotta percorsa */
.nav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--em-500),var(--em-300));transition:width 90ms linear}
.nav__in{max-width:var(--shell);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo .hp-logo{height:38px}
/* Il logo e' UNO. Il corpo segue currentColor, i chevron restano del brand. */
.hp-logo{height:30px;width:auto;aspect-ratio:158/38;display:block;color:var(--navy-800)}
.hp-logo--on-dark{color:#FFFFFF}
.hp-logo--th{height:22px;display:inline-block;vertical-align:middle;color:var(--em-700)}
/* La barra si legge in tre gruppi: i link, i comandi, l'azione. Prima erano
   sette elementi a passo uguale e l'occhio non trovava la gerarchia: la
   pastiglia della lingua e il bottone verde, due masse scure, si toccavano. */
.nav__links{display:flex;align-items:center;gap:26px;margin-left:auto;flex-wrap:wrap}
.nav__tools{display:flex;align-items:center;gap:8px;position:relative;padding-left:26px}
.nav__tools::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:1px;height:24px;background:var(--hairline)}
.nav__links > .btn{margin-left:2px}
.nav__link{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;position:relative;padding-block:4px}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--em-500);transition:right var(--t-panel) var(--ease)}
.nav__link:hover{color:var(--em-600)}
.nav__link:hover::after{right:0}
.nav__link[aria-current="page"]{color:var(--em-600);font-weight:600}
.nav__link[aria-current="page"]::after{right:0}
.lang{display:flex;border:1px solid var(--hairline);border-radius:999px;padding:3px;gap:2px}
.lang > *{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;text-decoration:none;
  line-height:1.5;color:var(--ink-3);transition:all var(--t-micro) var(--ease)}
.lang > [aria-current="true"]{background:var(--ink);color:var(--bg)}
.lang > a:hover{background:var(--mist);color:var(--ink)}

.burger{display:none;margin-left:auto;border:1px solid var(--hairline);background:var(--panel);
  border-radius:11px;width:44px;height:40px;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);padding:0}
.burger svg{width:20px;height:20px;display:block}
.burger .ico-close{display:none}
.burger[aria-expanded="true"] .ico-menu{display:none}
.burger[aria-expanded="true"] .ico-close{display:block}
@media (max-width:960px){
  .burger{display:flex;width:44px;height:44px}
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel);
    border-bottom:1px solid var(--hairline);box-shadow:0 20px 44px rgba(3,14,32,.13);
    flex-direction:column;align-items:flex-start;gap:18px;padding:22px 24px 26px;margin-left:0}
  .nav__links.open{display:flex}
  .nav__tools{padding-left:0;gap:10px}
  .nav__tools::before{display:none}
  .nav__links > .btn{margin-left:0}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--grad-rotta);color:#FFFFFF;overflow:hidden;isolation:isolate}
.hero__viz{
  position:absolute;top:0;bottom:0;left:54%;right:0;z-index:0;pointer-events:none;
  overflow:hidden;
}
.hero__rotta{
  position:absolute;left:0;top:0;width:100%;height:100%;opacity:.34;
  will-change:transform;
}
.hero__grid{
  position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 80% at 55% 30%,#000 10%,transparent 80%);
  mask-image:radial-gradient(90% 80% at 55% 30%,#000 10%,transparent 80%);
}
/* width:100% e' necessario, non ridondante: .hero__in e' elemento di una griglia e
   porta margin-inline:auto da .wrap, e in griglia i margini automatici annullano
   lo stretch. Senza, la larghezza si decide sul contenuto — l'hero riempiva la
   pagina sotto i 1000 px solo perche' la fila di pastiglie in flex sbordava. */
.hero__in{position:relative;z-index:1;width:100%;
  padding-block:clamp(80px,10vw,124px) clamp(64px,8vw,96px);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.hero__text{min-width:0}
/* Hero senza strumento (404): non c'e' una seconda colonna a tenere il testo
   lontano dalla fascia del decoro, quindi lo spazio si riserva a mano. */
.hero--solo .hero__in{display:block;padding-right:calc(24px + 48%)}
/* Come per .pagehead__in: non zero, o si perde anche il margine di .wrap. */
@media (max-width:1000px){.hero--solo .hero__in{padding-right:24px}}
.hero__instr{min-width:0;display:grid;place-items:center}
.hero__instr svg{width:100%;max-width:470px;height:auto;filter:drop-shadow(0 0 34px rgba(79,214,172,.16))}
/* Sotto i 1000px il testo occupa tutta la larghezza: non esiste piu' una
   fascia da riservare al decoro, quindi il decoro si toglie. */
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .hero__instr svg{max-width:330px}
  .hero__viz{display:none}
}
.hero .display{max-width:13ch}
.hero{min-height:min(88vh,860px);display:grid;align-items:center}
.hero__lede{font-size:clamp(17px,1.7vw,19px);line-height:1.68;color:var(--on-dark);max-width:52ch;margin-top:26px}
.hero .btn-row{margin-top:38px}
/* Quattro pastiglie, due sopra e due sotto. Niente breakpoint a mano: decide la
   griglia. auto-fit mette due colonne solo se ce ne stanno due larghe almeno quanto
   la pastiglia piu' lunga, altrimenti scende a una — cosi' nessun testo va mai a capo.
   Tre cose che mi hanno fatto sbagliare due volte, scritte qui perche' non si ripetano:
   - auto-fit conta le colonne sul MASSIMO della traccia quando e' definito. Con
     minmax(283px,340px) ne entrava UNA sola a 581 px (591/350 = 1). Il massimo dev'essere
     1fr, che e' indefinito: cosi' il conto si fa sul minimo (591/295 = 2).
   - min(100%,283px) come minimo rende la traccia indefinita e auto-fit ripiega su una
     ripetizione: collassava a una colonna a ogni larghezza.
   - il tetto va sulla PASTIGLIA, non sulla traccia: a una colonna sola la traccia vale
     tutta la larghezza del testo (544 px a 1100) e senza tetto la pastiglia si stirerebbe.
   E il max-width sul contenitore serve perche' sotto i 1000 px la colonna del testo
   misura 952 px: senza, auto-fit ci mette tre colonne.
   La soglia 265px non e' scelta a occhio: e' la pastiglia piu' lunga delle DUE lingue
   («Nessun minimo, nessuna penale», 263 px) piu' due di margine. Abbassarla a questo
   valore e' cio' che fa stare due colonne anche a 1100 px di finestra, dove la colonna
   del testo vale 544 px e mezza colonna ne vale 267. */
.hero__marks{display:grid;gap:10px;margin-top:46px;align-items:stretch;
  justify-content:start;max-width:586px;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
/* Sotto i 370 px non c'e' spazio nemmeno per una colonna da 285: li' la pastiglia
   prende quello che c'e', altrimenti sborda. */
@media (max-width:340px){.hero__marks{grid-template-columns:minmax(0,1fr)}}
.hero__mark{
  display:flex;gap:10px;align-items:center;max-width:340px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:10px 16px;font-size:14px;color:var(--navy-100);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.hero__mark:hover{border-color:rgba(79,214,172,.5);background:rgba(79,214,172,.08)}
/* Con i testi accorciati (14/09 sera) nessuna pastiglia va piu' a capo a nessuna
   larghezza, quindi il segno torna centrato. text-wrap:balance resta come rete: se
   un domani un testo si allunga, spezza a meta' invece di lasciare una parola sola. */
.hero__mark span{text-wrap:balance}
.hero__mark span:first-child{color:var(--em-300);font-family:var(--font-mono);font-size:13px}

/* pagina interna: apertura scura corta */
.pagehead{background:var(--grad-rotta);color:#FFFFFF;position:relative;overflow:hidden;isolation:isolate}
.pagehead__in{position:relative;z-index:1;padding-block:clamp(72px,9vw,104px) clamp(56px,7vw,80px);
  padding-right:calc(24px + 34%)}
.pagehead .lede{color:var(--on-dark)}
/* Il motivo resta DENTRO la fascia scura: con bottom negativo l'overflow:hidden
   della testata lo tagliava a meta' sul bordo del banner bianco. */
.pagehead__viz{position:absolute;right:2%;bottom:0;width:min(30vw,420px);opacity:.6;z-index:0;pointer-events:none}

/* ---------------------------------------------------------------- strumento / KPI
   Nessun contenitore: quattro colonne appoggiate sul fondo scuro. Il numero
   pesa per dimensione, non per tinta, e sta nel carattere da testata come
   ogni altro numero grande del sito — il monospace qui e' la voce delle
   etichette, e a 42px faceva la testata con un carattere da etichetta.
   L'unico accento e' il filo menta: il viola del bordo e dei divisori
   litigava col verde dei numeri.
   ATTENZIONE: il numero e' bianco pieno, quindi .instr vive solo su una
   sezione scura (.sec--deep / .sec--dark). Su fondo chiaro sparisce. */
/* .instr__cell non ha piu' stile proprio: resta come unita' che il
   data-stagger anima (site.js scorre i figli diretti di [data-stagger]) */
/* «Quadro di bordo»: era l'unico blocco del sito a ignorare il linguaggio
   degli strumenti — quattro numeri sospesi nel vuoto e un trattino isolato che
   separava il numero dalla sua didascalia invece di tenerli insieme. Ora ogni
   cella e' un settore di scala graduata: filo di base, tacche regolari, e il
   tratto mint a sinistra come porzione «accesa». Stessa grammatica di
   quota-di-crociera.svg e della bussola.
   Il decoro sta sulla CELLA, non sul valore: site.js riscrive il textContent di
   .instr__val per far salire il contatore, e quello spazza via tutto cio' che
   sta dentro. */
/* Quattro strumenti: la griglia va 4 -> 2 -> 1, mai 3. Con auto-fit a 760px
   restava «24h» da solo su una seconda riga, spaiato. */
.instr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 30px}
@media (max-width:940px){.instr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:470px){.instr{grid-template-columns:1fr}}
.instr__cell{position:relative;padding-top:26px}
/* filo di base + tacche: la riga si spezza sui gap delle colonne, e va bene —
   una scala e' fatta di settori. Cosi' regge anche quando la griglia va a capo,
   dove un filo unico sul contenitore lascerebbe tacche sospese a meta' blocco. */
.instr__cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background:
    linear-gradient(rgba(255,255,255,.20) 0 1px, transparent 1px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 1px, transparent 1px 42px);
}
/* la porzione accesa: sopra il filo, mai sotto */
.instr__cell::after{
  content:"";position:absolute;top:0;left:0;width:28px;height:3px;
  background:var(--em-300);
}
.instr__val{font-family:var(--font-display);font-weight:700;
  font-size:clamp(38px,4.6vw,54px);line-height:1;color:#FFFFFF;
  letter-spacing:-0.03em;display:block}
.instr__lab{font-family:var(--font-text);font-size:14.5px;line-height:1.5;
  color:var(--on-dark);display:block;max-width:23ch;margin-top:14px}

/* ---------------------------------------------------------------- piano di volo (timeline) */
.flight{position:relative;margin-top:8px;padding-right:52px}
.flight__end{position:absolute;right:0;top:10px;width:30px;height:26px;
  background:var(--cloud);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M3 20 17 6l14 14' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'%3E%3Cpath d='M3 20 17 6l14 14' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:background var(--t-panel) var(--ease)}
.flight.is-complete .flight__end{background:var(--em-500)}
.flight__track{
  position:absolute;left:0;right:52px;top:26px;height:2px;
  background:repeating-linear-gradient(90deg,var(--cloud) 0 2px,transparent 2px 11px);
}
.flight__fill{position:absolute;left:0;right:52px;top:26px;height:2px;background:var(--em-500);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t-takeoff) var(--ease)}
.flight__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.flight__step{position:relative;padding-top:64px}
.flight__dot{
  position:absolute;top:19px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--panel);border:2px solid var(--cloud);
  transition:border-color var(--t-panel) var(--ease),box-shadow var(--t-panel) var(--ease),background var(--t-panel) var(--ease);
}
.flight__step.is-on .flight__dot{border-color:var(--em-500);background:var(--em-500);
  box-shadow:0 0 0 6px rgba(20,166,126,.14)}
.flight__code{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;color:var(--ink-3);
  position:absolute;top:22px;left:26px}
.flight__step.is-on .flight__code{color:var(--em-600)}
.flight__step .h-card{font-size:19px;margin:0 0 8px}
.flight__step p{font-size:14.5px;line-height:1.7;color:var(--ink-3);max-width:34ch}
.flight__step .dial{margin-bottom:18px}
@media (max-width:900px){
  .flight{padding-right:0;padding-bottom:44px}
  .flight__end{right:auto;left:-1px;top:auto;bottom:0}
  .flight__track,.flight__fill{left:7px;right:auto;top:0;bottom:44px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--cloud) 0 2px,transparent 2px 11px)}
  .flight__fill{background:var(--em-500);transform:scaleY(0);transform-origin:50% 0;
    transition:transform var(--t-takeoff) var(--ease)}
  .flight__steps{grid-template-columns:1fr;gap:36px}
  .flight__step{padding-top:0;padding-left:44px}
  .flight__dot{top:6px;left:0}
  .flight__code{top:8px;left:26px;position:static;display:block;margin-bottom:6px}
}

/* ---------------------------------------------------------------- confronto */
.compare{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:0 0 4px}
.compare__scroll{overflow-x:auto;padding:22px 18px 18px}
/* border-collapse:separate serve per arrotondare le celle: senza, la colonna
   Host Pilot non puo' avere angoli propri e resta incastrata nella griglia. */
.compare table{width:100%;border-collapse:separate;border-spacing:0;min-width:660px}
.compare th,.compare td{padding:17px 20px;font-size:14.5px;text-align:center}
.compare thead th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;vertical-align:bottom;
}
.compare th[scope="row"]{text-align:left;font-weight:600;font-size:15px;color:var(--ink)}
.compare tbody th,.compare tbody td{border-bottom:1px solid var(--mist)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.compare thead th:not(.col-hp){border-bottom:1px solid var(--hairline)}
.compare td{color:var(--ink-3)}
.compare .is-bad{color:var(--danger)}

/* La colonna Host Pilot e' il punto della tabella: si stacca in rilievo,
   con bordo proprio, angoli propri e un alone menta. */
.compare .col-hp{
  background:var(--hp-col);color:var(--em-700);font-weight:600;
  border-left:1.5px solid var(--em-500);border-right:1.5px solid var(--em-500);
  box-shadow:0 0 34px rgba(20,166,126,.13);
}
.compare thead .col-hp{
  background:var(--em-100);border-top:1.5px solid var(--em-500);
  border-radius:16px 16px 0 0;padding:22px 20px 18px;
}
.compare thead .col-hp img{height:22px;width:auto;display:inline-block;vertical-align:middle;
  }
.compare tbody tr:last-child .col-hp{
  border-bottom:1.5px solid var(--em-500);border-radius:0 0 16px 16px;padding-bottom:22px;
}

/* ---------------------------------------------------------------- faq */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  background:var(--panel);border:1px solid var(--hairline);border-radius:14px;
  transition:border-color var(--t-panel) var(--ease),box-shadow var(--t-panel) var(--ease);
}
.faq details:hover{border-color:var(--em-500)}
.faq details[open]{border-color:var(--em-500);box-shadow:var(--shadow-2)}
.faq summary{
  font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.4;
  padding:20px 56px 20px 24px;cursor:pointer;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--em-600);border-bottom:2px solid var(--em-600);
  transform:rotate(45deg);transition:transform var(--t-panel) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq details > p{padding:0 24px 22px;font-size:15px;line-height:1.72;color:var(--ink-3);max-width:70ch}

/* ---------------------------------------------------------------- marquee canali */
.marquee{
  --gap:56px;
  display:flex;gap:var(--gap);overflow:hidden;position:relative;padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;gap:var(--gap);align-items:center;flex:0 0 auto;
  animation:hp-slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{height:30px;width:auto;opacity:.75;filter:grayscale(1);
  transition:opacity var(--t-panel) var(--ease),filter var(--t-panel) var(--ease)}
.marquee:hover img{opacity:1;filter:grayscale(0)}
@keyframes hp-slide{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}

/* ---------------------------------------------------------------- form */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
/* Lo stile del select stava in un attributo style= in linea, e uno stile in linea
   batte il foglio: la regola che porta i campi a 16px sul touch non lo toccava, e
   su iOS il browser continuava a ingrandire la pagina al tocco. */
.field select{
  border:1px solid var(--cloud);border-radius:11px;padding:13px 15px;font-size:15px;
  color:var(--ink);background:var(--panel);appearance:auto;
}
.field input,.field textarea{
  border:1px solid var(--cloud);border-radius:11px;padding:13px 15px;font-size:15px;
  color:var(--ink);background:var(--panel);
  transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--navy-300)}
/* Il fuoco da tastiera vuole un contorno vero: un alone al 14% non raggiunge
   il contrasto 3:1 che le WCAG chiedono all'indicatore di fuoco. */
.field input:focus,.field textarea:focus{border-color:var(--em-500);
  box-shadow:0 0 0 3px rgba(20,166,126,.20)}
.field input:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--em-600);outline-offset:2px}
.field textarea{resize:vertical;min-height:104px;line-height:1.6}
.field-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.consent input{accent-color:var(--em-600);width:17px;height:17px;margin-top:3px;flex:0 0 auto;cursor:pointer}
.consent span{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.form-card{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,36px);box-shadow:var(--shadow-2)}
.form-err{font-size:13.5px;line-height:1.6;color:#B0402F;background:#FBEDEB;
  border-radius:10px;padding:12px 16px;margin:0}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy-950);color:var(--navy-100);padding:clamp(56px,7vw,76px) 0 26px;position:relative;overflow:hidden}
.foot__quota{display:block;width:100%;max-width:min(560px,72%);margin:0 auto clamp(30px,4vw,44px);
  padding-inline:24px;opacity:.4;pointer-events:none}
.foot__quota img{width:100%;height:auto;display:block}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;position:relative;z-index:1}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}}
.foot__brand .hp-logo{height:28px}
.foot__tag{color:var(--navy-300);font-size:14px;line-height:1.6;margin-top:16px}
.foot__t{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-300);margin-bottom:14px}
.foot__links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot__links a,.foot a{color:var(--on-dark);font-size:14px;text-decoration:none;
  transition:color var(--t-micro) var(--ease)}
.foot__links a:hover,.foot a:hover{color:var(--em-300)}
.foot__mail{color:var(--em-300)!important;font-size:14.5px;text-decoration:none}
.foot__btn{background:none;border:none;padding:0;color:var(--on-dark);font-size:14px;cursor:pointer;
  align-self:flex-start;width:auto;text-align:left;text-decoration:underline;text-underline-offset:3px}
.foot__btn:hover{color:var(--em-300)}
.foot__note{color:var(--navy-300);font-size:12.5px;line-height:1.7;margin-top:34px;position:relative;z-index:1}
.foot__bar{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
.foot__bar span,.foot__bar a{color:var(--navy-300);font-size:13px;text-decoration:none}

/* ---------------------------------------------------------------- cookie */
.ck{
  display:none;opacity:0;transform:translateY(14px);
  transition:opacity var(--t-panel) var(--ease),transform var(--t-panel) var(--ease);
  position:fixed;left:0;right:0;bottom:clamp(16px,3vw,32px);
  width:min(560px,calc(100% - 32px));margin-inline:auto;z-index:300;
  background:var(--panel);border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--hairline),0 30px 74px rgba(3,14,32,.34);padding:26px 28px;
}
.ck__head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ck__head img{width:22px;height:22px}
.ck__head strong{font-family:var(--font-display);font-weight:700;font-size:16.5px}
.ck p{font-size:13.5px;line-height:1.65;color:var(--ink-3)}
.ck__panel{display:none;border-top:1px solid var(--hairline);padding-top:14px;margin:14px 0}
.ck__opt{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 0}
.ck__opt + .ck__opt{border-top:1px solid var(--mist)}
.ck__opt strong{font-size:13.5px}
.ck__opt p{font-size:12px;line-height:1.55;margin-top:3px}
.ck__opt input{accent-color:var(--em-600);width:18px;height:18px;margin-top:2px;cursor:pointer;flex:0 0 auto}
.ck__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ck__actions .btn{flex:1 1 auto;justify-content:center;font-size:13.5px;padding:12px 16px}
.ck__link{background:none;border:none;color:var(--ink-3);font-weight:600;font-size:13.5px;
  padding:12px 10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ck__link:hover{color:var(--em-600)}

/* ---------------------------------------------------------------- documento legale */
.doc h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0 0 12px}
.doc h2:not(:first-child){margin-top:40px}
.doc p{font-size:15px;line-height:1.78;color:var(--ink-2);margin-bottom:14px}
.doc p:last-child{margin-bottom:0}
.doc ul{font-size:15px;line-height:1.78;color:var(--ink-2);padding-left:22px;margin:0 0 14px}
.doc li{margin-bottom:8px}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
.doc thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* ---------------------------------------------------------------- motion */
/* L'ingresso e' pilotato da JS: gli elementi partono VISIBILI e vengono nascosti
   solo se lo script gira. Senza JS, o se lo script muore, il contenuto resta
   leggibile: nessun testo puo' restare invisibile per colpa di un'animazione. */
[data-reveal].is-armed{opacity:0;transform:translateY(14px)}
[data-reveal].is-in{opacity:1;transform:none;
  transition:opacity var(--t-takeoff) var(--ease),transform var(--t-takeoff) var(--ease)}
/* Cascata: si animano i FIGLI, non il contenitore. Prima il ritardo stava sui
   figli mentre a muoversi era il contenitore: la cascata era dichiarata e non
   avveniva. Il contenitore qui resta visibile e sono i figli a entrare. */
[data-reveal][data-stagger].is-armed{opacity:1;transform:none}
[data-reveal][data-stagger].is-armed > *{opacity:0;transform:translateY(16px)}
[data-reveal][data-stagger].is-in > *{
  opacity:1;transform:none;
  transition:opacity var(--t-takeoff) var(--ease),transform var(--t-takeoff) var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  [data-reveal][data-stagger].is-armed > *{opacity:1;transform:none}
}

/* disegno della rotta nell'hero */
.draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000)}
.is-drawn .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1900ms var(--ease)}
.pulse{animation:hp-pulse 3.4s var(--ease) infinite}
@keyframes hp-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.25)}}

/* passaggio fra pagine: nativo del browser, nessuna libreria, e dove non c'e'
   supporto semplicemente non accade nulla */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}

/* orfani e vedove: il testo si spezza dove ha senso, dove il browser lo sa fare */
p,li,figcaption{text-wrap:pretty}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal].is-armed{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
  .marquee__track{animation:none}
  @view-transition{navigation:none}
}

/* ---------------------------------------------------------------- due colonne divise da un filo */
/* Due strade, due compromessi: la colonna deve mostrare lo SCAMBIO — cosa
   ottieni e cosa paghi. Prima c'erano una pastiglia decorativa, un numero
   d'ordine per due voci affiancate e tre righe rosse che ripetevano parola per
   parola il paragrafo sopra: volume senza informazione. Restano il nome del
   modello e i due termini del baratto, con la cifra a fare da ancora. */
/* ----------------------------------------------------- «Il problema»: le due strade
   Com'era: due colonne nude separate da un filetto, con una riga spessa in testa.
   Due blocchi di testo appoggiati sul bianco, senza niente del linguaggio che il
   sito usa in tutte le altre sezioni (scheda con bordo, cerchio con icona, titolo
   che ancora, corpo staccato). E la riga di testata della colonna destra sporgeva
   di 56 px oltre il suo testo, perche' border-top e padding-left vivono sullo
   stesso riquadro: a sinistra 538 px di riga su 538 di contenuto, a destra 535 su 479.
   Com'e': due schede .panel come «Per chi» e «Cosa resta tuo», con dentro lo
   scambio guadagno/prezzo. Il cerchio e' .dial--plain, neutro: queste due strade
   non sono il prodotto, e il rosso sta gia' dove serve, su «Cosa paghi». */
/* Le colonne sono dichiarate qui e non lasciate all'auto-fit di .grid--2: il punto
   in cui la griglia andava a capo (deciso dal contenuto) e il punto in cui la media
   query smontava il subgrid (820 px, scelto a mano) non coincidevano, e a 820 px le
   schede erano ancora affiancate ma «Cosa paghi» scivolava di 26 px fra le due. */
.strade{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:20px;row-gap:0;grid-template-rows:auto auto auto auto}
.strade .panel{display:grid;grid-row:span 4;grid-template-rows:subgrid;
  align-content:start;padding:clamp(26px,3vw,34px)}
.strade .h-card{font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.1vw,24px);letter-spacing:-.02em;margin:18px 0 22px}
.strade .scambio{grid-row:span 2;grid-template-rows:subgrid;gap:0}

.scambio{margin:0;display:grid;gap:22px}
.scambio__r + .scambio__r{padding-top:22px;border-top:1px solid var(--hairline)}
.scambio dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.scambio dd{margin:0;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
/* La cifra sta su una riga sua. In float il testo le si avvolgeva intorno per
   due righe e la terza tornava a bandiera sul margine: sembrava un errore di
   impaginazione, non una scelta. */
.scambio__n{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,3vw,34px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px}

/* La polarita': «Cosa ottieni» e «Cosa paghi» sono opposti e avevano lo stesso
   identico stile. Si usa il vocabolario che il sito ha gia' — i due segni e i due
   colori semantici — e il filetto fra le due righe diventa rosso: e' li' che si
   gira dal guadagno al prezzo. Tutto limitato a .strade: .scambio vive anche in
   servizi.html, dentro .panel--lg, con un'altra semantica. */
.strade .scambio dt{display:flex;align-items:center;gap:8px}
.strade .scambio__r{padding-bottom:22px}
.strade .scambio__r:last-child{padding-bottom:0}
.strade .scambio__r + .scambio__r{padding-top:22px;border-top-color:rgba(192,72,60,.32)}
.strade .scambio__r:first-child dt{color:var(--em-600)}
.strade .scambio__r:first-child dd{color:var(--ink-3)}
.strade .scambio__r + .scambio__r dt{color:var(--danger)}
.strade .scambio__r + .scambio__r dd{color:var(--ink-2)}
.strade .scambio__n{margin-bottom:12px}

/* Un solo punto di rottura, e vale per TUTTO: colonne, subgrid e spazio fra le
   schede si smontano insieme. 760 px perche' sotto due schede varrebbero meno di
   340 px l'una. */
@media (max-width:760px){
  .strade{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px}
  .strade .panel{display:block;grid-row:auto}
  .strade .scambio{display:grid;gap:22px}
  .strade .scambio__r{padding-bottom:0;padding-top:0}
  .strade .scambio__r + .scambio__r{padding-top:22px}
}

/* ---------------------------------------------------------------- dichiarazione a tutta fascia */
.statement{position:relative;overflow:hidden;isolation:isolate}
.statement__in{position:relative;z-index:1;padding-block:clamp(60px,7vw,88px);padding-right:calc(24px + 32%)}
.statement__q{font-family:var(--font-display);font-weight:500;
  font-size:clamp(24px,3.2vw,38px);line-height:1.28;letter-spacing:-0.02em;color:#FFFFFF}
.statement__q em{font-style:normal;color:var(--em-300)}
.motif{position:absolute;pointer-events:none;z-index:0}
.motif--tr{right:-3%;top:-12%;width:min(44vw,460px);opacity:.62}
.motif--br{right:3%;top:50%;translate:0 -50%;width:min(20vw,220px);opacity:.5}
/* Su Contatti la colonna destra E' il modulo: non esiste una fascia da
   riservare al decoro, quindi il motivo scende in basso a sinistra, sotto la
   colonna di testo, dove non incontra nulla. */
.motif--contact{left:0;bottom:0;width:min(34vw,380px);opacity:.42}
@media (max-width:1000px){.motif--contact{display:none}}
.cta-runway{display:flex;justify-content:center;margin-top:clamp(30px,4vw,48px)}
.cta-runway img{width:min(62vw,440px);height:auto;opacity:.5}

/* ---------------------------------------------------------------- contatti: form sul fondo scuro */
/* Tolte le tre pastiglie di rassicurazione — ripetevano la riga sopra — la
   colonna sinistra e' molto piu' corta del modulo: con align-items:start
   restava appesa in alto e sotto si apriva mezzo schermo di vuoto. Centrata,
   il vuoto si distribuisce e le due colonne si guardano. */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(36px,5vw,64px);align-items:center}
@media (max-width:940px){.contact{align-items:start}}
@media (max-width:940px){.contact{grid-template-columns:1fr}}
.direct{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.direct .foot__t{margin-bottom:8px}
.direct a{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--em-300);text-decoration:none}
.direct a:hover{color:#6FE0BD}

/* ---------------------------------------------------------------- split testo + motivo */
.split-viz{display:grid;place-items:center;padding:clamp(24px,4vw,48px);
  background:var(--navy-800);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.split-viz img{width:100%;max-width:340px;height:auto}

/* ---------------------------------------------------------------- motivi su schermo stretto
   Regola del brand: il motivo non va MAI sopra il testo. Su mobile non c'e'
   margine laterale in cui farlo respirare, quindi si toglie invece di
   sovrapporlo alla colonna di lettura. */
@media (max-width:1000px){
  .pagehead__viz,.motif--br,.motif--tr,.foot__scie{display:none}
  /* NON zero. Azzerando la fascia riservata al decoro si azzerava anche il margine
     normale di .wrap, e il titolo delle pagine interne arrivava A FILO dello schermo
     a destra: misurato 0 px su servizi, percorso e le gemelle inglesi, su ogni
     telefono e su ogni tablet fino a 1000 px. */
  .pagehead__in,.statement__in{padding-right:24px}
}
@media (max-width:600px){
  .cta-runway img{width:78vw;opacity:.4}
}

/* ---------------------------------------------------------------- bersagli tattili
   Sul touch un comando alto 24px si sbaglia. I link dentro la prosa restano
   come sono: le WCAG li escludono proprio perche' stanno dentro una frase. */
@media (max-width:960px){
  .nav__links .nav__link{min-height:44px;display:flex;align-items:center;width:100%}
  .nav__links .btn{min-height:44px}
  .lang > *{min-height:34px;display:inline-flex;align-items:center}
}
@media (max-width:760px){
  .foot__links a,.foot__btn{min-height:40px;display:flex;align-items:center}
  .foot__bar a{min-height:36px;display:inline-flex;align-items:center}
  .link-more{min-height:44px;align-items:center}
}

/* --------------------------------------------- telefono e tablet, audit 15/09/2026
   Provato su 12 pagine per 17 formati reali, da 320 a 1366 px, verticale e
   orizzontale. La struttura regge: zero sbordamenti, zero contenuto tagliato,
   zero decoro sopra il testo, zero immagini rotte. Restava questo.
   Si usa (pointer:coarse) e non la larghezza, perche' un iPad in orizzontale e'
   largo 1366 px ed e' comunque un dito: il blocco qui sopra, legato alle
   larghezze, lasciava scoperti tutti i tablet sopra i 960 px. */
@media (pointer:coarse){
  /* iOS ingrandisce da solo quando si tocca un campo con testo sotto i 16px, e la
     pagina resta ingrandita. Il modulo di contatto ne aveva sette a 15px. */
  .field input,.field select,.field textarea{font-size:16px}
  /* Bersagli sotto i 44px: i link della barra erano 40x33 sui tablet a barra
     distesa, lo scambio lingua 40x28, i bottoni dei cookie 40 — ed e' la prima
     cosa che si tocca — e la casella di consenso 17x17. */
  .nav__link{min-height:44px;display:inline-flex;align-items:center}
  .nav__logo{min-height:44px}
  .lang > *{min-height:44px;min-width:44px;justify-content:center}
  .link-more{min-height:44px;display:inline-flex;align-items:center}
  .ck .btn,.ck__link{min-height:44px}
  .consent input{width:24px;height:24px;margin-top:1px}
  /* «Guide» era largo 39px: alto 44 ma stretto. */
  .nav__link{padding-inline:6px}
  .crumbs a{min-height:44px;display:inline-flex;align-items:center}
  button[data-ck-open]{min-height:44px;display:inline-flex;align-items:center}
  /* Le etichette in monospazio restavano a 11px. Legato al dito e non alla
     larghezza: un telefono in orizzontale e' largo 667px e resta un telefono. */
  .scambio dt,.foot__t,.pill,.mono{font-size:12px}
  /* .compare thead th e .doc thead th valgono 0,1,2: una regola su «th» non li tocca. */
  .compare thead th,.doc thead th{font-size:12px}
}

/* Su mobile 100vh comprende la barra degli indirizzi del browser: l'hero poteva
   nascere piu' alto dello schermo davvero visibile. svh e' l'altezza piccola. */
@supports (height:100svh){
  .hero{min-height:min(88svh,860px)}
}