/* ===================================================================
   MOBILE — la resa su telefono delle pagine pubbliche.

   Sta in un file suo, caricato per ultimo, perché le regole del sito
   nascono da un impianto a tre colonne: sotto i 640px non basta
   impilarle, vanno riviste margini, corpo del testo, aree toccabili e
   soprattutto va tolto di mezzo ciò che su un telefono non si legge
   (la mappa da 1600px, la finta finestra del browser, la riga di
   intestazione di una tabella vuota).

   Le regole ripetono il prefisso `html.lp.v3 #stageLanding` dove serve
   a superare landing-v3.css, che usa la stessa specificità.
   =================================================================== */

/* =====================================================================
   1. Cornice: un solo margine laterale e testate che non finiscono
      sotto la barra fissa.
   ===================================================================== */
@media(max-width:640px){
  /* La barra è fissa e alta 65px: ogni pagina deve partire sotto. La
     regola generica di responsive.css (.lband 64px) le passava sopra e
     il primo titolo restava nascosto. */
  #stageLanding .llegal-page{padding-top:92px}
  html.lp.v3 #stageLanding .lsupport-page,
  html.lp.v3 #stageLanding .lpartner-page{padding-top:96px;padding-bottom:64px}

  /* La home parte sotto la barra fissa senza un secondo vuoto di schermo. */
  html.lp.v3 #stageLanding .pv-page{padding-top:88px;padding-bottom:64px}

  /* Stesso margine laterale ovunque: 20px. */
  html.lp.v3 #stageLanding .pv-hero-product.pv-ib-journey{width:auto;margin-inline:0}
  /* #lpProduct porta insieme .lband e .lc: il margine di .lc si sommava a
     quello di main e il titolo rientrava di 40px invece che di 20. */
  html.lp.v3 #stageLanding #lpProduct{padding-left:0;padding-right:0}
  html.lp.v3 #stageLanding .v3-pricing{width:calc(100vw - 40px)}
  html.lp.v3 #stageLanding .lpartner{padding:26px 20px;gap:24px}
}

/* Il notch e la barra gesti: su iPhone in orizzontale il testo finiva
   sotto la curvatura dello schermo. */
@media(max-width:820px){
  #stageLanding .lc,
  #stageLanding .lnav .inner,
  #stageLanding .lmobile{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right))}
  #stageLanding .lfoot{padding-bottom:max(40px,env(safe-area-inset-bottom))}
}

/* =====================================================================
   2. Fuori dallo schermo del telefono: quello che vive solo da fermi,
      su un monitor largo.
   ===================================================================== */
@media(max-width:640px){
  /* La mappa del percorso è un disegno da 1600px con etichette da 9px:
     su un telefono diventava un rettangolo da trascinare di lato senza
     riuscire a leggerlo. Il contenuto che spiega lo stesso percorso
     resta nelle sezioni sotto. */
  html.lp.v3 #stageLanding .pv-hero-product.pv-ib-journey{display:none}

  /* Stage "Manage": la finta finestra di Chrome (barra schede, barra
     indirizzi, cursore) è scenografia da desktop. Sul telefono resta il
     riquadro con le posizioni dal vivo, a tutta larghezza. */
  html.lp.v3 #stageLanding .pv-manage-demo>.pv-ats-chrome,
  html.lp.v3 #stageLanding .pv-manage-cursor,
  html.lp.v3 #stageLanding .pv-manage-workspace{display:none}
  html.lp.v3 #stageLanding .pv-manage-demo{height:auto;padding:8px;overflow:visible}
  html.lp.v3 #stageLanding .pv-manage-browser-page{
    display:block;height:auto;min-height:0;border-radius:12px}
  html.lp.v3 #stageLanding .pv-manage-live{width:auto;height:auto;padding:12px}

  /* Tabella posizioni: l'elenco è ancora vuoto, quindi niente trascinamento
     orizzontale per leggere un messaggio di cortesia. */
  .jobdesk-table{overflow-x:visible}
  .jobdesk-table-empty{min-width:0;align-items:center;padding:28px 20px;text-align:center}
  .jobdesk-table-empty p{max-width:none;font-size:13px}
}

/* =====================================================================
   3. Testi: nessuna etichetta sotto i 10.5px, righe che respirano.
   ===================================================================== */
@media(max-width:640px){
  html.lp.v3 #stageLanding .lkicker{font-size:12.5px}
  html.lp.v3 #stageLanding .pv-intro .lkicker{font-size:12.5px;margin-bottom:20px}
  html.lp.v3 #stageLanding .pv-intro p{font-size:16px;margin:20px 0 22px}
  html.lp.v3 #stageLanding .pv-lead{font-size:16px;line-height:1.55}

  /* Piani: l'etichetta della riga era a 9px in maiuscoletto spaziato. */
  html.lp.v3 #stageLanding .v3-plan-specs>div{grid-template-columns:96px minmax(0,1fr);min-height:52px}
  html.lp.v3 #stageLanding .v3-plan-specs dt{font-size:10.5px;letter-spacing:.09em}
  html.lp.v3 #stageLanding .v3-plan-specs dd{font-size:13.5px}
  html.lp.v3 #stageLanding .v3-billing{font-size:12.5px}
  html.lp.v3 #stageLanding .v3-billing-toggle button{font-size:13px;height:38px}
  html.lp.v3 #stageLanding .v3-billing-toggle button span{font-size:10px}
  html.lp.v3 #stageLanding .v3-popular{font-size:10px}
  /* La card non ha più bisogno di un'altezza minima da colonna. */
  html.lp.v3 #stageLanding .v3-plan-card{min-height:0}

  /* Radar: la pastiglia al centro e le didascalie dei dati. */
  html.lp.v3 #stageLanding .ptr-radar-core{padding:6px 9px;font-size:9.5px}
  html.lp.v3 #stageLanding .ptr-radar-detail-meta small{font-size:10px;letter-spacing:.06em}
  html.lp.v3 #stageLanding .ptr-radar-detail-meta strong{font-size:13px}
  html.lp.v3 #stageLanding .ptr-radar-company-initials{font-size:11.5px}

  /* Anteprima del database: la scena è a posizionamento assoluto, quindi
     al testo più grande serve anche più altezza. */
  html.lp.v3 #stageLanding .mdb-preview-scene{height:600px}
  html.lp.v3 #stageLanding .mdb-preview-industries span{padding:7px 10px;font-size:10px}
  html.lp.v3 #stageLanding .mdb-preview-pool>div{padding:8px 6px}
  html.lp.v3 #stageLanding .mdb-preview-pool i{font-size:9.5px}
  html.lp.v3 #stageLanding .mdb-preview-pool b{font-size:11px}
  html.lp.v3 #stageLanding .mdb-preview-focus{top:186px}
  html.lp.v3 #stageLanding .mdb-preview-focus strong{font-size:13px}
  html.lp.v3 #stageLanding .mdb-preview-focus span{font-size:11px}
  html.lp.v3 #stageLanding .mdb-preview-focus small{font-size:10.5px}
  html.lp.v3 #stageLanding .mdb-preview-focus em{font-size:9.5px;padding:5px 8px}
  html.lp.v3 #stageLanding .mdb-preview-outreach{top:382px}
  html.lp.v3 #stageLanding .mdb-preview-outreach>div span{font-size:9.5px}
  html.lp.v3 #stageLanding .mdb-preview-outreach>div em{font-size:9.5px}
  html.lp.v3 #stageLanding .mdb-preview-email{font-size:11px}
  html.lp.v3 #stageLanding .mdb-preview-message{font-size:11px;line-height:1.5}
  html.lp.v3 #stageLanding .mdb-preview-outreach a{height:42px;font-size:12px}

  /* Le tre schede della configurazione e quelle del database sono contenuto
     da leggere, non un fermo immagine: a tutta larghezza reggono il corpo
     giusto. Restano com'erano i finti browser (ATS, tracker), che sono
     illustrazioni in scala e cambiare loro il testo li smonterebbe. */
  html.lp.v3 #stageLanding #pvStage1 .pv-track-card .lcfg-chip,
  html.lp.v3 #stageLanding .mdb-chips span{font-size:12.5px;padding:8px 12px}
  html.lp.v3 #stageLanding #pvStage1 .pv-track-card-head span,
  html.lp.v3 #stageLanding #pvStage1 .pv-track-card-head b,
  html.lp.v3 #stageLanding .mdb-card>header>span,
  html.lp.v3 #stageLanding .mdb-card>header>b{font-size:11px;letter-spacing:.08em}
  html.lp.v3 #stageLanding #pvStage1 .pv-track-card-head p{font-size:13px}
  html.lp.v3 #stageLanding #pvStage1 .pv-track-card-foot,
  html.lp.v3 #stageLanding .mdb-card>footer{font-size:12px}
  html.lp.v3 #stageLanding #pvStage1 .pv-track-card-foot strong,
  html.lp.v3 #stageLanding .mdb-card>footer strong{font-size:11.5px}
  html.lp.v3 #stageLanding #pvStage1 .pv-firm-tier b{font-size:13px}
  html.lp.v3 #stageLanding #pvStage1 .pv-firm-tier small,
  html.lp.v3 #stageLanding #pvStage1 .pv-firm-tier em{font-size:11px}
  html.lp.v3 #stageLanding .mdb-levels span small,
  html.lp.v3 #stageLanding .mdb-levels>div em{font-size:11px}
  html.lp.v3 #stageLanding .mdb-contact-list span small,
  html.lp.v3 #stageLanding .mdb-contact-list>div em{font-size:11.5px}
  html.lp.v3 #stageLanding .mdb-profile dt{font-size:10.5px}
  html.lp.v3 #stageLanding .mdb-task span small,
  html.lp.v3 #stageLanding .mdb-task>em{font-size:11px}

  /* Piè di pagina. */
  #stageLanding .lfoot-col h2{font-size:12.5px;margin-bottom:8px}
  #stageLanding .lfoot-brand p{font-size:13.5px}
  #stageLanding .lfoot-bottom{font-size:12.5px;margin-top:28px}
}

/* =====================================================================
   4. Aree toccabili: il pollice non ha la precisione del cursore.
      44px è la misura minima consigliata da Apple e Google.
   ===================================================================== */
@media(max-width:640px){
  /* I quattro passi del racconto: erano tre su una riga e il quarto da
     solo sotto. Due per riga, tutti uguali. */
  html.lp.v3 #stageLanding .pv-steps{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:22px}
  html.lp.v3 #stageLanding .pv-step{
    min-width:0;min-height:46px;flex:none;justify-content:center;padding:10px 8px;font-size:13px}
  html.lp.v3 #stageLanding .pv-step .n{font-size:12px}

  html.lp.v3 #stageLanding .mdb-steps{gap:8px}
  html.lp.v3 #stageLanding .mdb-step{min-height:46px}

  /* Le due chiamate all'azione in colonna, a tutta larghezza. */
  html.lp.v3 #stageLanding .pv-actions{flex-direction:column;gap:10px}
  html.lp.v3 #stageLanding .pv-actions .lbtn{width:100%;justify-content:center;min-height:48px}
  html.lp.v3 #stageLanding .ptr-flow-cta{min-height:48px}

  /* Marchio e voci del piè di pagina: erano righe alte 21px. */
  #stageLanding .lbrand{padding:8px 0}
  #stageLanding .lfoot-grid{flex-direction:column;gap:26px}
  #stageLanding .lfoot-brand{max-width:none}
  #stageLanding .lfoot-cols{
    display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  #stageLanding .lfoot-col a,
  #stageLanding .lfoot-col .lfoot-cookie{min-height:40px;margin:0;padding:10px 0;line-height:1.3}

  /* I punti sul radar erano bersagli da 3px. Restano piccoli a vedersi, ma
     sotto ognuno c'è un'area invisibile che il pollice trova davvero. */
  html.lp.v3 #stageLanding .ptr-radar-blip{width:11px;height:11px}
  html.lp.v3 #stageLanding .ptr-radar-blip::after{
    content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
    transform:translate(-50%,-50%)}

  /* Selettore della lingua: il pulsante non riempiva la pastiglia. */
  #stageLanding .rv-language button{min-width:36px;height:36px}
}

/* Il tocco non ha uno stato "sopra": gli effetti hover restano accesi
   dopo il tap e le evidenziazioni azzurre di sistema sporcano i bottoni. */
@media(pointer:coarse){
  #stageLanding a,#stageLanding button{-webkit-tap-highlight-color:rgba(0,0,0,.06)}
  #stageLanding .lbtn:hover,
  #stageLanding .v3-plan-cta:hover,
  #stageLanding .ptr-radar-apply:hover{transform:none}
}

/* Campi: sotto i 16px iOS ingrandisce la pagina al primo tocco e non la
   riporta più indietro. */
@media(max-width:820px){
  #stageLanding input,#stageLanding textarea,#stageLanding select,
  html.lp.v3 #stageLanding .lpartner-form input,
  html.lp.v3 #stageLanding .lpartner-form textarea{font-size:16px}
  html.lp.v3 #stageLanding .lpartner-form input,
  html.lp.v3 #stageLanding .lpartner-form textarea{min-height:48px;padding:12px 14px}
  html.lp.v3 #stageLanding .lpartner-form textarea{min-height:120px}
}

/* =====================================================================
   5. Schermi molto stretti (iPhone SE e simili, 360px e sotto).
   ===================================================================== */
@media(max-width:380px){
  html.lp.v3 #stageLanding .pv-intro h1{font-size:clamp(22px,7.4vw,30px)}
  html.lp.v3 #stageLanding .v3-price strong{font-size:46px}
  html.lp.v3 #stageLanding .v3-price>span{font-size:22px}
  html.lp.v3 #stageLanding .v3-plan-specs>div{grid-template-columns:86px minmax(0,1fr)}
  #stageLanding .lfoot-cols{gap:20px 12px}
  html.lp.v3 #stageLanding .mdb-preview-industries span{padding:6px 7px;font-size:9.5px}
}