/* ==========================================================================
   SafetyDesk — pagine d'accesso (spazio di lavoro, login, cambio password)

   Riproduce la grafica del cliente in due versioni:
   - VERTICALE (stili di base): telefoni, tablet, finestre strette. Colonna
     centrata su fondo chiaro, forme blu in basso a sinistra.
   - ORIZZONTALE (media query in fondo): foto a tutto schermo, marchio a
     sinistra, riquadro d'accesso a destra.

   Testi, logo, campi e riquadro hanno MISURE FISSE: allargando o stringendo
   la finestra non si ingrandiscono e non si rimpiccioliscono, cambia solo la
   loro posizione. Dove lo spazio non basta si passa a una taglia piu' piccola
   a scalini (media query), mai in modo continuo. Solo le immagini di sfondo
   si adattano allo schermo, come in qualunque sito.
   ========================================================================== */

@font-face {
  font-family: "SD Selawik";
  src: url("../assets/brand/fonts/selawik-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SD Selawik";
  src: url("../assets/brand/fonts/selawik-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "SD Montserrat";
  src: url("../assets/brand/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --sd-blu: #063c74;
  --sd-turchese: #12b1ba;
  --sd-bottone: #0a4580;
  --sd-bottone-su: #073766;
  --sd-inchiostro: #34475e;
  --sd-testo: #4b5b6f;
  --sd-tenue: #6f7c8c;
  --sd-segnaposto: #8b97a4;
  --sd-icona: #4f6075;
  --sd-bordo: #dde3ea;
  --sd-cerchio: #e7f3fa;
  --sd-link: #234d7c;
  /* Segoe UI su Windows; altrove Selawik, che ha le stesse forme e metriche */
  --sd-font: "Segoe UI", "SD Selawik", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Versione verticale, taglia "telefono" (le altre taglie piu' sotto) */
  --m-top: 44px;
  --m-marchio: 84px;
  --m-scritta-gap: 16px;
  --m-scritta: 270px;
  --m-claim-gap: 12px;
  --m-claim: 15.5px;
  --m-card-gap: 34px;
  --m-card-gap-pillola: 22px;
  --m-campo: 54px;
  --m-campo-gap: 16px;
  --m-bottone: 52px;
  --m-bottone-gap: 20px;
  --m-vantaggi-gap: 46px;
  --m-vantaggi-gap-aiuto: 34px;
  --m-icona: 36px;
  --m-etichetta: 10.5px;
  --m-etichetta-gap: 9px;
  --m-firma-pad: 48px 22px 70px 0;
  --m-firma-riga: 12.5px;
  --m-firma-nome: 13px;
  --m-forme: 100%;
}

/* Versione verticale, taglia media: da 600 px di larghezza (tablet in orizzontale,
   finestre basse). Alta circa 770 px: sta in uno schermo 1024x768. */
@media (min-width: 600px) {
  :root {
    --m-top: 28px;
    --m-marchio: 92px;
    --m-scritta-gap: 18px;
    --m-scritta: 360px;
    --m-claim-gap: 12px;
    --m-claim: 17px;
    --m-card-gap: 32px;
    --m-card-gap-pillola: 22px;
    --m-bottone-gap: 18px;
    --m-vantaggi-gap: 36px;
    --m-vantaggi-gap-aiuto: 28px;
    --m-icona: 40px;
    --m-etichetta: 11.5px;
    --m-etichetta-gap: 10px;
    --m-firma-pad: 24px 40px 56px 0;
    --m-firma-riga: 13px;
    --m-firma-nome: 14px;
    --m-forme: 520px;
  }
}

/* Versione verticale, taglia grande: schermi alti almeno 1024 px (tablet in
   verticale, monitor 5:4). Sono le proporzioni del mockup verticale. */
@media (min-width: 600px) and (min-height: 1024px) {
  :root {
    --m-top: 100px;
    --m-marchio: 136px;
    --m-scritta-gap: 26px;
    --m-scritta: 450px;
    --m-claim-gap: 18px;
    --m-claim: 19px;
    --m-card-gap: 58px;
    --m-card-gap-pillola: 28px;
    --m-campo: 57px;
    --m-campo-gap: 20px;
    --m-bottone: 54px;
    --m-bottone-gap: 22px;
    --m-vantaggi-gap: 80px;
    --m-vantaggi-gap-aiuto: 48px;
    --m-icona: 46px;
    --m-etichetta: 12.5px;
    --m-etichetta-gap: 12px;
    --m-firma-pad: 60px 54px 80px 0;
    --m-firma-riga: 14px;
    --m-firma-nome: 15px;
    --m-forme: 680px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.sd {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--sd-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--sd-testo);
  background: #f7f9fb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sd-vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Sfondo
   -------------------------------------------------------------------------- */
.sd-sfondo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: #f7f9fb;
  background-image: url("../assets/brand/accesso-mobile.jpg");
  background-image: image-set(url("../assets/brand/accesso-mobile.webp") type("image/webp"),
                              url("../assets/brand/accesso-mobile.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

/* --------------------------------------------------------------------------
   Pagina (versione verticale)
   -------------------------------------------------------------------------- */
.sd-pagina {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--m-top) 20px 0;
  overflow: hidden;
}
.sd-pagina > * { position: relative; z-index: 1; }

/* Marchio, scritta e frase */
.sd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sd-hero__marchio { width: var(--m-marchio); }
.sd-hero__marchio-svg { display: block; width: 100%; height: auto; }
.sd-hero__scritta { margin: var(--m-scritta-gap) 0 0; font-size: 1em; line-height: 0; }
.sd-hero__scritta-svg { display: block; width: var(--m-scritta); max-width: calc(100vw - 40px); height: auto; }
.sd-hero__claim,
.sd-hero__sotto,
.sd-vantaggi--d { display: none; }
.sd-hero__claim-m {
  margin: var(--m-claim-gap) 0 0;
  font-size: var(--m-claim);
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--sd-tenue);
}

/* Riquadro: in verticale non ha cornice, il modulo sta sul fondo */
.sd-card { display: flex; flex-direction: column; width: min(426px, 100%); margin-top: var(--m-card-gap); }
/* Con la pillola dello spazio di lavoro sopra i campi, i campi restano dove li vuole la grafica */
.sd-card:has(.sd-spazio--piede) { margin-top: var(--m-card-gap-pillola); }
.sd-card__titolo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  font-weight: 400;
}
.sd-card__scritta { display: inline-block; width: auto; height: .82em; vertical-align: -.02em; margin-left: .12em; }

/* Testi di servizio dentro il riquadro */
.sd-intro { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--sd-tenue); text-align: center; }
.sd-spazio {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px;
  margin: 0 0 16px; font-size: 14.5px; color: var(--sd-tenue);
}
.sd-spazio strong { color: var(--sd-inchiostro); font-weight: 600; }
.sd-spazio a { color: var(--sd-link); }
/* Spazio di lavoro del login: in verticale e' una pillola sopra i campi,
   in orizzontale una riga in fondo al riquadro */
.sd-spazio--piede {
  order: -1; align-self: center; align-items: center; gap: 4px 10px;
  margin: 0 0 18px; padding: 7px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 1px var(--sd-bordo); font-size: 13.5px;
}
.sd-spazio--piede svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sd-icona); }
.sd-spazio__nome { color: var(--sd-inchiostro); font-weight: 600; }
.sd-nota { margin: 8px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--sd-tenue); }
.sd-nota code { font-family: inherit; color: var(--sd-inchiostro); }

/* Campi */
.sd-campo {
  position: relative;
  display: flex; align-items: center;
  height: var(--m-campo);
  background: #fff;
  border: 1px solid var(--sd-bordo);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sd-campo + .sd-campo { margin-top: var(--m-campo-gap); }
.sd-campo:focus-within { border-color: #7fcbd2; box-shadow: 0 0 0 3px rgba(18, 177, 186, .18); }
.sd-campo__icona {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; color: var(--sd-icona); pointer-events: none;
}
.sd-campo__icona svg { display: block; width: 100%; height: 100%; }
.sd-campo__input {
  flex: 1; width: 100%; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent; border-radius: inherit;
  padding: 0 16px 0 62px;
  font: inherit; font-size: 17px; color: var(--sd-inchiostro);
}
.sd-campo__input::placeholder { color: var(--sd-segnaposto); opacity: 1; }
.sd-campo__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 60px #fff inset;
  -webkit-text-fill-color: var(--sd-inchiostro);
  caret-color: var(--sd-inchiostro);
}
.sd-campo:has(.sd-campo__azione) .sd-campo__input { padding-right: 56px; }
.sd-campo__azione {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  font: inherit; color: var(--sd-icona); cursor: pointer;
}
.sd-campo__azione:hover { background: #f1f5f8; }
.sd-campo__azione:focus-visible { outline: 2px solid #7fcbd2; outline-offset: 0; }
.sd-campo__azione svg { width: 26px; height: 26px; }
.sd-campo__azione .sd-occhio-chiuso,
.sd-campo__azione.is-visibile .sd-occhio-aperto { display: none; }
.sd-campo__azione.is-visibile .sd-occhio-chiuso { display: block; }

/* Pulsante */
.sd-bottone {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  width: 100%; height: var(--m-bottone);
  margin-top: var(--m-bottone-gap);
  border: 0; border-radius: 6px;
  background: var(--sd-bottone); color: #fff;
  font: inherit; font-size: 18.5px; letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .15s ease;
}
.sd-bottone:hover { background: var(--sd-bottone-su); }
.sd-bottone:focus-visible { outline: 3px solid rgba(18, 177, 186, .55); outline-offset: 2px; }
.sd-bottone[disabled] { opacity: .8; cursor: progress; }
.sd-bottone__freccia { flex: 0 0 auto; width: 26px; height: 22px; }

/* Collegamenti e pannelli di aiuto */
.sd-aiuto { margin-top: 18px; text-align: center; }
.sd-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--sd-link);
  text-decoration: underline; text-underline-offset: 2px;
}
.sd-link:hover { color: var(--sd-blu); }
.sd-link:focus-visible { outline: 2px solid #7fcbd2; outline-offset: 2px; border-radius: 2px; }
.sd-aiuto__testo {
  margin-top: 10px; padding: 12px 14px;
  border-radius: 8px; background: #eef4f8;
  font-size: 14px; line-height: 1.5; color: var(--sd-testo); text-align: left;
}
.sd-aiuto__testo p { margin: 0; }
.sd-aiuto__testo p + p { margin-top: 6px; }

/* Avvisi */
.sd-avviso {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 16px; padding: 11px 14px;
  border-radius: 8px;
  font-size: 14.5px; line-height: 1.45; text-align: left;
}
.sd-avviso svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.sd-avviso--errore     { background: #fdecea; color: #a8261b; }
.sd-avviso--attenzione { background: #fff5e3; color: #8a5300; }
.sd-avviso--info       { background: #eaf4fb; color: #1d4f7c; }
.sd-avviso--ok         { background: #e8f6ee; color: #1e6b3f; }
.sd-avviso a { color: inherit; font-weight: 600; }

a.sd-bottone { text-decoration: none; }
.sd-nota--centro { text-align: center; margin-top: 12px; }
.sd-lic { margin-top: 18px; }
.sd-lic .sd-avviso { margin: 0; }

/* Cambio password: gruppi di campo, robustezza e regole */
.sd-gruppo + .sd-gruppo { margin-top: var(--m-campo-gap); }
.sd-forza { height: 4px; margin-top: 8px; border-radius: 2px; background: #e4e9ee; overflow: hidden; }
.sd-forza span { display: block; width: 0; height: 100%; transition: width .2s ease, background-color .2s ease; }
.sd-esito { min-height: 1.2em; margin-top: 4px; font-size: 13px; color: var(--sd-tenue); }
.sd-regole { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--sd-tenue); }
.sd-regole li.ok { color: #1e8a4c; }

/* Elenco di scelta (piu' aree trovate, ecc.) */
.sd-scelte { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--sd-bordo); border-radius: 8px; background: #fff; overflow: hidden; }
.sd-scelte li + li { border-top: 1px solid var(--sd-bordo); }
.sd-scelte a { display: block; padding: 10px 14px; color: var(--sd-inchiostro); text-decoration: none; }
.sd-scelte a:hover { background: #f4f8fb; }
.sd-scelte small { display: block; color: var(--sd-tenue); }

/* Vantaggi (versione verticale) */
.sd-vantaggi { list-style: none; margin: 0; padding: 0; }
.sd-vantaggi--m {
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(530px, 100%);
  margin-top: var(--m-vantaggi-gap);
}
/* sotto al riquadro c'e' gia' il collegamento di aiuto: si recupera il suo spazio */
.sd-card:has(.sd-aiuto) + .sd-vantaggi--m { margin-top: var(--m-vantaggi-gap-aiuto); }
.sd-vantaggi--m li {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 4px; text-align: center;
}
.sd-vantaggi--m li + li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 2px;
  width: 1px; background: #cdd5dd;
}
.sd-vantaggi--m svg { width: var(--m-icona); height: var(--m-icona); }
.sd-i-m--blu { color: #1d62ab; }
.sd-i-m--tur { color: #19a9b4; }
.sd-vantaggi--m span {
  margin-top: var(--m-etichetta-gap);
  font-size: var(--m-etichetta); line-height: 1.3;
  letter-spacing: .01em; text-transform: uppercase;
  color: #4a5a6c;
}

/* Firma "La piattaforma gestionale di FACE CONSULTING" */
.sd-firma {
  align-self: flex-end;
  margin-top: auto;
  padding: var(--m-firma-pad);
  text-align: right;
}
.sd-firma__riga { display: block; font-size: var(--m-firma-riga); color: #56677a; }
.sd-firma__nome {
  display: block; margin-top: 6px; margin-right: -.14em;
  font-family: "SD Montserrat", var(--sd-font); font-weight: 600;
  font-size: var(--m-firma-nome); letter-spacing: .14em; text-transform: uppercase;
  color: #3b4c60;
}

/* Forme in basso a sinistra */
.sd-pagina > .sd-forme {
  position: absolute; z-index: 0; left: 0; bottom: 0;
  width: var(--m-forme); max-width: 100%; height: auto;
  pointer-events: none;
}

/* ==========================================================================
   VERSIONE ORIZZONTALE — foto a tutto schermo

   La foto si adatta allo schermo (background-size: cover); riquadro, marchio e
   testi no: restano della loro misura e si spostano.

   Sotto il riquadro la foto e' stata ricostruita (nel mockup c'era il
   riquadro), e sul lato sinistro di quella zona c'e' una giunzione dove
   finiva il casco. Per questo il riquadro si posiziona rispetto alla foto:
     --s  scala con cui il browser ridimensiona la foto (mockup 1600x900);
          serve SOLO a calcolare dove cade la zona ricostruita, non ingrandisce
          niente.
     - finche' la zona e' piu' piccola del riquadro (schermi fino a ~1600 px),
       il riquadro le si centra sopra e la copre tutta;
     - su schermi piu' grandi la zona supera il riquadro: il riquadro resta
       agganciato al suo angolo in basso a sinistra (dove c'e' la giunzione) e
       sopra e a destra si vede la parte ricostruita, che sono solo le fasce
       colorate e stanno bene.
     --h  taglia del marchio a sinistra, a scalini secondo lo spazio libero
   ========================================================================== */
@media (min-width: 1100px) and (min-height: 560px) and (min-aspect-ratio: 3/2) and (max-aspect-ratio: 3/1) {
  :root {
    --s: max(calc(100vw / 1600), calc(100vh / 900));
    --h: .64px;
  }
  @media (min-width: 1240px) { :root { --h: .76px; } }
  @media (min-width: 1340px) and (min-aspect-ratio: 8/5) { :root { --h: .88px; } }
  @media (min-width: 1600px) { :root { --h: .88px; } }
  @media (min-width: 1500px) and (min-height: 600px) and (min-aspect-ratio: 8/5) { :root { --h: 1px; } }
  @media (min-width: 1900px) and (min-height: 600px) { :root { --h: 1px; } }

  .sd-sfondo {
    background-color: #e3ebf1;
    background-image: url("../assets/brand/accesso-desktop.jpg");
    background-image: image-set(url("../assets/brand/accesso-desktop.webp") type("image/webp"),
                                url("../assets/brand/accesso-desktop.jpg") type("image/jpeg"));
    background-position: right center;
  }

  /* Il riquadro sta nel flusso, a destra, centrato in verticale con i margini
     automatici; i padding spostano quel centro dove serve (vedi sopra). Se il
     riquadro e' piu' alto del previsto cresce sopra e sotto, e se non ci sta
     la pagina scorre. Zona ricostruita, in pixel del mockup: x 1056-1540,
     y 188-660. */
  .sd-pagina {
    display: flex; flex-direction: column; align-items: flex-end;
    min-height: 100vh; overflow: visible;
    padding-left: 0;
    padding-right: max(24px, calc(302 * var(--s) - 235.5px), calc(544 * var(--s) - 471px));
    padding-top: max(0px, calc(420 * var(--s) - 459px));
    padding-bottom: max(0px, min(calc(52 * var(--s)), calc(459px - 420 * var(--s))));
  }

  .sd-hero__claim-m,
  .sd-vantaggi--m,
  .sd-firma,
  .sd-pagina > .sd-forme { display: none; }

  /* ---- marchio, scritte e vantaggi (misure del mockup x --h) ---- */
  .sd-hero {
    position: absolute;
    display: block; text-align: left;
    left: clamp(48px, 4.5vw, 120px);
    /* come nel mockup il marchio sta un po' piu' in alto del riquadro (75 px
       sopra il suo centro), ma mai cosi' in basso da toccare il portatile della foto */
    top: min(calc(50vh + max(-26 * var(--s), 210 * var(--s) - 229.5px) - 265.3 * var(--h)),
             calc(50vh + 120 * var(--s) - 20px - 380.6 * var(--h)));
    width: calc(806 * var(--h));
    height: calc(380.6 * var(--h));
  }
  .sd-hero > * { position: absolute; margin: 0; }
  .sd-hero__marchio { left: 0; top: 0; width: calc(159 * var(--h)); }
  .sd-hero__scritta { left: calc(191.6 * var(--h)); top: calc(51.45 * var(--h)); }
  .sd-hero__scritta-svg { width: calc(613.8 * var(--h)); max-width: none; }
  .sd-hero__claim,
  .sd-hero__sotto { display: block; white-space: nowrap; line-height: 1.2; letter-spacing: .029em; }
  .sd-hero__claim {
    left: calc(194.4 * var(--h)); top: calc(131.7 * var(--h));
    font-size: calc(25.7 * var(--h)); color: #42546b;
    -webkit-text-stroke: .3px currentColor;   /* peso "medio": Selawik non ce l'ha */
  }
  .sd-hero__sotto {
    left: calc(193.9 * var(--h)); top: calc(166.3 * var(--h));
    font-size: calc(20 * var(--h)); color: #6d7a8b;
    -webkit-text-stroke: .25px currentColor;
  }
  .sd-vantaggi--d { display: block; left: 0; top: 0; width: 100%; height: 100%; }
  .sd-vantaggi--d li {
    position: absolute; top: calc(238 * var(--h)); width: calc(189 * var(--h));
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .sd-vantaggi--d li:nth-child(1) { left: calc(-24.1 * var(--h)); }
  .sd-vantaggi--d li:nth-child(2) { left: calc(164.9 * var(--h)); }
  .sd-vantaggi--d li:nth-child(3) { left: calc(353.9 * var(--h)); }
  .sd-vantaggi--d li:nth-child(4) { left: calc(542.9 * var(--h)); }
  .sd-vantaggi__cerchio {
    display: grid; place-items: center;
    width: calc(94 * var(--h)); height: calc(94 * var(--h));
    border-radius: 50%; background: rgba(226, 241, 250, .92);
  }
  .sd-vantaggi__cerchio svg { width: calc(68 * var(--h)); height: calc(68 * var(--h)); overflow: visible; }
  .sd-i-blu { stroke: #0d3f78; }
  .sd-i-tur { stroke: #16adb8; }
  .sd-i-pieno .sd-i-blu { fill: #0d3f78; stroke: none; }
  .sd-i-pieno .sd-i-tur { fill: #16adb8; stroke: none; }
  .sd-i-fondo { fill: #e2f1fa; }
  .sd-vantaggi__testo {
    margin-top: calc(8.4 * var(--h));
    font-size: max(calc(16 * var(--h)), 10px);
    line-height: 1.4375;
    letter-spacing: .026em; text-transform: uppercase; white-space: nowrap;
    color: #43556c;
    -webkit-text-stroke: .4px currentColor;
  }

  /* ---- riquadro d'accesso: misura fissa (quella del mockup a 1600x900) ---- */
  .sd-card,
  .sd-card:has(.sd-spazio--piede) { margin: auto 0; }
  .sd-card {
    flex: 0 0 auto;
    width: 471px;
    min-height: 459px;
    display: flex; flex-direction: column; justify-content: center;
    padding: 3.54em 2.5em 3.4em 2.72em;
    font-size: 16px;
    background: #fff;
    border-radius: 1em;
    box-shadow: 0 .9em 2.6em rgba(4, 38, 78, .16), 0 .1em .3em rgba(4, 38, 78, .06);
  }
  .sd-card__titolo {
    position: static; width: auto; height: auto; margin: 0 0 1.463em; padding: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: nowrap;
    font-size: 1.606em; line-height: 1.2; color: #3d4a5c;
  }
  .sd-card__titolo .sd-card__scritta { height: .795em; margin-left: .36em; }
  .sd-intro { margin: -.6em 0 1.4em; font-size: .94em; text-align: left; }
  .sd-spazio { justify-content: flex-start; margin: -.7em 0 1.3em; font-size: .906em; }
  .sd-spazio--piede {
    order: 0; align-self: stretch; flex-wrap: nowrap;
    margin: .95em 0 0; padding: .8em 0 0; border-radius: 0;
    background: none; box-shadow: none; border-top: 1px solid #e3e8ed; font-size: .85em;
  }
  .sd-spazio--piede svg { width: 1.3em; height: 1.3em; }
  .sd-spazio--piede .sd-spazio__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-spazio--piede a { flex: 0 0 auto; margin-left: auto; }
  .sd-card:has(.sd-spazio--piede) { padding-bottom: 1.05em; }
  .sd-nota { font-size: .85em; }
  .sd-avviso { margin-bottom: 1em; padding: .7em .9em; font-size: .906em; }
  .sd-avviso svg { width: 1.25em; height: 1.25em; }
  .sd-scelte { font-size: .94em; }

  .sd-campo { height: 4.125em; border-radius: .5em; }
  .sd-campo + .sd-campo { margin-top: 1.375em; }
  .sd-campo__icona { left: .94em; width: 2.5em; height: 2.5em; }
  .sd-campo__input { padding: 0 .9em 0 4.08em; font-size: 1.125em; }
  .sd-campo:has(.sd-campo__azione) .sd-campo__input { padding-right: 3.1em; }
  .sd-campo__azione { right: .55em; width: 2.6em; height: 2.6em; border-radius: .5em; }
  .sd-campo__azione svg { width: 1.84em; height: 1.84em; }

  /* qui gli em sono quelli del pulsante (19px) */
  .sd-bottone {
    height: 2.895em; margin-top: 1.42em; border-radius: .316em;
    font-size: 1.19em; gap: 1.21em;
  }
  .sd-bottone > span { line-height: 1; }
  .sd-bottone__freccia { width: 1.4em; height: 1.16em; }

  .sd-aiuto { position: relative; margin-top: 1.66em; text-align: right; }
  .sd-link { font-size: .906em; }
  /* In orizzontale l'aiuto e' un fumetto sopra la pagina: il riquadro non
     cambia altezza e quindi non si sposta mentre lo si legge */
  .sd-aiuto__testo {
    position: absolute; z-index: 5; right: 0; top: calc(100% + .75em);
    width: 100%; margin: 0; padding: .9em 1.05em; font-size: .875em;
    background: #fff; border: 1px solid #e3e8ed; border-radius: .6em;
    box-shadow: 0 .9em 2.4em rgba(4, 38, 78, .18);
  }
  .sd-aiuto__testo::before {
    content: ""; position: absolute; top: -.45em; right: 2.2em;
    width: .8em; height: .8em; background: #fff; transform: rotate(45deg);
    border-left: 1px solid #e3e8ed; border-top: 1px solid #e3e8ed;
  }

  .sd-nota--centro { margin-top: .9em; }
  .sd-lic { margin-top: 1.1em; }
  .sd-gruppo + .sd-gruppo { margin-top: 1.1em; }
  .sd-forza { margin-top: .5em; }
  .sd-esito, .sd-regole { font-size: .82em; }
}

/* Telefoni piccoli: un po' di respiro in meno */
@media (max-width: 360px) {
  .sd-pagina { padding-left: 14px; padding-right: 14px; }
  .sd-vantaggi--m span { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-campo, .sd-bottone { transition: none; }
}