/* ============================================================
   OmnyQR — Stili globali
   Header e footer sono definiti QUI una volta sola e inclusi da
   ogni pagina tramite partials/header.php e partials/footer.php.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-aqua-haze);
  color: var(--c-bunker);
  font-family: var(--f-2);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* height:auto e' indispensabile: senza, gli attributi width/height dell'<img>
   valgono come altezza CSS implicita e annullano gli aspect-ratio. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Container della griglia: 1240px centrati, come i frame Figma
   (1920 con padding orizzontale di 340px) */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--sp-s);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* La prima sezione di ogni pagina parte a y=74 nel Figma, mentre la NAV
   occupa 16+74=90: i 16px di troppo li recupero qui, sulla barra stessa,
   invece di affidarmi alla fusione dei margini (che non tutti i motori
   applicano allo stesso modo). */
main { margin-top: -16px; }

/* ============================================================
   NAV  — Figma 230:1271 / 230:1272
   ============================================================ */
.nav-outer {
  position: sticky;
  top: 16px;             /* la NAV nel Figma parte a y=16 */
  z-index: 100;
  padding-top: 16px;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  height: 74px;                  /* altezza esatta della pillola nel Figma */
  padding: 11px 13px 11px 23px;
  background: var(--c-white-82);
  /* in Figma il contorno e' interno: con box-shadow non aggiunge altezza
     e la pillola resta di 74px come nel progetto */
  box-shadow: inset 0 0 0 var(--sw-1) var(--c-porcelain);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

/* Nav:shadow — Figma 230:1273 */
.nav::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  border-radius: var(--r-pill);
  background: var(--c-white-0);
  box-shadow: 0 18px 44px -28px rgba(11, 16, 18, 0.5);
  pointer-events: none;
}

/* Link - OmnyQR — Figma 230:1274 */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-11);
  flex-shrink: 0;
}
.nav-logo__mark { width: 31.47px;  height: 30.001px; }
.nav-logo__word { width: 123.69px; height: 18px; }

/* Container voci — Figma 230:1277 */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-xxxs);
  flex-shrink: 0;
}
.nav-menu__link {
  display: block;
  padding: var(--sp-9) 13px;
  border-radius: var(--r-pill);
  font-family: var(--f-1);
  font-weight: var(--fw-600);
  /* Il Figma indica 13.5px (--fs-13-5): ingrandito a 15 su richiesta,
     perche' alla misura originale le voci risultavano piccole da leggere.
     Con il testo piu' grande la barra si allarga di circa 60px, per questo
     il menu a scomparsa entra in funzione a 1180px invece che a 1100. */
  font-size: var(--fs-15);
  line-height: var(--lh-21-6);
  color: var(--c-shuttle-gray);
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.nav-menu__link:hover,
.nav-menu__link:focus-visible { color: var(--c-bunker); background: var(--c-bunker-14); }
.nav-menu__link[aria-current="page"] { color: var(--c-bunker); }

/* Button "Prova gratis" — Figma 230:1286 */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-9);
  flex-shrink: 0;
  padding: var(--sp-11) 8px var(--sp-11) 20px;
  background: var(--c-conifer);
  border-radius: var(--r-pill);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-14);
  line-height: normal;
  color: var(--c-bunker);
  text-align: center;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--c-conifer); }
.btn-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--c-bunker);
  border-radius: 15px;
  flex-shrink: 0;
}
.btn-cta__icon img { width: 8.88333px; height: 7.8px; }

/* Toggle mobile: assente nel Figma (progetto solo desktop),
   aggiunto per rendere navigabile la nav sotto i 1180px */
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--r-pill); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block; width: 18px; height: 1.6px;
  background: var(--c-bunker); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { margin-inline: auto; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   FOOTER — Figma 230:1238
   ============================================================ */
.site-footer {
  background: var(--c-bunker);
  padding: var(--sp-xl) var(--sp-s) 32px;
  margin-top: 0;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}

/* Griglia 1.40fr 1fr 1fr 1fr, gap 48px — Figma 230:1240 */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-48);
  align-items: start;
}

.footer-brand { display: flex; flex-direction: column; gap: 24.49px; }
.footer-brand__logo { width: 170px; height: 24.7368px; }
.footer-brand__text {
  max-width: 300.289px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  color: var(--c-regent-gray);
}

.footer-col__title {
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-11);
  line-height: var(--lh-17-6);
  letter-spacing: var(--ls-1-54);
  text-transform: uppercase;
  color: var(--c-rolling-stone);
  padding-bottom: 0.59px;
}
.footer-col__list { padding-top: 18.01px; }
.footer-col__list li + li { padding-top: var(--sp-xxs); }
.footer-col__list li { padding-bottom: 5.39px; }
.footer-col__list a {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  color: var(--c-loblolly);
  transition: color .18s ease;
}
.footer-col__list a:hover { color: var(--c-white); }

/* ---------- Dati societari (aggiunta al Figma) ----------
   Obbligo di legge, ripresi dal footer del sito live. Prendono loro la riga
   di separazione (HorizontalBorder, Figma 230:1266), cosi' il footer resta
   con un solo filo orizzontale invece di due. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12) var(--sp-s-plus);
  padding-top: 25px;
  border-top: var(--sw-1) solid var(--c-outer-space);
}
.footer-legal__owner {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: var(--c-rolling-stone);
}
.footer-legal__owner strong {
  font-weight: var(--fw-600);
  color: var(--c-loblolly);
}
.footer-legal__ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Pastiglie: stessa forma delle etichette della hero, in tono minore */
.footer-legal__ids li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  padding: 5px var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--c-white-4);
  border: var(--sw-1) solid var(--c-white-12);
  font-family: var(--f-2);
  font-size: var(--fs-12);
  line-height: var(--lh-17-6);
  color: var(--c-rolling-stone);
}
.footer-legal__code {
  color: var(--c-loblolly);
  font-variant-numeric: tabular-nums;   /* cifre di larghezza uniforme */
  letter-spacing: .3px;
}
.footer-legal__ids a { color: var(--c-loblolly); text-decoration: none; }
.footer-legal__ids a:hover { color: var(--c-white); text-decoration: underline; }

/* HorizontalBorder — Figma 230:1266 (il filo ora sta su .footer-legal) */
.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-s);
  margin-top: var(--sp-s-plus);
}
/* Copyright e link legali: aggiunta al Figma, che prevedeva il solo
   copyright a sinistra. Restano sulla stessa riga finche' c'e' spazio. */
.footer-bottom__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-s);
}
.footer-bottom__link {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: var(--c-loblolly);
  text-decoration: none;
  white-space: nowrap;
}
.footer-bottom__link:hover { color: var(--c-white); text-decoration: underline; }
.footer-bottom__copy {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: var(--c-rolling-stone);
  white-space: nowrap;
}
/* Claim e firma incolonnati a destra, allineati a fine riga */
.footer-bottom__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-xxs);
}
.footer-bottom__claim {
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  letter-spacing: var(--ls-1-56);
  white-space: nowrap;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Firma di chi ha realizzato il sito: piu' tenue del claim, non deve
   competere con il marchio. */
.footer-bottom__powered {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-12);
  line-height: var(--lh-17-6);
  color: var(--c-rolling-stone);
  white-space: nowrap;
}
.footer-bottom__powered a {
  color: var(--c-regent-gray);
  text-decoration: none;
  transition: color .18s ease;
}
.footer-bottom__powered a:hover { color: var(--c-white); text-decoration: underline; }

/* ============================================================
   ADATTAMENTO RESPONSIVE
   Non presente nel Figma (solo frame desktop 1920): derivato
   mantenendo colori, font e proporzioni del progetto.
   ============================================================ */
@media (max-width: 1180px) {
  .nav { padding: 10px 10px 10px 18px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-xxs);
    padding: var(--sp-12);
    background: var(--c-white);
    border: var(--sw-1) solid var(--c-porcelain);
    border-radius: 24px;
    box-shadow: 0 18px 44px -28px rgba(11, 16, 18, .5);
    display: none;
  }
  .nav-menu[data-open="true"] { display: flex; }
  .nav-menu__link { padding: var(--sp-12) var(--sp-s); font-size: var(--fs-16); }
  .nav .btn-cta { order: 2; }
  .nav-toggle { order: 3; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer__inner { padding-inline: 0; }
}

@media (max-width: 900px) {
  /* Sotto i 900px i dati societari vanno a capo: incolonnati e allineati
     a sinistra, altrimenti il justify-content li spinge ai due estremi. */
  .footer-legal { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: var(--sp-12); }
  .footer-bottom__copy, .footer-bottom__claim { white-space: normal; }
  .footer-bottom__right { align-items: flex-start; }
  .footer-legal__ids li { font-size: var(--fs-11); }
  .btn-cta { padding-inline: 14px 6px; }
}


/* ============================================================
   COMPONENTI CONDIVISI
   Spostati qui da home.css: servono a tutte le pagine.
   ============================================================ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-family: var(--f-3);
  font-weight: var(--fw-700);
  font-size: var(--fs-12);
  line-height: var(--lh-19-2);
  letter-spacing: var(--ls-3-36);
  text-transform: uppercase;
  color: var(--c-java);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-java);
  flex-shrink: 0;
}
.eyebrow--dark { color: var(--c-bunker); }
.eyebrow--dark::before { background: var(--c-bunker); }
.eyebrow--sea { color: var(--c-deep-sea-green); }
.eyebrow--sea::before { background: var(--c-deep-sea-green); }
.eyebrow--lime { color: var(--c-conifer); }
.eyebrow--lime::before { background: var(--c-conifer); }
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-9);
  padding: 15px var(--sp-11) 15px 28px;
  background: var(--c-bunker);
  border-radius: var(--r-pill);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
  transition: transform .18s ease;
}
.btn-primary::before {          /* Button:shadow — Figma 230:1205 */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 16px 34px -16px rgba(11, 16, 18, 0.6);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: var(--c-conifer);
  flex-shrink: 0;
}
.btn-primary__icon img { width: 9.56667px; height: 8.4px; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding: 16.2px 27px 17.8px;
  border: var(--sw-1) solid #d2d9db;
  border-radius: var(--r-pill);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  color: var(--c-bunker);
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease;
}
.btn-ghost:hover { border-color: var(--c-bunker); background: var(--c-white); }
.btn-dark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 226.58px;
  height: 60px;
  padding-left: 28px;
  padding-right: 11px;
  background: var(--c-bunker);
  border-radius: var(--r-pill);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  color: var(--c-white);
  white-space: nowrap;
  transition: transform .18s ease;
}
.btn-dark::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 16px 34px -16px rgba(11, 16, 18, 0.6);
  pointer-events: none;
}
.btn-dark:hover { transform: translateY(-1px); }
.btn-dark__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: var(--c-conifer);
  flex-shrink: 0;
}
.btn-dark__icon img { width: 9.56667px; height: 8.4px; }
.btn-gradient {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-9);
  height: 62px;
  margin-top: 49.5px;
  padding: 0 16px 0 30px;
  border-radius: var(--r-pill);
  background: linear-gradient(125deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  color: var(--c-bunker);
  white-space: nowrap;
  transition: transform .18s ease;
}
.btn-gradient::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 16px 34px -16px rgba(11, 16, 18, 0.4);
  pointer-events: none;
}
.btn-gradient:hover { transform: translateY(-1px); }
.btn-gradient__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 15px;
  background: var(--c-bunker);
  flex-shrink: 0;
}
.btn-gradient__icon img { width: 9.56667px; height: 8.4px; }
.fn-icon26 { position: relative; width: 26px; height: 26px; }
.fn-icon26 img { position: absolute; }
.fn-icon26--access img:nth-child(1) { left: 2.167px;  top: 2.167px;  width: 13px;      height: 13px; }
.fn-icon26--access img:nth-child(2) { left: 11.376px; top: 11.376px; width: 11.373px;  height: 11.373px; }

/* La riga dell'elenco impila titolo e sottotitolo */
.fz-list__text { display: flex; flex-direction: column; }

.fn-icon26--lost   img:nth-child(1) { left: 4.333px;  top: 2.166px;  width: 17.334px;  height: 21.668px; }
.fn-icon26--lost   img:nth-child(2) { left: 9.208px;  top: 7.042px;  width: 7.585px;   height: 7.583px; }
.fn-icon26--share  img:nth-child(1) { left: 6.501px;  top: 2.166px;  width: 15.166px;  height: 21.668px; }
.fn-icon26--share  img:nth-child(2) { left: 8.667px;  top: 2.167px;  width: 13.001px;  height: 17.332px; }


/* ---------- Mosaico delle tessere (home + funzionalita) ---------- */
/* ---------- Mosaico — Figma 230:969 ---------- */
.fn-mosaic {
  position: relative;
  width: 1176px;
  max-width: 100%;
  height: 604px;
}
/* connettori dietro le tessere — Figma 230:970 → 230:974 */
.fn-conn {
  position: absolute;
  background: var(--c-bunker);
  border-radius: 12px;
}
.fn-conn--a { left: 104px; top: 277px; width: 110px; height: 34px; }
.fn-conn--b { left: 291px; top: 400px; width: 34px; height: 110px; }
.fn-conn--c { left: 607px; top: 400px; width: 34px; height: 110px; }
.fn-conn--d { left: 760px; top: 277px; width: 110px; height: 34px; }
.fn-conn--e { left: 687px; top: 96px;  width: 34px; height: 110px; }
/* quadrato lime — Figma 230:982 */
.fn-square {
  position: absolute;
  left: 682px;
  top: 128px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--c-conifer);
}
/* riquadri fotografici — Figma 230:975 e 230:981 */
.fn-photo {
  position: absolute;
  border-radius: 30px;
  overflow: hidden;
}
.fn-photo img { width: 100%; height: 100%; object-fit: cover; }
.fn-photo--t1 { left: 0;     top: 0;     width: 300px; height: 286px; }
.fn-photo--t7 { left: 948px; top: 302px; width: 228px; height: 302px; }
/* ---------- Tessera (Component 2) ---------- */
.fn-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 50px -30px rgba(11, 16, 18, 0.45);
}
.fn-card--connect { left: 316px; top: 0;     width: 380px; height: 286px; padding-bottom: 25.24px;
  background: linear-gradient(134.99999993721605deg, #0b1012 0%, #0e2a2b 60%, #123c34 100%); }
.fn-card--access  { left: 712px; top: 0;     width: 464px; height: 286px;
  background: linear-gradient(150.00000054561949deg, #35d1df 0%, #23a9be 100%); }
.fn-card--lost    { left: 0;     top: 302px; width: 300px; height: 302px;
  background: linear-gradient(150.00000033201655deg, #c2e850 0%, #a2d636 100%); }
.fn-card--share   { left: 316px; top: 302px; width: 300px; height: 302px; padding: 31px;
  background: var(--c-white); border: var(--sw-1) solid var(--c-porcelain); }
.fn-card--notify  { left: 632px; top: 302px; width: 300px; height: 302px; padding-bottom: 20.24px;
  background: linear-gradient(134.99999911501556deg, #0b1012 0%, #0e2a2b 60%, #123c34 100%); }
/* pastiglia icona */
.fn-card__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  border-radius: 15px;
  flex-shrink: 0;
}
.fn-card__icon img { display: block; }
.fn-card--connect .fn-card__icon { height: 26px;    background: var(--c-conifer-18); }
.fn-card--notify  .fn-card__icon { height: 26px;    background: var(--c-scooter-18); }
.fn-card--access  .fn-card__icon { height: 42.83px; background: var(--c-bunker-14); }
.fn-card--lost    .fn-card__icon { height: 37.83px; background: var(--c-bunker-14); }
.fn-card--share   .fn-card__icon { height: 35.23px;
  background: linear-gradient(125.00000014126337deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%); }
.fn-card__title {
  padding-top: var(--sp-s);
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-24);
  line-height: var(--lh-38-4);
}
.fn-card__kicker {
  padding-top: var(--sp-xxs);
  padding-bottom: 0.59px;
  opacity: 0.66;
  font-family: var(--f-3);
  font-weight: var(--fw-600);
  font-size: var(--fs-11);
  line-height: var(--lh-17-6);
  letter-spacing: var(--ls-1-54);
  text-transform: uppercase;
}
.fn-card__lead {
  padding-top: 10.795px;
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-21-6);
}
.fn-card__body {
  padding-top: var(--sp-9);
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
  line-height: var(--lh-21);
}
.fn-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7.6px;
  height: 21.59px;
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-13-5);
  line-height: var(--lh-21-6);
  white-space: nowrap;
}
.fn-card__link img { width: 9.56667px; height: 8.4px; }

@media (max-width: 1239px) {
  .fn-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    height: auto;
  }
  .fn-conn, .fn-square { display: none; }
  .fn-card, .fn-photo { position: static; width: auto; height: auto; min-height: 302px; }
  .fn-photo { min-height: 240px; }
  .fn-card--access { grid-column: span 2; }
}
@media (max-width: 720px) {
  .fn-mosaic { grid-template-columns: 1fr; }
  .fn-card--access { grid-column: span 1; }
}

/* Occhiello centrato (usato dalle sezioni con intestazione centrata) */
.eyebrow--center { justify-content: center; }

/* Colori per tessera — Figma 230:976 → 230:980
   (ripristinati: persi durante lo spostamento del mosaico) */
.fn-card--connect .fn-card__title,
.fn-card--connect .fn-card__kicker,
.fn-card--connect .fn-card__link,
.fn-card--notify .fn-card__title,
.fn-card--notify .fn-card__kicker,
.fn-card--notify .fn-card__link { color: var(--c-white); }

.fn-card--connect .fn-card__lead,
.fn-card--connect .fn-card__body,
.fn-card--notify .fn-card__lead,
.fn-card--notify .fn-card__body { color: var(--c-geyser); }

.fn-card--access .fn-card__title, .fn-card--access .fn-card__kicker,
.fn-card--access .fn-card__lead,  .fn-card--access .fn-card__link,
.fn-card--lost .fn-card__title,   .fn-card--lost .fn-card__kicker,
.fn-card--lost .fn-card__lead,    .fn-card--lost .fn-card__link,
.fn-card--share .fn-card__title,  .fn-card--share .fn-card__kicker,
.fn-card--share .fn-card__lead,   .fn-card--share .fn-card__link { color: var(--c-bunker); }

.fn-card--access .fn-card__body,
.fn-card--lost .fn-card__body,
.fn-card--share .fn-card__body { color: var(--c-azure-19); }

/* spaziatura del lead sulle tessere chiare — Figma I230:977;1419:3683 */
.fn-card--access .fn-card__lead,
.fn-card--lost .fn-card__lead { padding-top: 11px; padding-bottom: 0.59px; }


/* ---------- Tessere FAQ (home + pagine funzione) ---------- */
/* Figma 230:1130 (tessere 579 × 168.79, passo 597 e 186.8) */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 48px;
}
/* Background+Border — Figma 230:1131 */
.faq-card {
  padding: 29px;
  background: var(--c-white);
  /* in Figma il contorno e' interno: con box-shadow non toglie 2px al contenuto */
  box-shadow: inset 0 0 0 var(--sw-1) var(--c-porcelain);
  border-radius: 16px;
}
.faq-card__q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-18);
  line-height: var(--lh-28-8);
  color: var(--c-bunker);
}
/* Gradient — Figma 230:1133 (11 × 11, a 8.89 dal bordo alto della riga) */
.faq-card__dot {
  width: 11px;
  height: 11px;
  margin-top: 8.89px;
  border-radius: 3px;
  flex-shrink: 0;
  background: linear-gradient(125deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
}
/* Figma 230:1136 (521 × 72 = 3 righe da 24) */
.faq-card__a {
  margin-top: 9.99px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-15);
  line-height: var(--fs-24);
  color: var(--c-shuttle-gray);
}

@media (max-width: 1024px) { .faq-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .faq-card { padding: 24px; } }

/* Interruzioni di riga fedeli al Figma: sotto i 1180px il testo torna a scorrere */
@media (max-width: 1180px) {
  br.br-fig { display: none; }
}

/* ============================================================
   PULSANTE WHATSAPP (aggiunta al Figma)
   Riprende il pulsante del sito live: fisso in basso a destra,
   dal lato opposto al selettore di lingua.
   ============================================================ */
.wa-float {
  position: fixed;
  right: 20px;          /* sul live erano 5px: troppo a filo del bordo */
  bottom: 100px;        /* stessa altezza del live */
  z-index: 90;          /* sotto la nav (100), sopra il contenuto */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-pill);
  background: #25d366;  /* verde ufficiale WhatsApp, non un colore del progetto */
  color: var(--c-white);
  box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .7);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .85);
}
.wa-float svg { width: 30px; height: 30px; }

@media (max-width: 720px) {
  /* Come sul live: piu' vicino all'angolo sui telefoni */
  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 27px; height: 27px; }
}

/* Chi preferisce meno animazioni non subisce lo scatto al passaggio */
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float:hover { transition: none; transform: none; }
}