/* Lo stile di Campo libero, la landing finita.
   Un tabellone svizzero per il calcetto, detto sottovoce.
   Inchiostro nero e grigi sulla carta off-white di Hustla.
   L'arancio vuol dire solo libero adesso.
   Il file segue l'ordine dell'HTML. Ogni sezione ha prima il mobile,
   poi subito sotto la media query del desktop, da 64rem in su.
   Nessun JavaScript. Il movimento è nei passaggi del mouse, nella pressione
   dei bottoni e nell'apertura della faq, breve, e si spegne con
   prefers-reduced-motion. */

@import url("variabili.css");


/* ---------- Carattere ---------- */
/* Public Sans variabile, ospitata nella cartella font. Un file per tutti i pesi. */

@font-face {
  font-family: "Public Sans";
  src: url("font/PublicSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---------- Base ---------- */
/* Gli unici selettori non di classe. Tolgono i valori del browser. */

* {
  box-sizing: border-box;
}

/* In mobile l'header non è fisso, i link interni si fermano poco sotto il bordo */
html {
  scroll-padding-top: var(--space-24);
}

/* Lo scorrimento morbido solo per chi non ha chiesto meno movimento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Corpo 16 su 1.6, come Hustla */
body {
  margin: 0;
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
figure,
address {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 0.25em;
}

::selection {
  background: var(--color-gray-900);
  color: var(--color-white);
}

/* Il bordo di 2 px mostra dove si trova chi naviga con la tastiera */
:focus-visible {
  outline: var(--size-2) solid var(--color-gray-900);
  outline-offset: var(--size-2);
}

/* Meno movimento. Nessuna transizione e nessuno spostamento.
   Le transizioni della pagina si spengono qui per nome, perché un
   selettore di classe batte * e lo renderebbe inutile.
   L'apertura della faq non c'è proprio, sta dentro no-preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  .header-link,
  .header-action,
  .cta-action,
  .features-card,
  .faq-item-question::after {
    animation: none;
    transition: none;
  }

  .header-action:active,
  .cta-action:active {
    transform: none;
  }
}

@media (min-width: 64rem) {
  html {
    scroll-padding-top: var(--space-104);
  }
}


/* ---------- Bottoni ---------- */
/* Due bottoni diversi.
   Nell'hero il badge ufficiale di App Store, non modificato, una volta sola
   nella pagina, come chiede Apple. Il file ha il viewBox di 120 per 40,
   così a 54 di altezza, la misura di Hustla, la larghezza è intera, 162,
   e il disegno non si deforma.
   Intorno serve uno spazio libero di un quarto dell'altezza, 13.5 px.
   Nell'header e nella cta il bottone Scarica di Hustla. Fondo inchiostro,
   testo bianco e la mela a sinistra, alto 36 nell'header e 48 nella cta. */

.hero-action {
  display: block;
  justify-self: center;
  border-radius: var(--radius-8);
}

.hero-action img {
  width: 10.125rem;    /* 162 */
  height: 3.375rem;    /* 54 */
}

/* Il bottone Scarica. Un filo di luce in alto e un'ombra corta,
   come Hustla. Al passaggio il nero si schiarisce appena,
   alla pressione scende al 97 per cento (skill di Emil Kowalski). */
.header-action,
.cta-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;   /* 6 */
  width: 6rem;   /* 96, larghezza intera, così il bottone cade su pixel interi anche quando è centrato */
  height: var(--size-36);
  padding: 0 0.125rem 0 0;   /* la mela pesa a sinistra, il testo scivola di 1 px a destra */
  border-radius: var(--radius-10);
  background: var(--color-gray-900);
  box-shadow: var(--shadow-button);
  color: var(--color-white);
  font-size: var(--font-size-13-5);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-160) ease,
    transform var(--duration-160) var(--ease-out);
}

.header-action-icon,
.cta-action-icon {
  width: 0.875rem;   /* 14 */
  height: 0.875rem;
  margin-top: -0.125rem;   /* la mela ha la foglia in alto, scende di 2 per stare al centro della riga */
  flex: none;
}

.header-action:active,
.cta-action:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .header-action:hover,
  .cta-action:hover {
    background: color-mix(in srgb, var(--color-white) 14%, var(--color-gray-900));
  }
}


/* ---------- Header ---------- */
/* Largo quanto la finestra, con il fondo carta e nessun filetto sotto.
   Il contenuto sta nella colonna di 1200. Il padding laterale calcola
   quanto manca per arrivarci, e non scende mai sotto i 24 px.
   Mobile. Non è fisso. Marchio e badge in riga, la navigazione in una
   seconda riga che scorre in orizzontale se non ci sta. */

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) max(var(--space-24), (100% - var(--width-page)) / 2 + var(--space-24)) 0;
  background: var(--color-gray-50);
  font-size: var(--font-size-14);
  line-height: var(--font-leading-20);
}

/* Link per saltare al contenuto. Nascosto finché non riceve il focus. */
.header-skip {
  position: absolute;
  top: var(--space-8);
  left: var(--space-24);
  z-index: 2;
  padding: var(--space-8) var(--space-16);
  background: var(--color-gray-900);
  color: var(--color-white);
  clip-path: inset(50%);
}

.header-skip:focus {
  clip-path: none;
}

.header-brand {
  display: flex;
  flex: none;   /* il marchio non si stringe mai, se non c'è posto il bottone va a capo */
  align-items: center;
  min-height: var(--size-44);
}

/* Il marchio ha il viewBox stretto sul disegno e misure intere, 156 per 26.
   Si mostra sempre alla sua misura, mai scalato, così resta nitido. */
.header-brand img {
  width: 9.75rem;    /* 156 */
  height: 1.625rem;  /* 26 */
}

/* Il menu a scomparsa arriverà più avanti. Per ora il bottone non si vede. */
.header-toggle {
  display: none;
}

/* La navigazione occupa la seconda riga e scorre se serve */
.header-nav {
  order: 1;
  width: calc(100% + var(--space-48));
  margin: var(--space-8) calc(var(--space-24) * -1) 0;
  padding: 0 var(--space-24);
  overflow-x: auto;
  scrollbar-width: none;
}

.header-list {
  display: flex;
  gap: var(--space-16);
  list-style: none;
}

/* Il sottolineato c'è sempre ma è trasparente. Al passaggio del mouse
   prende colore in 160 ms, insieme al testo che passa dal grigio al nero. */
.header-link {
  display: flex;
  align-items: center;
  min-height: var(--size-44);
  color: var(--color-gray-600);
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.35em;
  white-space: nowrap;
  transition:
    color var(--duration-160) ease,
    text-decoration-color var(--duration-160) ease;
}

.header-link:hover {
  color: var(--color-gray-900);
  text-decoration-color: var(--color-line-strong);
}

/* Desktop. Una riga alta 72, fissa in alto. Il fondo carta è appena
   trasparente e sfoca quello che scorre sotto. */
@media (min-width: 64rem) {
  .header {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-wrap: nowrap;
    gap: var(--space-40);
    min-height: var(--size-72);   /* 72, marchio e bottone cadono su pixel interi */
    padding-top: 0;
    background: rgb(244 243 244 / 0.86);
    -webkit-backdrop-filter: saturate(1.8) blur(12px);
    backdrop-filter: saturate(1.8) blur(12px);
  }

  .header-nav {
    order: 0;
    width: auto;
    margin: 0 0 0 auto;
    padding: 0;
    overflow: visible;
  }

  .header-list {
    gap: var(--space-32);
  }
}


/* ---------- Main ---------- */
/* Ogni sezione sta nella stessa colonna di 1200 px, con lo stesso bordo.
   Lo spazio tra le sezioni lo dà solo il padding sopra, così non si somma.
   Desktop 168, mobile 104, due spazi di Fibonacci vicini. */

.hero,
.problem,
.how,
.features,
.screens,
.faq,
.cta {
  max-width: var(--width-page);
  margin: 0 auto;
  padding: var(--space-104) var(--space-24) 0;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .problem,
  .how,
  .features,
  .screens,
  .faq,
  .cta {
    padding-top: var(--space-168);
  }
}


/* ---------- Titoli di sezione ---------- */
/* Uguali in problem, how, features, screens e faq.
   Title 47 su 52 in desktop, 29 su 36 in mobile. */

.problem-title,
.how-title,
.features-title,
.screens-title,
.faq-title {
  max-width: 20ch;
  font-size: var(--font-size-29);
  line-height: var(--font-leading-36);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-title);
}

@media (min-width: 64rem) {
  .problem-title,
  .how-title,
  .features-title,
  .screens-title,
  .faq-title {
    font-size: var(--font-size-47);
    line-height: var(--font-leading-52);
  }
}


/* ---------- Hero ---------- */
/* Tutta centrata, come Hustla. Titolo, frase, badge, nota, poi il mockup.
   Misure di Hustla. Titolo 67 a 1440 e 38 a 390, interlinea 1.08,
   largo al massimo 15ch. Frase 19 e 17, interlinea 1.55, larga 46ch.
   Nota 13 nel grigio chiaro dei testi. */

.hero {
  display: grid;
  justify-items: center;
  padding-top: var(--space-64);
  padding-bottom: var(--space-40);
  text-align: center;
}

/* min() con 11vw. Sotto i 345 px di finestra, per esempio con lo zoom al 200
   per cento, il titolo scende quanto basta per non spezzare le parole. */
.hero-title {
  max-width: 15ch;
  font-size: min(var(--font-size-hero), 11vw);
  line-height: var(--font-leading-hero);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-hero);
}

.hero-text {
  max-width: 46ch;
  margin-top: var(--space-24);
  color: var(--color-gray-600);
  font-size: var(--font-size-hero-text);
  line-height: var(--font-leading-hero-text);
}

.hero-action {
  margin-top: var(--space-40);
}

/* 16 sopra, più dei 13.5 di rispetto del badge */
.hero-note {
  max-width: 40ch;
  margin-top: var(--space-16);
  color: var(--color-gray-550);
  font-size: var(--font-size-13);
  line-height: var(--font-leading-20);
}

/* Il mockup è un PNG trasparente, iPhone, MacBook e iPad dritti.
   In mobile esce di 24 px per lato, i bordi trasparenti fanno da margine.
   Sopra 64, e sotto 40 di hero prima dei 104 del problem. */
.hero-screen {
  width: calc(100% + var(--space-48));
  max-width: none;
  height: auto;
  margin: var(--space-64) calc(var(--space-24) * -1) 0;
}

/* Desktop. Più aria sotto l'header, sopra e sotto il mockup.
   Il titolo cade 176 sotto il bordo, come in Hustla. */
@media (min-width: 64rem) {
  .hero {
    padding-top: var(--space-104);
    padding-bottom: var(--space-64);
  }

  .hero-screen {
    width: 100%;
    margin: var(--space-104) 0 0;
  }
}


/* ---------- Problem ---------- */
/* Desktop. Divisione aurea. Il titolo nella parte minore,
   il racconto nella maggiore, in lead e in inchiostro, come Hustla. */

.problem {
  display: grid;
  gap: var(--space-24);
}

.problem-text {
  max-width: 40ch;
  font-size: var(--font-size-23);
  line-height: var(--font-leading-32);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-lead);
}

@media (min-width: 64rem) {
  .problem {
    grid-template-columns: var(--grid-golden);
    column-gap: var(--space-64);
    align-items: start;
  }

  .problem-text {
    font-size: var(--font-size-29);
    line-height: var(--font-leading-40);
  }
}


/* ---------- How ---------- */
/* Sul modello delle tre liste di Hustla. Ogni passo è una card chiara
   con dentro un piccolo pezzo dell'app, e la didascalia sotto.
   La card è il ::before del passo, così l'HTML resta quello dello scheletro.
   Le tre immagini sono PNG trasparenti a 2x, 296 px di larghezza,
   generate da app/mini-passi.html con app/mini.py. */

.how {
  display: grid;
  gap: var(--space-40);
}

.how-steps {
  display: grid;
  gap: var(--space-40);
  list-style: none;
}

/* Didascalia. Il numero in una colonna stretta, titolo e testo accanto. */
.how-step {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0, 1fr);
  align-content: start;
}

.how-step::before {
  content: "";
  grid-column: 1 / -1;
  height: 16.5rem;   /* 264, la mini illustrazione più alta è 202 */
  margin-bottom: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-white) center / 18.5rem auto no-repeat;   /* 296 */
  box-shadow: var(--shadow-border), var(--shadow-card);
}

.how-step:nth-child(1)::before { background-image: url("img/passo-1.png"); }
.how-step:nth-child(2)::before { background-image: url("img/passo-2.png"); }
.how-step:nth-child(3)::before { background-image: url("img/passo-3.png"); }

.how-step-number {
  color: var(--color-gray-600);
  font-size: var(--font-size-15);
  line-height: var(--font-leading-24);
  font-variant-numeric: tabular-nums;
}

.how-step-title {
  font-size: var(--font-size-15);
  line-height: var(--font-leading-24);
  font-weight: var(--font-weight-semibold);
}

.how-step-text {
  grid-column: 2;
  max-width: 36ch;
  color: var(--color-gray-600);
  font-size: var(--font-size-15);
  line-height: var(--font-leading-24);
}

@media (min-width: 64rem) {
  .how {
    gap: var(--space-64);
  }

  .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
  }
}


/* ---------- Features ---------- */
/* Una griglia divisa da filetti di 1 px. Il trucco. La griglia ha il fondo
   del filetto e uno spazio di 1 px tra le celle, le celle hanno il fondo carta.
   Quello che resta visibile nello spazio sono i filetti. */

.features {
  display: grid;
  gap: var(--space-40);
}

.features-cards {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  list-style: none;
}

.features-card {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  padding: var(--space-24) 0 var(--space-40);
  background: var(--color-gray-50);
  transition: background-color var(--duration-200) ease;
}

/* Nessuna icona. La griglia è solo tipografica, titolo e testo tra i filetti.
   Il titolo sale a 650, un po' più marcato del 600 delle domande. */
.features-card-title {
  font-size: var(--font-size-19);
  line-height: var(--font-leading-28);
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Libero adesso è l'unico titolo con il quadrato arancio del marchio */
.features-card:first-child .features-card-title::after {
  content: "";
  display: inline-block;
  width: 0.625rem;   /* 10 */
  height: 0.625rem;
  margin-left: var(--space-8);
  background: var(--color-orange-500);
}

.features-card-text {
  max-width: 36ch;
  color: var(--color-gray-600);
  font-size: var(--font-size-15);
  line-height: var(--font-leading-body);
}

/* Solo con un mouse vero. La cella si schiarisce di poco. */
@media (hover: hover) and (pointer: fine) {
  .features-card:hover {
    background: color-mix(in srgb, var(--color-white) 45%, var(--color-gray-50));
  }
}

@media (min-width: 64rem) {
  .features {
    gap: var(--space-64);
  }

  .features-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .features-card {
    padding: var(--space-40);
  }
}


/* ---------- Screens ---------- */
/* Mobile. Le tre schermate scorrono in orizzontale, la pagina no. */

.screens {
  display: grid;
  gap: var(--space-40);
}

.screens-list {
  display: flex;
  gap: var(--space-16);
  margin: 0 calc(var(--space-24) * -1);
  padding: var(--space-8) var(--space-24) var(--space-24);
  overflow-x: auto;
  list-style: none;
}

.screens-screen {
  flex: 0 0 var(--size-screen-small);
}

/* Lo schermo di un telefono. Raggio, bordo e ombra come le card. */
.screens-screen-image {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  border-radius: var(--radius-16);
  background: var(--color-gray-50);
  box-shadow: var(--shadow-border), var(--shadow-card);
}

.screens-screen-caption {
  padding-top: var(--space-16);
  color: var(--color-gray-600);
  font-size: var(--font-size-14);
  line-height: var(--font-leading-20);
}

/* Desktop. Divisione aurea. Il titolo nella parte minore,
   le tre schermate nella maggiore, fino al bordo della pagina. */
@media (min-width: 64rem) {
  .screens {
    grid-template-columns: var(--grid-golden);
    gap: var(--space-64);
  }

  .screens-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
    margin: 0;
    padding: 0;
    overflow-x: visible;
  }
}


/* ---------- Faq ---------- */
/* Desktop. Divisione aurea. Titolo nella parte minore, domande nella maggiore.
   Il segno aperto e chiuso è un piccolo pulsante tondo disegnato con il CSS. */

.faq {
  display: grid;
  gap: var(--space-40);
}

.faq-list {
  border-bottom: 1px solid var(--color-line-strong);
}

.faq-item {
  border-top: 1px solid var(--color-line-strong);
}

/* La domanda è una griglia. Testo a sinistra, pulsante a destra. 17 su 24, peso 600. */
.faq-item-question {
  display: grid;
  grid-template-columns: 1fr var(--space-24);
  align-items: center;
  column-gap: var(--space-24);
  min-height: var(--size-44);
  padding: var(--space-24) 0;
  font-size: var(--font-size-17);
  line-height: var(--font-leading-24);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  list-style: none;
  cursor: pointer;
}

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

/* Il pulsante. Un cerchio di 24 con il bordo grigio chiaro e il segno più
   fatto da due sfondi, una barra orizzontale e una verticale. */
.faq-item-question::after {
  content: "";
  width: var(--space-24);
  height: var(--space-24);
  border: 1px solid var(--color-gray-500);
  border-radius: 50%;
  background:
    linear-gradient(var(--color-gray-900), var(--color-gray-900)) center / 0.625rem 1.5px no-repeat,
    linear-gradient(var(--color-gray-900), var(--color-gray-900)) center / 1.5px 0.625rem no-repeat;
  transition:
    transform var(--duration-200) var(--ease-out),
    background-color var(--duration-160) ease,
    border-color var(--duration-160) ease;
}

.faq-item-question:hover::after {
  background-color: var(--color-white);
}

/* Aperta, il cerchio si riempie di inchiostro e il più ruota in una x */
.faq-item[open] .faq-item-question::after {
  border-color: var(--color-gray-900);
  background:
    linear-gradient(var(--color-white), var(--color-white)) center / 0.625rem 1.5px no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) center / 1.5px 0.625rem no-repeat,
    var(--color-gray-900);
  transform: rotate(45deg);
}

.faq-item-answer {
  max-width: 60ch;
  padding-bottom: var(--space-24);
  color: var(--color-gray-600);
  font-size: var(--font-size-15);
  line-height: var(--font-leading-body);
}

/* L'apertura fluida, come Hustla, senza JavaScript.
   ::details-content è il contenitore della risposta. Chiuso è alto 0,
   aperto è alto auto, e interpolate-size permette di animare fino ad auto.
   content-visibility con allow-discrete tiene visibile la risposta mentre
   si chiude. 280 ms con la curva ease-out della skill di Emil Kowalski.
   Così anche la cta sotto scivola invece di saltare.
   Dove il browser non conosce ::details-content la risposta si apre di scatto.
   Con prefers-reduced-motion: reduce l'apertura resta di scatto.
   La risposta sale di 8 nello spazio sotto la domanda. Lo fa il contenitore,
   non la risposta, perché il contenitore taglia quello che esce dai suoi bordi. */
@supports selector(::details-content) {
  .faq-item[open]::details-content {
    margin-top: calc(var(--space-8) * -1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .faq-list {
      interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--duration-280) var(--ease-out),
        margin-top var(--duration-280) var(--ease-out),
        content-visibility var(--duration-280) allow-discrete;
    }

    .faq-item[open]::details-content {
      block-size: auto;
    }
  }
}

@supports not selector(::details-content) {
  .faq-item-answer {
    margin-top: calc(var(--space-8) * -1);
  }
}

@media (min-width: 64rem) {
  .faq {
    grid-template-columns: var(--grid-golden);
    gap: var(--space-64);
    align-items: start;
  }

  /* La risposta non arriva sotto il pulsante */
  .faq-item-answer {
    padding-right: var(--space-64);
  }
}


/* ---------- Cta ---------- */
/* La chiusa, centrata come quella di Hustla. Titolo display, frase,
   il bottone Scarica alto 48 e la nota centrata sotto. */

.cta {
  display: grid;
  justify-items: center;
  padding-bottom: var(--space-168);
  text-align: center;
}

/* Titolo e frase con le stesse misure dell'hero, come in Hustla,
   dove la chiusa non è più grande dell'apertura */
.cta-title {
  max-width: 20ch;
  font-size: min(var(--font-size-hero), 11vw);
  line-height: var(--font-leading-hero);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-hero);
}

.cta-text {
  max-width: 46ch;
  margin-top: var(--space-24);
  color: var(--color-gray-600);
  font-size: var(--font-size-hero-text);
  line-height: var(--font-leading-hero-text);
}

.cta-action {
  justify-self: center;
  gap: var(--space-8);
  width: 8rem;   /* 128 */
  height: var(--size-48);
  margin-top: var(--space-40);
  border-radius: var(--radius-12);
  font-size: var(--font-size-16);
}

.cta-action-icon {
  width: 1.125rem;   /* 18 */
  height: 1.125rem;
}

.cta-note {
  margin-top: var(--space-16);
  color: var(--color-gray-550);
  font-size: var(--font-size-13);
  line-height: var(--font-leading-20);
}

/* ---------- Footer ---------- */
/* Largo quanto la finestra con il filetto sopra, contenuto nella colonna di 1200.
   Mobile. Tutto in colonna, i crediti dopo un filetto. */

.footer {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-40) max(var(--space-24), (100% - var(--width-page)) / 2 + var(--space-24));
  border-top: 1px solid var(--color-line);
  color: var(--color-gray-600);
  font-size: var(--font-size-14);
  line-height: var(--font-leading-20);
}

.footer-brand {
  margin-bottom: var(--space-16);
}

/* Lo stesso marchio dell'header, alla sua misura intera */
.footer-brand img {
  width: 9.75rem;
  height: 1.625rem;
}

.footer-contacts {
  font-style: normal;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-24);
  list-style: none;
}

/* Link del footer alti almeno 44, in inchiostro, sottolineati al passaggio */
.footer-contacts a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-44);
  color: var(--color-gray-900);
  text-decoration: none;
}

.footer-contacts a:hover,
.footer-legal a:hover {
  text-decoration: underline;
}

.footer-credits,
.footer-ai {
  max-width: 60ch;
}

.footer-credits {
  margin-top: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-line);
}

/* Desktop. Divisione aurea come le sezioni sopra.
   Riga 1. Marchio nella parte minore. Nella maggiore il contatto a sinistra
   e i link legali a destra, nella stessa cella.
   Riga 2. Un filetto su tutta la larghezza, disegnato da ::before.
   Riga 3. Crediti sotto il marchio, nota sull'AI sotto il contatto. */
@media (min-width: 64rem) {
  .footer {
    grid-template-columns: var(--grid-golden);
    align-items: center;
    column-gap: var(--space-64);
    row-gap: var(--space-24);
    padding-top: var(--space-40);
    padding-bottom: var(--space-64);
  }

  .footer::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    height: 1px;
    background: var(--color-line);
  }

  .footer-brand {
    margin: 0;
  }

  .footer-contacts {
    grid-column: 2;
    grid-row: 1;
  }

  .footer-legal {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .footer-credits {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .footer-ai {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}