/* Zenith Flow — sito vetrina
   Impianto: un cielo "Alta quota" in apertura (sole, vetta, scheda di vetro),
   poi sezioni larghe su fondo quieto. Un solo accento blu; verde e rosso stanno
   soltanto sui numeri; l'oro è riservato al sole. Come nell'app. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/font/nunito-latin.woff2") format("woff2");
}

:root {
  /* colore */
  --cielo-1: #F4FAFF;
  --cielo-2: #D6E8FA;
  --fondo: #F5F8FC;
  --fondo-2: #E9F0F8;
  --carta: rgba(255, 255, 255, .74);
  --carta-solida: #FFFFFF;
  --inchiostro: #16233F;
  --inchiostro-2: #4A5978;
  --linea: rgba(22, 35, 63, .13);
  --accento: #2F5FA8;
  --accento-forte: #23498A;
  --su-accento: #FFFFFF;
  --sole: #E8A415;
  --sole-alone: rgba(232, 164, 21, .30);
  --avviso: #8A6000;
  --positivo: #1E7A46;
  --negativo: #C8322E;
  --monte-1: #62A8E6;
  --monte-2: #2F7CCB;
  --monte-3: #1D4F99;
  --crinale-1: #C3DDF5;
  --crinale-2: #9CC6EC;
  --notte-1: #14285C;
  --notte-2: #1F4AA3;
  --su-notte: #F1F6FF;
  --su-notte-2: #C3D3F0;
  --ombra: 0 1px 2px rgba(20, 40, 92, .06), 0 12px 32px -12px rgba(20, 40, 92, .22);

  /* tipografia */
  --tondo: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --testo: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.35rem, 1.4rem + 3.9vw, 4.1rem);
  --t-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem);
  --t-h3: 1.1875rem;
  --t-corpo: 1.0625rem;
  --t-piccolo: .9rem;
  --t-etichetta: .78rem;

  /* misure */
  --largo: 1120px;
  --gronda: clamp(18px, 4.5vw, 44px);
  --raggio: 22px;
  --raggio-s: 14px;
  --sezione: clamp(64px, 9vw, 120px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cielo-1: #040915;
    --cielo-2: #0F2452;
    --fondo: #070C1A;
    --fondo-2: #0C1529;
    --carta: rgba(255, 255, 255, .07);
    --carta-solida: #101B35;
    --inchiostro: #ECF1FA;
    --inchiostro-2: #A9B7D2;
    --linea: rgba(255, 255, 255, .13);
    --accento: #6FA0E8;
    --accento-forte: #93BAF4;
    --su-accento: #071226;
    --sole: #F5C144;
    --sole-alone: rgba(245, 193, 68, .26);
    --avviso: #F5C144;
    --positivo: #3AD07E;
    --negativo: #FF6B63;
    --monte-1: #17408E;
    --monte-2: #0E2A63;
    --monte-3: #07122B;
    --crinale-1: #132448;
    --crinale-2: #18305F;
    --notte-1: #0B1836;
    --notte-2: #15327A;
    --su-notte: #F1F6FF;
    --su-notte-2: #B9C9E8;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cielo-1: #040915;
  --cielo-2: #0F2452;
  --fondo: #070C1A;
  --fondo-2: #0C1529;
  --carta: rgba(255, 255, 255, .07);
  --carta-solida: #101B35;
  --inchiostro: #ECF1FA;
  --inchiostro-2: #A9B7D2;
  --linea: rgba(255, 255, 255, .13);
  --accento: #6FA0E8;
  --accento-forte: #93BAF4;
  --su-accento: #071226;
  --sole: #F5C144;
  --sole-alone: rgba(245, 193, 68, .26);
  --avviso: #F5C144;
  --positivo: #3AD07E;
  --negativo: #FF6B63;
  --monte-1: #17408E;
  --monte-2: #0E2A63;
  --monte-3: #07122B;
  --crinale-1: #132448;
  --crinale-2: #18305F;
  --notte-1: #0B1836;
  --notte-2: #15327A;
  --su-notte: #F1F6FF;
  --su-notte-2: #B9C9E8;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--accento); text-underline-offset: .18em; }
a:hover { color: var(--accento-forte); }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--tondo); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--t-display); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); font-weight: 800; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.fascia { padding-inline: var(--gronda); }
.dentro { max-width: var(--largo); margin-inline: auto; }
.sezione { padding-block: var(--sezione); }
section[id] { scroll-margin-top: 28px; }
.occhiello {
  font-family: var(--tondo);
  font-size: var(--t-etichetta);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accento);
}
.intro { display: grid; gap: 14px; max-width: 43rem; }
.intro p { color: var(--inchiostro-2); font-size: 1.125rem; }
.salta {
  position: absolute; left: -999px; top: 8px; z-index: 50;
  background: var(--carta-solida); color: var(--inchiostro); padding: 10px 16px; border-radius: 10px;
}
.salta:focus { left: 8px; }

.plus {
  display: inline-block;
  font-family: var(--tondo);
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1; padding: 4px 8px 3px; border-radius: 999px;
  color: var(--avviso);
  border: 1.5px solid currentColor;
  vertical-align: .18em;
}

/* ---------- avviso lingua ---------- */
.avviso-lingua {
  background: var(--notte-1); color: var(--su-notte);
  font-size: var(--t-piccolo);
  padding: 10px var(--gronda);
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.avviso-lingua a { color: var(--su-notte); font-weight: 700; }
.avviso-lingua button {
  font: inherit; color: var(--su-notte-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em; padding: 2px 4px;
}

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 20;
  padding-inline: var(--gronda);
  background: color-mix(in srgb, var(--cielo-1) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.testata.staccata { border-bottom-color: var(--linea); }
.testata .dentro { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.marchio {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tondo); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em;
  color: var(--inchiostro); text-decoration: none; margin-right: auto;
}
.marchio:hover { color: var(--inchiostro); }
.marchio img { width: 34px; height: 34px; }
.icona-scura { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icona-chiara { display: none; }
  :root:not([data-theme="light"]) .icona-scura { display: block; }
}
:root[data-theme="dark"] .icona-chiara { display: none; }
:root[data-theme="dark"] .icona-scura { display: block; }

.menu { display: flex; gap: 26px; }
.menu a { color: var(--inchiostro-2); text-decoration: none; font-size: .96rem; font-weight: 500; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--inchiostro); }

.lingue { position: relative; }
.lingue summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: var(--inchiostro-2);
  padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px;
}
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary:hover { color: var(--inchiostro); }
.lingue summary svg { width: 16px; height: 16px; }
.lingue ul {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--carta-solida); border: 1px solid var(--linea); border-radius: var(--raggio-s);
  box-shadow: var(--ombra); padding: 6px; z-index: 30;
}
.lingue li a {
  display: block; padding: 9px 12px; border-radius: 9px;
  color: var(--inchiostro); text-decoration: none; font-size: .95rem;
}
.lingue li a:hover { background: var(--fondo-2); }
.lingue li a[aria-current="true"] { font-weight: 700; color: var(--accento); }

/* ---------- pulsanti ---------- */
.azioni { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.pulsante {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tondo); font-weight: 800; font-size: 1.02rem; line-height: 1.2;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  background: var(--accento); color: var(--su-accento);
  box-shadow: 0 10px 24px -12px var(--accento);
}
a.pulsante:hover { background: var(--accento-forte); color: var(--su-accento); }
.pulsante.presto {
  background: var(--carta); color: var(--inchiostro);
  border: 1px solid var(--linea); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pulsante.presto::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sole); box-shadow: 0 0 0 5px var(--sole-alone);
}
.collegamento { font-weight: 600; text-decoration: none; }
.collegamento::after { content: " →"; }
/* Badge ufficiale di Apple: mai modificato, e con lo spazio libero attorno che Apple chiede
   (un quarto della sua altezza): 12 + 2 px sopra e sotto, 18 + 4 px di lato. */
.badge-store { display: inline-block; line-height: 0; margin: 2px 4px 2px 0; }
.badge-store img { height: 54px; width: auto; }

/* ---------- apertura ---------- */
.apertura {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 78%);
  padding: clamp(40px, 6vw, 76px) var(--gronda) 0;
  margin-top: -65px; padding-top: calc(65px + clamp(40px, 6vw, 76px));
}
.scena { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sole {
  position: absolute; left: 56%; top: 15%;
  width: clamp(58px, 6.4vw, 92px); aspect-ratio: 1; border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle at 38% 32%, #FFE39A 0%, var(--sole) 58%);
  box-shadow: 0 0 0 clamp(14px, 1.8vw, 26px) var(--sole-alone), 0 0 90px 30px var(--sole-alone);
  animation: sorge 2.6s cubic-bezier(.16, .8, .24, 1) both;
}
@keyframes sorge { from { transform: translateY(330px); } to { transform: translateY(0); } }
.monte { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(210px, 27vw, 350px); }
.monte .c1 { fill: var(--crinale-1); }
.monte .c2 { fill: var(--crinale-2); }
.monte .s1 { stop-color: var(--monte-1); }
.monte .s2 { stop-color: var(--monte-2); }
.monte .s3 { stop-color: var(--monte-3); }
.monte .vena { fill: none; stroke: #FFFFFF; stroke-opacity: .14; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.apertura-griglia {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 6vw, 88px); align-items: end;
}
.apertura-testo { display: grid; gap: 22px; padding-bottom: clamp(110px, 17vw, 230px); }
.apertura-testo .sotto { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--inchiostro-2); max-width: 34rem; }
.apertura-testo .nota { font-size: var(--t-piccolo); color: var(--inchiostro-2); max-width: 30rem; }
.apertura-visuale { padding-bottom: clamp(36px, 5vw, 64px); display: grid; justify-items: end; }

/* scheda di vetro "Disponibile" */
.scheda {
  width: min(100%, 400px);
  background: var(--carta);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--carta-solida) 60%, transparent);
  border-radius: 30px; box-shadow: var(--ombra);
  padding: 24px 24px 16px;
  display: grid; gap: 18px;
}
.scheda .etichetta { font-family: var(--tondo); font-weight: 700; font-size: .92rem; color: var(--inchiostro-2); }
.scheda .cifra { font-family: var(--tondo); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2vw, 2.9rem); line-height: 1; letter-spacing: -.02em; margin-top: 6px; }
.scheda .fino { font-size: var(--t-piccolo); color: var(--inchiostro-2); margin-top: 8px; }
.elenco { border-top: 1px solid var(--linea); padding-top: 14px; display: grid; gap: 4px; }
.elenco .titoletto { font-family: var(--tondo); font-weight: 700; font-size: .92rem; color: var(--inchiostro-2); margin-bottom: 4px; }
.elenco li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 7px 0; }
.elenco .voce { font-weight: 600; font-size: .98rem; }
.elenco .quando { grid-column: 1; font-size: .8rem; color: var(--inchiostro-2); }
.elenco .importo { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 700; font-size: .98rem; }
.importo.meno { color: var(--negativo); }
.importo.piu { color: var(--positivo); }
.esempio { font-size: .76rem; color: var(--inchiostro-2); text-align: center; margin-top: 2px; }

/* cornice per gli screenshot veri */
.telefono {
  width: min(100%, 300px); aspect-ratio: 9 / 19.5; margin: 0;
  border-radius: 46px; padding: 10px;
  /* la scocca resta scura in entrambi i temi, come un telefono vero */
  background: #0B1220;
  box-shadow: var(--ombra), inset 0 0 0 1.5px rgba(255, 255, 255, .16);
}
.telefono picture { display: block; width: 100%; height: 100%; }
.telefono img { width: 100%; height: 100%; object-fit: cover; border-radius: 37px; }

/* Dispositivi Apple ufficiali (sorgente/risorse/cornice-mac, -ipad, -duo, -iphone: schermo trasparente).
   L'immagine del dispositivo sta sopra, intatta: niente ombre, ritagli, inclinazioni o effetti,
   e niente che la copra, come chiedono le linee guida di Apple. Lo screenshot sta sotto,
   esattamente nell'apertura dello schermo; il filo nero attorno (1 px, nascosto dalla cornice)
   evita che tra schermo e cornice si veda lo sfondo della pagina.
   Misure in percentuale dell'immagine originale:
     iPhone      1350 × 2760, schermo 1206 × 2622 a (72, 69), angoli arrotondati (iPhone 16 Pro, 6,3")
     iPad        3000 × 2300, schermo 2752 × 2064 a (124, 118)                  (iPad Pro 13", dal 22 ottobre 2026)
     iPad vert.  2300 × 3000, schermo 2064 × 2752 a (118, 124)                  (lo stesso, in verticale: cornice-ipad-verticale)
     iPhone Duo  3093 × 2247, schermo 2853 × 2007 a (120, 120)                  (aperto, schermo interno, orizzontale)
     Duo chiuso  1574 × 2194, schermo 1398 × 2034 a (88, 80)                    (schermo esterno, verticale: cornice-duo-esterno)
     Mac         3220 × 2100, schermo 2408 × 1506 a (406, 297)
   Le cornici tenute da parte (Duo verticale e chiuso orizzontale, iPad 11") stanno in sorgente/cornici-scorta/. */
.apparecchio { position: relative; margin: 0; }
.apparecchio picture { position: absolute; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #000; }
.apparecchio picture img { width: 100%; height: 100%; object-fit: cover; }
.apparecchio .cornice { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.apparecchio.iphone { aspect-ratio: 1350 / 2760; }
.apparecchio.iphone picture { left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%; border-radius: 12.44% / 5.72%; }
.apparecchio.ipad { aspect-ratio: 3000 / 2300; }
.apparecchio.ipad picture { left: 4.1333%; top: 5.1304%; width: 91.7333%; height: 89.7391%; }
.apparecchio.ipad-verticale { aspect-ratio: 2300 / 3000; }
.apparecchio.ipad-verticale picture { left: 5.1304%; top: 4.1333%; width: 89.7391%; height: 91.7333%; }
.apparecchio.duo { aspect-ratio: 3093 / 2247; }
.apparecchio.duo picture { left: 3.8797%; top: 5.3405%; width: 92.2405%; height: 89.3191%; }
.apparecchio.duo-esterno { aspect-ratio: 1574 / 2194; }
.apparecchio.duo-esterno picture { left: 5.5909%; top: 3.6463%; width: 88.8183%; height: 92.7074%; }
.apparecchio.mac { aspect-ratio: 3220 / 2100; }
.apparecchio.mac picture { left: 12.6087%; top: 14.1429%; width: 74.7826%; height: 71.7143%; }
.riga-visuale > .apparecchio, .apertura-visuale > .apparecchio { width: min(100%, 320px); }

/* ---------- il Disponibile ---------- */
.conto {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  background: var(--carta-solida); border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra); overflow: hidden;
}
.conto > div { padding: 24px 22px; display: grid; gap: 6px; align-content: start; border-left: 1px solid var(--linea); }
.conto > div:first-child { border-left: 0; }
.conto .segno { font-family: var(--tondo); font-weight: 800; font-size: 1.3rem; line-height: 1; color: var(--inchiostro-2); height: 1.3rem; }
.conto .nome { font-size: var(--t-piccolo); color: var(--inchiostro-2); line-height: 1.35; }
.conto .valore { font-family: var(--tondo); font-weight: 800; font-size: clamp(1.15rem, .9rem + .9vw, 1.5rem); }
.conto .esito { background: linear-gradient(160deg, var(--notte-1), var(--notte-2)); color: var(--su-notte); border-left: 0; }
.conto .esito .segno, .conto .esito .nome { color: var(--su-notte-2); }
.conto .esito .valore { color: var(--su-notte); }
.dopo-conto { margin-top: 18px; display: flex; gap: 14px; align-items: flex-start; color: var(--inchiostro-2); max-width: 46rem; }
.dopo-conto::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: .45em; border-radius: 50%;
  background: var(--sole); box-shadow: 0 0 0 5px var(--sole-alone);
}

/* ---------- righe funzione ---------- */
.righe { display: grid; gap: clamp(64px, 9vw, 120px); }
.riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.riga:nth-child(even) .riga-visuale { order: -1; }
.riga-testo { display: grid; gap: 16px; }
.riga-testo p { color: var(--inchiostro-2); }
.punti { display: grid; gap: 10px; margin-top: 6px; }
.punti li { position: relative; padding-left: 28px; }
.punti li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--accento); border-bottom: 2.5px solid var(--accento);
  transform: rotate(-45deg) translateY(-50%);
}
.riga-visuale { display: grid; justify-items: center; }
.tavola {
  width: 100%; background: var(--carta-solida); border: 1px solid var(--linea);
  border-radius: var(--raggio); box-shadow: var(--ombra); padding: 22px;
}
.tavola .elenco { border-top: 0; padding-top: 0; }
.tavola .totale {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 14px;
  font-family: var(--tondo); font-weight: 800;
}
.tavola .totale span:first-child { font-family: var(--testo); font-weight: 500; font-size: var(--t-piccolo); color: var(--inchiostro-2); }

/* grafico del simulatore */
.grafico { width: 100%; height: auto; }
.grafico .griglia { stroke: var(--linea); stroke-width: 1; }
.grafico .asse { fill: var(--inchiostro-2); font: 500 12px var(--testo); }
.grafico .area { fill: var(--accento); fill-opacity: .12; }
.grafico .linea { fill: none; stroke: var(--accento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico .punto { fill: var(--carta-solida); stroke: var(--accento); stroke-width: 2.5; }
.grafico .nota-testo { fill: var(--inchiostro); font: 600 12px var(--testo); }
.grafico .nota-linea { stroke: var(--inchiostro-2); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico .oggi { fill: var(--sole); stroke: var(--carta-solida); stroke-width: 2.5; }

/* illustrazione dell'Indice Zenith: lo stesso cielo dell'apertura, il sole sopra la vetta,
   il numero come nella scheda dell'app. Le quattro misure usano un solo colore: dicono
   quanto, non "bene o male" (verde e rosso restano ai soli importi). */
.tavola.indice { display: grid; gap: 18px; }
.indice-cielo {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 18px;
  min-height: 224px; padding: 20px 22px;
  background: linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 78%);
  border: 1px solid var(--linea);
}
.indice-cielo .monte { height: 36%; z-index: -1; }
.indice-sole {
  position: absolute; left: 68%; top: 15%; z-index: -1;
  width: 40px; aspect-ratio: 1; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle at 38% 32%, #FFE39A 0%, var(--sole) 58%);
  box-shadow: 0 0 0 11px var(--sole-alone), 0 0 56px 18px var(--sole-alone);
}
.indice-nome { font-family: var(--tondo); font-weight: 700; font-size: .92rem; color: var(--inchiostro-2); }
.indice-valore { font-family: var(--tondo); font-weight: 800; font-size: clamp(3rem, 2.3rem + 2.6vw, 3.9rem); line-height: 1; letter-spacing: -.03em; margin-top: 6px; }
.indice-valore small { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--inchiostro-2); }
.indice-stato { margin-top: 8px; font-weight: 600; font-size: .95rem; }
.indice-perche .titoletto { font-family: var(--tondo); font-weight: 700; font-size: .92rem; color: var(--inchiostro-2); display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.indice-perche ul { display: grid; gap: 11px; }
.indice-perche li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 14px; align-items: center; font-size: .95rem; font-weight: 600; }
.misura { height: 6px; border-radius: 99px; background: var(--fondo-2); overflow: hidden; }
.misura i { display: block; height: 100%; border-radius: 99px; background: var(--accento); }

/* widget */
.widget-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 420px); }
.widget {
  aspect-ratio: 1; border-radius: 26px; padding: 16px; display: grid; align-content: space-between; gap: 8px;
  background: var(--carta-solida); border: 1px solid var(--linea); box-shadow: var(--ombra);
  font-size: .82rem; min-width: 0;
}
.widget .w-nome { font-family: var(--tondo); font-weight: 700; color: var(--inchiostro-2); display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.widget .w-cifra { font-family: var(--tondo); font-weight: 800; font-size: clamp(1.05rem, .8rem + 1.2vw, 1.45rem); line-height: 1.05; letter-spacing: -.01em; }
.widget .w-sotto { color: var(--inchiostro-2); font-size: .76rem; line-height: 1.3; }
.widget.cielo { background: linear-gradient(170deg, var(--notte-1), var(--notte-2)); border-color: transparent; color: var(--su-notte); }
.widget.cielo .w-nome, .widget.cielo .w-sotto { color: var(--su-notte-2); }
.widget .w-sole { width: 16px; height: 16px; border-radius: 50%; background: var(--sole); box-shadow: 0 0 0 4px var(--sole-alone); flex: none; }
.w-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-azioni span {
  aspect-ratio: 1; border-radius: 16px; background: var(--fondo-2); color: var(--accento);
  display: grid; place-items: center; font-family: var(--tondo); font-weight: 800; font-size: 1.5rem; line-height: 1;
}
.w-barra { height: 8px; border-radius: 99px; background: var(--fondo-2); overflow: hidden; }
.w-barra i { display: block; height: 100%; border-radius: 99px; background: var(--accento); }

/* ---------- su ogni schermo: un gruppo alla volta ----------
   Tre voci: Mac, iPad e iPhone. L'ultima mostra l'iPhone accanto all'iPhone Duo aperto, nelle proporzioni
   vere (immagini: iPhone 73,6 mm, Duo 170,5 mm) e con le basi sulla stessa linea. Niente script: tre pulsanti
   radio nascosti e il CSS mostra il gruppo con lo stesso posto del pulsante scelto (input n → gruppo n).
   I gruppi stanno tutti nella stessa cella, così l'altezza del palco non cambia. --m è la larghezza del Mac;
   gli altri sono dimensionati per stare bene nello stesso spazio. Nel kit stampa i dispositivi stanno invece
   uno sotto l'altro (.dispositivi, senza selettore). */
.palco { container-type: inline-size; margin-top: clamp(20px, 4vw, 40px); display: grid; gap: clamp(24px, 4vw, 40px); justify-items: center; }
.palco > input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden; }
.selettore { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--carta-solida); border: 1px solid var(--linea); }
.selettore label {
  padding: 9px 18px; border-radius: 999px; cursor: pointer; font-family: var(--tondo); font-weight: 700; font-size: .95rem;
  color: var(--inchiostro-2); transition: background .2s, color .2s; white-space: nowrap;
}
.selettore label:hover { color: var(--inchiostro); }
.palco > input:nth-of-type(1):checked ~ .selettore label:nth-child(1),
.palco > input:nth-of-type(2):checked ~ .selettore label:nth-child(2),
.palco > input:nth-of-type(3):checked ~ .selettore label:nth-child(3) { background: var(--accento); color: var(--su-accento); }
.palco > input:nth-of-type(1):focus-visible ~ .selettore label:nth-child(1),
.palco > input:nth-of-type(2):focus-visible ~ .selettore label:nth-child(2),
.palco > input:nth-of-type(3):focus-visible ~ .selettore label:nth-child(3) { outline: 2px solid var(--accento); outline-offset: 2px; }
.ribalta { --m: min(100cqw, 820px); display: grid; justify-items: center; align-items: end; width: 100%; }
.ribalta .gruppo { grid-area: 1 / 1; margin: 0; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--m) * .04); opacity: 0; visibility: hidden; transition: opacity .35s; }
.palco > input:nth-of-type(1):checked ~ .ribalta .gruppo:nth-child(1),
.palco > input:nth-of-type(2):checked ~ .ribalta .gruppo:nth-child(2),
.palco > input:nth-of-type(3):checked ~ .ribalta .gruppo:nth-child(3) { opacity: 1; visibility: visible; }
.ribalta .apparecchio.mac { width: var(--m); }
.ribalta .apparecchio.ipad { width: calc(var(--m) * .84); }
.ribalta .apparecchio.iphone { width: calc(var(--m) * .319); }
/* la coppia iPad: orizzontale 0,54 e verticale 0,414 (l'immagine verticale è larga 0,7667 di quella orizzontale);
   dai 900 px di palco 0,62 e 0,475 (il verticale resta sotto l'altezza del Mac); margini inferiori 1,22 % e 1,0 % */
.ribalta .coppia .apparecchio.ipad { width: calc(var(--m) * .54); translate: 0 calc(var(--m) * .0051); }
.ribalta .coppia .apparecchio.ipad-verticale { width: calc(var(--m) * .414); translate: 0 calc(var(--m) * .0054); }
@container (min-width: 900px) {
  .ribalta .coppia .apparecchio.ipad { width: calc(var(--m) * .62); translate: 0 calc(var(--m) * .0058); }
  .ribalta .coppia .apparecchio.ipad-verticale { width: calc(var(--m) * .475); translate: 0 calc(var(--m) * .0062); }
}
/* la coppia iPhone: iPhone 0,285 e Duo 0,66 (stesso rapporto delle misure vere); ogni immagine scende del suo margine
   trasparente inferiore (iPhone 0,94 % dell'altezza, Duo 2,58 %) così le basi coincidono */
.ribalta .coppia .apparecchio.iphone { width: calc(var(--m) * .285); translate: 0 calc(var(--m) * .0055); }
.ribalta .coppia .apparecchio.duo { width: calc(var(--m) * .66); translate: 0 calc(var(--m) * .0124); }
/* il trio con il Duo chiuso in mezzo (immagine 86,5 mm, margine inferiore 1,46 %): iPhone 0,205, chiuso 0,241,
   aperto 0,474; dai 900 px di palco in su più grandi (0,25 · 0,294 · 0,58), perché la ribalta è più larga del Mac */
.ribalta .trio .apparecchio.iphone { width: calc(var(--m) * .205); translate: 0 calc(var(--m) * .0039); }
.ribalta .trio .apparecchio.duo-esterno { width: calc(var(--m) * .241); translate: 0 calc(var(--m) * .0049); }
.ribalta .trio .apparecchio.duo { width: calc(var(--m) * .474); translate: 0 calc(var(--m) * .0089); }
@container (min-width: 900px) {
  .ribalta .trio .apparecchio.iphone { width: calc(var(--m) * .25); translate: 0 calc(var(--m) * .0048); }
  .ribalta .trio .apparecchio.duo-esterno { width: calc(var(--m) * .294); translate: 0 calc(var(--m) * .0060); }
  .ribalta .trio .apparecchio.duo { width: calc(var(--m) * .58); translate: 0 calc(var(--m) * .0109); }
}
.dispositivo .apparecchio { width: 100%; }
@container (max-width: 520px) {
  .selettore label { padding: 8px 12px; font-size: .85rem; }
  .ribalta .apparecchio.ipad { width: calc(var(--m) * .92); }
  .ribalta .apparecchio.iphone { width: calc(var(--m) * .42); }
  /* sul telefono tre dispositivi verrebbero minuscoli: resta la coppia iPhone + Duo aperto; e l'iPad resta solo in orizzontale */
  .ribalta .trio .apparecchio.duo-esterno { display: none; }
  .ribalta .coppia .apparecchio.ipad-verticale { display: none; }
  .ribalta .coppia .apparecchio.ipad { width: calc(var(--m) * .92); translate: none; }
  .ribalta .trio .apparecchio.iphone { width: calc(var(--m) * .285); translate: 0 calc(var(--m) * .0055); }
  .ribalta .trio .apparecchio.duo { width: calc(var(--m) * .66); translate: 0 calc(var(--m) * .0124); }
}
/* kit stampa: le stesse figure, con la didascalia, una sotto l'altra */
.dispositivi { display: grid; gap: 40px; justify-items: center; width: 100%; }
.dispositivi .dispositivo { margin: 0; display: grid; justify-items: center; gap: 18px; width: min(100%, 640px); }
.dispositivi .dispositivo.ipad { width: min(100%, 560px); }
.dispositivi .dispositivo.ipad-verticale { width: min(100%, 430px); }
.dispositivi .dispositivo.duo { width: min(100%, 440px); }
.dispositivi .dispositivo.duo-esterno { width: min(65%, 258px); }
.dispositivi .dispositivo.iphone { width: min(60%, 220px); }
.dispositivo figcaption { font-family: var(--tondo); font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--inchiostro-2); }

/* ---------- griglia funzioni ---------- */
.fondo-2 { background: var(--fondo-2); }
.funzioni { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; }
.funzione { display: grid; gap: 8px; align-content: start; }
.funzione svg { width: 30px; height: 30px; stroke: var(--accento); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.funzione p { color: var(--inchiostro-2); font-size: .98rem; line-height: 1.55; }

/* ---------- promesse ---------- */
.promesse { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(165deg, var(--notte-1) 10%, var(--notte-2) 100%); color: var(--su-notte); }
.promesse h2 { color: var(--su-notte); }
.promesse .occhiello { color: var(--sole); }
.promesse-griglia { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 5vw, 64px); }
.promessa { display: grid; gap: 10px; align-content: start; border-top: 2px solid rgba(255, 255, 255, .22); padding-top: 20px; }
.promessa h3 { font-size: 1.35rem; color: var(--su-notte); }
.promessa p { color: var(--su-notte-2); }
.promesse .onda { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; z-index: -1; opacity: .5; }
.promesse .onda path { fill: none; stroke: #FFFFFF; stroke-opacity: .12; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- piani ---------- */
.piani { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.piano { background: var(--carta-solida); border: 1px solid var(--linea); border-radius: var(--raggio); padding: clamp(24px, 3.4vw, 36px); display: grid; gap: 20px; align-content: start; }
.piano.in-evidenza { border: 2px solid var(--accento); box-shadow: var(--ombra); }
.piano h3 { font-size: 1.4rem; }
.piano .prezzo { font-family: var(--tondo); font-weight: 800; font-size: clamp(2.2rem, 1.7rem + 1.6vw, 2.9rem); line-height: 1; letter-spacing: -.02em; }
.piano .prezzo-nota { color: var(--inchiostro-2); font-size: var(--t-piccolo); margin-top: 8px; min-height: 1.5em; }
.piano .punti li { font-size: 1rem; }
.sotto-piani { margin-top: 18px; color: var(--inchiostro-2); font-size: var(--t-piccolo); }

/* ---------- domande ---------- */
.domande { margin-top: clamp(24px, 4vw, 40px); max-width: 48rem; border-top: 1px solid var(--linea); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande summary {
  cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
  font-family: var(--tondo); font-weight: 700; font-size: 1.1rem; line-height: 1.35;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
  border-right: 2.5px solid var(--accento); border-bottom: 2.5px solid var(--accento);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.domande details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.domande .risposta { padding: 0 0 20px; color: var(--inchiostro-2); display: grid; gap: 10px; max-width: 44rem; }
.domande .gruppo { font-size: 1.45rem; padding: 46px 0 14px; scroll-margin-top: 84px; }
.domande .gruppo:first-child { padding-top: 28px; }
.domande .gruppo + details { border-top: 1px solid var(--linea); }

/* guida: indice degli argomenti */
.argomenti ul { display: flex; flex-wrap: wrap; gap: 10px; }
.argomenti a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  background: var(--carta-solida); border: 1px solid var(--linea);
  color: var(--inchiostro); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.argomenti a:hover { border-color: var(--accento); color: var(--accento); }
#contatto { scroll-margin-top: 84px; }

/* ---------- chiusura ---------- */
.chiusura { position: relative; isolation: isolate; overflow: hidden; text-align: left; background: linear-gradient(180deg, var(--fondo) 0%, var(--cielo-2) 100%); padding-bottom: clamp(150px, 20vw, 250px); }
.chiusura .intro { gap: 20px; }
.chiusura .monte { height: clamp(110px, 16vw, 210px); }

/* ---------- piede ---------- */
.piede { background: var(--monte-3); color: var(--su-notte-2); font-size: var(--t-piccolo); padding-block: 44px 36px; }
.piede a { color: var(--su-notte); text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede-griglia { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.piede .marchio { color: var(--su-notte); margin: 0 0 10px; }
.piede h2 { font-family: var(--tondo); font-size: var(--t-etichetta); letter-spacing: .12em; text-transform: uppercase; color: var(--su-notte-2); margin-bottom: 12px; font-weight: 800; }
.piede ul { display: grid; gap: 8px; }
.piede .legale { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 6px; font-size: .8rem; }

/* ---------- pagine di testo ---------- */
.pagina-testa { background: linear-gradient(180deg, var(--cielo-1), var(--cielo-2)); margin-top: -65px; padding: calc(65px + clamp(36px, 6vw, 72px)) var(--gronda) clamp(36px, 6vw, 64px); }
.pagina-testa .dentro { display: grid; gap: 14px; }
.pagina-testa h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.pagina-testa p { color: var(--inchiostro-2); max-width: 42rem; font-size: 1.125rem; }
.pagina-testa .data { font-size: var(--t-piccolo); }
.prosa { max-width: 44rem; display: grid; gap: 18px; }
.prosa h2 { font-size: 1.45rem; margin-top: 22px; scroll-margin-top: 90px; }
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { color: var(--inchiostro-2); }
.prosa strong { color: var(--inchiostro); }
.prosa code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; overflow-wrap: anywhere; }
.prosa ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.riquadro {
  background: var(--carta-solida); border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: clamp(20px, 3vw, 30px); display: grid; gap: 12px; max-width: 48rem; box-shadow: var(--ombra);
}
.riquadro h2 { font-size: 1.35rem; }
.riquadro p { color: var(--inchiostro-2); }
.riquadro .posta { font-family: var(--tondo); font-weight: 800; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem); overflow-wrap: anywhere; }
.riquadro ul { display: grid; gap: 8px; }
.riquadro.sintesi ul { padding-left: 0; }
.riquadro.sintesi li { position: relative; padding-left: 28px; color: var(--inchiostro); font-weight: 500; }
.riquadro.sintesi li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--positivo); border-bottom: 2.5px solid var(--positivo);
  transform: rotate(-45deg) translateY(-50%);
}
.pila { display: grid; gap: clamp(32px, 5vw, 48px); }

/* ---------- kit stampa ---------- */
.kit h3 { font-size: 1.1rem; margin-top: 10px; }
.kit .firma { font-family: var(--tondo); font-weight: 700; color: var(--inchiostro); }
.kit #in-breve, .kit #scheda, .kit #origine, .kit #immagini { scroll-margin-top: 84px; }
.dati > div { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-top: 1px solid var(--linea); }
.dati > div:first-child { border-top: 0; padding-top: 2px; }
.dati > div:last-child { padding-bottom: 0; }
.dati dt { font-weight: 600; color: var(--inchiostro); }
.dati dd { margin: 0; color: var(--inchiostro-2); overflow-wrap: anywhere; }
.immagini-kit { display: grid; gap: 18px; }
.immagini-kit h2 { font-size: 1.45rem; }
.immagini-kit > p { color: var(--inchiostro-2); max-width: 44rem; }
.immagini-kit .palco { margin-top: 6px; }
.icone-kit { display: flex; flex-wrap: wrap; gap: 24px 36px; }
.icona-kit { margin: 0; display: grid; justify-items: center; gap: 12px; }
.icona-kit img { width: 128px; height: 128px; }
.icona-kit figcaption { display: grid; justify-items: center; gap: 2px; font-family: var(--tondo); font-weight: 700; font-size: .95rem; color: var(--inchiostro-2); }
.scarica { display: block; font-family: var(--testo); font-weight: 500; font-size: .85rem; }
.kit .dispositivo figcaption { text-align: center; }
.dispositivo figcaption .scarica { margin-top: 4px; }
.galleria { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px 30px; margin-top: 18px; }
.galleria .dispositivo.iphone { width: 150px; }
@media (max-width: 520px) {
  .dati > div { grid-template-columns: minmax(0, 1fr); }
  .galleria { justify-content: center; }
  .galleria .dispositivo.iphone { width: min(150px, 42%); }
}
.pagina-testa + .sezione { padding-top: clamp(40px, 6vw, 64px); }

/* ---------- adattamento ---------- */
@media (max-width: 960px) {
  .funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conto > div { border-left: 0; border-top: 1px solid var(--linea); }
  .conto > div:nth-child(even) { border-left: 1px solid var(--linea); }
  .conto > div:nth-child(-n+2) { border-top: 0; }
  .conto .esito { grid-column: 1 / -1; border-left: 0; }
  .piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .menu { display: none; }
  .apertura-griglia { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .apertura-testo { padding-bottom: 0; }
  .apertura-visuale { justify-items: center; padding-top: 128px; position: relative; }
  .apertura-visuale::before {
    content: ""; position: absolute; top: 44px; left: 50%; translate: -50% 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #FFE39A 0%, var(--sole) 58%);
    box-shadow: 0 0 0 14px var(--sole-alone), 0 0 70px 24px var(--sole-alone);
  }
  .sole { display: none; }
  .monte { height: 250px; }
  .riga { grid-template-columns: minmax(0, 1fr); }
  .riga:nth-child(even) .riga-visuale { order: 0; }
  .promesse-griglia { grid-template-columns: minmax(0, 1fr); }
  .piani { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .grafico .asse, .grafico .nota-testo { font-size: 19px; }
  .grafico .opz { display: none; }
  .tavola { padding: 16px; }
  .funzioni { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .piede-griglia { grid-template-columns: minmax(0, 1fr); }
  .pulsante { padding: 13px 20px; font-size: .98rem; }
  .testata .dentro { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sole { animation: none; }
  * { transition: none !important; }
}