/* YAVENO · home sul telefono (sotto i 760 px). Solo la home; sopra i 759 px non cambia niente.
   La home è corta: campioni, quattro riquadri, tre prezzi, tre schede di extra, quattro passi, Giovanni, contatto.
   - i quattro riquadri di «Cosa c’è dentro» scorrono di lato, uno alla volta; crescono (tutti insieme) se le scritte
     ingrandite dal telefono lo chiedono; sotto i 300 px tornano uno sotto l’altro;
   - gli elenchi lunghi (cosa include ogni sito, la recensione di esempio) si aprono con un tasto;
   - titoli, spazi e righe sono più stretti.
   Il prefisso «body » serve a vincere sulle regole di site.css, bento.css, v5.css, moduli.css, compatta.css e work-refined.css.
   I tasti e le frecce li crea telefono.js. */

.tp-more,.tp-nav{display:none}

@media (max-width:759px){

  /* ---------- tasti che aprono e chiudono (creati da telefono.js) ---------- */
  body .tp-more{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 2px;margin:0;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:500 16px/1.2 Ronzino,system-ui,sans-serif;text-align:left;cursor:pointer}
  body .tp-more svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
  body .tp-more[aria-expanded="true"] svg{transform:rotate(180deg)}
  body .tp-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  body .tp-shut{display:none!important}

  /* ---------- titoli e ritmo ---------- */
  body .section-head h2,body .rf-heading h2,body .founder h2,body .contact h2{font-size:clamp(32px,9vw,38px);line-height:1;letter-spacing:-.04em}
  body .section-head{margin-bottom:20px;gap:12px}
  body .section-head p{font-size:16.5px;line-height:1.42}

  body .prices,body .extras,body .come,body .founder,body .contact{padding:40px var(--g)}

  /* ---------- 1. «Cosa c’è dentro»: quattro riquadri che scorrono di lato ---------- */
  body .s-bento{padding:40px var(--g) 28px}
  body .s-bento .section-head{margin-bottom:18px}
  body .s-bento .bn-grid{display:flex;gap:12px;max-width:none;margin:0 calc(var(--g) * -1);padding:2px var(--g) 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);scrollbar-width:none;perspective:none}
  body .s-bento .bn-grid::-webkit-scrollbar{display:none}
  body .s-bento .bn-grid:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
  body .s-bento .bn-tile{flex:0 0 min(300px,80vw);height:auto;min-height:340px;scroll-snap-align:start;border-radius:22px;animation:none;opacity:1;will-change:auto}
  body .s-bento .head{padding:18px 18px 0}
  body .s-bento .head h3{font-size:20px}
  body .s-bento .head p{font-size:14.5px}
  body .s-bento .t-phone{display:flex;flex-direction:column;align-items:stretch}
  body .s-bento .t-phone .head{padding:18px 18px 0}
  body .s-bento .t-phone .media{flex:1;height:auto;min-height:176px;padding:12px 14px 0}
  body .s-bento .qr-card{flex-basis:70px;width:70px}
  body .s-bento .qr-phone{max-width:150px}
  body .s-bento .bn-link{min-height:44px;margin-top:6px}
  body .s-bento .t-lang .media,body .s-bento .t-chat .media,body .s-bento .t-google .media{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:12px 18px 18px}
  body .s-bento .morph{margin-bottom:14px}
  body .tp-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}
  body .tp-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer}
  body .tp-nav button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body .tp-nav button[aria-disabled="true"]{opacity:.35;cursor:default}
  body .tp-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  body .tp-count{min-width:3.6em;text-align:center;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

  /* ---------- 2. «Guarda cosa facciamo» ---------- */
  body .rf-work{padding:40px var(--g) 32px}
  body .rf-heading{margin-bottom:16px}
  body .rf-more{margin-top:12px;font-size:15px}

  /* ---------- 3. Prezzi ---------- */
  body .prices .section-head{margin-bottom:16px}
  body .plans{gap:12px}
  body .plan{padding:20px 18px 14px}
  body .plan-best{padding-top:48px}
  body .plan-flag{padding:8px 18px}
  body .plan header{padding-bottom:12px;margin-bottom:0}
  body .plan header + .plan-plus,body .plan header + .plan-list{margin-top:10px}
  body .plan .tp-more{border-top:0}
  body .plan .tp-more + .plan-plus,body .plan .tp-more + .plan-list{margin-top:6px}
  body .plan h3{font-size:26px}
  body .plan-for{font-size:15.5px;margin-top:2px}
  body .plan-sale{margin-top:12px;gap:8px;flex-wrap:wrap}
  body .plan-sale + .plan-price{margin-top:6px}
  body .plan-price{font-size:46px}
  body .plan-plus{margin-bottom:6px}
  body .plan-list{margin:0 0 14px}
  body .plan-list li{padding:7px 0 7px 26px;font-size:15.5px}
  body .plan-list li::before{top:13px}
  body .plan .tp-more{margin-bottom:12px}
  body .offer-link{margin-top:16px}
  body .terms{margin-top:22px;gap:14px;font-size:15px;line-height:1.42}

  /* ---------- 4. Aggiunte: tre schede una sotto l’altra ---------- */
  body .extras-mini .section-head{margin-bottom:14px}
  body .extras-mini .extra-list{grid-template-columns:1fr;gap:12px}
  body .extras-mini .extra,body .extras-mini .extra:last-child{padding:18px;gap:4px 12px}
  body .extras-mini .extra h3{font-size:22px}
  body .extras-mini .extra-price{font-size:26px}
  body .extras-mini .extra>p:not(.extra-price){font-size:15px}
  body .extras-mini .extras-foot{margin-top:14px}

  /* ---------- 5. Come lavoriamo: quattro righe ---------- */
  body .come .section-head{margin-bottom:12px}
  body .come-list{grid-template-columns:1fr;gap:0}
  body .come-list li{padding:14px 0;gap:4px}
  body .come-list b{font-size:22px}
  body .come-list span{font-size:15px;line-height:1.42}
  body .come-more{margin-top:14px;font-size:15px}

  /* ---------- 6. Giovanni e le domande ---------- */
  body .founder{gap:28px}
  body .founder h2{margin-bottom:16px}
  body .founder-copy p{font-size:16.5px;margin-bottom:12px}
  body .founder-pts{gap:8px;margin-bottom:4px}
  body .founder-pts li{font-size:15.5px}
  body .faq-more{padding-top:10px;font-size:15px}
  body .founder-copy .btn{margin-top:6px}
  body .faq-title{padding:14px 0}
  body .faq summary{padding:12px 0;font-size:17.5px;gap:16px}
  body .faq details p{padding:0 0 16px}

  /* ---------- 7. Contatto ---------- */
  body .contact{gap:32px}
  body .contact h2{margin-bottom:16px}
  body .contact-left > p{margin-bottom:22px}
  body .contact-who{margin-top:18px}
  body .contact-form{gap:14px;padding-top:0}
  body .form-help{margin-top:-8px}

  /* ---------- 8. Piede ---------- */
  body .foot{padding:36px var(--g) 24px;grid-template-columns:1fr 1fr;gap:16px}
  body .foot-brand{grid-column:1/-1}
  body .foot-col:nth-of-type(3){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  body .foot-col:nth-of-type(3) > p{grid-column:1/-1}
  body .foot-legal{padding-top:18px}
}

/* Sotto i 300 px (pagina ingrandita al 150-200%): i quattro riquadri tornano uno sotto l’altro, alti quanto serve. */
@media (max-width:300px){
  body .s-bento .bn-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px;max-width:none;margin:0;padding:0;overflow:visible;scroll-snap-type:none;scroll-padding-inline:0}
  body .s-bento .bn-tile{flex:none;height:auto;min-height:0;scroll-snap-align:none}
  body .s-bento .t-lang,body .s-bento .t-chat{min-height:270px}
  body .s-bento .t-phone .media{flex:none;height:auto}
  body .tp-nav{display:none}
}

/* 320 px: il tasto WhatsApp in alto era un quadrato bianco vuoto (una regola di v5.css nascondeva anche la «G»). Qui la «G» torna visibile; il testo resta per lo screen reader. */
@media (max-width:340px){
  body .top .chip-face{display:grid}
}