/* Linee guida Apple (Human Interface Guidelines), tradotte per il web.
   Colori: i colori di sistema dell'aspetto scuro. Testo: gli stili di testo di iOS
   (Large Title 34, Title 2 22, Title 3 20, Headline 17 semibold, Body 17, Callout 16,
   Subheadline 15, Footnote 13, Caption 12); il titolo di apertura è più grande, per lo schermo del computer.
   Struttura della pagina: quella di rentamac.io, con i nostri contenuti. */
:root {
  color-scheme: dark;
  --sfondo: #000000;              /* systemBackground */
  --sfondo-2: #1c1c1e;            /* secondarySystemBackground */
  --sfondo-3: #2c2c2e;            /* tertiarySystemBackground */
  --riempimento: rgba(118, 118, 128, 0.24); /* tertiarySystemFill, per i controlli */
  --testo: #ffffff;               /* label */
  --testo-2: rgba(235, 235, 245, 0.6); /* secondaryLabel */
  --testo-3: rgba(235, 235, 245, 0.3); /* tertiaryLabel */
  --separatore: rgba(84, 84, 88, 0.6); /* separator */
  --blu: #0a84ff;                 /* systemBlue */
  --blu-pulsante: #0071e3;       /* il blu dei pulsanti di apple.com: col bianco sopra si legge (4,6:1) */
  --blu-premuto: #0077ed;
  --verde: #30d158;               /* systemGreen */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --apertura: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem);
  --large-title: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
  --title-2: 1.375rem;
  --title-3: 1.25rem;
  --body: 1.0625rem;
  --callout: 1rem;
  --subhead: 0.9375rem;
  --footnote: 0.8125rem;
  --caption: 0.75rem;

  --larghezza: 1120px;
  --margine: clamp(16px, 4vw, 32px);
  --raggio: 16px;
  --raggio-controllo: 12px;
  --stacco: clamp(88px, 10vw, 136px);
  --tocco: 44px;                  /* area minima di tocco */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 var(--body) / 1.47 var(--font);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(10, 132, 255, 0.4); }

.fascia { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }
.visivamente-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* pulsanti: forma arrotondata, blu di sistema per l'azione principale, grigio di riempimento per la secondaria */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tocco); padding: 0 20px; border: 0; border-radius: var(--raggio-controllo);
  background: var(--blu-pulsante); color: #fff; font: 600 var(--body) / 1 var(--font); letter-spacing: -0.02em;
  cursor: pointer; transition: background-color 0.15s, transform 0.15s;
}
.pulsante:hover { background: var(--blu-premuto); }
.pulsante:active { transform: scale(0.98); }
.pulsante[disabled] { background: var(--sfondo-3); color: var(--testo-3); cursor: default; }
.pulsante.secondario { background: var(--riempimento); color: var(--testo); }
.pulsante.secondario:hover { background: rgba(118, 118, 128, 0.36); }
.pulsante.grande { min-height: 52px; padding: 0 32px; font-size: var(--title-3); }
.pulsante.piccolo { min-height: 36px; padding: 0 16px; font-size: var(--subhead); border-radius: 10px; }
.collegamento { color: var(--blu); }
.collegamento:hover { text-decoration: underline; }

/* testata: marchio, menu raggruppato al centro, lingua e azione a destra */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.testata .fascia { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.marchio { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--title-3); letter-spacing: -0.03em; }
.marchio svg { width: 26px; height: 26px; }
.menu { display: flex; gap: 2px; padding: 4px; background: var(--sfondo-2); border-radius: 12px; }
.menu a { padding: 8px 14px; border-radius: 9px; font-size: var(--subhead); color: var(--testo-2); transition: color 0.15s, background-color 0.15s; }
.menu a:hover { color: var(--testo); }
.menu a[aria-current="page"] { background: var(--blu-pulsante); color: #fff; }
.azioni-testata { display: flex; align-items: center; gap: 12px; }
.lingua { position: relative; }
.lingua summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--sfondo-2); font-size: var(--subhead); font-weight: 600; cursor: pointer; }
.lingua summary::-webkit-details-marker { display: none; }
.lingua summary svg { color: var(--testo-2); }
@media (max-width: 820px) { .lingua ul { right: auto; left: 0; } .testata .lingua ul { left: auto; right: -56px; } }
.lingua summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--testo-2); border-bottom: 2px solid var(--testo-2); transform: translateY(-2px) rotate(45deg); }
.lingua[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lingua ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; background: var(--sfondo-3); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
.lingua li a { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 9px; font-size: var(--subhead); }
.lingua li a:hover { background: var(--riempimento); }
.lingua li a[aria-current="page"]::after { content: "✓"; color: var(--blu); }
.apri-menu { display: none; }
@media (max-width: 820px) {
  .menu { display: none; }
  .azioni-testata > .pulsante { display: none; }
  .apri-menu { display: block; }
  .apri-menu summary { list-style: none; width: var(--tocco); height: var(--tocco); display: grid; place-items: center; border-radius: 12px; background: var(--sfondo-2); cursor: pointer; }
  .apri-menu summary::-webkit-details-marker { display: none; }
  .apri-menu summary span, .apri-menu summary span::before, .apri-menu summary span::after { display: block; width: 18px; height: 2px; background: var(--testo); border-radius: 1px; position: relative; }
  .apri-menu summary span::before, .apri-menu summary span::after { content: ""; position: absolute; left: 0; }
  .apri-menu summary span::before { top: -6px; }
  .apri-menu summary span::after { top: 6px; }
  .apri-menu nav { position: absolute; left: var(--margine); right: var(--margine); top: 64px; padding: 8px; background: var(--sfondo-2); border-radius: 16px; display: grid; }
  .apri-menu nav a { padding: 14px 12px; border-radius: 10px; }
  .apri-menu nav a:hover { background: var(--riempimento); }
  .apri-menu nav .pulsante { margin-top: 6px; }
}

/* apertura: tutto centrato, come rentamac */
.apertura { padding-top: clamp(28px, 5vw, 56px); text-align: center; }
.distintivo { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--sfondo-2); font-size: var(--subhead); font-weight: 500; }
.distintivo b { padding: 3px 10px; border-radius: 999px; background: var(--blu-pulsante); color: #fff; font-size: var(--caption); font-weight: 700; }
.distintivo:hover { background: var(--sfondo-3); }
.apertura h1 { margin-top: 28px; font-size: var(--apertura); letter-spacing: -0.035em; }
.apertura .sotto { margin: 20px auto 0; max-width: 42ch; font-size: var(--title-3); line-height: 1.4; color: var(--testo-2); }
.apertura .forte { margin-top: 22px; font-weight: 600; }
.apertura .prodotto { margin: 40px auto 0; width: min(100%, 680px); }
.apertura .pulsante { margin-top: 36px; }
.apertura .nota { margin-top: 14px; font-size: var(--footnote); color: var(--testo-2); }

/* sezioni */
.sezione { margin-top: var(--stacco); }
.titolo { font-size: var(--large-title); text-align: center; }
.titolo + .sotto { margin: 14px auto 0; max-width: 56ch; text-align: center; font-size: var(--callout); color: var(--testo-2); }

/* perché: quattro riquadri */
.riquadri { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.riquadro { padding: 22px; background: var(--sfondo-2); border-radius: var(--raggio); }
.riquadro .intestazione { display: flex; align-items: center; gap: 12px; }
.icona { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(10, 132, 255, 0.16); color: var(--blu); }
.icona svg { width: 18px; height: 18px; }
.riquadro h3 { font-size: var(--body); font-weight: 600; letter-spacing: -0.02em; }
.riquadro p { margin-top: 12px; font-size: var(--subhead); color: var(--testo-2); line-height: 1.45; }
@media (max-width: 960px) { .riquadri { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .riquadri { grid-template-columns: 1fr; } }

/* tre passaggi */
.passi { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; position: relative; }
.passi::before { content: ""; position: absolute; top: 18px; left: 16.6%; right: 16.6%; height: 2px; background: rgba(10, 132, 255, 0.35); }
.passo .numero { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; background: var(--blu-pulsante); font-weight: 700; font-size: var(--callout); box-shadow: 0 0 0 6px var(--sfondo); }
.passo h3 { margin-top: 18px; font-size: var(--body); font-weight: 600; }
.passo p { margin: 8px auto 0; max-width: 30ch; font-size: var(--subhead); color: var(--testo-2); }
@media (max-width: 760px) {
  .passi { grid-template-columns: 1fr; gap: 32px; }
  .passi::before { display: none; }
}

/* esempi di VM */
.esempi-vm { margin: 40px auto 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.esempi-vm li { display: grid; gap: 6px; padding: 22px; background: var(--sfondo-2); border-radius: var(--raggio); }
.esempi-vm b { font-size: var(--body); font-variant-numeric: tabular-nums; }
.esempi-vm span { font-size: var(--subhead); color: var(--testo-2); }
.esempi-vm a { margin-top: 8px; font-size: var(--subhead); font-weight: 600; }
@media (max-width: 760px) { .esempi-vm { grid-template-columns: 1fr; } }

/* mappa delle sedi */
.mappa { position: relative; margin: 40px auto 0; max-width: 980px; }
.mappa img { width: 100%; height: auto; }
.punto { position: absolute; transform: translate(-7px, -50%); display: flex; align-items: center; gap: 8px; }
.punto i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--blu); box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.25); }
.punto span { padding: 4px 10px; border-radius: 8px; background: var(--sfondo-3); font-size: var(--footnote); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .punto i { animation: pulsa 2.4s ease-in-out infinite; }
  @keyframes pulsa { 50% { box-shadow: 0 0 0 12px rgba(10, 132, 255, 0); } }
}
.sedi-elenco { margin: 28px auto 0; max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sedi-elenco li { padding: 18px 20px; background: var(--sfondo-2); border-radius: var(--raggio); }
.sedi-elenco b { display: block; }
.sedi-elenco span { font-size: var(--subhead); color: var(--testo-2); }
@media (max-width: 560px) { .sedi-elenco { grid-template-columns: 1fr; } .punto span { display: none; } }

/* carichi di lavoro: schede con un terminale vero */
.schede { margin-top: 36px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.schede button { display: grid; justify-items: center; gap: 8px; min-width: 92px; padding: 8px 6px; border: 0; border-radius: 12px; background: none; color: var(--testo-2); font: 500 var(--footnote) / 1.2 var(--font); cursor: pointer; }
.schede button .icona { width: 44px; height: 44px; border-radius: 50%; background: var(--sfondo-2); color: var(--testo-2); }
.schede button[aria-selected="true"] { color: var(--testo); }
.schede button[aria-selected="true"] .icona { background: rgba(10, 132, 255, 0.18); color: var(--blu); box-shadow: inset 0 0 0 2px var(--blu); }
.pannello { margin: 20px auto 0; max-width: 820px; padding: 28px clamp(18px, 3vw, 36px) 0; background: var(--sfondo-2); border-radius: 20px; text-align: center; overflow: hidden; }
.pannello + .pannello { margin-top: 12px; }
.js .pannello + .pannello { margin-top: 20px; }
.pannello h3 { font-size: var(--title-3); }
.pannello > p { margin: 10px auto 0; max-width: 56ch; font-size: var(--subhead); color: var(--testo-2); }
.terminale { margin: 24px auto 0; max-width: 680px; text-align: left; background: #0d0d0e; border-radius: 12px 12px 0 0; overflow: hidden; }
.terminale .barra { display: flex; gap: 8px; padding: 12px 14px; background: var(--sfondo-3); }
.terminale .barra i { width: 12px; height: 12px; border-radius: 50%; background: #ff453a; }
.terminale .barra i:nth-child(2) { background: #ffd60a; }
.terminale .barra i:nth-child(3) { background: var(--verde); }
.terminale pre { margin: 0; padding: 18px 20px 24px; overflow-x: auto; font: 400 var(--footnote) / 1.65 ui-monospace, "SF Mono", Menlo, monospace; color: #e5e5ea; letter-spacing: 0; }
.terminale .pr { color: var(--verde); }
.terminale .co { color: var(--testo-2); }

/* software */
.loghi { margin: 40px auto 0; max-width: 620px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.loghi li { display: grid; justify-items: center; gap: 10px; padding: 20px 8px 16px; background: var(--sfondo-2); border-radius: var(--raggio); font-size: var(--footnote); color: var(--testo-2); transition: background-color 0.15s, color 0.15s; }
.loghi img { width: 36px; height: 36px; }
.loghi li:hover { background: var(--sfondo-3); color: var(--testo); }
.loghi + .sotto { margin: 22px auto 0; text-align: center; font-size: var(--footnote); color: var(--testo-2); }
@media (max-width: 480px) { .loghi { grid-template-columns: repeat(2, 1fr); } }

/* domande: lista con separatori, come le liste di iOS */
.domande { margin: 36px auto 0; max-width: 720px; }
.domande details { border-bottom: 1px solid var(--separatore); }
.domande summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; font-weight: 600; cursor: pointer; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 300; color: var(--testo-2); transition: transform 0.2s; }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details p { padding: 0 0 18px; color: var(--testo-2); font-size: var(--subhead); }
.bottoni { margin-top: 32px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* piede */
.piede { margin-top: var(--stacco); padding: 56px 0 40px; }
.chiamata { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--separatore); }
.chiamata h2 { margin-top: 16px; font-size: var(--title-2); }
.chiamata p { margin-top: 6px; font-size: var(--subhead); color: var(--testo-2); }
.chiamata .bottoni { margin-top: 0; }
.colonne { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.colonne h3 { font-size: var(--footnote); font-weight: 600; letter-spacing: 0; }
.colonne ul { margin-top: 12px; display: grid; gap: 10px; }
.colonne a, .colonne li { font-size: var(--footnote); color: var(--testo-2); }
.colonne a:hover { color: var(--testo); }
@media (max-width: 720px) { .colonne { grid-template-columns: 1fr 1fr; } }
.fondo { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--separatore); display: grid; gap: 12px; font-size: var(--caption); color: var(--testo-2); }
.fondo .crediti a { text-decoration: underline; }
.lingue-piede { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lingue-piede a[aria-current] { color: var(--testo); font-weight: 600; }

/* pagina prezzi: configuratore a sinistra, totale a destra */
.prezzi-apertura { padding-top: clamp(28px, 5vw, 56px); text-align: center; }
.prezzi-apertura h1 { font-size: var(--apertura); letter-spacing: -0.035em; }
.prezzi-apertura p { margin: 14px auto 0; max-width: 52ch; font-size: var(--callout); color: var(--testo-2); }
.configuratore { margin-top: 36px; display: grid; grid-template-columns: 1.55fr 1fr; background: var(--sfondo-2); border-radius: 24px; scroll-margin-top: 80px; }
.scelte { padding: clamp(20px, 3vw, 32px); min-width: 0; border-right: 1px solid var(--separatore); }
.scelte fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.scelte legend, .scelte .etichetta { display: block; padding: 0; margin-bottom: 10px; font-size: var(--footnote); font-weight: 600; color: var(--testo-2); }
/* procedura a passaggi: ogni passaggio compare quando il precedente è scelto */
.passaggio legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: var(--callout); font-weight: 600; color: var(--testo); }
.passaggio .n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sfondo-3); font-size: var(--caption); font-weight: 700; color: var(--testo-2); }
.passaggio.fatto .n { background: var(--blu-pulsante); color: #fff; }
.passaggio.fatto .n::before { content: "✓"; }
.passaggio.fatto .n { font-size: 0; }
.passaggio.fatto .n::before { font-size: var(--caption); }
/* i passaggi non ancora raggiungibili mostrano solo il titolo, in grigio: si vede cosa viene dopo */
.passaggio.chiuso { margin-bottom: 18px; }
.passaggio.chiuso legend { margin-bottom: 0; color: var(--testo-3); }
.passaggio.chiuso .n { color: var(--testo-3); }
.passaggio.chiuso > :not(legend) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .passaggio.appena { animation: compare 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes compare { from { opacity: 0; transform: translateY(12px); } }
}
.totale .cifra.vuota { color: var(--testo-3); }

/* cursori delle VM: binario grigio, parte piena in blu, pomello bianco come in iOS */
.cursori { display: grid; gap: 22px; margin-bottom: 20px; }
.cursore { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 10px; }
.cursore label { font-size: var(--subhead); font-weight: 600; }
.cursore output { font-size: var(--body); font-weight: 700; font-variant-numeric: tabular-nums; }
.cursore .unita { grid-column: 1 / -1; font-size: var(--footnote); color: var(--testo-2); }
.cursore input[type="range"] { --pieno: 10%; grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cursore input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--blu), var(--blu)) 0 / var(--pieno) 100% no-repeat, var(--sfondo-3); }
.cursore input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--sfondo-3); }
.cursore input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--blu); }
.cursore input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.cursore input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.cursore input[type="range"]:focus-visible { outline: none; }
.cursore input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.5); }
.totale { align-self: start; position: sticky; top: 80px; }
@media (max-width: 860px) { .totale { position: static; } }
.carte { display: grid; gap: 10px; }
.carte.due { grid-template-columns: 1fr 1fr; }
.carte.tre { grid-template-columns: repeat(3, 1fr); }
.carte.quattro { grid-template-columns: repeat(4, 1fr); }
.carte.cinque { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .carte.cinque { grid-template-columns: repeat(3, 1fr); } }
.carta .nastro { position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 6px; background: var(--blu-pulsante); color: #fff; font-size: 0.6875rem; font-style: normal; font-weight: 700; }
.carta .nastro.verde { background: #248a3d; }
@media (max-width: 560px) { .carte.tre, .carte.quattro, .carte.cinque { grid-template-columns: 1fr 1fr; } }
.carta { position: relative; display: grid; gap: 3px; align-content: center; min-height: 64px; padding: 12px 14px; background: var(--sfondo-3); border-radius: 14px; cursor: pointer; transition: background-color 0.15s, transform 0.15s; }
.carta:active { transform: scale(0.99); }
.carta input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.carta b { font-size: var(--callout); font-weight: 600; }
.carta span { font-size: var(--footnote); color: var(--testo-2); }
.carta:has(input:checked) { background: rgba(10, 132, 255, 0.14); box-shadow: inset 0 0 0 2px var(--blu); }
.carta:has(input:checked) b { color: var(--blu); }
.carta:has(input:focus-visible) { outline: 3px solid var(--blu); outline-offset: 2px; }
.segmenti { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 12px; padding: 2px; background: var(--riempimento); border-radius: 9px; }
.segmenti label { position: relative; text-align: center; padding: 7px 6px; border-radius: 7px; font-size: var(--subhead); font-weight: 500; cursor: pointer; }
.segmenti input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmenti label:has(input:checked) { background: #636366; font-weight: 600; }
.segmenti label:has(input:focus-visible) { outline: 3px solid var(--blu); }
.chip { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip li { padding: 5px 10px; border-radius: 8px; background: var(--sfondo-3); font-size: var(--footnote); color: var(--testo-2); }
.doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .doppio { grid-template-columns: 1fr; } }
.campo { width: 100%; min-height: var(--tocco); padding: 0 14px; border: 0; border-radius: 12px; background: var(--sfondo-3); color: var(--testo); font: 400 var(--body) / 1 var(--font); -webkit-appearance: none; appearance: none; }
.campo::placeholder { color: var(--testo-3); }
.quantita { display: grid; grid-template-columns: var(--tocco) 1fr var(--tocco); align-items: center; min-height: var(--tocco); background: var(--sfondo-3); border-radius: 12px; }
.quantita button { height: var(--tocco); border: 0; background: none; color: var(--blu); font: 500 1.375rem / 1 var(--font); cursor: pointer; border-radius: 12px; }
.quantita button:disabled { color: var(--testo-3); cursor: default; }
.quantita output { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.quantita.stretta { max-width: 220px; margin-bottom: 20px; }
.segmenti.piccoli { max-width: 360px; }
.connesso-come { font-size: var(--subhead); color: var(--testo-2); }
.connesso-come b { color: var(--testo); }

.totale { padding: clamp(20px, 3vw, 32px); }
.totale .etichetta-totale { text-align: center; font-size: var(--footnote); color: var(--testo-2); }
.totale .cifra { margin-top: 8px; text-align: center; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.totale .periodo { margin-top: 10px; text-align: center; font-size: var(--subhead); color: var(--testo-2); }
.totale .pulsante { margin-top: 24px; width: 100%; }
.totale .nota { margin-top: 12px; text-align: center; font-size: var(--footnote); color: var(--testo-2); }
.totale .errore { margin-top: 8px; min-height: 1.4em; text-align: center; font-size: var(--footnote); color: #ff453a; }
.incluso { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--separatore); }
.incluso h2 { font-size: var(--footnote); font-weight: 600; color: var(--testo-2); letter-spacing: 0; }
.incluso dl { margin-top: 4px; }
.incluso dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--separatore); font-size: var(--footnote); }
.incluso dt { min-width: 0; color: var(--testo-2); hyphens: auto; overflow-wrap: break-word; } /* "Einrichtungsgebühr" va a capo invece di finire sopra il valore */
@media (max-width: 860px) {
  .configuratore { grid-template-columns: 1fr; }
  .scelte { border-right: 0; border-bottom: 1px solid var(--separatore); }
}

/* tabella di confronto */
.confronto { margin-top: 40px; overflow-x: auto; background: var(--sfondo-2); border-radius: var(--raggio); }
.confronto table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--subhead); font-variant-numeric: tabular-nums; }
.confronto th, .confronto td { padding: 14px 16px; text-align: left; }
.confronto thead th { font-size: var(--footnote); font-weight: 600; color: var(--testo-2); }
.confronto tbody tr { border-top: 1px solid var(--separatore); }
.confronto tbody th { font-weight: 600; }
.confronto .linea th { padding-top: 22px; font-size: var(--footnote); color: var(--testo-2); }
.confronto td:last-child { text-align: right; }

.aiuto { margin: 40px auto 0; max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aiuto > div { padding: 26px 22px; background: var(--sfondo-2); border-radius: var(--raggio); text-align: center; }
.aiuto .icona { margin: 0 auto; }
.aiuto h3 { margin-top: 14px; font-size: var(--body); font-weight: 600; }
.aiuto p { margin-top: 8px; font-size: var(--subhead); color: var(--testo-2); }
.aiuto .pulsante { margin-top: 16px; }
@media (max-width: 560px) { .aiuto { grid-template-columns: 1fr; } }

/* pagine di testo: termini, privacy, conferma */
.testo-lungo { padding-top: clamp(40px, 6vw, 72px); }
.testo-lungo h1 { font-size: var(--large-title); hyphens: auto; overflow-wrap: break-word; }
.testo-lungo .corpo { margin-top: 28px; max-width: 68ch; display: grid; gap: 14px; color: var(--testo-2); }
.testo-lungo h2 { margin-top: 18px; font-size: var(--title-3); color: var(--testo); }
.testo-lungo .sottotitolo { font-size: var(--title-3); }
.scheda { margin-top: 32px; padding: 8px 20px; max-width: 620px; background: var(--sfondo-2); border-radius: var(--raggio); }
.scheda dl { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; }
.scheda dt, .scheda dd { padding: 12px 0; border-bottom: 1px solid var(--separatore); }
.scheda dt { color: var(--testo-2); }
.scheda dd { font-weight: 600; }
.scheda dt:last-of-type, .scheda dd:last-of-type { border-bottom: 0; }

/* entrate morbide; senza script resta tutto visibile */
.js .entra { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .entra.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .entra { opacity: 1; transform: none; transition: none; }
}

/* accesso: un riquadro solo, al centro, come l'accesso con l'Apple Account */
.accesso { max-width: 440px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--margine) 96px; text-align: center; }
.accesso h1 { font-size: var(--large-title); }
.accesso .sotto { margin-top: 10px; color: var(--testo-2); }
.riquadro-accesso { margin-top: 32px; padding: 24px; background: var(--sfondo-2); border-radius: 20px; text-align: left; display: grid; }
.riquadro-accesso .segmenti { margin-bottom: 22px; }
.riquadro-accesso .etichetta { display: block; margin: 14px 0 8px; font-size: var(--footnote); font-weight: 600; color: var(--testo-2); }
.riquadro-accesso .pulsante { margin-top: 8px; width: 100%; }
.aiuto-campo { margin-top: 8px; font-size: var(--footnote); color: var(--testo-2); }
.aiuto-campo code, .passi-2fa code { font: 500 var(--footnote) ui-monospace, "SF Mono", Menlo, monospace; }
.spunta { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: var(--footnote); color: var(--testo-2); }
.spunta input { margin-top: 2px; accent-color: var(--blu-pulsante); width: 16px; height: 16px; flex: none; }
.errore { margin-top: 10px; min-height: 1.3em; font-size: var(--footnote); color: #ff453a; }

/* Console: barra laterale a sinistra come Impostazioni di macOS, contenuto a destra */
.etichetta-console { margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--sfondo-3); font-size: var(--caption); font-weight: 600; color: var(--testo-2); letter-spacing: 0; }
.chi { font-size: var(--subhead); color: var(--testo-2); }
@media (max-width: 640px) { .chi { display: none; } }
.console { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding-top: 24px; padding-bottom: 96px; align-items: start; }
.barra-console { position: sticky; top: 80px; display: grid; gap: 2px; padding: 8px; background: var(--sfondo-2); border-radius: 16px; }
.barra-console a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: var(--subhead); color: var(--testo); }
.barra-console a svg { width: 18px; height: 18px; color: var(--blu); }
.barra-console a:hover { background: var(--riempimento); }
.barra-console a[aria-current] { background: var(--blu-pulsante); }
.barra-console a[aria-current] svg { color: #fff; }
@media (max-width: 820px) {
  .console { grid-template-columns: 1fr; gap: 20px; }
  .barra-console { position: static; display: flex; overflow-x: auto; }
  .barra-console a { flex: none; }
}
.contenuto-console { min-width: 0; }
.testa-sezione { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.testa-sezione h1 { font-size: var(--large-title); }
.sotto-sezione { margin-top: 8px; color: var(--testo-2); font-size: var(--subhead); }
.contenuto-console h2 { font-size: var(--title-3); }
.vuoto { color: var(--testo-2); }
.vuoto-grande { margin-top: 28px; padding: 48px 24px; background: var(--sfondo-2); border-radius: 20px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.vuoto-grande b { font-size: var(--title-3); }
.vuoto-grande p { max-width: 46ch; color: var(--testo-2); font-size: var(--subhead); }
.vuoto-grande .pulsante { margin-top: 8px; }
.vuoto-grande.piccolo { padding: 28px; }
.servizi { margin-top: 20px; display: grid; gap: 12px; }
.servizio { padding: 20px; background: var(--sfondo-2); border-radius: 18px; display: grid; gap: 14px; justify-items: start; }
.servizio-testa { width: 100%; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.servizio-testa b { display: block; font-size: var(--body); }
.servizio-testa span:not(.stato) { font-size: var(--footnote); color: var(--testo-2); }
.servizio-dati { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.servizio-dati dt { font-size: var(--caption); color: var(--testo-2); }
.servizio-dati dd { font-size: var(--subhead); font-weight: 500; }
@media (max-width: 720px) { .servizio-dati { grid-template-columns: 1fr 1fr; } }
.nota-servizio { font-size: var(--footnote); color: var(--testo-2); }
.stato { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--caption); font-weight: 600; background: var(--sfondo-3); color: var(--testo-2); }
.stato.verde { background: rgba(48, 209, 88, 0.16); color: var(--verde); }
.stato.giallo { background: rgba(255, 214, 10, 0.16); color: #ffd60a; }
.elenco-console { margin-top: 16px; background: var(--sfondo-2); border-radius: 16px; }
.elenco-console li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; }
.elenco-console li + li { border-top: 1px solid var(--separatore); }
.elenco-console li div { display: grid; gap: 2px; min-width: 0; }
.elenco-console li span { font-size: var(--footnote); color: var(--testo-2); }
.impronta { font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blocco-console { margin-top: 32px; }
.blocco-console > .pulsante { margin-top: 16px; }
.modulo-console { margin-top: 28px; padding: 22px; background: var(--sfondo-2); border-radius: 18px; display: grid; justify-items: start; }
.modulo-console > *, .modulo-console form > * { max-width: 100%; }
.modulo-console .etichetta { display: block; margin: 14px 0 8px; font-size: var(--footnote); font-weight: 600; color: var(--testo-2); }
.modulo-console .campo { background: var(--sfondo-3); width: 100%; max-width: 520px; }
.modulo-console .campo.corto { max-width: 160px; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.modulo-console .campo.area { min-height: 96px; padding: 12px 14px; font: 400 var(--footnote) / 1.5 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; }
.modulo-console .pulsante { margin-top: 14px; }
.modulo-console p { margin-top: 8px; }
.modulo-console form { width: 100%; }
.griglia-campi { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.griglia-campi .campo { max-width: none; }
@media (max-width: 640px) { .griglia-campi { grid-template-columns: 1fr; } }
.passi-2fa { margin-top: 14px; display: grid; gap: 10px; padding-left: 20px; list-style: decimal; color: var(--testo-2); font-size: var(--subhead); }
.passi-2fa .segreto { display: inline-block; padding: 4px 8px; border-radius: 8px; background: var(--sfondo-3); color: var(--testo); letter-spacing: 0.06em; }
.modulo-console.pericolo h2 { color: #ff453a; }
.pulsante.rosso { background: #d70015; }
.pulsante.rosso:hover { background: #b00012; }

/* accesso nella testata del sito */
.accedi-link { font-size: var(--subhead); color: var(--testo-2); white-space: nowrap; }
.accedi-link:hover { color: var(--testo); }
@media (max-width: 820px) { .azioni-testata > .accedi-link { display: none; } }

/* account senza carta: la richiesta di attivazione in primo piano, le sezioni dei servizi spente */
.vuoto-grande.attivazione { margin-top: 0; }
.barra-console.bloccata a[data-sezione="servers"], .barra-console.bloccata a[data-sezione="ssh"], .barra-console.bloccata a[data-sezione="billing"] { opacity: 0.4; }

.anti-bot { margin-top: 14px; min-height: 0; }

/* pagina di confronto */
.sezione-stretta { margin-top: clamp(64px, 8vw, 104px); }
.confronto-pagina .confronto table { min-width: 560px; }
.confronto-pagina .confronto td:last-child { text-align: left; }
.nota-fonte { margin-top: 16px; font-size: var(--footnote); color: var(--testo-2); max-width: 80ch; }
.riquadri.tre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .riquadri.tre { grid-template-columns: 1fr; } }

/* accessibilità: i passaggi chiusi restano leggibili (contrasto 5:1) e i link delle lingue nel piede sono facili da toccare */
.passaggio.chiuso legend, .passaggio.chiuso .n { color: #8e8e93; }
.lingue-piede a { display: inline-block; padding: 8px 2px; }

/* i collegamenti dentro le frasi si riconoscono anche senza il colore */
p .collegamento, li p .collegamento, .nota-fonte a, .aiuto-campo a, .spunta a { text-decoration: underline; text-underline-offset: 3px; }

.altro-accesso { margin-top: 16px; text-align: center; font-size: var(--subhead); }

/* Console: avviso per confermare l'email */
.avviso-console { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: rgba(10, 132, 255, 0.12); border-radius: 14px; font-size: var(--subhead); }
.contenuto-console { grid-column: 2; }
.barra-console { grid-row: 1 / span 2; }
@media (max-width: 820px) { .avviso-console, .contenuto-console { grid-column: 1; } .barra-console { grid-row: auto; } }

/* accesso con Google: pulsante bianco come da linee guida di Google, poi un separatore "or" */
.pulsante-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border-radius: 12px; background: #fff; color: #1f1f1f; font-weight: 600; font-size: var(--body); text-decoration: none; }
.pulsante-google:hover { background: #f2f2f2; }
.separatore-o { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: var(--footnote); color: var(--testo-2); }
.separatore-o::before, .separatore-o::after { content: ""; flex: 1; height: 1px; background: var(--separatore); }