/* ==========================================================================
   Strato di restyle condiviso dalle landing Be-Go (produttori, trasportatori).
   Va caricato DOPO i fogli originali: non li riscrive, ne ridefinisce i token
   e poche regole mirate per portarli nel linguaggio del nuovo sito wstech.
   ========================================================================== */

:root{
  /* palette: neutri del new-lab + verde Be-Go */
  --ink:#0b1b2a;
  --ink-soft:#1f3346;
  --ink-mute:#42566a;
  --ink-faint:#8296a8;
  --paper:#ffffff;
  --paper-warm:#f4f8f6;
  --paper-cool:#f4f8fc;
  --surface:#ffffff;
  --line:#dde7e2;
  --line-soft:#e9f0ec;
  --green:#5eb069;
  --green-soft:#8fc896;
  --green-dark:#2f8d72;   /* verde leggibile come testo su fondo chiaro */
  --green-deep:#0d2a22;
  /* spigoli vivi e niente ombre: la profondita' la danno i filetti */
  --radius-sm:0;
  --radius:0;
  --radius-lg:0;
  --radius-xl:0;
  --tile-shadow:none;
  --tile-shadow-hover:none;
  --sans:Inter,'Inter Tight',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:var(--sans);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* tipografia editoriale: pesi leggeri, crenatura stretta */
h1,h2,h3,.section-title,.hero-title{font-weight:500;letter-spacing:-.045em;line-height:1.04}
.section-title{font-size:clamp(28px,4vw,54px)}
.section-desc{color:var(--ink-mute);font-size:17px;line-height:1.6}

/* etichette di sezione in monospazio, come su wstech */
.sec-label,.rs-tag,.cons-tag,.pz-tag-top,.aqs-line-name,.fbh-n,.dc-n,.pb-n,.vant-n,.step-n,.faq-q-n{
  font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase}
.sec-label{font-size:11px;color:var(--ink-faint)}

/* niente pillole: filetti */
.sec-label,.rs-tag,.cons-tag{border-radius:0}

/* schede -> blocchi a filetto */
.vant-card,.pz-card,.demo-card,.obj-card,.step-tile,.faq-item,.form-block,.dca-item,.pb-item,.fb-check-item,.sol-step{
  border-radius:0;box-shadow:none;border:1px solid var(--line);background:var(--surface)}
.vant-card:hover,.pz-card:hover,.demo-card:hover,.obj-card:hover,.step-tile:hover{
  box-shadow:none;transform:none;background:var(--paper-warm)}

/* pulsanti squadrati */
.btn,.btn-primary,.btn-ghost,.nav-cta,.pz-btn,.section-cta-link,button,input[type=submit]{border-radius:0}
.btn-primary,.pz-btn,.nav-cta{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
/* la freccia stava in un tondo verde chiaro dentro il pulsante verde scuro:
   due verdi sovrapposti, con un tondo in una grafica ormai tutta squadrata */
.btn-primary .btn-arrow{width:auto;height:auto;background:transparent;color:inherit;
  border-radius:0;margin-left:2px;transition:transform .25s}
.btn-primary:hover .btn-arrow{transform:translateY(2px);background:transparent}
.btn-primary:hover,.pz-btn:hover{filter:brightness(.92)}

/* campi del modulo: sottolineati, non riquadrati */
.form-group input,.form-group select,.form-group textarea{
  border-radius:0;border:0;border-bottom:1px solid var(--line);background:transparent;padding-left:0;padding-right:0}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-bottom-color:var(--green-dark);box-shadow:none}

/* telefono e mockup: spigoli piu' sobri, ombra contenuta */
.hv-phone{border-radius:22px;box-shadow:0 30px 64px rgba(11,27,42,.24)}
.hv-phone-inner{border-radius:16px}
.hv-frame{border-radius:0;border:1px solid var(--line);background:linear-gradient(180deg,var(--paper-warm),#fff 70%)}
.hv-notif{border-radius:0}
.hv-sign-btn{border-radius:0;background:var(--green-dark);color:#fff}

/* fasce scure: fondo profondo, filetto d'accento in alto, trama a griglia */
.rischio,.conservazione,.banner-formulari,.banner-giacenze,.footer{
  position:relative;background:var(--green-deep);color:#fff}
.rischio:before,.conservazione:before,.banner-formulari:before,.banner-giacenze:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:52px 52px}
.rischio:after,.conservazione:after,.banner-formulari:after,.banner-giacenze:after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--green),transparent 58%)}
.rischio>*,.conservazione>*,.banner-formulari>*,.banner-giacenze>*{position:relative;z-index:1}

/* accordion FAQ a filetto */
.faq-item{border:0;border-bottom:1px solid var(--line);background:transparent}
.faq-q{padding-left:0;padding-right:0}
.faq-a{padding-left:0;padding-right:0}

/* corsivo dell'occhiello sostituito dal colore, come sui titoli di wstech */
.hero-title em{font-style:normal;color:var(--green-dark);font-family:var(--sans)}
.hero-title{letter-spacing:-.05em}
.hero-pain{color:var(--ink-mute)}

/* le pillole diventano squadrate: il linguaggio nuovo non ha raggi */
.aqs-btn,.aqs-savings-pill,.aqs-secure,.btn-primary,.cons-tag,.ct-submit,.dc-badge,
.dc-sign-btn,.fbh-n,.finale-cta,.hero-promo-badge,.hv-label,.hv-sign-btn,.label-optional,
.modal-btn,.nav-cta,.promo-flag,.pz-btn,.pz-discount-badge,.pz-no-promo,.rs-tag,
.section-cta-btn,.sol-step,.stepper,.stepper-btn,.upsell-plus,.upsell-status,.upsell-tag,
.urg-cta{border-radius:0}
/* restano tondi solo i segnalini circolari, dove il cerchio e' la forma */
.aqs-savings-dot,.hv-label-dot,.sv-dots span,.commerciale-card__avatar,.modal-icon{border-radius:50%}
.hero-promo-badge::before,.rischio::before,.urgenza::before,.finale::before{border-radius:0}

/* barra promo e testata in linea col resto */
.promo-flag{background:var(--green-dark)}
.nav{border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}

/* nei titoli il corsivo diventa colore, come su wstech */
.section-title em,.rs-title em,.hero-title em,h1 em,h2 em,h3 em{
  font-style:normal;font-family:var(--sans);color:var(--green-dark)}
.rischio .rs-title em,.conservazione h2 em,.banner-formulari h2 em,.banner-giacenze h2 em{color:var(--green-soft)}
.pb-close em,.section-desc em,.rs-text em{font-style:normal;color:inherit;opacity:.86}

/* ---- raggi e ombre scritti a mano nei fogli originali ----
   I token coprono la maggior parte, ma restano valori letterali (999px per le
   pillole, 12/22/34px per le schede). Li azzero in modo mirato, lasciando
   tondi solo gli elementi in cui il cerchio e' la forma stessa. */
[class*="card"],[class*="tile"],[class*="box"],[class*="badge"],[class*="pill"],
[class*="chip"],[class*="tag"],[class*="btn"],[class*="cta"],[class*="item"],
button,input,select,textarea,.hero-sub,.hero-title,section > div{border-radius:0}
/* tondi solo dove il cerchio e' la forma: pallini e avatar. Le icone, nel
   linguaggio nuovo, sono quadrate. */
[class*="dot"],[class*="avatar"],.hv-label-dot,.sv-dots span{border-radius:50%}
[class*="card"],[class*="tile"],[class*="box"]{box-shadow:none}

/* il serif resta solo dove serve: qui non serve mai */
.hero-title,.hero-title em,[class*="title"],[class*="value"],[class*="logo"]{font-family:var(--sans)}
.hero-title em,[class*="title"] em{font-style:normal}

/* ---- marchio WS Tech in testata, con richiamo al sito aziendale ---- */
.ws-mark{display:inline-flex;align-items:center;gap:9px;margin-left:18px;padding-left:18px;
  border-left:1px solid var(--line);opacity:.86;transition:opacity .2s}
.ws-mark:hover{opacity:1}
.ws-mark span{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.ws-mark img{height:20px;width:auto;display:block;border-radius:0}
@media(max-width:820px){.ws-mark span{display:none}.ws-mark{margin-left:12px;padding-left:12px}}

/* ==========================================================================
   Landing trasportatori — le griglie di schede passano al linguaggio nuovo:
   blocchi che combaciano condividendo il filetto, invece di riquadri
   staccati con spazio attorno.
   ========================================================================== */
.vant-grid,.tr-grid,.demo-flow{
  display:grid;gap:1px;background:var(--line);
  /* il fondo fa da filetto solo fra i blocchi, non sotto il padding del contenitore */
  background-clip:content-box;margin-top:44px}
.vant-grid{grid-template-columns:repeat(3,1fr)}
.tr-grid{grid-template-columns:repeat(2,1fr)}
.demo-flow{grid-template-columns:repeat(3,1fr);align-items:stretch}
.vant-card,.tr-item,.demo-card{
  background:var(--surface);border:0;border-radius:0;box-shadow:none;
  padding:30px 26px 34px;margin:0;transition:background .25s}
.vant-card:hover,.tr-item:hover,.demo-card:hover{background:var(--paper-warm)}
/* le frecce fra i passi non servono piu': il filetto fa da separatore */
.demo-flow > .demo-connector{display:none}
/* icone piatte, quadrate, nel colore d'accento */
.vant-icon,.tr-icon,.dc-icon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:0;
  background:color-mix(in srgb,var(--green) 15%,#fff);color:var(--green-dark);margin-bottom:16px}
.vant-icon svg,.tr-icon svg,.dc-icon svg{width:18px;height:18px}
.dc-n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--green-dark);margin-bottom:14px}
.dc-badge{display:block;margin-top:14px;background:var(--paper-cool);border:1px solid var(--line);
  border-radius:0;padding:10px 12px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--ink-mute)}
.vant-card h3,.tr-item h3,.demo-card h3{font-size:19px;letter-spacing:-.03em;margin-bottom:10px}
.vant-card p,.tr-item p,.demo-card p{color:var(--ink-mute);font-size:14px;line-height:1.55;margin:0}

/* confronto prima/dopo: righe a filetto, stati come etichette in monospazio */
.pd-table{border-top:1px solid var(--line);margin-top:40px}
.pd-head-col,.pd-row > *,.pd-cell{border-radius:0}
.pd-state{border-radius:0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);background:transparent}
.pd-state--rischio{color:#b3261e;border-color:#e5c3bd}
.pd-state--sereno{color:var(--green-dark);border-color:color-mix(in srgb,var(--green) 45%,#fff)}

@media(max-width:900px){
  .vant-grid,.demo-flow{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .vant-grid,.tr-grid,.demo-flow{grid-template-columns:1fr}
}

/* ---- scala tipografica dell'hero ----
   I fogli originali arrivavano a 104px reali con l'altezza di riga del serif:
   il titolo da solo occupava piu' di una schermata e il resto non si vedeva.
   Riportata alla scala del sito nuovo, con le spaziature proporzionate. */
.hero-title{font-size:clamp(34px,4.6vw,66px);line-height:1.04;letter-spacing:-.05em;margin-bottom:22px}
.hero-title .hero-pain{display:block;font-size:clamp(16px,1.5vw,19px);line-height:1.5;
  font-weight:400;letter-spacing:0;color:var(--ink-mute);margin:14px 0}
.hero-sub{font-size:17px;line-height:1.6;margin-bottom:28px;max-width:52ch}
.hero{padding-top:36px;padding-bottom:56px}
.hero-promo-badge{margin-bottom:22px}

@media(max-width:620px){
  .hero{padding-top:28px;padding-bottom:40px}
  .hero-title{margin-bottom:18px}
}

/* su schermo stretto l'hero si impila: telefono piu' contenuto e spaziature
   ridotte, altrimenti la prima videata non mostra nulla oltre al titolo */
@media(max-width:620px){
  .hv-phone,.phone-shell{width:min(196px,58vw);margin-inline:auto}
  .hv-frame{padding:22px}
  .hero-title{font-size:clamp(30px,8.4vw,38px)}
  .hero-sub{font-size:15.5px;margin-bottom:22px}
  .hero-title .hero-pain{font-size:15px;margin:10px 0}
}

/* ==========================================================================
   FASCE SCURE — leggibilita'
   I token ridefiniti (--ink, --ink-mute, --ink-faint) valgono per il fondo
   chiaro. Dentro le sezioni scure gli stessi token producevano testo nero su
   verde scuro: qui il colore va dichiarato per quel contesto.
   ========================================================================== */
.rischio,.conservazione,.banner-formulari,.banner-giacenze,.finale,.urgenza{color:#fff}
.rischio h2,.conservazione h2,.banner-formulari h2,.banner-giacenze h2,.finale h2,.urgenza h2,
.rischio h3,.conservazione h3,.banner-formulari h3,.banner-giacenze h3,
.rischio strong,.conservazione strong,.banner-formulari strong,.banner-giacenze strong,
.rischio b,.conservazione b,.banner-formulari b,.banner-giacenze b{color:#fff}
.rischio p,.conservazione p,.banner-formulari p,.banner-giacenze p,.finale p,.urgenza p,
.rischio .section-desc,.conservazione .section-desc,.banner-formulari .section-desc,
.banner-giacenze .section-desc,.rischio li,.conservazione li{color:rgba(255,255,255,.82)}
.rischio .sec-label,.conservazione .sec-label,.banner-formulari .sec-label,
.banner-giacenze .sec-label,.finale .sec-label,.urgenza .sec-label{color:rgba(255,255,255,.66)}
/* accenti: la variante chiara del verde, non quella da fondo bianco */
.rischio em,.conservazione em,.banner-formulari em,.banner-giacenze em,
.rischio .cons-payoff,.conservazione .cons-payoff{color:var(--green-soft)}
/* etichette a pillola: contorno chiaro, testo chiaro */
.rischio .rs-tag,.conservazione .cons-tag,.banner-formulari .cons-tag,.banner-giacenze .cons-tag{
  background:transparent;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.88)}
.rischio strong{color:#ffb4a8}


/* ==========================================================================
   SCHEDE EVIDENZIATE — i fogli originali le rendevano scure con testo chiaro.
   Il restyle ha dato loro fondo bianco, lasciando il testo bianco: la scheda
   "Niente rincorsa firme" e il primo box dei prezzi risultavano vuoti.
   Qui tornano leggibili: fondo chiaro come le altre, riconoscibili dal
   filetto d'accento invece che dal blocco pieno.
   ========================================================================== */
.pz-card--main,.vant-card--accent,.demo-card--accent{
  background:var(--surface);border-top:3px solid var(--green)}
.pz-card--main h3,.pz-card--main .pz-val,.pz-card--main .pz-cur,
.vant-card--accent h3,.demo-card--accent h3{color:var(--ink)}
.pz-card--main .pz-feat li,.vant-card--accent p,.demo-card--accent p{color:var(--ink-mute)}
.pz-card--main .pz-period,.pz-card--main .pz-was{color:var(--ink-faint)}
.pz-card--main .pz-price{border-bottom-color:var(--line)}
/* il badge sconto era trattato in due modi: verde acceso con alone sulle
   schede normali, piatto su quella evidenziata. Uno solo per tutte. */
.pz-discount-badge,.pz-card .pz-discount-badge,.pz-card--main .pz-discount-badge{
  box-shadow:none;background:var(--green-dark);color:#fff;
  border:0;border-radius:0;font-weight:700;letter-spacing:-.01em;text-shadow:none}
.vant-card--accent .vant-n--light,.demo-card--accent .dc-n{color:var(--green-dark)}
.demo-card--accent .dc-badge{background:var(--paper-cool);border-color:var(--line);color:var(--ink-mute)}
/* il nastro diagonale non appartiene al linguaggio nuovo */
.pz-card--main::after{display:none}

/* ---- "Cinque problemi": 5 schede in due righe piene, non 3+2 con un buco ---- */
.vant-grid{grid-template-columns:repeat(6,1fr)}
.vant-grid .vant-card{grid-column:span 2}
/* il foglio originale centrava le ultime due con una posizione esplicita
   (2/span 2 e 4/span 2), pensata per tre colonne: qui le allargo a meta'
   riga ciascuna, cosi' la seconda riga e' piena come la prima. */
.vant-grid .vant-card:nth-child(4),
.vant-grid .vant-card:nth-child(4):nth-last-child(2),
.vant-grid .vant-card:nth-child(5):last-child{grid-column:auto/span 3}
@media(max-width:900px){
  .vant-grid{grid-template-columns:repeat(2,1fr)}
  .vant-card,.vant-card:nth-child(4),.vant-card:nth-child(5){grid-column:auto}
}
@media(max-width:620px){
  .vant-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   RITMO VERTICALE — meno vuoto, senza incollare tutto.
   I fogli originali respiravano molto: su schermo grande le sezioni
   restavano mezze vuote e si scorreva senza leggere.
   ========================================================================== */
/* il foglio originale imposta il padding con selettori di classe (.problema,
   .rischio, .finale a 180px...), che battono il selettore d'elemento: serve
   almeno la stessa specificita'. section[class] la ottiene senza elencarle. */
section[class]{padding-top:clamp(48px,5vw,76px);padding-bottom:clamp(48px,5vw,76px)}
section.hero,section.campaign-hero{padding-top:36px;padding-bottom:56px}
/* le fasce scure e gli inviti finali restano un filo piu' ariosi */
section.finale,section.urgenza,section.acquisto,section.contatti{
  padding-top:clamp(56px,5.6vw,88px);padding-bottom:clamp(56px,5.6vw,88px)}
.section-head{margin-bottom:clamp(28px,3vw,40px)}
.section-title{margin-bottom:14px}
.section-desc{margin-bottom:0}
.section-cta,.section-cta--center{margin-top:clamp(28px,3vw,40px)}
.pb-list,.steps,.benefit-grid,.vant-grid,.tr-grid,.demo-flow,.pz-grid,.faq-list,
.obj-grid,.dca-list,.norm-grid{margin-top:clamp(26px,2.8vw,38px)}
/* i blocchi interni non devono avere piu' aria del necessario */
.vant-card,.demo-card,.pz-card,.obj-card,.tr-item,.step-tile{padding:26px 24px 30px}
.faq-q{padding-top:18px;padding-bottom:18px}
.faq-a{padding-bottom:20px}
.cons-payoff,.pb-close{margin-top:clamp(24px,2.6vw,34px)}

/* ==========================================================================
   PREZZI — una scheda larga che avvia l'acquisto, tre aggiuntivi sotto.
   I tre non sono acquisti a se': si spuntano nello stesso modulo d'ordine,
   quindi hanno un trattamento piu' leggero e non ripetono il pulsante.
   ========================================================================== */
.pz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);background-clip:content-box;align-items:stretch}

/* --- l'abbonamento: larghezza piena, prezzo e azione affiancati --- */
.pz-card--main{grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:14px 40px;align-items:start;align-content:start;padding:26px 34px 30px}
.pz-card--main .pz-top-row{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-bottom:4px}
.pz-card--main h3{grid-column:1;font-size:clamp(24px,2.6vw,34px);margin:0}
.pz-card--main .pz-price{grid-column:2;grid-row:2;justify-self:end;border-bottom:0;
  align-items:baseline;padding:0;margin:0}
/* il prezzo pieno merita di vedersi: e' il termine di paragone della promo */
.pz-card--main .pz-was{font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.03em;
  color:var(--ink-mute);text-decoration-line:line-through;text-decoration-thickness:2px;
  text-decoration-color:#c94040;margin-right:10px}
.pz-card--main .pz-feat li{padding-top:4px;padding-bottom:4px;margin:0}
.pz-card--main .pz-val{font-size:clamp(46px,5vw,72px);line-height:.9}
/* l'elenco passa sotto, su tre colonne: cosi' la colonna del prezzo non resta
   appesa sopra un vuoto alto quanto la lista */
.pz-card--main .pz-feat{grid-column:1/-1;grid-row:4;margin:14px 0 0;padding-top:16px;
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}
.pz-card--main .pz-btn{grid-column:2;grid-row:3;justify-self:end;align-self:start;
  margin:6px 0 0;min-width:220px;justify-content:center}
@media(max-width:900px){
  .pz-card--main{grid-template-columns:1fr;gap:20px;padding:26px 22px 30px}
  .pz-card--main h3,.pz-card--main .pz-price,.pz-card--main .pz-feat,.pz-card--main .pz-btn{
    grid-column:1;grid-row:auto;justify-self:start}
  .pz-card--main .pz-btn{width:100%}
  /* le tre colonne restavano anche a 375px: l'elenco chiedeva 378px dentro una
     scheda da 327 e l'overflow:hidden tagliava badge, voci e pulsante insieme */
  .pz-card--main .pz-feat{grid-template-columns:1fr 1fr;gap:0 22px}
}
@media(max-width:620px){
  .pz-card--main .pz-feat{grid-template-columns:1fr;gap:0}
  /* il periodo era spinto al bordo opposto della scheda: accanto al prezzo si
     legge come una cosa sola, non come due dati separati */
  .pz-period{margin-left:0;padding-left:8px;text-align:left}
  .pz-price{flex-wrap:wrap}
}

/* --- intestazione del gruppo aggiuntivi --- */
.pz-addon-head{grid-column:1/-1;background:var(--surface);padding:30px 36px 6px}
.pz-addon-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-dark);margin-bottom:10px}
.pz-addon-head p{margin:0;color:var(--ink-mute);font-size:15px;line-height:1.55;max-width:62ch}

/* --- i tre aggiuntivi: piu' leggeri, senza pulsante proprio --- */
.pz-grid .pz-card:not(.pz-card--main){background:var(--paper-warm);padding:24px 24px 26px;
  display:flex;flex-direction:column;gap:8px}
.pz-grid .pz-card:not(.pz-card--main) h3{font-size:18px;letter-spacing:-.03em;margin:0}
.pz-grid .pz-card:not(.pz-card--main) .pz-price{border-bottom:0;padding:0;margin:2px 0 6px;align-items:baseline}
.pz-grid .pz-card:not(.pz-card--main) .pz-val{font-size:30px;line-height:1}
.pz-grid .pz-card:not(.pz-card--main) .pz-feat{margin:0}
.pz-grid .pz-card:not(.pz-card--main) .pz-feat li{font-size:13px}
/* il pulsante diventa una nota: si spunta nel modulo, non si compra qui */
.pz-grid .pz-card:not(.pz-card--main) .pz-btn{margin-top:auto;background:transparent;border:0;
  color:var(--green-dark);padding:12px 0 0;font-size:12px;font-weight:700;justify-content:flex-start}
.pz-grid .pz-card:not(.pz-card--main) .pz-btn svg{display:none}
.pz-grid .pz-card:not(.pz-card--main) .pz-btn::before{content:"+ ";font-weight:700}

/* il foglio originale centrava l'ultima scheda con grid-column:2/span 1,
   perche' con 4 card su 3 colonne restava spaiata. Ora le prime file sono
   diverse e i tre aggiuntivi riempiono la riga: annullo il posizionamento. */
.pz-grid .pz-card:not(.pz-card--main){grid-column:auto}

@media(max-width:820px){.pz-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pz-grid{grid-template-columns:1fr}.pz-addon-head{padding:24px 22px 4px}}


/* --- mockup del telefono su schermo stretto ------------------------------
   Stava a 190px dentro un riquadro da 327: le notifiche finivano in una
   colonna da 76px e il testo veniva troncato a meta' parola. Con il telefono
   che occupa lo spazio disponibile la colonna del testo raddoppia. */
@media(max-width:620px){
  /* la cornice ha aspect-ratio 1/1: a 327px di lato il telefono, alto 552,
     veniva tagliato sopra e sotto. Cresce con il contenuto, e il telefono si
     accorcia quel tanto che basta a non lasciare un vuoto bianco dentro. */
  .hv-frame{padding:16px;aspect-ratio:auto;height:auto}
  .hv-phone{aspect-ratio:9/16}
  .hv-phone{width:min(276px,calc(100vw - 84px))}
  .hv-phone-inner{padding:34px 12px 16px}
  .hv-notif{padding:9px 10px}
  .hv-notif-txt span{white-space:normal;line-height:1.35}
}