/* =============================================================================
   article.css — cappello, corpo, figure, blocchi speciali, CTA, recensioni
   ========================================================================== */

/* =============================================================================
   CAPPELLO
   ========================================================================== */
/* Solo i titoli di sezione dell'articolo: il corpo resta a sinistra e gli
   H2 di checkout/thank you non sono toccati. Nessuna max-width: i titoli
   usano tutta la colonna. */
.article h2{text-align:center}

.crumb{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--edit);margin:0 0 20px}

.crumb .sep{color:var(--ink-faint);margin:0 4px}

.adlabel{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-faint);border:1px solid var(--rule-strong);border-radius:2px;
  padding:3px 8px;margin:0 0 18px}

.subhead{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.28rem;line-height:1.45;color:var(--ink-soft);margin:0 0 22px}

/* ---------- Riga firma ---------- */
.byline{display:flex;align-items:flex-start;gap:13px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:15px 0;margin:0 0 30px}

.byline__mono{flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--wash);border:1px solid var(--rule-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:19px;color:var(--edit)}

.byline__who{min-width:0}
.byline__name{font-size:13px;font-weight:700;color:var(--ink);margin:0;line-height:1.4}
.byline__meta{font-size:12.5px;color:var(--ink-faint);margin:0;line-height:1.4}

.byline__bio{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:6px 0 6px}

.noscript-note{border:1px solid var(--rule-strong);background:var(--wash);border-radius:6px;
  padding:14px 16px;font-size:.95rem;margin:0 0 24px}

/* =============================================================================
   CORPO — capolettera, una volta sola in tutta la pagina
   ========================================================================== */
main .lead::first-letter{font-family:var(--serif);float:left;font-size:3.7rem;line-height:.78;
  font-weight:700;padding:8px 12px 0 0;color:var(--edit)}

/* =============================================================================
   FIGURE
   ========================================================================== */
figure{margin:2.1em 0}

.figimg{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:2px}

figcaption{font-size:12.5px;color:var(--ink-soft);line-height:1.5;padding:11px 0 15px;
  border-bottom:1px solid var(--rule)}
figcaption b{color:var(--ink-soft);font-weight:600}

/* Le figure senza didascalia chiudono comunque con il filetto. */
figure:not(:has(figcaption)){border-bottom:1px solid var(--rule);padding-bottom:15px}

/* Segnaposto finché non ci sono le foto */
.figph{position:relative;background:var(--wash);border:1px solid var(--rule);border-radius:2px;
  padding-bottom:60%}
.figph__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--edit)}

/* Appena l'immagine ha una src, il segnaposto sparisce. */
.figimg[src=""]{display:none}
figure:has(.figimg:not([src=""])) .figph{display:none}

/* =============================================================================
   BLOCCHI SPECIALI
   ========================================================================== */

/* a) Box dato — una riga con un numero forte */
.kbox{background:var(--wash);border:1px solid var(--rule);border-left:3px solid var(--edit);
  padding:22px 24px;margin:2.1em 0;font-size:.98rem;line-height:1.7;color:var(--ink-soft)}
.kbox strong{font-family:var(--serif);font-size:1.12rem;color:var(--ink);font-weight:700}

/* b) Citazione — stessa famiglia visiva del box dato, funzione diversa */
blockquote{border-left:3px solid var(--edit);padding-left:26px;margin:2.1em 0}
/* Su mobile 24px su una colonna da 335px erano troppi: la citazione
   schiacciava il corpo. Scende a ~19,5px a 375px e risale a 24px da tablet
   in su, dove la colonna regge il corpo grande. */
blockquote p{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.22rem,5.2vw,1.5rem);line-height:1.4;
  color:var(--ink);margin:0}

/* ---------------------------------------------------------------------------
   Discorso diretto del fondatore — due passaggi lunghi (10 e 7 paragrafi).
   Trattamento da trascrizione, deliberatamente diverso dagli altri due
   dispositivi già in uso:
     · citazione breve  → corsivo grande, filetto rosso, nessun fondo
     · blocco email     → corsivo, filetto rosso
     · discorso (qui)   → pannello con fondo, tondo (non corsivo), ritmo stretto
   Il tondo invece del corsivo perché su diciassette paragrafi il corsivo
   affatica; il pannello continuo dice "qui parla una persona sola, di seguito".
   ------------------------------------------------------------------------ */
.speech{
  position:relative;
  background:var(--wash);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:57px 22px 24px;   /* spazio in alto per il segno */
  margin:2.4em 0;
}

/* Le virgolette d'apertura sono quelle del copy, non un ornamento aggiunto:
   restano quindi leggibili dagli screen reader.
   Il primo paragrafo diventa una riga flex: il segno occupa una colonna sua,
   il testo una colonna pulita accanto — niente rientri irregolari.
   Il glifo “ di Georgia ha l'inchiostro alto solo il 26% della cassa e largo
   più che alto: per portarlo all'altezza della prima frase senza mangiarsi
   metà colonna lo si stira in verticale e si ritaglia la cassa vuota. */
/* Virgolette del copy portate nell'angolo del pannello: fuori dal flusso,
   così tutti i paragrafi partono dallo stesso asse. Il fondo bianco
   interrompe il filetto e le fa leggere come applicate sopra.
   Restano il carattere “ del testo, quindi le leggono gli screen reader. */
.speech .q{
  position:absolute;
  top:-25px;
  left:14px;
  font-family:var(--serif);
  font-size:175px;      /* l'inchiostro del glifo è il 26% della cassa:
                           servono valori alti per un segno grande.
                           Su desktop cresce a 280px (vedi media query). */
  line-height:1;
  color:var(--edit);
  background:none;      /* nessuna toppa: il segno sta sul fondo del pannello */
  pointer-events:none;
}

.speech p{
  font-family:var(--serif);   /* la voce cambia: serif contro il sans del corpo */
  font-size:inherit;          /* la dimensione no: 18px come gli altri paragrafi */
  line-height:1.6;
  color:var(--ink);
  margin:0 0 1.2rem;          /* stesso ritmo dei paragrafi del corpo */
}
.speech p:last-child{margin-bottom:0}

@media (min-width:768px){
  .speech{padding:86px 30px 30px}
  /* Su desktop la prima frase sta in due righe: il segno rimpicciolisce. */
  .speech .q{font-size:280px;top:-40px;left:22px}
  .speech p:first-of-type{gap:18px}
}

/* Blocco email riportato nel copy: stessa impostazione della citazione,
   in dimensione di lettura invece che di stacco. */
.email{border-left:3px solid var(--edit);padding-left:26px;margin:2.1em 0}
.email p{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.55;
  color:var(--ink);margin:0}

/* c) Riquadro aggiornamento — nota aggiunta dopo la pubblicazione.
   Codice visivo classico del direct response: fondo crema, bordo pieno rosso
   profondo, etichetta a cavallo del bordo. Nessuna icona, nessun colore acceso.
   --urgent e --urgent-bg si usano SOLO qui. */
.update{
  background:var(--urgent-bg);
  border:2px solid var(--urgent);
  border-radius:4px;
  padding:30px 22px 26px;
  margin:48px 0;
  position:relative;
}

/* Etichetta grafica, non copy. */
.update::before{
  content:"AGGIORNAMENTO";
  position:absolute;
  top:-16px;
  left:20px;
  background:var(--urgent);
  color:#fff;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:12px;
  line-height:1;
  letter-spacing:.18em;
  padding:9px 14px;
  border-radius:3px;
}

/* Il testo resta quello dell'articolo: stesso colore, stessa famiglia,
   stessa line-height. Il rosso vive solo su bordo ed etichetta. */
.update__title{font-family:var(--font-sans);font-weight:400;font-size:13px;
  letter-spacing:.02em;color:var(--ink-soft);margin:0 0 18px}



/* =============================================================================
   CTA — dispositivo di risposta, dentro il registro dell'articolo
   ========================================================================== */
.cta{
  background:var(--wash);
  border:2px solid var(--ink);
  border-radius:4px;
  padding:24px 22px 26px;
  margin:3em 0;
  text-align:center;
  box-shadow:none;
}

.cta__copy{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.35rem,4.4vw,1.55rem);
  line-height:1.3;
  color:var(--ink);
  /* Tenuto SOLO qui: misurato, riduce la riga più corta dal 48% al 52%
     della larghezza. Testo breve su 5 righe, il bilanciamento aiuta. */
  text-wrap:balance;
  max-width:24ch;
  margin:0 auto 22px;
}

.cta .btn--primary{
  width:100%;
  min-height:58px;
  font-size:clamp(1rem,4vw,1.12rem);
  letter-spacing:.02em;
  border-radius:5px;
}

.cta__terms{
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:14px 0 0;
}

/* Variante annidata nel box AGGIORNAMENTO: il bianco stacca dal crema senza
   creare un secondo bordo pesante. Selettore discendente (0,2,0): vince su
   .cta a prescindere dall'ordine di dichiarazione. */
.update .cta{
  /* Un tono più scuro del riquadro invece del bianco: dentro un fondo crema
     il bianco sembra un ritaglio incollato. */
  background:var(--urgent-surface);
  border:1px solid rgba(158,43,37,.28);
  border-radius:4px;
  padding:24px 20px 22px;
  margin:2em 0;
  box-shadow:none;
}

/* =============================================================================
   STICKY BAR — solo sotto 768px, solo il bottone
   ========================================================================== */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bg);border-top:1px solid var(--rule);
  box-shadow:0 -1px 6px rgba(0,0,0,.06);
  padding:0 20px env(safe-area-inset-bottom,0px)}

.stickybar__inner{height:74px;max-width:var(--measure);margin:0 auto;
  display:flex;align-items:center}

.stickybar .btn{width:100%;min-height:58px;padding:12px 20px;
  font-size:clamp(1rem,4vw,1.12rem);letter-spacing:.02em;border-radius:5px}

/* spazio per non far coprire il footer dalla barra */
.site-footer{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}

/* =============================================================================
   RECENSIONI
   ========================================================================== */
.reviews{margin:2.8em 0}

.reviews__intro{margin:0 0 1.2rem}

.reviews__list{display:flex;flex-direction:column;gap:16px;margin:26px 0 20px}

.review{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:20px}

.stars{color:var(--star);font-size:15px;letter-spacing:.12em;line-height:1;margin:0 0 10px}

.review__title{font-family:var(--serif);font-weight:700;font-size:1.04rem;line-height:1.35;
  color:var(--ink);margin:0 0 10px}

.review__body{font-size:.95rem;line-height:1.7;color:var(--body);margin:0 0 12px}

.review__author{font-size:13px;color:var(--ink-faint);margin:0}

/* =============================================================================
   Breakpoint 768px
   ========================================================================== */
@media (min-width:768px){
  main{padding:48px 20px 56px}

  /* Su desktop il CTA resta nel flusso: la barra non serve. */
  .stickybar{display:none}
  .site-footer{padding-bottom:0}
}

/* =============================================================================
   Breakpoint 1080px
   ========================================================================== */
@media (min-width:1080px){
  main{padding:56px 0 64px}
  .utility__inner,.masthead{padding-left:0;padding-right:0}
  .site-footer__inner{padding-left:0;padding-right:0}
}

/* =============================================================================
   SOLO MOBILE — spazi verticali più stretti
   Sotto i 768px la colonna è alta e stretta: gli stessi margini che a desktop
   danno respiro, qui allungano la pagina senza aiutare la lettura.
   ========================================================================== */
@media (max-width:767px){
  /* titoli di sezione: da 38 a 26px sopra e sotto (resta simmetrico) */
  .article h2{margin:1em 0}

  /* box dell'offerta: da 54 a 34px sopra e sotto */
  .cta{margin:1.9em 0}
  .update .cta{margin:1.4em 0}
}