/* Waylho Landing Page – mobile-first, animazioni leggere, stile coerente con brand.css */

body.lp{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  color:var(--ink);
}

body.lp .lp-main{
  flex:1;
  padding-top:22px;
  padding-bottom:28px;
}

/* Topbar layout (landing usa markup diverso dalle dashboard) */
body.lp .lp-topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

body.lp .lp-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
body.lp .topbar .logo{
  width:180px;
  height:62px;
  background-image:url('logo/Logo.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}

body.lp .lp-topbar-cta{
  padding:10px 14px;
  border-radius:14px;
  min-height:42px;
  white-space:nowrap;
}

@media (max-width:420px){
  body.lp .lp-topbar-cta{ padding:10px 12px; }
}

/* Accent: highlight animato, senza cambiare i colori base */
body.lp .topbar .accent,
body.lp .site-footer .accent{
  position:relative;
  overflow:hidden;
}

body.lp .topbar .accent::after,
body.lp .site-footer .accent::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.35) 30%,
    transparent 60%);
  transform:translateX(-120%);
  animation:lp-accent-sheen 5.5s var(--ease-in-out) infinite;
  pointer-events:none;
}

@keyframes lp-accent-sheen{
  0%{ transform:translateX(-120%); }
  45%{ transform:translateX(140%); }
  100%{ transform:translateX(140%); }
}

/* Sezioni */
body.lp .lp-section{
  padding:18px 0;
}

body.lp .lp-section + .lp-section{
  border-top:1px solid rgba(0,0,0,.04);
}

body.lp .lp-kicker{
  margin:0 0 10px 0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.25px;
  color:rgba(0,0,0,.55);
  text-transform:uppercase;
}

body.lp h1{
  margin:0 0 12px 0;
  font-size:28px;
  line-height:1.12;
  letter-spacing:-.2px;
}

@media (min-width:900px){
  body.lp h1{ font-size:40px; }
}

body.lp .lp-lead{
  margin:0 0 14px 0;
  font-size:15px;
  line-height:1.55;
  color:rgba(0,0,0,.70);
  max-width:68ch;
}

body.lp .lp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:12px 0 14px;
}

body.lp .lp-cta{
  min-height:46px;
  padding:12px 16px;
  border-radius:16px;
}

body.lp .lp-cta-wide{
  width:min(420px, 100%);
  justify-content:center;
}

body.lp .lp-cta-secondary{
  min-height:46px;
  padding:12px 16px;
  border-radius:16px;
}

/* Pills */
body.lp .lp-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

body.lp .lp-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(79,163,222,.10);
  color:rgba(0,0,0,.72);
  font-size:12px;
  font-weight:700;
}

/* Hero con glow soft */
body.lp .lp-hero{
  position:relative;
  border:1px solid rgba(0,0,0,.06);
  border-radius:24px;
  padding:18px 16px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 15% 5%, rgba(231,128,62,.18) 0%, transparent 60%),
    radial-gradient(780px 420px at 95% 10%, rgba(79,163,222,.18) 0%, transparent 62%),
    #fff;
  box-shadow:0 16px 60px rgba(0,0,0,.08);
}

@media (min-width:900px){
  body.lp .lp-hero{ padding:26px 22px; }
}

body.lp .lp-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:center;
}

@media (min-width:900px){
  body.lp .lp-hero-grid{
    grid-template-columns: 1.1fr .9fr;
    gap:22px;
  }
}

/* Highlights grid */
body.lp .lp-grid-3{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  body.lp .lp-grid-3{
    grid-template-columns:repeat(2, 1fr);
  }
}

body.lp .lp-grid-2{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}

@media (min-width:900px){
  body.lp .lp-grid-2{
    grid-template-columns:repeat(2, 1fr);
  }
}

body.lp .lp-card{
  padding:16px;
  border-radius:20px;
}

body.lp .lp-card-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(231,128,62,.14);
  border:1px solid rgba(0,0,0,.06);
  font-size:20px;
  margin-bottom:10px;
}

body.lp .lp-h2{
  font-size:16px;
  margin:0 0 6px 0;
  font-weight:900;
}

body.lp .lp-h3{
  font-size:15px;
  margin:0 0 6px 0;
  font-weight:900;
}

body.lp .lp-p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(0,0,0,.70);
}

/* Section headers */
body.lp .lp-section-head{
  margin-bottom:12px;
}

body.lp .lp-title{
  margin:0 0 8px 0;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.1px;
}

body.lp .lp-sub{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(0,0,0,.65);
  max-width:70ch;
}

/* Steps */
body.lp .lp-steps{
  display:grid;
  gap:10px;
  margin-top:12px;
}

@media (min-width:900px){
  body.lp .lp-steps{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
}

body.lp .lp-step{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:20px;
}

body.lp .lp-step-n{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background:var(--blue);
  box-shadow:0 10px 24px rgba(var(--blue-rgb), .25);
}

body.lp .lp-step-t{
  font-weight:900;
  margin-bottom:4px;
}

body.lp .lp-step-d{
  font-size:13px;
  line-height:1.5;
  color:rgba(0,0,0,.65);
}
/* Split sections */
body.lp .lp-split{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}

/* === AI Translation section (IT/EN) === */
body.lp .lp-i18n-card{
  border-radius:22px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  background:
    radial-gradient(520px 280px at 20% 20%, rgba(79,163,222,.14) 0%, transparent 60%),
    radial-gradient(520px 280px at 90% 20%, rgba(231,128,62,.12) 0%, transparent 62%),
    #fff;
}

body.lp .lp-i18n-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

body.lp .lp-i18n-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-size:13px;
  font-weight:900;
  color:rgba(0,0,0,.75);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
/* === AI Translation section (IT/EN): solo bandiere grandi === */
body.lp .lp-i18n-card{
  border-radius:22px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:
    radial-gradient(520px 280px at 20% 20%, rgba(79,163,222,.14) 0%, transparent 60%),
    radial-gradient(520px 280px at 90% 20%, rgba(231,128,62,.12) 0%, transparent 62%),
    #fff;
}

body.lp .lp-i18n-flags{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
}

body.lp .lp-i18n-flagwrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* bandiere grandi, stesso stile (cerchio + bordo) */
body.lp .lp-i18n-flag{
  display:inline-block;
  width:58px;
  height:58px;
  border-radius:999px;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.18),
    0 14px 30px rgba(0,0,0,.12);
}

/* flag-icons usa background-image: lo facciamo “cover” */
body.lp .lp-i18n-flag.fi{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

body.lp .lp-i18n-code{
  font-weight:900;
  letter-spacing:.6px;
  font-size:12px;
  color:rgba(0,0,0,.70);
}

body.lp .lp-i18n-note{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
}


body.lp .lp-i18n-note{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
}

/* Grid screenshot (guest preview) */
body.lp .lp-shot-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  justify-items:stretch; /* <-- su mobile non rimpicciolisce i frame */
}

body.lp .lp-shot-grid .lp-shot{
  width:100%;
}

@media (min-width:900px){
  body.lp .lp-shot-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    justify-items:stretch;
    align-items:center; /* <<< chiave: centra l’elemento basso nel “row” alto */
  }

  /* 2A (prima figura) centrata verticalmente rispetto alla 2B */
  body.lp .lp-shot-grid > .lp-shot:first-child{
    align-self:center;
  }

  /* opzionale ma consigliato: 2A un po’ più piccola (così “sembra metà” della 2B) */
  body.lp .lp-shot-grid > .lp-shot:first-child .lp-shot-frame{
    max-width:300px;
  }
}


/* Evita che i frame phone diventino troppo larghi nella colonna */
body.lp .lp-shot-grid .lp-shot-frame{
  width:100%;
  max-width:520px; /* più grande su telefoni “larghi”, su 360px resta 100% */
  margin:0 auto;
}

@media (min-width:900px){
  body.lp .lp-split{
    grid-template-columns: 1fr 1fr;
    gap:18px;
    align-items:center;
  }
  body.lp .lp-split.lp-split-rev .lp-split-copy{ order:2; }
  body.lp .lp-split.lp-split-rev .lp-split-media{ order:1; }
}

body.lp .lp-bullets{
  margin:12px 0 0 0;
  padding-left:18px;
  color:rgba(0,0,0,.70);
  font-size:13px;
  line-height:1.55;
}

body.lp .lp-bullets li{ margin:6px 0; }

/* Screenshot frames */
body.lp .lp-shot{
  margin:0;
}

body.lp .lp-shot-caption{
  margin:8px 0 0 0;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

body.lp .lp-shot-frame{
  border-radius:22px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,.10);
  overflow:hidden;
  position:relative;
}

/* Immagini reali dentro i frame: non devono “spingere” il layout */
body.lp .lp-shot-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  background:#fff;
}

/* per screenshot UI verticali: niente crop */
body.lp .lp-shot-img.lp-contain{
  object-fit:contain;
  object-position:center top;
}
/* 2A: con contain meglio centrata (non “attaccata sopra”) */
body.lp .lp-shot-grid > .lp-shot:first-child .lp-shot-img.lp-contain{
  object-position:center center;
}

/* Se c’è l’immagine, nascondi il placeholder testuale */
body.lp .lp-shot-frame > .lp-shot-img + .lp-shot-ph{
  display:none;
}
body.lp .lp-ar-phone{ aspect-ratio: 9 / 16; }
body.lp .lp-ar-phone-tall{ aspect-ratio: 9 / 20; } /* per screenshot lunghi */
body.lp .lp-ar-phone-xlong{ aspect-ratio: 9 / 26; } /* per screenshot molto lunghi */
body.lp .lp-ar-desktop{ aspect-ratio: 16 / 10; }

/* HOST screenshots: ratio reali (così con contain non resta spazio bianco sotto) */
body.lp .lp-ar-host-3a{ aspect-ratio: 1080 / 2273; } /* host_3A.png */
body.lp .lp-ar-host-3b{ aspect-ratio: 1080 / 2065; } /* host_3B.png */

/* Banda categorie (immagine 2048x329) */
body.lp .lp-ar-cats-row{ aspect-ratio: 2048 / 329; }

/* CATEGORIE: centra il sottotitolo (p.lp-sub) */
body.lp .lp-cats{
  text-align:center;
}

body.lp .lp-cats .lp-sub{
  margin-left:auto;
  margin-right:auto;
}

/* Se usi <picture> dentro ai frame, non deve creare layout extra */
body.lp .lp-shot-frame picture{
  display:block;
  width:100%;
  height:100%;
}

/* Mobile: screenshot categorie verticale + frame “tall” */
@media (max-width: 680px){
  body.lp .lp-cats-shot .lp-shot-frame{
    aspect-ratio: 708 / 2047; /* match turist_1B_vertical.png */
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Su schermi piccoli, evita che diventi troppo alto */
@media (max-width: 480px){
  body.lp .lp-ar-phone-xlong{ aspect-ratio: 9 / 20; }
}


body.lp .lp-shot-ph{
  position:absolute;
  inset:0;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  background:
    radial-gradient(520px 320px at 20% 20%, rgba(79,163,222,.16) 0%, transparent 60%),
    radial-gradient(520px 320px at 90% 20%, rgba(231,128,62,.16) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.92) 65%, #fff 100%);
}

body.lp .lp-shot-ph::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 45%,
    transparent 90%);
  transform:translateX(-40%);
  animation:lp-shimmer 2.8s var(--ease-in-out) infinite;
  pointer-events:none;
}

@keyframes lp-shimmer{
  0%{ transform:translateX(-60%); }
  55%{ transform:translateX(60%); }
  100%{ transform:translateX(60%); }
}

body.lp .lp-shot-ph-kicker{
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:900;
  color:rgba(0,0,0,.55);
  text-transform:uppercase;
  letter-spacing:.2px;
}

body.lp .lp-shot-ph-title{
  position:relative;
  z-index:1;
  font-size:15px;
  font-weight:900;
  color:rgba(0,0,0,.86);
}

body.lp .lp-shot-ph-desc{
  position:relative;
  z-index:1;
  font-size:12px;
  line-height:1.45;
  color:rgba(0,0,0,.65);
  max-width:60ch;
}
/* Hero floating screenshot */
body.lp .lp-shot-float{
  animation:lp-float 7.5s var(--ease-in-out) infinite;
  transform-origin:center;
}

@keyframes lp-float{
  0%{ transform:translateY(0) rotate(-.35deg); }
  50%{ transform:translateY(-10px) rotate(.35deg); }
  100%{ transform:translateY(0) rotate(-.35deg); }
}
body.lp .lp-shot-pair{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Coppia screenshot DESKTOP: affiancati solo quando c'è spazio reale */
body.lp .lp-shot-pair.lp-shot-pair-desktop{
  grid-template-columns:1fr;
}

@media (min-width:980px){
  body.lp .lp-shot-pair.lp-shot-pair-desktop{
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
  }
}


@media (min-width:900px){
  body.lp .lp-shot-pair{
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
  }
}

body.lp .lp-shot-pair .lp-shot{
  margin:0;
}

/* Piccolo “offset” per dare dinamica su desktop */
@media (min-width:900px){
  body.lp .lp-shot-pair .lp-shot-a{
    transform:translateY(6px);
  }
  body.lp .lp-shot-pair .lp-shot-b{
    transform:translateY(-6px);
  }
}
/* In hero, la caption è un <p> ora: uniformiamo stile */
body.lp .lp-hero-media .lp-shot-caption{
  margin:10px 0 0 0;
}

/* HERO: singolo screenshot (1A) più controllato, non gigante */
body.lp .lp-hero-media{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

@media (min-width:900px){
  body.lp .lp-hero-media{
    align-items:flex-end;
  }
}

body.lp .lp-hero-media .lp-hero-shot{
  width:100%;
  margin:0;
}

body.lp .lp-hero-media .lp-hero-shot .lp-shot-frame{
  width:100%;
  max-width:360px;
  margin:0 auto;
}

@media (min-width:900px){
  body.lp .lp-hero-media .lp-hero-shot .lp-shot-frame{
    max-width:400px;
    margin:0;
  }
}

@media (min-width:1100px){
  body.lp .lp-hero-media .lp-hero-shot .lp-shot-frame{
    max-width:430px;
  }
}

/* Sezione categorie: 1B larga, centrata, full width disponibile */
body.lp .lp-cats{
  text-align:center;
}

body.lp .lp-cats .lp-section-head{
  margin-bottom:10px;
}

body.lp .lp-cats-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:0 0 14px 0;
}

body.lp .lp-cats-shot{
  width:100%;
  margin:0;
}

body.lp .lp-cats-shot .lp-shot-frame{
  width:100%;
  max-width:1040px;
  margin:0 auto;
}

body.lp .lp-cats-shot .lp-shot-img.lp-contain{
  object-position:center center;
}

/* HERO: stack verticale (phone + banda categorie) */
body.lp .lp-hero-media{
  width:100%;
  justify-self:stretch;
}

body.lp .lp-hero-stack{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  justify-items:center;
}

@media (min-width:900px){
  body.lp .lp-hero-stack{
    justify-items:end;
  }
}

/* Ogni figure occupa tutta la riga: evita “collassi” */
body.lp .lp-hero-stack .lp-shot{
  width:100%;
}

/* I frame devono avere una width reale (poi li limitiamo con max-width) */
body.lp .lp-hero-stack .lp-shot-frame{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Limiti dimensioni nel blocco HERO */
body.lp .lp-hero-stack .lp-shot-main .lp-shot-frame{
  max-width:520px;
}

body.lp .lp-hero-stack .lp-hero-row{
  text-align:center;
}

body.lp .lp-hero-stack .lp-hero-row .lp-shot-frame{
  max-width:720px;
}


/* Mantieni effetto "galleggiante" ma sfasa i tempi tra i due shot */
body.lp .lp-hero-stack .lp-shot-main{
  animation-delay:-1.2s;
}

body.lp .lp-hero-stack .lp-hero-row{
  animation-delay:-3.6s;
}

/* La banda categorie deve stare centrata (e non “in alto”) */
body.lp .lp-hero-stack .lp-hero-row .lp-shot-img.lp-contain{
  object-position:center center;
}

/* Wide shot section */
body.lp .lp-shot-wide{
  margin-top:12px;
}

/* FAQ */
body.lp .lp-faq{
  display:grid;
  gap:10px;
  margin-top:12px;
}

body.lp .lp-faq-item{
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  overflow:hidden;
}

body.lp .lp-faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:14px 14px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

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

body.lp .lp-faq-item summary::after{
  content:"▾";
  opacity:.65;
  transform:translateY(-1px);
  transition: transform var(--anim-fast) var(--ease-in-out);
}

body.lp .lp-faq-item[open] summary::after{
  transform:rotate(180deg) translateY(1px);
}

body.lp .lp-faq-body{
  padding:0 14px 14px 14px;
  color:rgba(0,0,0,.70);
  font-size:13px;
  line-height:1.55;
}

/* Final CTA */
body.lp .lp-final{
  border-top:0;
}
body.lp .lp-final-inner{
  position:relative;
  overflow:hidden;

  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  padding:22px 18px;

  /* più leggero */
  background:#fff;
  color:var(--ink);

  box-shadow:0 14px 44px rgba(0,0,0,.10);

  /* richiesto: testo centrato */
  text-align:center;
}

/* tocco brand soft (non “pesante”) */
body.lp .lp-final-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:var(--grad-soft);
  opacity:.14;
  pointer-events:none;
}

body.lp .lp-final-inner > *{
  position:relative;
}

body.lp .lp-final-inner .lp-title{
  color:var(--ink);
}

body.lp .lp-final-inner .lp-sub{
  color:rgba(0,0,0,.65);
  margin-left:auto;
  margin-right:auto;
  max-width:70ch;
}

/* bottone centrato e non enorme */
body.lp .lp-final-inner .btn{
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

/* Reveal on scroll */
body.lp [data-reveal]{
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change:opacity, transform;
}

body.lp [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* Riduci movimento se richiesto */
@media (prefers-reduced-motion: reduce){
  body.lp .lp-shot-float{ animation:none; }
  body.lp .topbar .accent::after,
  body.lp .site-footer .accent::after{ animation:none; }
  body.lp .lp-shot-ph::after{ animation:none; }
  body.lp [data-reveal]{ transition:none; opacity:1; transform:none; }
}
/* Host section: 2 screenshot verticali affiancati senza “stretch” */
@media (min-width:980px){
  body.lp .lp-shot-pair.lp-shot-pair-desktop{
    grid-template-columns: repeat(2, minmax(260px, 360px));
    justify-content: start;
    justify-items: start;
  }
}
@media (min-width:900px){
  /* 3A centrata a metà altezza rispetto a 3B */
  body.lp .lp-shot-pair.lp-shot-pair-desktop{
    align-items:center;
  }

  body.lp .lp-shot-pair.lp-shot-pair-desktop > .lp-shot:first-child{
    align-self:center;
  }
}

body.lp .lp-shot-pair.lp-shot-pair-desktop .lp-shot-frame{
  width:100%;
  max-width:360px;
}

/* HERO: screenshot principale (tourist_1A) – deve vedersi intera (no crop) + più piccola */
body.lp .lp-hero-media .lp-hero-shot .lp-shot-frame,
body.lp .lp-hero-media .lp-shot-a .lp-shot-frame{
  width:100%;
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:900px){
  body.lp .lp-hero-media .lp-hero-shot .lp-shot-frame,
  body.lp .lp-hero-media .lp-shot-a .lp-shot-frame{
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (min-width:1100px){
  body.lp .lp-hero-media .lp-hero-shot .lp-shot-frame,
  body.lp .lp-hero-media .lp-shot-a .lp-shot-frame{
    max-width:260px;
  }
}
/* HOST CONTRIBUTION: centra solo head (titolo + descrizione) */
body.lp section[aria-label="Suggerimenti e richieste al team"] .lp-section-head{
  text-align:center;
}

body.lp section[aria-label="Suggerimenti e richieste al team"] .lp-section-head .lp-sub{
  margin-left:auto;
  margin-right:auto;
}
/* CTA finale: distanzia un pelino il bottone dal testo sopra */
body.lp .lp-final-inner .btn.lp-cta{
  margin-top:10px;
}