/* QUELLO CHE IL SITO AGGIUNGE AL DISEGNO CONSEGNATO.
 *
 * Sta qui e non dentro i fogli della consegna per una ragione pratica: la
 * consegna successiva sovrascrive i suoi file, non questo. Tre versioni
 * fa erano modifiche sparse dentro il CSS di chi ha disegnato, e ogni
 * consegna le cancellava tutte.
 *
 * Viene caricato DOPO il foglio della consegna, quindi vince a parita' di
 * specificita'. Ogni blocco ha scritto sopra il perche': se il perche'
 * non sta in una riga, la regola non entra.
 */

/* ============================================================
   1 · IL CARATTERE DEI TITOLI VIAGGIA COL SITO
   ============================================================
   Le consegne chiedono `Georgia, Times New Roman, serif`: font di
   SISTEMA. Su Mac e Windows esce Georgia, su Android e Linux qualcos'altro
   — e l'identita' di questo sito e' quel titolo, quindi cambiava faccia a
   seconda di chi guardava.
   Gelasio e' aperto (OFL) e **metricamente compatibile con Georgia**:
   stesse larghezze, stesse proporzioni. Non e' un carattere «simile»
   scelto a occhio, e' fatto apposta per sostituirlo senza spostare una
   riga — verificato: dopo il cambio, le stesse 20 larghezze restano
   pulite e nessun a capo si muove.
   I file sono ridotti ai segni che il sito usa: 36 KB per tre tagli. */
@font-face{font-family:Gelasio;src:url('/home/assets/fonts/gelasio-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gelasio;src:url('/home/assets/fonts/gelasio-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Gelasio;src:url('/home/assets/fonts/gelasio-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root { --serif: Gelasio, Georgia, "Times New Roman", serif; }

/* Il carattere del TESTO — Manrope — non sta qui: la consegna lo porta
   gia' con se', e lo script di integrazione si limita a convertirlo da
   .ttf a .woff2 e a riscrivere il richiamo nel foglio della consegna
   (190 KB → 25 KB, misurati). Ridichiararlo qui sopra il loro non
   funzionava: Chromium scaricava tutti e due i file. */

/* ============================================================
   2 · LA FRECCIA DISEGNATA, AL POSTO DELL'EMOJI
   ============================================================
   Il carattere «↗» (U+2197) ha una presentazione testuale e una a colori,
   e su iOS e macOS il sistema sceglie la seconda: dentro un pulsante
   disegnato con cura compariva un quadratino azzurro lucido. Lo script di
   integrazione lo sostituisce con un segno in SVG; qui c'e' come si
   disegna. */
.button-arrow svg {
  width: 46%; height: 46%;
  fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.freccia-piccola { display: inline-grid; place-items: center; width: 16px; height: 16px; }
.freccia-piccola svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   3 · RISPOSTA AL TOCCO SU TUTTO QUELLO CHE SI TOCCA
   ============================================================
   Misurato sul sito il 3 settembre: rispondevano 7 elementi su 23, poi
   23 su 23. Le consegne tornano indietro ogni volta — si abbassano solo
   i pulsanti — e su un telefono premere una voce di menu, una domanda o
   un link legale non produce nessun segnale: chi tocca non sa se ha
   toccato, e tocca di nuovo.
   Una riga sola, opacita' istantanea, sotto la sola condizione che conta.
   Non pesta le trasformazioni dei pulsanti: muove una proprieta' diversa. */
@media (hover: none), (pointer: coarse) {
  a[href]:active, button:active, summary:active, [role="button"]:active { opacity: .62; }
  button:disabled:active, [aria-disabled="true"]:active { opacity: inherit; }
}

/* ============================================================
   4 · ANCHE IL COMPUTER RISPONDE A CIO' CHE SI PUO' PREMERE
   ============================================================
   Sul telefono la risposta al tocco c'e' dappertutto; su computer le
   regole :hover delle consegne stanno tutte sui pulsanti e sul menu.
   Passare sopra una domanda delle FAQ o un passo del percorso non
   produceva niente, e quindi non si capiva cosa fosse cliccabile.
   Solo dove c'e' un puntatore fine: su un telefono `:hover` resta appeso
   dopo il tocco e sporca. */
@media (hover: hover) and (pointer: fine) {
  .faq-list summary { transition: color .2s, padding-left .2s; }
  .faq-list summary:hover { color: var(--gold); padding-left: 6px; }

  /* LE TRE CASELLE DEL PERCORSO: si accendevano in UNA sola.
     Difetto mio, non della consegna, e vale la pena scriverlo per esteso
     perche' e' il tipo di errore che non si vede rileggendo il CSS.
     La consegna scrive `.v14 .steps li, .v14 .steps li:first-child,
     .v14 .steps li:last-child { background: ... }`. La prima e la terza
     casella pescano dalle varianti con `:first-child` e `:last-child`,
     che valgono UNO scatto di specificita' in piu' della mia
     `.steps li:hover`; la seconda casella no, perche' non e' ne' la
     prima ne' l'ultima. Risultato: passando il mouse si accendeva
     soltanto quella di mezzo.
     Si pareggia nominando le stesse pseudo-classi, piu' la sezione
     davanti per non dipendere dall'ordine dei fogli. Il `.v14` NON si
     usa: e' il numero di questa consegna, e fra due mesi non c'e' piu'. */
  .journey .steps li { transition: background .25s; border-radius: 12px; }
  .journey .steps li:hover,
  .journey .steps li:first-child:hover,
  .journey .steps li:last-child:hover { background: #21173f0f; }
}

/* Il «+» delle FAQ ruota invece di scattare: un comando che cambia stato
   deve far vedere il cambio, o sembra che la pagina abbia sussultato. */
.faq-list summary span { transition: transform .22s cubic-bezier(.16,1,.3,1); }

/* ============================================================
   5 · NIENTE SBORDA, NEMMENO AL 200% DI INGRANDIMENTO
   ============================================================
   Un elemento di griglia ha `min-width: auto`: non si stringe sotto la
   larghezza del proprio contenuto. Sotto i 240 px di viewport — cioe' al
   200% di ingrandimento su un telefono, che e' un requisito di
   accessibilita' — erano l'apertura, la sezione di Giorgia e quella del
   telefono a spingere fuori la pagina, una dopo l'altra.
   Misurato a 20 larghezze da 195 a 2560: con queste righe, tutte pulite;
   senza, tre rosse. Da 240 px in su non cambia un pixel. */
.hero > *, .journey-grid > *, .section-heading > *, .area-grid > *,
.method-grid > *, .founder > *, .story-grid > *, .offer-card > *,
.faq > *, .footer-top > *, .phone-stage > * { min-width: 0; }
h1, h2, h3, p, dt, dd, li, summary, figcaption { overflow-wrap: anywhere; }
/* Il telefono NON prende una larghezza da noi: quella e' disegno, e ogni
   consegna la sceglie diversa (300 px, 270, 250 a seconda dello schermo).
   Noi mettiamo solo il tetto, che non cambia niente finche' lo spazio
   c'e' — cioe' da 240 px in su, misurato — e sotto lo lascia rimpicciolire
   invece di spingere fuori la pagina.
   Perche' serve anche `min-width: 0` sui contenitori: un elemento di
   griglia non si stringe sotto la larghezza del contenuto, quindi il
   tetto misurava il 100% di una colonna gia' sbagliata. */
.visual-shell > *, .phone-stage > * { min-width: 0; }
.phone, .phone-stage { max-width: 100%; }
/* E la colonna va resa DEFINITA, altrimenti il tetto non serve: una
   traccia `auto` si dimensiona sul contenuto, e il contenuto ha una
   larghezza fissa (300 px, 270...), quindi `max-width: 100%` calcolava il
   100% di 300. Con `minmax(0, 1fr)` la colonna vale quanto il contenitore
   e il tetto morde. Sopra i 240 px la larghezza voluta e' piu' piccola
   della colonna, quindi il disegno non cambia. */
.phone-stage { grid-template-columns: minmax(0, 1fr); }
/* La barra in alto: il logo ha una larghezza sua e il pulsante del menu
   non si stringe, quindi sotto i 240 px uscivano insieme dalla finestra.
   Il logo puo' rimpicciolire (mantiene le proporzioni), la barra puo'
   andare a capo — e sopra i 240 non succede ne' l'uno ne' l'altro. */
.nav-shell { flex-wrap: wrap; }
.nav-shell > * { min-width: 0; }
.brand-logo { min-width: 0; max-width: 100%; }
.brand-logo img { max-width: 100%; height: auto; }
.button { flex-wrap: wrap; min-width: 0; }
.footer-top nav { flex-wrap: wrap; }
@media (max-width: 239px) { .price { font-size: 62px; } }

/* ============================================================
   6 · I NUMERI DELLA SEZIONE «COSA RICEVI» SI VEDONO
   ============================================================
   DIFETTO DELLA CONSEGNA, non una scelta: `.deliverables dt span` — i
   numeri 01, 02, 03 davanti alle tre voci — sono `#f4e8d5` su un fondo
   `#f4e8d5`. Misurato: 1:1. Sono spariti, e si nota solo dal rientro che
   resta al loro posto.
   Viene da una modifica a meta': quella sezione era scura (e li' l'avorio
   era giusto), la V15 l'ha portata chiara e il colore del numero e'
   rimasto indietro.
   Il valore non e' inventato: e' lo stesso oro scuro gia' usato per le
   etichette sul beige, scelto perche' fa 5,12:1 dove la soglia e' 4,5.
   L'oro chiaro del marchio, li' sopra, ne farebbe 2,27. */
.deliverables dt span { color: #7a5c28; }

/* ============================================================
   6-bis · LE ESPERIENZE NON SPARISCONO FUORI DALLO SCHERMO
   ============================================================
   DIFETTO DELLA CONSEGNA, misurato: fra 801 e 1150 px la sezione
   «Esperienze» resta a due colonne, ma la fotografia del telefono viene
   posizionata da `resonapet-v14.js` sopra l'arco della fotografia di
   sfondo — e quell'arco, con lo sfondo ritagliato a coprire, finisce
   fuori dalla finestra. Il telefono lo segue: a 820 px il suo bordo
   destro cade a 1085 px, cioe' 265 px oltre lo schermo, e la sezione lo
   taglia via. Misurato anche il resto del danno: la colonna del testo
   scende a 274 px utili e il pulsante «Guarda la storia su Instagram»
   va a capo staccando la freccia dalla parola.
   Due conseguenze che sembravano guasti distinti e sono lo stesso:
   `pumpkin-diego-instagram.jpg` non si caricava affatto — un'immagine
   `loading="lazy"` spinta cosi' lontano dalla finestra il browser non la
   scarica — e il controllo «niente testo tagliato» segnalava la sezione.
   La riparazione non inventa un disegno nuovo: usa quello che la
   consegna ha gia' disegnato per il telefono (una colonna sola, lo
   sfondo verticale, la fotografia al centro) e lo estende alla fascia
   rotta, incolonnato e con un tetto — senza tetto lo sfondo verticale,
   che e' 960x1200, verrebbe stirato a 1148 px di larghezza e alto 1435.
   Perche' 1150 e non 800: da 1150 px in su le due colonne tornano a
   starci davvero — misurato, il bordo destro della fotografia cade a
   1137 su 1150. A 1101 px invece manca ancora di 16 px.
   Specificita': i selettori della consegna sono `.v14 .story-*`, quindi
   qui serve un secondo nome — `.stories .story-*` pareggia e, arrivando
   dopo, vince. Non e' legato al numero di versione. */
@media (min-width: 801px) and (max-width: 1150px) {
  .stories { min-height: 0; padding-block: 76px 0; }
  .stories .stories-backdrop--wide { display: none; }
  .stories .story-grid { min-height: 0; grid-template-columns: minmax(0, 1fr); padding-block: 0; gap: 44px; }
  /* Il testo prende lo stesso tetto della fotografia e sta incolonnato
     con lei: senza, a 1150 px le righe finivano a 600 e restava mezza
     sezione vuota a destra — il difetto «colonne mezze vuote» che il
     controllo cerca da solo. */
  .stories .story-copy { max-width: 640px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .stories .story-visual {
    position: relative; left: auto;
    width: min(100%, 640px); margin-inline: auto;
    min-height: 0; aspect-ratio: 4 / 5;
    padding: 8% 12% 6%; overflow: hidden;
    border-radius: 110px 110px 0 0;
  }
  .stories .stories-backdrop--mobile { display: block; position: absolute; z-index: 0; inset: 0; }
  .stories .stories-backdrop--mobile img { object-position: center; }
  .stories .story-photo { width: min(270px, 45%); border-radius: 27px; box-shadow: 0 26px 62px rgba(8, 4, 20, .42); transform: none; }
  .stories .story-photo img { border-radius: 26px; }
}

/* ============================================================
   7 · LE MASCHERINE SOPRA LA SCHERMATA DELL'AREA SE NE VANNO
   ============================================================
   `.screen-name` e `.screen-code` sono due rettangoli che la consegna
   appoggia sopra la schermata dentro il telefono per coprire il saluto e
   il Codice — scritti «La tua area.» e una fila di pallini al posto
   delle cifre. Servivano quando lo scatto veniva da un'area vera.
   Adesso lo scatto e' fatto con un cliente INVENTATO (Chiara, Brio, un
   Codice che non e' di nessuno), quindi non c'e' niente da coprire: e
   quello che si vede e' il Codice vero, grande, dove sta davvero — cioe'
   la cosa che la sezione sta raccontando. Coprirlo con dei pallini
   nasconderebbe proprio la prova di quello che si dice due righe sopra.
   Sono decorativi (`aria-hidden`), quindi toglierli non toglie niente a
   chi usa un lettore di schermo. */
.screen-name, .screen-code { display: none; }

/* ============================================================
   8 · LA RIGA LEGALE IN FONDO
   ============================================================
   Verbatim da `src/content/it.ts` (footer.disclaimer). Tiene insieme
   «complementare» e «non sostituisce il veterinario» per chi non ha letto
   il riquadro nella sezione del metodo. */
.footer-disclaimer {
  max-width: 70ch;
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

/* ============================================================
   9 · L'APERTURA SU TELEFONO: UN'ALTEZZA VERA, NON UN CALCOLO
   ============================================================
   IL DIFETTO, visto su un iPhone: la fotografia dell'apertura compariva
   come un quadratino di un centinaio di pixel nell'angolo in basso a
   sinistra invece di riempire la larghezza. Su Chromium non succede, e
   nessuna misura lo prendeva.

   COME E' FATTO NELLA CONSEGNA. Il riquadro non ha un'altezza sua: ha
   `aspect-ratio`, `align-self: stretch` e dentro SOLO un'immagine in
   posizione assoluta. Nessuno dei tre pezzi porta un numero: l'altezza
   esce da un calcolo che mette insieme la larghezza della colonna, il
   rapporto fra i lati e la riga della griglia — e il contenuto nel
   flusso, che qui e' zero. E' una catena che i motori risolvono in
   ordini diversi, e dove si rompe l'elemento si dimensiona sul niente
   che ha dentro.

   Il primo tentativo (l'immagine rimessa nel flusso con un'altezza in
   `vw`) toglieva un anello ma lasciava `align-self: stretch` e il
   rapporto fra i lati a discutere con la griglia. Non e' bastato.

   ADESSO L'ALTEZZA E' UN NUMERO, non un calcolo: `height: 86vw` sul
   riquadro. Le unita' della finestra non dipendono dal contenuto, ne'
   dalla griglia, ne' dall'ordine in cui un motore risolve le cose —
   valgono 86 centesimi della larghezza della finestra e basta. Tolti
   anche `aspect-ratio` e `align-self: stretch`, cioe' gli altri due
   anelli. L'immagine torna com'era nella consegna, in posizione
   assoluta: adesso puo' esserlo, perche' il contenitore un'altezza ce
   l'ha davvero.

   ONESTA': WebKit non si avvia in questo ambiente. Non ho visto il
   difetto sparire; ho tolto di mezzo tutto cio' che poteva produrlo. Se
   tornasse, la causa e' altrove e serve un telefono in mano.

   Il ritaglio resta sugli animali: nello scatto stanno fra la riga 560 e
   la 1470 su 1672, e il 74% e' il valore che li porta al centro. */
@media (max-width: 800px) {
  .hero .hero-visual {
    /* I tre anelli della catena, tolti uno per uno. */
    aspect-ratio: auto;
    align-self: start;
    justify-self: stretch;
    /* E l'altezza, che adesso e' un numero. */
    width: 100%;
    height: 86vw;
    min-height: 0;
    /* Il tetto serve ai tablet stretti, dove 86vw diventerebbe una
       fascia alta quanto mezzo schermo. */
    max-height: 480px;
  }
  .hero .hero-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 74%;
  }
}

/* ============================================================
   10 · IL TITOLO DELL'APERTURA NON SI SPEZZA A META' DI UNA FRASE
   ============================================================
   Nel documento il titolo e' scritto in TRE pezzi che il foglio della
   consegna rende ognuno una riga a se' (`.heading-line` e' `display:
   block` con `white-space: nowrap`):

       «Quando arriva un pet,»
       «cambia la vita»
       «di tutti.»

   Le prime due righe sono una scelta e si leggono bene; la terza no:
   «cambia la vita di tutti» e' una frase sola, e romperla dopo «vita»
   lascia appese due parole che da sole non dicono niente. Su schermo
   largo non si nota perche' li' il titolo e' impaginato diversamente;
   su telefono e' la prima cosa che si legge del sito.

   Qui le ultime due righe tornano una sola. Restano `nowrap` ognuna, e
   in mezzo c'e' uno spazio vero: se su uno schermo strettissimo non ci
   stessero, si spezzerebbero di nuovo esattamente dove si spezzavano
   prima — cioe' il peggio che puo' succedere e' tornare com'era.

   La misura del titolo scende da 9,2 a 8,2 unita' della colonna: tutte
   le righe condividono lo stesso limite, e il limite lo detta la riga
   piu' lunga — che adesso e' «cambia la vita di tutti.», 24 segni contro
   i 21 di «Quando arriva un pet,». Il rapporto fra i due numeri e'
   esattamente 21/24. */
@media (max-width: 800px) {
  .hero h1 em .heading-line {
    display: inline;
  }
  /* Lo spazio fra le due: `content: " "` da solo viene MANGIATO, perche'
     uno spazio in testa a un riquadro in linea si fonde con quello che
     lo precede — misurato, usciva «cambia la vitadi tutti.».
     `pre-wrap` lo tiene, e lascia comunque il punto in cui andare a capo
     se lo schermo e' cosi' stretto da non farcele stare. */
  .hero h1 em .heading-line + .heading-line::before {
    content: " ";
    white-space: pre-wrap;
  }
  .hero h1 .heading-line {
    font-size: min(1em, 8.2cqw);
  }
}

/* ============================================================
   11 · IL CASSETTO DEI DOCUMENTI LEGALI
   ============================================================
   Arriva da destra su computer e dal basso su telefono, che e' il verso
   in cui la mano se li aspetta. Sopra, una fascia viola con il marchio:
   cosi' si capisce che si e' ancora dentro ResonaPet e non su una pagina
   di un altro mondo — che era esattamente il difetto di prima.
   La colonna resta stretta: un documento legale largo quanto lo schermo
   non lo legge nessuno. */
.rp-cassetto {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}
.rp-cassetto[hidden] { display: none; }

.rp-cassetto-fondo {
  position: absolute;
  inset: 0;
  background: rgba(24, 16, 46, 0.44);
  backdrop-filter: blur(2px);
  animation: rp-cassetto-fondo .22s ease both;
}

.rp-cassetto-foglio {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 100svh;
  background: var(--color-paper, #f7f6f2);
  box-shadow: -30px 0 80px -40px rgba(24, 16, 46, .7);
  animation: rp-cassetto-entra .26s cubic-bezier(.16, 1, .3, 1) both;
  outline: none;
}

.rp-cassetto-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 14px 16px 14px 22px;
  background: var(--ink, #21173f);
}
.rp-cassetto-logo {
  width: 124px;
  height: auto;
  /* Il marchio e' viola: sulla fascia viola va portato ad avorio. */
  filter: brightness(0) invert(1);
  opacity: .96;
}
.rp-cassetto-chiudi {
  display: grid;
  place-items: center;
  /* 44: si tocca. */
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(247, 246, 242, .28);
  border-radius: 50%;
  background: transparent;
  color: #f7f6f2;
  transition: background-color .18s;
}
.rp-cassetto-chiudi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .rp-cassetto-chiudi:hover { background: rgba(247, 246, 242, .12); }
}

.rp-cassetto-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 22px calc(34px + env(safe-area-inset-bottom));
}
.rp-cassetto-corpo h2 {
  margin: 0 0 14px;
  font: 400 clamp(26px, 5.2vw, 34px)/1.15 var(--serif, Georgia, serif);
  color: var(--ink, #21173f);
  letter-spacing: -.02em;
}
.rp-cassetto-corpo h3 {
  margin: 26px 0 8px;
  font: 400 19px/1.3 var(--serif, Georgia, serif);
  color: var(--ink, #21173f);
}
.rp-cassetto-corpo p,
.rp-cassetto-corpo li {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.66;
  color: var(--muted, #6b5a4a);
  max-width: 62ch;
}
.rp-cassetto-corpo ul { margin: 0 0 10px; padding-left: 20px; }
.rp-cassetto-sottotitolo { color: var(--ink, #21173f) !important; font-weight: 600; }
.rp-cassetto-data {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warm-accent, #7a5c28) !important;
}
.rp-cassetto-intero {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line, rgba(33, 23, 63, .12));
}
.rp-cassetto-intero a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--warm-accent, #7a5c28);
}

/* La pagina sotto non scorre mentre il cassetto e' aperto: senza, il
   dito che arriva in fondo al documento continua sulla home, e si perde
   il posto in cui si stava leggendo — che e' il difetto che il cassetto
   doveva togliere. */
.rp-cassetto-aperto,
.rp-cassetto-aperto body { overflow: hidden; }

@media (max-width: 700px) {
  .rp-cassetto { align-items: flex-end; }
  .rp-cassetto-foglio {
    width: 100%;
    max-height: 92svh;
    border-radius: 22px 22px 0 0;
    animation-name: rp-cassetto-sale;
  }
}

@keyframes rp-cassetto-fondo { from { opacity: 0 } to { opacity: 1 } }
@keyframes rp-cassetto-entra { from { transform: translateX(24px); opacity: .4 } to { transform: none; opacity: 1 } }
@keyframes rp-cassetto-sale { from { transform: translateY(28px); opacity: .4 } to { transform: none; opacity: 1 } }

/* Chi ha chiesto meno animazioni lo vede comparire e basta: il cassetto
   e' informazione, lo scivolamento e' decorazione. */
@media (prefers-reduced-motion: reduce) {
  .rp-cassetto-fondo, .rp-cassetto-foglio { animation: none; }
}

/* ============================================================
   12 · LE DUE ETICHETTE VERTICALI, SUL TELEFONO
   ============================================================
   Segnalato dall'utente: nella sezione «Frequenze su misura», sul
   telefono, la scritta verticale a sinistra e' tagliata fuori.

   MISURATO, a 390 px di finestra:
     .wrap (la sezione)     da  24 a 366, con `overflow: hidden`
     .visual-shell          da   4 a 386 — `margin-inline: -20px`
     l'etichetta `:after`   da   4 a  17

   Cioe': la consegna allarga il riquadro oltre i bordi della sezione
   apposta, perche' la fotografia arrivi a filo di schermo, ma il taglio
   della sezione cade a 24 px e l'etichetta vive tutta dentro i 20 px
   che vengono buttati via. Non e' «un po' tagliata»: sul telefono non
   si vede per niente, e nemmeno il filo d'oro che le sta accanto.
   Vale per tutte e due le sezioni — «Frequenze su misura» a sinistra e
   «Area riservata» a destra — e sotto gli 801 px di finestra, dove il
   riquadro comincia a sbordare. Sopra, l'etichetta sta nel margine e si
   vede benissimo: li' non si tocca niente.

   COSA FACCIAMO. La fotografia resta a filo di schermo — e' disegno
   voluto. Si sposta dentro l'etichetta, di quanto la sezione taglia
   piu' otto pixel, cosi' si appoggia sul bordo della fotografia invece
   di sparire sotto di esso: da chip nel margine diventa chip sulla
   fotografia, che e' il posto che le resta quando il margine non c'e'
   piu'. Il filo d'oro la seve tre pixel piu' in la', come sul computer.
   Otto pixel e non zero: a filo esatto sembrerebbe un errore di
   allineamento, non una scelta. */
@media (max-width: 800px) {
  .v14 .visual-shell--method:after { left: 32px; }
  .v14 .visual-shell--method:before { left: 35px; }
  .v14 .visual-shell--area:after { right: 32px; }
  .v14 .visual-shell--area:before { right: 35px; }
}
/* Sotto i 391 px la consegna sborda di 20 px invece di 24: l'etichetta
   scende di conseguenza, o si allontanerebbe dal bordo di quattro. */
@media (max-width: 390px) {
  .v14 .visual-shell--method:after { left: 28px; }
  .v14 .visual-shell--method:before { left: 31px; }
  .v14 .visual-shell--area:after { right: 28px; }
  .v14 .visual-shell--area:before { right: 31px; }
}

/* ============================================================
   13 · L'ALTOPARLANTE DEL TELEFONO MANGIAVA IL MARCHIO
   ============================================================
   La consegna disegna la pastiglia dell'altoparlante SOPRA lo schermo,
   a 17 px dal bordo del telefono e alta 19: occupa i primi 25 px dello
   schermo, sempre gli stessi, qualunque sia la misura del telefono.

   Va bene con una schermata qualunque; non va bene con la nostra, dove
   la riga del marchio comincia a 45 px su 1298 — cioe' a 15 px scarsi
   una volta rimpicciolita sul telefono. Risultato misurato: la
   pastiglia tagliava a meta' «ResonaPet» e la pillola «AREA RISERVATA»,
   e si leggeva «Resonal ... EA RISERVATA».

   La schermata non si ritocca (e' uno scatto vero dell'area, e
   rifarla tagliata sarebbe una bugia): si fa scendere di dodici pixel
   dentro la cornice, e la striscia che resta scoperta prende il viola
   dell'intestazione dell'area. Cosi' la pastiglia sta su fondo pieno,
   come la fotocamera di un telefono vero sopra l'intestazione di
   un'applicazione. Dodici bastano dappertutto: sul telefono lo schermo
   e' largo 203 px e i 45 px di viola valgono 15, sul computer e' largo
   284 e ne valgono 21 — con dodici in piu' si sta sopra i 25 in tutti e
   due i casi. */
.v14 .phone-screen { background: var(--ink, #21173f); }
.v14 .phone-screen img { margin-top: 12px; }

/* ============================================================
   14 · I PARAGRAFI DELLA FONDATRICE, STACCATI
   ============================================================
   La consegna da' un margine sopra solo al primo paragrafo
   (`.founder-lead`): agli altri, niente. Con due paragrafi si notava
   appena; dal 14 settembre il testo di Giorgia e' di sei, e senza
   stacco diventano un muro unico — misurato, undici righe di fila senza
   un respiro sul computer e ventisette sul telefono.

   Lo stacco e' piu' stretto dell'interlinea (16 px su 17 di corpo): i
   paragrafi restano un discorso solo, che e' quello che sono, invece di
   sembrare voci di un elenco. */
.v14 .founder-copy > p + p { margin-top: 16px; }
@media (max-width: 800px) {
  .v14 .founder-copy > p + p { margin-top: 14px; }
}

/* ============================================================
   15 · IL TITOLO DELLA 03 PUO' ANDARE A CAPO
   ============================================================
   La consegna tiene le righe dei titoli su una riga sola
   (`.heading-line { white-space: nowrap }`) e le rimpicciolisce con
   `min(1em, 9.2cqw)`. Funziona finche' la riga e' corta come quelle che
   la consegna aveva in casa — «Frequenze su misura.», venti caratteri.

   Il titolo del 14 settembre ne ha ventotto e ventinove, e a 390 px
   usciva dallo schermo: misurato, 33 px fuori, con le ultime lettere
   tagliate a meta' («Animale, persona e ambient…»).

   Qui si toglie il divieto di andare a capo SOLO a questo titolo: il
   limite di corpo resta quello della consegna, e dove la riga ci sta —
   dal tablet in su — non cambia niente. Dove non ci sta, va a capo
   invece di sparire fuori dal bordo. `text-wrap: balance` distribuisce
   le righe invece di lasciarne una con una parola sola.

   Vale per il futuro: qualunque testo ci si metta, non potra' piu'
   sbordare. Un titolo che si accorcia da solo e' preferibile a un
   titolo che va sistemato a mano ogni volta che cambia. */
.v14 #metodo h2 .heading-line {
  white-space: normal;
  text-wrap: balance;
}

/* ============================================================
   16 · IL PORTALE DIETRO IL TELEFONO, INTERO
   ============================================================
   Segnalato dall'utente su un telefono vero: nella sezione dell'area
   riservata la cornice arrotondata taglia il cerchio del portale.

   MISURATO a 390 px: la cornice e' 354x500, la fotografia e' QUADRATA, e
   `object-fit: cover` la ingrandisce fino a coprire i 500 di altezza —
   in larghezza se ne vede il 71% (il 65% a 360 px). Il cerchio sta fra
   il 5% e il 95% della larghezza: gliene serve il 91%, e cosi' resta
   tagliato da tutte e due le parti.

   La strada che NON si e' presa: far entrare la fotografia intera
   («contain»). Lascia due fasce vuote sopra e sotto, e un fondo pieno
   accanto a una fotografia di pietra si vede — e' una toppa.

   Quella presa: una versione VERTICALE della stessa fotografia, fatta da
   `scripts/portale-telefono.py`, che la continua sopra e sotto con una
   piega specchiata e sfumata. Ha le proporzioni della cornice piu'
   stretta (0,64), quindi `cover` non toglie piu' niente in larghezza.
   La chiama il `<source>` nel documento; qui resta solo da togliere
   l'ingrandimento dell'1% della consegna, che su un'immagine gia' della
   misura giusta ricomincerebbe a tagliare. */
@media (max-width: 800px) {
  .v14 .portal-backdrop { transform: none; }
}

/* ============================================================
   17 · IL PIEDE DI PAGINA SUL TELEFONO
   ============================================================
   Segnalato dall'utente su un telefono vero. Tre difetti, tutti
   misurati a 390 px.

   1. IL MARCHIO E LA RIGA STANNO SULLA STESSA FILA. La riga «Frequenze
      su misura. Per il tuo cane o gatto.» si ritrova 143 px di
      larghezza e va su tre righe, spezzata dove capita: «Per il tuo /
      cane o gatto.» Il `<br>` della consegna ne prevede due. Adesso il
      piede va in colonna: ognuno ha tutta la larghezza.

   2. I TRE COLLEGAMENTI LEGALI ANDAVANO A CAPO 2 + 1, con un buco
      grande come una riga in mezzo. In colonna sono tre voci allineate,
      e ognuna e' un bersaglio alto abbastanza per un dito.

   3. IL PULSANTE GALLEGGIANTE «PARLA CON GIORGIA» FINIVA SOPRA LA RIGA
      LEGALE. Misurato: la riga legale da 763 a 819 px, il pulsante da
      782 a 828 — cioe' addosso, e proprio sulla frase che c'e' per
      obbligo. Sotto al piede adesso c'e' lo spazio che il pulsante
      occupa, cosi' arrivando in fondo la riga si legge intera.
      Non si sposta il pulsante: sta li' per una ragione, ed e' la
      pagina a doversi fare da parte. */
@media (max-width: 800px) {
  .v14 .site-footer .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .v14 .site-footer .footer-top > p {
    /* In colonna un elemento flex si stringe al contenuto, e la riga
       tornava a spezzarsi da sola: qui prende tutta la larghezza e a
       decidere dove andare a capo resta il <br> della consegna. */
    width: 100%;
    max-width: 34ch;
  }
  .v14 .site-footer .footer-top nav {
    flex-direction: column;
    gap: 14px;
    width: auto;
  }
  .v14 .site-footer .footer-top nav a {
    /* Un collegamento da riga di testo e' alto 17 px: meta' del minimo
       per un dito. In colonna lo spazio per darglieli c'e'. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .v14 .site-footer .footer-disclaimer {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* ---- 18 · I TESTI DEL 15 SETTEMBRE SONO PIU' LUNGHI DI QUELLI CHE
        LA CONSEGNA AVEVA MISURATO ----

   Due difetti, tutti e due visti in una schermata e non nel codice.

   L'OCCHIELLO. Da «Per cani e gatti» a «Biorisonanza per cani e
   gatti»: dodici caratteri in piu', in maiuscolo con .15em di
   spaziatura. L'occhiello e' un `display:flex` senza `wrap`, e i suoi
   pezzi sono nodi di testo nudi — quindi non si spostano su una riga
   loro, si STRINGONO: a 360 px il marchio si leggeva «RESONAPE / T», a
   820 px «RESONA / PET». Il marchio spezzato a meta' e' il difetto
   peggiore che una pagina possa avere in alto a sinistra.
   Con `wrap` i pezzi vanno a capo interi e il marchio resta intero.

   IL PULSANTE. Da «Parla con Giorgia» (17 caratteri) a «Prenota la
   chiamata gratuita» (28). Dove la colonna e' stretta — il riquadro
   dell'offerta a 320 px, la colonna dell'hero del tablet a 820 — il
   pulsante andava a capo e la freccia finiva SOTTO il testo, dentro un
   ovale alto il doppio. Lo spazio fra testo e freccia era 28 px fissi:
   e' li' che si recupera, senza toccare ne' il corpo del testo ne'
   l'altezza del bersaglio. */
.v14 .hero-copy .eyebrow {
  flex-wrap: wrap;
  row-gap: 2px;
}
.v14 .button {
  flex-wrap: nowrap;
  gap: 14px;
}
@media (max-width: 430px) {
  .v14 .button {
    /* A 320 px il riquadro dell'offerta lascia 222 px al pulsante:
       togliere 8 px di rientro a sinistra e' quello che manca perche'
       testo e freccia stiano sulla stessa riga. */
    padding-left: 18px;
    gap: 10px;
  }
}

/* ---- 19 · DOVE VANNO A CAPO LE FRASI ----

   Segnalato dall'utente su un iPhone vero: «alcuni sono giusti e altri
   invece tagli a meta' la frase».

   Misurato ricostruendo le righe parola per parola (ogni parola dentro
   un Range, le parole con lo stesso `top` sono una riga) a sei
   larghezze iPhone reali, da 360 a 430: venti a capo brutti a 360 px,
   dodici a 430. Tre difetti ricorrenti, tutti di tipografia italiana:

   · l'ORFANA — l'ultima riga con una parola sola appesa sotto:
     «collegato ad / apparecchiature.», «3 sessioni individuali in /
     videochiamata»;
   · il MONCONE — l'ultima riga che occupa un quinto della larghezza:
     «...non una garanzia / di risultato.» al 21%;
   · l'APPESA — la riga che finisce con una parola debole e stacca due
     parole che si leggono insieme: «Prima, una / chiamata gratuita.»,
     «Codice personale del / tuo animale».

   LA CURA NON E' RISCRIVERE I TESTI. Un testo aggiustato a mano per
   una larghezza si rompe alla successiva, e i telefoni fra 360 e 430
   px sono sei. Si cambia invece il criterio con cui il browser sceglie
   dove rompere:

   · `pretty` sul corpo — l'ultima riga non resta mai monca: il browser
     ripaga rubando una parola alla riga sopra;
   · `balance` su titoli, voci d'elenco e didascalie — le righe
     vengono distribuite pari invece che riempite fino all'orlo. Vale
     fino a quattro-sei righe, che e' esattamente la misura di questi
     pezzi.

   Dove il browser non li conosce (iOS sotto il 17.5, Chrome sotto il
   117) non succede niente: si torna al comportamento di adesso, che e'
   quello che c'era ieri. Nessun testo cambia, nessuna riga sparisce. */
.v14 p,
.v14 dd,
.v14 details p,
.v14 .founder-copy p,
.v14 .method-copy p {
  text-wrap: pretty;
}
.v14 h1,
.v14 h2,
.v14 h3,
.v14 dt,
.v14 summary,
.v14 figcaption,
.v14 .offer-list li,
.v14 .story-note,
.v14 .section-intro,
.v14 .price-caption,
.v14 .action-note,
.v14 .hero-facts li,
.v14 .offer-action p,
.v14 .site-footer p,
.v14 small {
  text-wrap: balance;
}

/* ---- 20 · IL RIQUADRO DEL TESTO, DA SOLO, ANCHE SUL TELEFONO ----

   Segnalato dall'utente: «da desktop ha la casella del testo sospesa,
   ma da mobile no». Vero, ed era voluto dalla consegna: sotto i 1150 px
   la V14 spegne la card — padding, bordo, fondo, ombra e sfocatura
   tutti azzerati — e il testo resta nudo sul fondo avorio della
   sezione.

   IL PRIMO TENTATIVO ERA TROPPO. Per far «galleggiare» la card come sul
   desktop le avevo messo sotto la fotografia a tutta sezione,
   ingrandita per riempire una colonna alta e stretta. Bocciato
   dall'utente, e aveva ragione: la fotografia dei gatti va lasciata
   dov'e', dentro il suo blocco, alla sua forma. Stirarla per fare da
   tappeto a un riquadro e' pagare l'immagine per un effetto.

   QUINDI LA CARD STA DA SOLA. Niente fotografia sotto, niente
   trasparenza, niente sfocatura: un riquadro appoggiato sull'avorio
   della sezione, che si stacca per tre cose — un fondo appena piu'
   chiaro e freddo del fondo sezione (#f7f6f2 contro #f4e8d5), un bordo
   sottile e un'ombra bassa e larga. Sotto, la fotografia resta esattamente
   com'era: stesso blocco, stesse proporzioni, stessa immagine.

   Il fondo piu' CHIARO e non piu' scuro non e' un gusto: e' la stessa
   scelta della card del desktop, che sull'avorio caldo mette un avorio
   freddo. Un riquadro piu' scuro su una sezione chiara si legge come un
   buco, uno piu' chiaro come un foglio appoggiato.

   Il contrasto non peggiora, migliora: il testo sta su un fondo pieno e
   piu' chiaro di quello su cui stava prima. Misurato sui pixel delle
   schermate, il peggiore e' «Pumpkin e Diego» — oro su avorio — a
   5,83:1 contro i 4,5 richiesti, ed e' meglio del desktop (5,26:1).

   Il rientro laterale resta 24 px e non 20: provati tutti e due e
   contati gli a capo alle sei larghezze iPhone, fanno 44 difetti in
   entrambi i casi. A parita' di numeri vince quello che dentro ha piu'
   aria. */
@media (max-width: 1150px) {
  .stories .story-copy {
    padding: 28px 24px 32px;
    border: 1px solid rgba(33, 23, 63, .09);
    border-radius: 26px;
    background: #f7f6f2;
    box-shadow: 0 18px 44px rgba(77, 52, 33, .10);
  }
}

/* Nella fascia intermedia il testo tiene il tetto che aveva — senza, a
   1150 px le righe arriverebbero a 900 px e si leggerebbero male — e la
   card lo segue, con un po' piu' d'aria dentro. */
@media (min-width: 801px) and (max-width: 1150px) {
  .stories .story-copy {
    max-width: 640px;
    margin-inline: auto;
    padding: 34px 38px 38px;
  }
}