/*
  Tradotto da `FollowGuard Legale.dc.html` nel progetto Claude Design: i valori
  sono quelli del mockup, che resta la fonte di verita'. Solo scuro, come il
  mockup e come l'app.
*/

:root {
  color-scheme: dark;

  --fondo: #0a0810;
  --fondo-testata: rgba(10, 8, 16, 0.82);
  --riga: rgba(255, 255, 255, 0.06);
  --velo: rgba(255, 255, 255, 0.04);
  --velo-bordo: rgba(255, 255, 255, 0.1);
  --velo-card: rgba(255, 255, 255, 0.08);

  --testo: #f7f3ff;
  --titolo: #ffffff;
  --corpo: #b3a9cf;
  --intro: #a79cc4;
  --secondario: #cfc6e8;
  --tenue: #9c92b8;
  --spento: #7d739b;
  --piede: #6c6288;

  --accento: #c6ff3d;
  --accento-chiaro: #d9ff7a;
  --accento-tenue: #cfe6a8;
  --su-accento: #12140a;
  --fondo-logo: #f8f6f2;

  --font: "Nunito", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accento);
  text-decoration: none;
}

a:hover {
  color: var(--accento-chiaro);
}

/* I link del mockup non hanno sottolineatura: il fuoco da tastiera va reso
   visibile a parte, o chi naviga col Tab non sa dove si trova. */
a:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Testata */

.testata {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo-testata);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--riga);
}

.testata__riga,
.piede__riga {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.testata__riga {
  padding: 14px 24px;
  gap: 16px;
  justify-content: space-between;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--titolo);
}

.marchio:hover {
  color: var(--titolo);
}

.marchio__quadrato {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--fondo-logo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marchio__quadrato img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.marchio__nome {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.marchio__nome span {
  color: var(--accento);
}

.lingue {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--riga);
  border: 1px solid var(--velo-bordo);
}

.lingue a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--secondario);
}

.lingue a[aria-current="true"] {
  background: var(--accento);
  color: var(--su-accento);
}

/* Contenuto */

.foglio {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.schede {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.schede a {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  background: var(--velo);
  color: var(--secondario);
  border: 1px solid var(--velo-bordo);
}

.schede a:hover {
  color: var(--titolo);
}

.schede a[aria-current="page"] {
  background: var(--accento);
  color: var(--su-accento);
  border-color: var(--accento);
}

.titolo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

h1 {
  margin: 0;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--titolo);
  text-wrap: balance;
}

.titolo__nota {
  font-size: 14px;
  font-weight: 700;
  color: var(--spento);
}

.documento {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.documento section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--titolo);
}

.documento p,
.documento li {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--corpo);
  text-wrap: pretty;
}

/* Il mockup ha solo paragrafi; i tempi di conservazione si leggono meglio
   come elenco, e l'elenco prende lo stesso corpo del testo. */
.documento ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.documento li::marker {
  color: var(--accento);
}

.documento strong {
  color: var(--titolo);
  font-weight: 800;
}

/* Contatti */

.contatti {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contatti__intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--intro);
  text-wrap: pretty;
}

.email {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(198, 255, 61, 0.14), rgba(198, 255, 61, 0.03));
  border: 1.5px solid rgba(198, 255, 61, 0.45);
}

.email:hover {
  background: rgba(198, 255, 61, 0.18);
}

.email__etichetta {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento-tenue);
}

.email__indirizzo {
  font-family: var(--mono);
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: 700;
  color: var(--titolo);
  word-break: break-all;
}

.email__nota {
  font-size: 14.5px;
  color: var(--accento-tenue);
}

.argomenti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}

.argomento {
  padding: 20px;
  border-radius: 22px;
  background: var(--velo);
  border: 1px solid var(--velo-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.argomento h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
}

.argomento p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tenue);
  text-wrap: pretty;
}

/* Piede */

.piede {
  border-top: 1px solid var(--riga);
}

.piede__riga {
  padding: 32px 24px 40px;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--piede);
}

.piede a {
  color: var(--secondario);
  font-weight: 700;
}

.piede a:hover {
  color: var(--accento);
}

/* ------------------------------------------------------------------------
   Home, da `FollowGuard Sito.dc.html`. I mockup dei telefoni sono HTML e non
   screenshot, come nel mockup: restano nitidi e si traducono con la pagina.
   ------------------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
}

.home {
  overflow-x: hidden;
}

.testata__azioni {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pulsante {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accento);
  color: var(--su-accento);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.pulsante:hover {
  background: var(--accento-chiaro);
  color: var(--su-accento);
}

/* Su un telefono la testata non ha posto per logo, lingue e pulsante: il
   pulsante sparisce, la hero ne ha comunque uno piu' grande subito sotto. */
@media (max-width: 520px) {
  .testata__azioni .pulsante {
    display: none;
  }
}

.fascia {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 24px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.fascia--bordo {
  border-top: 1px solid var(--riga);
}

.fascia--viola {
  background: linear-gradient(180deg, #0a0810 0%, #140d22 100%);
}

.fascia--viola-centro {
  background: linear-gradient(180deg, #0a0810 0%, #140d22 55%, #0a0810 100%);
}

.intestazione {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
}

.occhiello {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6f99;
}

.titolone {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--titolo);
  text-wrap: balance;
}

/* Hero */

.hero {
  background: radial-gradient(90% 70% at 70% 10%, #2a1350 0%, rgba(14, 11, 22, 0) 70%);
}

.hero__griglia {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px clamp(64px, 9vw, 110px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
}

.hero__testo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__etichetta {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(198, 255, 61, 0.1);
  border: 1px solid rgba(198, 255, 61, 0.3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento);
}

.hero h1 {
  font-size: clamp(46px, 7.2vw, 88px);
  line-height: 1;
}

.hero h1 span {
  color: var(--accento);
}

.hero__sotto {
  margin: 0;
  max-width: 520px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--intro);
  text-wrap: pretty;
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 6px;
}

.nota-piccola {
  font-size: 14px;
  font-weight: 700;
  color: var(--spento);
}

.play {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px 12px 20px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--fondo);
  box-shadow: 0 16px 40px rgba(198, 255, 61, 0.14);
}

.play:hover {
  background: var(--accento);
  color: var(--fondo);
}

.play--accento {
  background: var(--accento);
  box-shadow: none;
}

.play--accento:hover {
  background: var(--accento-chiaro);
}

.play__triangolo {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid var(--fondo);
}

.play__testo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.play__piccolo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.play__grande {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Telefoni */

.telefono {
  width: 312px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 48px;
  background: #16121f;
  border: 1px solid var(--velo-bordo);
  box-shadow: 0 40px 100px rgba(168, 52, 240, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.02);
}

.telefono__schermo {
  border-radius: 38px;
  overflow: hidden;
  background: #0b0912;
}

.tel-testata {
  padding: 18px 16px;
  background: linear-gradient(150deg, #3a1470 0%, #1a0f2c 100%);
  border-radius: 0 0 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tel-notch {
  height: 10px;
  display: flex;
  justify-content: center;
}

.tel-notch::before {
  content: "";
  width: 70px;
  height: 8px;
  border-radius: 99px;
  background: #000;
}

.tel-profilo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, #a834f0, #ff6ad5);
}

.tel-nome {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

.tel-sotto {
  font-size: 11px;
  color: #b9a8dd;
}

.tel-riga {
  display: flex;
  gap: 8px;
}

.tel-dato {
  flex: 1;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
}

.tel-dato b {
  display: block;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.tel-dato span {
  font-size: 11px;
  font-weight: 700;
  color: #c3b3e6;
}

.tel-corpo {
  padding: 16px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tel-card {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--velo-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tel-card--rossa {
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 61, 113, 0.18), rgba(255, 61, 113, 0.05));
  border-color: rgba(255, 61, 113, 0.3);
}

.tel-etichetta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ff8fa8;
}

.tel-contatore {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.tel-contatore b {
  font-family: var(--mono);
  font-size: 42px;
  line-height: 0.95;
  font-weight: 700;
  color: #fff;
}

.tel-contatore span {
  font-size: 12px;
  font-weight: 700;
  color: #ffb3c4;
  padding-bottom: 4px;
}

.facce {
  display: flex;
}

.facce span {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #1a0f1c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.facce span:first-child {
  margin-left: 0;
}

.tel-numero {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
}

.tel-titoletto {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
}

.barre {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
}

.barre--alte {
  height: 120px;
  margin-top: 8px;
}

.barre span {
  flex: 1;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #a834f0, #6b1fb0);
}

.barre--lime span {
  background: linear-gradient(180deg, #c6ff3d, #6f9a1a);
}

/* Passi */

.griglia-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.passo {
  padding: 28px;
  border-radius: 28px;
  background: var(--velo);
  border: 1px solid var(--velo-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.passo__numero {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--accento);
}

.passo h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
}

.passo p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--intro);
  text-wrap: pretty;
}

.avviso {
  padding: 18px 22px;
  border-radius: 20px;
  background: rgba(120, 180, 255, 0.08);
  border: 1px solid rgba(120, 180, 255, 0.2);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.5;
  color: #a9c4e8;
}

.avviso b {
  font-size: 18px;
  font-weight: 900;
  color: #78b4ff;
}

/* Privacy */

.due-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 48px;
  align-items: start;
}

.privacy__testo {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.privacy__titolo {
  margin: 0;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #fff;
}

.privacy__titolo span {
  color: var(--accento);
}

.privacy__sotto {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--intro);
  max-width: 460px;
  text-wrap: pretty;
}

.elenco-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.punto {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--velo-card);
}

.punto__icona {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
}

.punto h3 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.punto p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tenue);
}

/* Piani */

.griglia-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
}

.piano {
  padding: 32px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.piano--gratis {
  background: linear-gradient(160deg, rgba(198, 255, 61, 0.14), rgba(198, 255, 61, 0.03));
  border: 1.5px solid rgba(198, 255, 61, 0.45);
}

.piano--pro {
  background: linear-gradient(155deg, rgba(168, 52, 240, 0.22), rgba(255, 106, 213, 0.07));
  border: 1.5px solid rgba(255, 106, 213, 0.35);
}

.piano__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.piano h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}

.distintivo {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accento);
  color: var(--su-accento);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.distintivo--pro {
  background: linear-gradient(120deg, #a834f0, #ff6ad5);
  color: #fff;
}

.piano__prezzo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.piano__prezzo b {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 700;
  color: #fff;
}

.piano__prezzo span {
  font-size: 15px;
  font-weight: 700;
  color: var(--accento-tenue);
}

.piano--pro .piano__prezzo span {
  color: #ffc7ee;
}

.piano ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.piano li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: #e3f6bd;
}

.piano li::before {
  content: "✓";
  color: var(--accento);
  font-weight: 900;
}

.piano--pro li {
  color: #eadcff;
}

.piano--pro li::before {
  color: #ff6ad5;
}

.piano__cta {
  height: 56px;
  border-radius: 999px;
  background: var(--accento);
  color: var(--su-accento);
  font-size: 17px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piano__cta:hover {
  background: var(--accento-chiaro);
  color: var(--su-accento);
}

.piano__nota {
  font-size: 13.5px;
  color: #a898c8;
  text-align: center;
}

/* Screenshot */

.scorrimento {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 8px 4px 24px;
  margin: 0 -4px;
}

.scatto {
  flex: 0 0 auto;
  width: 264px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scatto__cornice {
  padding: 8px;
  border-radius: 40px;
  background: #16121f;
  border: 1px solid var(--velo-bordo);
}

.scatto__schermo {
  height: 520px;
  border-radius: 32px;
  overflow: hidden;
  background: #0b0912;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scatto figcaption {
  font-size: 15px;
  font-weight: 800;
  color: var(--secondario);
}

.sc-titolo {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.sc-sotto {
  font-size: 11px;
  color: var(--tenue);
}

.sc-modo {
  padding: 16px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-modo--zip {
  background: linear-gradient(160deg, rgba(198, 255, 61, 0.14), rgba(198, 255, 61, 0.04));
  border: 1.5px solid rgba(198, 255, 61, 0.45);
}

.sc-modo--pro {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 106, 213, 0.28);
}

.sc-modo__testa {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.sc-modo__testa .distintivo {
  padding: 4px 9px;
  font-size: 10px;
  height: fit-content;
}

.sc-modo p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--accento-tenue);
}

.sc-modo--pro p {
  color: #b9aed6;
}

.sc-bottone {
  height: 40px;
  border-radius: 999px;
  background: var(--accento);
  color: var(--su-accento);
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-oppure {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--piede);
}

.sc-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: var(--velo);
}

.sc-persona .avatar {
  width: 34px;
  height: 34px;
  font-size: 11px;
  font-weight: 800;
}

.sc-persona div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sc-persona b {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-persona span {
  font-size: 10.5px;
  color: var(--tenue);
}

.sc-riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--velo);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--secondario);
}

.sc-riga b {
  font-family: var(--mono);
  font-size: 13px;
}

/* FAQ: <details> e non JavaScript, cosi' si apre anche senza script e lo
   screen reader sa gia' cosa e' aperto e cosa no. */

.faq {
  max-width: 860px;
  gap: 36px;
}

.faq__elenco {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq details {
  border-radius: 22px;
  background: var(--velo);
  border: 1px solid var(--velo-card);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
}

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

.faq summary::after {
  content: "+";
  margin-left: auto;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(198, 255, 61, 0.12);
  color: var(--accento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

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

.faq summary:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: -2px;
  border-radius: 22px;
}

.faq details p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--intro);
  text-wrap: pretty;
}

/* Chiusura */

.chiusura {
  padding: 0 24px clamp(64px, 9vw, 112px);
}

.chiusura__riquadro {
  max-width: 1132px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: 40px;
  background: radial-gradient(100% 120% at 0% 0%, #3a1470 0%, #1a0f2c 70%);
  border: 1px solid var(--velo-card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.chiusura__testo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.chiusura__titolo {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

.chiusura__testo p {
  margin: 0;
  font-size: 17px;
  color: #b9a8dd;
}

/* Piede della home: marchio e avvertenza a sinistra, link a destra. */

.piede--home .piede__riga {
  padding: 36px 24px 44px;
  align-items: flex-start;
  gap: 24px;
}

.piede__marchio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
}

.piede__marchio .marchio__quadrato {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.piede__marchio .marchio__quadrato img {
  width: 23px;
  height: 23px;
}

.piede__marchio .marchio__nome {
  font-size: 16px;
}

.piede__marchio p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--spento);
}

.piede__link {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 14px;
  font-weight: 700;
}