/* Pack Autopilot — pagina /autopilot.
   GENERATO dalla home dell'applicazione (web/app/src/app/page.tsx + globals.css):
   sono le regole di base e tutte quelle con prefisso hp-, copiate così come
   sono. Se cambi la home nell'app, rigenera anche questa pagina.
   In fondo: pulsanti e banner del consenso, presi da style.css, perché
   consenso.js li usa e questa pagina non carica style.css (le due basi si
   pestano i piedi: body, [id], .brand). */

:root {
  /* Marchio — valori presi dai file vettoriali ufficiali del logo, non stimati
     a occhio: navy #151A30, blu #3259A5. Il blu del logo ha più contrasto su
     bianco (6,8:1) del #1155F5 usato in precedenza (5,8:1). */
  --navy: #151a30;
  --navy-2: #1f2a4a; /* superfici sollevate sul navy: hover, bordi, card */
  --blue: #3259a5;
  --blue-dark: #26457f;
  --blue-soft: #eaeff8;
  --blue-on-dark: #8fabe0; /* il blu pieno su navy si spegne: qui va schiarito */

  /* Superfici */
  --bg: #f4f6fb;
  --panel: #ffffff;
  --line: #dfe4ee;
  --line-strong: #c3cbdb;

  /* Testo — tutti verificati ≥ 4,5:1 sul proprio sfondo */
  --text: #12192b;
  --muted: #4f5872;
  --on-navy: #ffffff;
  --on-navy-muted: #bdc7dd; /* 10,2:1 su navy */

  /* Semantici */
  --ok: #0f7a4d;
  --ok-soft: #e6f5ee;
  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --danger: #b42318;
  --danger-soft: #fdeceb;

  /* Layer del disegno — NON sono colori di marca e non vanno allineati al
     logo: sono convenzioni di lettura di una fustella e devono restare
     identici ai valori scritti in lib/export/svg.ts (LAYER_STYLE), altrimenti
     la legenda a schermo direbbe una cosa e il file esportato un'altra. */
  --layer-cut: #0b1633;
  --layer-crease: #1155f5;

  /* Tinte dell'anteprima materiali (Anagrafiche). Come i layer del disegno qui
     sopra, NON sono colori di marca: servono a far riconoscere un cartone da un
     espanso a colpo d'occhio, e si scelgono per somiglianza col materiale vero. */
  --kraft: #b98a5a;
  --kraft-dark: #8a6238;
  --liner: #e0c199;
  --metal: #8d99ac;
  --core: #dfe5f0;
  --plastic: #dfe5f0;
  --foam: #d5dbe6;
  --clear: #cfe0f5;
  --wood: #c9a273;
  --flex: #dfe5f0;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(11, 22, 51, 0.06), 0 4px 14px rgba(11, 22, 51, 0.05);

  --sidebar-w: 232px;
  --chat-w: 400px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Focus sempre visibile: la navigazione da tastiera non deve essere invisibile. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* Link di salto: primo elemento focusabile della pagina. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--panel);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: top 0.15s;
}
.skip-link:focus {
  top: 8px;
}

[hidden] { display: none !important; }

/* Il lockup è ora l'SVG ufficiale del marchio (componenti in Logo.tsx), non
   più icona geometrica + testo HTML: il font del wordmark non è installato e
   la resa cambiava da un sistema operativo all'altro. */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand svg {
  flex: none;
}

/* ==========================================================================
   HOME PAGE
   Tutte le classi sono prefissate `hp-`. Non è pedanteria: nel primo mockup
   la classe `.slit` valeva sia per le linee del disegno sia per la voce di
   legenda e le due si sovrapponevano a schermo. Prefisso obbligatorio.
   ========================================================================== */

.hp {
  background: var(--panel);
}

/* L'intestazione è agganciata in alto: senza questo, cliccando una voce del
   menu il titolo della sezione finisce nascosto sotto la barra. */
.hp [id] {
  scroll-margin-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.hp) {
    scroll-behavior: smooth;
  }
}

.hp-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.hp-narrow {
  max-width: 800px;
}

/* ------------------------------------------------------------ intestazione */

.hp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hp-header-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}
.hp-brand {
  display: inline-flex;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.hp-brand:hover {
  opacity: 0.82;
}

.hp-nav {
  display: flex;
  gap: 26px;
  margin: 0 auto;
}
.hp-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 550;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.hp-nav a:hover {
  color: var(--text);
  border-bottom-color: var(--blue);
}
.hp-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ------------------------------------------------------------------ bottoni */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hp-btn-lg {
  padding: 14px 24px;
  font-size: 16px;
}
.hp-btn-primary {
  background: var(--blue);
  color: #fff;
}
.hp-btn-primary:hover {
  background: var(--blue-dark);
}
.hp-btn-ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line-strong);
}
.hp-btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.hp-btn-invert {
  background: #fff;
  color: var(--navy);
}
.hp-btn-invert:hover {
  background: #e7ecf6;
}
.hp-btn-text {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
}
.hp-btn-text:hover {
  color: var(--blue);
}

/* --------------------------------------------------------------------- hero */

.hp-hero {
  background: linear-gradient(170deg, var(--blue-soft) 0%, #f6f8fd 46%, var(--panel) 100%);
}
.hp-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
  padding-top: 62px;
  padding-bottom: 62px;
}

.hp-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(31px, 3.1vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 750;
  color: var(--navy);
  /* Niente `text-wrap: balance` qui: pareggiando le righe spezzava il titolo
     in tre, mentre l'andare a capo naturale lo tiene in due
     ("Progetta la scatola" / "perfetta in pochi click"). */
  text-wrap: pretty;
}
.hp-br-lg {
  display: none;
}
@media (min-width: 1000px) {
  .hp-br-lg {
    display: inline;
  }
}
.hp-hero h1 em {
  font-style: normal;
  color: var(--blue);
}

.hp-lede {
  margin: 0 0 26px;
  max-width: 480px;
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.55;
  color: var(--muted);
}

/* Elenco a spunte: è la parte che l'occhio legge davvero prima del pulsante,
   quindi resta sopra le CTA e non sotto. */
.hp-checks {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.hp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}
.hp-checks svg {
  flex: none;
  margin-top: 1px;
  color: var(--blue);
}

.hp-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-microcopy {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* ------------------------------------------ finestra dell'applicazione (hero) */

/*
 * Non è uno screenshot: la cornice è HTML e il disegno dentro è calcolato dal
 * motore a ogni richiesta. Un'immagine invecchierebbe al primo cambio di
 * interfaccia e smentirebbe la promessa della pagina.
 */
.hp-app {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(21, 26, 48, 0.05), 0 22px 50px rgba(21, 26, 48, 0.11);
  overflow: hidden;
}
.hp-app-rail {
  flex: none;
  width: 46px;
  background: var(--navy);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hp-app-rail i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--on-navy-muted);
}
.hp-app-rail i:first-child {
  background: var(--blue);
  color: #fff;
  margin-bottom: 8px;
}
.hp-app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hp-app-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.hp-app-title {
  font-size: 13.5px;
  font-weight: 650;
}
.hp-app-chip {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.hp-app-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}
.hp-app-tabs span {
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.hp-app-tabs span.is-on {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.hp-app-tabs .hp-app-chip {
  border: 0;
  padding: 0;
}
.hp-app-canvas {
  padding: 16px 18px;
  background: #fff;
}
.hp-app-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Il motore dimensiona il testo delle quote su un disegno stampato a piena
   pagina: dentro la finestra dell'hero, larga meno di mezzo schermo, le misure
   diventano illeggibili. Qui il testo viene ingrandito senza toccare le
   proporzioni del disegno (è un em, quindi resta proporzionale allo zoom). */
.hp-app-canvas svg text {
  font-size: 1.5em;
}
.hp-app-foot {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
  font-size: 12px;
  color: var(--muted);
}
.hp-app-foot b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
}
.hp-app-foot i {
  width: 14px;
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
}
.hp-legend-cut { border-color: var(--layer-cut); }
.hp-legend-crease { border-color: var(--layer-crease); border-top-style: dashed !important; }

.hp-code {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- striscia settori */

.hp-audience {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 20px 0;
}
.hp-audience-in {
  display: flex;
  align-items: center;
  gap: 14px 34px;
  flex-wrap: wrap;
}
.hp-audience p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.hp-audience ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px 30px;
  flex-wrap: wrap;
}
.hp-audience li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.hp-audience svg {
  color: var(--muted);
  flex: none;
}

/* ------------------------------------------------------------------ sezioni */

.hp-section {
  padding: 76px 0;
}
.hp-section-alt {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hp-section-dark {
  background: var(--navy);
  color: var(--on-navy);
}

.hp-h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: inherit;
  text-wrap: balance;
}
.hp-section-dark .hp-h2 {
  color: #fff;
}
.hp-sub {
  margin: 0 0 40px;
  max-width: 660px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
}
.hp-sub-dark {
  color: var(--on-navy-muted);
}
.hp-center {
  text-align: center;
}
.hp-center .hp-sub {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------- perché sceglierlo */

.hp-why {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.hp-why article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  box-shadow: var(--shadow);
}
.hp-why-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.hp-why h3 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.hp-why p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* -------------------------------------------------------------- come funziona */

.hp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hp-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.hp-step-n {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}
.hp-step h3 {
  margin: 4px 0 7px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.hp-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.hp-quote {
  margin-top: 10px !important;
  padding: 9px 12px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--blue-dark) !important;
  font-style: italic;
}

/* ---------------------------------------------------------------- cosa ricevi */

.hp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hp-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.hp-card-tag {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 12px;
}
.hp-card-tag strong {
  font-size: 17px;
  font-weight: 750;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.hp-card-tag span {
  font-size: 12px;
  color: var(--muted);
}
.hp-card h3 {
  margin: 0 0 7px;
  font-size: 15.5px;
  font-weight: 650;
}
.hp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* -------------------------------------------------------------------- catalogo */

.hp-family {
  margin-bottom: 34px;
}
.hp-family:last-child {
  margin-bottom: 0;
}
.hp-family-name {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.hp-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hp-code-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  background: var(--panel);
}
/* Codice, nome e stato su una riga sola: con flex-wrap i nomi lunghi
   spingevano la pastiglia a capo e le schede risultavano disallineate. */
.hp-code-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.hp-code-head .hp-code {
  flex: none;
  margin-top: 1px;
}
.hp-code-name {
  flex: 1 1 auto;
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.hp-code-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.hp-badge {
  flex: none;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.hp-badge-ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.hp-badge-review {
  background: var(--warn-soft);
  color: var(--warn);
}

/* --------------------------------------------------------------------- fiducia */

.hp-proofs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
.hp-proof h3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
}
.hp-proof h3 svg {
  color: var(--blue-on-dark);
  margin-top: 2px;
}
.hp-proof p {
  margin: 0 0 0 28px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-navy-muted);
}
.hp-note {
  margin: 40px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--navy-2);
  border-left: 3px solid var(--blue-on-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #1e2338; /* navy schiarito del 4%, scritto per esteso: con una
                          rgba() trasparente gli strumenti di verifica del
                          contrasto leggono lo sfondo sbagliato */
  font-size: 14px;
  color: var(--on-navy-muted);
}

/* --------------------------------------------------------------------- domande */

.hp-faq {
  border-bottom: 1px solid var(--line);
}
.hp-faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 34px 17px 0;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.hp-faq > summary::-webkit-details-marker {
  display: none;
}
.hp-faq > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 24px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.hp-faq[open] > summary::after {
  transform: rotate(-135deg);
  top: 28px;
}
.hp-faq > summary:hover {
  color: var(--blue);
}
.hp-faq-body {
  padding: 0 40px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* -------------------------------------------------------------------- chiusura */

.hp-final {
  background: var(--navy);
  color: #fff;
  padding: 74px 0;
  border-top: 1px solid var(--navy-2);
}
.hp-final-in {
  text-align: center;
  max-width: 620px;
}
.hp-final h2 {
  margin: 18px 0 12px;
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
.hp-final p {
  margin: 0 0 26px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--on-navy-muted);
}

/* ---------------------------------------------------------------------- footer */

.hp-footer {
  background: var(--navy);
  color: var(--on-navy-muted);
  border-top: 1px solid var(--navy-2);
  padding: 30px 0;
}
.hp-footer-in {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.hp-footer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.hp-footer-nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
}
.hp-footer-nav a {
  color: #fff;
  font-size: 13.5px;
  text-decoration: none;
  font-weight: 550;
}
.hp-footer-nav a:hover {
  color: var(--blue-on-dark);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .hp-why {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .hp-hero-in {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hp-lede {
    max-width: 620px;
  }
  .hp-cards,
  .hp-codes {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-steps {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 640px;
  }
  .hp-proofs {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 860px) {
  .hp-nav {
    display: none;
  }
  .hp-header-in {
    justify-content: space-between;
  }
}

@media (max-width: 780px) {
  .hp-wrap {
    padding: 0 18px;
  }
  .hp-hero-in {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .hp-section {
    padding: 54px 0;
  }
  .hp-why {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-cta-row .hp-btn {
    flex: 1 1 220px;
  }
  /* Su schermo stretto un disegno da 1200 mm largo 350 px ha le quote
     illeggibili. Meglio tenerlo alla dimensione minima leggibile e farlo
     scorrere lateralmente, che ridurlo a un francobollo. */
  .hp-app-canvas {
    padding: 12px;
    overflow-x: auto;
  }
  /* Le schede scorrono invece di andare a capo: "Steso (2D)" spezzato su due
     righe non sembra più una scheda. */
  .hp-app-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    gap: 14px;
  }
  .hp-app-tabs::-webkit-scrollbar {
    display: none;
  }
  .hp-app-tabs span {
    white-space: nowrap;
  }
  .hp-app-canvas svg {
    min-width: 520px;
  }
  .hp-footer-nav {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .hp-cards,
  .hp-codes,
  .hp-why {
    grid-template-columns: 1fr;
  }
  .hp-app-rail {
    display: none;
  }
  .hp-final {
    padding: 48px 0;
  }
  .hp-footer {
    padding: 26px 0;
  }
}

/* ------------------------------------------- aggiunte per il sito pubblico */

.hp-final p.hp-final-mail {
  margin: 18px 0 0;
  font-size: 14px;
}
.hp-final-mail a {
  color: #fff;
  text-decoration: underline;
}
.hp-footer .footer-legal {
  flex-basis: 100%;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--navy-2);
  font-size: 12.5px;
}
.hp-footer .footer-legal a,
.hp-footer .footer-legal button {
  color: var(--on-navy-muted);
  font-size: 12.5px;
  text-decoration: none;
}
.hp-footer .footer-legal a:hover,
.hp-footer .footer-legal button:hover {
  color: #fff;
  text-decoration: underline;
}
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
}

/* ------------------------------ da style.css: pulsanti del banner consenso */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:14.5px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

.consenso{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:flex;justify-content:center;pointer-events:none}
.consenso-in{position:relative;pointer-events:auto;width:100%;max-width:760px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 10px 40px rgba(11,22,51,.18);padding:20px 22px}
.consenso-t{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--navy)}
.consenso-d{margin:0 36px 14px 0;font-size:14px;line-height:1.55;color:var(--muted)}
.consenso-d a{color:var(--blue)}
.consenso-x{position:absolute;top:10px;right:10px;width:34px;height:34px;
  border:0;border-radius:8px;background:none;color:var(--muted);font-size:22px;
  line-height:1;cursor:pointer}
.consenso-x:hover{background:var(--bg);color:var(--text)}
.consenso-pannello{display:grid;gap:10px;margin:0 0 14px}
.consenso-cat{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer}
.consenso-cat input{margin-top:3px;width:16px;height:16px;accent-color:var(--blue)}
.consenso-cat span{display:grid;gap:2px}
.consenso-cat strong{font-size:14px;color:var(--text)}
.consenso-cat small{font-size:13px;color:var(--muted)}
.consenso-azioni{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){
  .consenso{left:8px;right:8px;bottom:8px}
  .consenso-azioni .btn{flex:1 1 auto}
}

/* Telefoni stretti: il logo resta a misura piena, si stringe il pulsante. */
@media (max-width: 420px) {
  .hp-header-in { gap: 12px; }
  .hp-header-actions .hp-btn { padding: 8px 11px; font-size: 13px; }
}