/* ==========================================================================
   Senza chiedere scusa — Il segnalibro «Rullino 35 mm»
   Foglio di stile aggiuntivo. Si carica DOPO styles.css e non ne modifica
   nessuna regola: tutte le classi sono prefissate .sgn- (pagina) o
   .home-sgn- (blocco in home).
   ========================================================================== */

/* ---------- 1. HERO DELLA PAGINA ---------------------------------------- */

.sgn-hero { padding: 190px 0 90px; position: relative; }
/* 🔴 28/08 — LA GRIGLIA SI È SPOSTATA DA .wrap A .sgn-hero-copy.
   Motivo: su telefono la fotografia deve stare in mezzo al testo — subito dopo
   la descrizione, prima delle misure — e con la figura fuori dal blocco di
   testo non c'era modo di infilarcela senza duplicarla.
   Adesso l'HTML è: testa (occhiello, titolo, descrizione) · figura · coda
   (misure, tasti), tutti e tre dentro .sgn-hero-copy. Su desktop la griglia
   rimette testa e coda a sinistra e la figura a destra su entrambe le righe:
   a schermo è identico a prima. Su telefono la griglia diventa a una colonna e
   i tre pezzi si impilano nell'ordine in cui sono scritti — che è l'ordine
   voluto, senza `order` e senza copie dell'immagine.
   ⚠️ Testa e coda restano due blocchi normali proprio perché i margini
   verticali interni continuino a collassare: se si mettessero i loro figli
   direttamente nella griglia, i margini smetterebbero di collassare e tutta la
   spaziatura dell'hero crescerebbe. */
.sgn-hero .wrap { display: block; }
/* ⚠️ `:not(.sgn-hero-solo)` NON è pignoleria: senza, questa griglia prende anche
   l'hero della pagina informativa, che ha lo stesso `.sgn-hero-copy` ma dentro
   ha soltanto occhiello, titolo, sottotitolo e data — niente testa, niente coda,
   niente figura. Quei quattro pezzi finivano collocati da soli nella griglia a
   due colonne e quattro righe: occhiello a sinistra, titolo a destra,
   sottotitolo sotto a sinistra, data a destra. Successo davvero il 28/08. */
.sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  /* Le due righe 1fr sopra e sotto assorbono l'avanzo di altezza e tengono
     testa e coda incollate fra loro, centrate contro la fotografia.
     Senza, le due righe `auto` si spartiscono lo spazio che avanza sotto la
     figura — che è più alta — e fra la descrizione e le misure si aprono
     cinquanta pixel di vuoto che prima non c'erano: misurato a schermo,
     la descrizione scendeva da 488 a 463 e le misure salivano da 644 a 668. */
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 72px;
}
.sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy > .sgn-hero-testa { grid-column: 1; grid-row: 2; }
.sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy > .sgn-hero-coda  { grid-column: 1; grid-row: 3; }
.sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy > .sgn-shot       { grid-column: 2; grid-row: 1 / 5; align-self: center; }
.sgn-hero .kicker { color: var(--amber-soft); margin-bottom: 20px; }
.sgn-hero h1 {
  font-size: clamp(44px, 6vw, 86px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-weight: 300;
}
.sgn-hero h1 em {
  display: block;
  font-style: italic;
  color: var(--amber-soft);
  font-weight: 300;
}
.sgn-sub {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 28px 0 0;
  max-width: 30em;
}
.sgn-sub em { color: var(--ink); font-style: italic; }

.sgn-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sgn-specs span { display: inline-flex; align-items: center; gap: 10px; }
.sgn-specs span + span::before {
  content: "";
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--amber); opacity: 0.7;
}

.sgn-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* La misura della foto dell'hero.
   La colonna di destra è larga 528 px (1184 di .wrap meno 72 di gap, per 0,95)
   e la foto la riempiva tutta: era l'immagine più grande di tutto il sito.
   Misurate le altre immagini del sito: la copertina dell'hero in home è
   340 px, il ritratto dell'autore 380. Qui la foto è il soggetto della pagina
   e può stare un gradino sopra — 440 — ma non due. */
.sgn-hero .sgn-shot { max-width: 440px; margin-left: auto; }

/* la foto: leggera rotazione, alone caldo dietro */
/* margin:0 azzera il margine che il browser mette di suo su <figure> (1em 40px):
   senza, le due foto affiancate della sezione II si rimpiccioliscono di 80 px l'una. */
.sgn-shot { position: relative; margin: 0; }
.sgn-shot::before {
  content: "";
  position: absolute; inset: -12% -8%;
  background: radial-gradient(closest-side, rgba(231,162,74,0.13), transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}
/* 🔴 02/09/2026 — la cornice vale per la foto E per il video dell'hero.
   È scritta UNA VOLTA SOLA e condivisa: prima era duplicata in fondo al file e
   le due copie potevano divergere. Se un giorno la ritocchi, la ritocchi qui e
   cambia in tutti e due gli stati del riquadro. */
.sgn-shot img,
.sgn-film .sgn-film-video {
  position: relative;
  z-index: 1;          /* sopra il bagliore, che è un ::after nella stessa figura */
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(231,162,74,0.30);
  /* LA CORNICE — rifatta il 28/08, misurando invece di indovinare.
     Prima il filo esterno era a 0,14 e quello interno bronzo a 0,20. A schermo,
     sul bordo della foto del controluce: il filo esterno risultava un pixel a
     rgb(29,22,14) schiacciato fra il nero della pagina, rgb(8,8,8), e la foto
     chiara, rgb(150,142,130) — uno scarto di diciotto punti, invisibile. Il filo
     interno era rgb(140,128,107) sopra un bordo di rgb(141,133,120): scarto
     ZERO. La cornice c'era nel codice e non c'era sullo schermo.
     Adesso: il filo esterno a 0,30 arriva a rgb(75,54,28) sul nero, uno scarto
     di una settantina di punti, e si vede attorno a tutte le foto — anche a
     quella chiara, perché il filo cade sul lato nero. Il filo interno smette di
     essere bronzo, che sulle foto chiare ha la loro stessa luminosità, e diventa
     inchiostro caldo scuro: sulle foto chiare stacca di una trentina di punti,
     su quelle scure sparisce da solo perché è già del colore del loro bordo.
     👉 La regola è sempre quella: su fondi diversi si pareggia il CONTRASTO,
     non il valore. */
  outline: 1px solid rgba(32,25,18,0.30);
  outline-offset: -1px;
}
.sgn-shot.tilt img { transform: rotate(-1.6deg); }

/* IL BAGLIORE SOTTO LA FOTO — 28/08
   È il pozzo di luce calda che sta sotto il libro nella card social
   (assets/og-segnalibro.jpg), portato sulle due pagine dove compare la stessa
   fotografia: l'hero della pagina del segnalibro e la sezione in home.
   Non sostituisce l'alone di .sgn-shot::before, che è centrato e circonda la
   figura: questo è più basso, più largo e più caldo, e serve a far sembrare la
   fotografia appoggiata sulla pagina invece che incollata sopra.
   Sta solo su queste due, non su tutte: sulle foto della sezione II
   sarebbe rumore, perché sono due affiancate e piccole. */
.sgn-hero .sgn-shot::after,
.home-sgn-grid .sgn-shot::after {
  content: "";
  position: absolute;
  z-index: 0;                 /* sotto l'immagine, che ha z-index 1 */
  left: 50%;
  bottom: -13%;
  width: 96%;
  height: 40%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
              rgba(231,162,74,0.26),
              rgba(231,162,74,0.08) 52%,
              transparent 76%);
  filter: blur(30px);
  pointer-events: none;
}
.sgn-cap {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-dim);   /* era --ink-mute: troppo scura sul fondo */
  margin-top: 20px;
  text-align: center;
}

/* ---------- 2. SEZIONI DI CONTENUTO ------------------------------------- */

.sgn-page .sec { padding: 90px 0; }

/* i titoletti («III. Come si riceve») sono più lunghi di quelli della home:
   la colonna di styles.css è 160px e li manderebbe a capo. */
.sgn-page .sec-head { grid-template-columns: 215px 1fr; }
.sgn-page .sec-head .num { white-space: nowrap; }

.sgn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.sgn-split.flip .sgn-shot { order: -1; }
/* stessa ragione dell'hero: la colonna di .sgn-split è larga 556 px.
   Il figlio diretto è solo la foto del controluce (§I): le due quadrate di §II
   stanno dentro .sgn-duo e non vengono toccate.
   400 la tiene un gradino sotto l'hero, che è l'ordine giusto. */
.sgn-split > .sgn-shot { max-width: 400px; margin-left: auto; }

.sgn-body p {
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-dim);
  margin: 0 0 22px;
  max-width: 34em;
}
.sgn-body p:last-child { margin-bottom: 0; }
.sgn-body p em { color: var(--ink); font-style: italic; }
.sgn-body strong { font-weight: 400; color: var(--ink); }

.sgn-pull {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--amber-soft);
  border-left: 1px solid rgba(231,162,74,0.35);
  padding-left: 26px;
  margin: 34px 0 0;
  max-width: 22em;
}

.sgn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ---------- 3. I TRE PASSI ---------------------------------------------- */

.sgn-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.sgn-step {
  padding: 40px 34px 40px 0;
  border-right: 1px solid var(--line);
}
.sgn-step:last-child { border-right: 0; padding-right: 0; }
.sgn-step:not(:first-child) { padding-left: 34px; }
.sgn-step .n {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--amber);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.sgn-step h3 {
  font-size: 26px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 12px;
}
.sgn-step p { font-size: 16px; line-height: 1.55; color: var(--ink-dim); margin: 0; }

/* le due modalità di consegna */
.sgn-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 56px; }
.sgn-way {
  border: 1px solid var(--line-2);
  padding: 34px 32px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
}
.sgn-way .kicker { color: var(--amber-soft); margin-bottom: 14px; }
.sgn-way h3 { font-size: 25px; font-style: italic; margin-bottom: 12px; }
.sgn-way p { font-size: 16px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 10px; }
.sgn-way p:last-child { margin-bottom: 0; }
.sgn-way .note {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  line-height: 1.6;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sgn-scorte {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
}
.sgn-scorte .big {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
}
.sgn-scorte .small {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 4. IL CANCELLO E IL MODULO ---------------------------------- */

.sgn-gate { text-align: center; padding: 20px 0 0; }
.sgn-gate p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
  margin: 0 0 26px;
}
.sgn-gate .btn { font-size: 12px; }

.sgn-form-shell[hidden] { display: none; }
.sgn-form-shell {
  margin: 0 auto;
  max-width: 820px;
  border: 1px solid var(--line-2);
  padding: 48px 46px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.016), transparent 60%);
  animation: sgnFade 520ms ease both;
}
@keyframes sgnFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sgn-fs { border: 0; padding: 0; margin: 0 0 38px; }
.sgn-fs:last-of-type { margin-bottom: 26px; }
.sgn-fs > legend {
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber-soft);
  margin-bottom: 8px;
}
.sgn-fs .hint {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
  margin: 0 0 22px;
  line-height: 1.5;
}

.sgn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sgn-row.thirds { grid-template-columns: 2fr 1fr 1fr; }
.sgn-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sgn-field > label {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.sgn-form-shell input[type="text"],
.sgn-form-shell input[type="email"],
.sgn-form-shell input[type="tel"],
.sgn-form-shell input[type="date"],
.sgn-form-shell textarea {
  width: 100%;
  background: rgba(255,255,255,0.028);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 15px 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  border-radius: 0;
  outline: none;
  transition: border-color 200ms;
}
.sgn-form-shell input::placeholder,
.sgn-form-shell textarea::placeholder { color: var(--ink-mute); font-style: italic; }
.sgn-form-shell input:focus,
.sgn-form-shell textarea:focus { border-color: var(--amber); }
.sgn-form-shell textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* La data dell'acquisto.
   Il campo stonava per una ragione sola: `input[type="date"]` non era nell'elenco
   qui sopra, quindi non prendeva NIENTE — né bordo, né fondo, né carattere — e
   restava il widget grezzo del browser in mezzo a campi vestiti. Adesso è nella
   lista e riceve lo stesso trattamento di tutti gli altri.
   Qui restano solo le due cose che riguardano il pannellino nativo. */
.sgn-form-shell input[type="date"] {
  /* dice al browser di disegnare l'iconcina e il calendario in chiaro su fondo
     scuro: senza, su Chrome l'icona resta nera su nero e il campo sembra vuoto */
  color-scheme: dark;
  /* Safari, se lo lasci fare, allinea in alto e si dà un'altezza sua: tolto
     l'aspetto nativo, prende esattamente il padding e il corpo degli altri campi */
  -webkit-appearance: none;
  appearance: none;
}
.sgn-form-shell input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 200ms;
}
.sgn-form-shell input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.sgn-hint-sotto {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 10px 0 0;
}

/* scelte (radio) come schede */
.sgn-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
/* I due riquadri devono avere la stessa altezza anche quando una descrizione
   va a capo una volta in più. Il <div> si stira già da solo (è una cella di
   griglia), ma la <label> dentro è display:block e si fermava all'altezza del
   testo: era lei il riquadro che si vedeva, e le due non combaciavano.
   Con il flex la label eredita l'altezza della riga. */
.sgn-choice { position: relative; display: flex; }
.sgn-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.sgn-choice label {
  flex: 1 1 auto;
  display: block;
  border: 1px solid var(--line-2);
  padding: 20px 22px;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.sgn-choice label .t {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 6px;
}
.sgn-choice label .d {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.sgn-choice label::before {
  content: "";
  position: absolute; left: 22px; top: 26px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-2);
  transition: background 200ms, box-shadow 200ms;
}
.sgn-choice label { padding-left: 44px; }
.sgn-choice input:checked + label {
  border-color: rgba(231,162,74,0.55);
  background: linear-gradient(180deg, rgba(231,162,74,0.10), rgba(231,162,74,0.02));
}
.sgn-choice input:checked + label::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sgn-choice input:focus-visible + label { border-color: var(--amber); }

.sgn-reveal[hidden] { display: none; }
.sgn-reveal { margin-top: 22px; animation: sgnFade 380ms ease both; }

/* consensi */
.sgn-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.62;
  color: var(--ink-dim);
}
.sgn-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  position: relative;
  border-radius: 0;
  transition: border-color 180ms, background 180ms;
}
.sgn-consent input[type="checkbox"]:checked {
  border-color: rgba(231,162,74,0.6);
  background: linear-gradient(180deg, rgba(231,162,74,0.2), rgba(231,162,74,0.06));
}
.sgn-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--amber-soft);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.sgn-consent input[type="checkbox"]:focus-visible { border-color: var(--amber); }
.sgn-consent a { color: var(--amber-soft); text-decoration: none; border-bottom: 1px solid rgba(231,162,74,0.35); }
.sgn-consent .lead { color: var(--ink); }
.sgn-consent .opt {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 8px;
}

/* file */
.sgn-file input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sgn-file .drop {
  display: flex; align-items: center; gap: 16px;
  border: 1px dashed var(--line-2);
  padding: 22px 24px;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.sgn-file .drop:hover { border-color: rgba(231,162,74,0.5); background: rgba(231,162,74,0.03); }
.sgn-file .drop .ic { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); flex: none; }
.sgn-file .drop .tx { font-family: "Cormorant Garamond", serif; font-size: 17px; color: var(--ink-dim); font-style: italic; }
.sgn-file .drop.has-file { border-style: solid; border-color: rgba(231,162,74,0.5); }
.sgn-file .drop.has-file .tx { color: var(--ink); font-style: normal; }

/* la riga di condizione sotto la prova d'acquisto */
.sgn-note-inline {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-mute);
}
.sgn-note-inline strong { color: var(--ink-dim); font-weight: 500; }
/* I collegamenti dentro le note non avevano nessuna regola e uscivano nel blu
   di default del browser — l'unico blu di tutto il sito. Stesso trattamento
   delle altre superfici di testo della pagina (.sgn-consent, .sgn-faq,
   .sgn-legal): ambra, senza sottolineatura, con la riga sotto più tenue. */
.sgn-note-inline a {
  color: var(--amber-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(231,162,74,0.35);
  transition: color 200ms, border-color 200ms;
}
.sgn-note-inline a:hover { color: #fff; border-color: var(--amber); }

.sgn-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.sgn-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
.sgn-submit button { transition: color 200ms, border-color 200ms, background 200ms, opacity 200ms; }
.sgn-submit button[data-state="sending"] { opacity: 0.65; cursor: wait; }
.sgn-submit button[data-state="ok"] { color: var(--amber-soft); border-color: rgba(231,162,74,0.5); }
.sgn-submit button[data-state="error"] { color: #e9a09b; border-color: rgba(200,110,100,0.45); }

.sgn-msg {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-top: 18px;
  min-height: 1.2em;
}
.sgn-msg[data-tone="error"] { color: #e9a09b; }
.sgn-msg[data-tone="ok"] { color: var(--amber-soft); }

.sgn-form-shell .cf-turnstile { margin-top: 26px; min-height: 65px; }
.sgn-form-shell iframe { border: 0; }

/* esito */
.sgn-done[hidden] { display: none; }
.sgn-done {
  max-width: 760px; margin: 0 auto; text-align: center;
  border: 1px solid rgba(231,162,74,0.35);
  padding: 60px 48px;
  background: linear-gradient(180deg, rgba(231,162,74,0.07), transparent 70%);
  animation: sgnFade 520ms ease both;
}
.sgn-done .kicker { color: var(--amber-soft); margin-bottom: 18px; }
.sgn-done h3 { font-size: clamp(28px, 3vw, 40px); font-style: italic; margin-bottom: 20px; }
.sgn-done p { color: var(--ink-dim); font-size: 17px; line-height: 1.6; margin: 0 auto 14px; max-width: 34em; }

/* ---------- 4 bis. IL BIVIO, LE DUE STRADE, IL CODICE ---------------------- */

/* il bivio */
.sgn-fork[hidden] { display: none; }
.sgn-fork { text-align: center; padding: 10px 0 0; animation: sgnFade 420ms ease both; }
.sgn-fork-q {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-style: italic;
  color: var(--ink);
  margin: 0 0 32px;
}
.sgn-fork-q em { color: var(--amber-soft); }
.sgn-fork-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
.sgn-fork-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 28px;
  text-align: left;
  position: relative;
}
.sgn-fork-btn .dot { position: absolute; top: 30px; right: 26px; }
.sgn-fork-btn .t {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.15;
}
.sgn-fork-btn.btn-primary .t { color: var(--amber-soft); }
.sgn-fork-btn .d {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sgn-fork-btn:hover .t { color: #fff; }

/* le due strade */
.sgn-branch[hidden] { display: none; }
.sgn-branch { animation: sgnFade 520ms ease both; max-width: 820px; margin: 0 auto; }
.sgn-branch-back {
  background: none; border: 0; cursor: pointer; padding: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.sgn-branch-back:hover { color: var(--amber-soft); border-bottom-color: rgba(231,162,74,0.35); }

.sgn-branch-head { margin: 30px 0 34px; }
.sgn-branch-head .kicker { color: var(--amber-soft); margin-bottom: 14px; }
.sgn-branch-head h3 { font-size: clamp(30px, 3.4vw, 44px); font-style: italic; line-height: 1.1; margin-bottom: 18px; }
.sgn-branch-head h3 em { color: var(--amber-soft); }
.sgn-branch-head p { font-size: 18px; line-height: 1.6; color: var(--ink-dim); margin: 0; max-width: 40em; }

/* i tre passi dentro una strada */
.sgn-howto[hidden] { display: none; }
.sgn-howto {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--line-2);
}
.sgn-howto li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.sgn-howto .n {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--amber);
}
.sgn-howto .t { font-size: 17px; line-height: 1.55; color: var(--ink-dim); }
.sgn-howto .t strong { color: var(--ink); font-weight: 400; }

.sgn-branch-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* il codice */
.sgn-code {
  border: 1px solid rgba(231,162,74,0.42);
  padding: 40px 44px 34px;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(231,162,74,0.10), transparent 70%),
    linear-gradient(180deg, rgba(231,162,74,0.05), transparent 60%);
  text-align: center;
}
.sgn-code .kicker { color: var(--amber-soft); margin-bottom: 22px; }
.sgn-code-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px 24px;
  margin-bottom: 22px;
}
.sgn-code code {
  font-family: "Inter", "SFMono-Regular", Menlo, monospace;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--amber-soft);
  text-shadow: 0 0 34px rgba(231,162,74,0.32);
  padding-left: 0.22em;
}
.sgn-code-copy { padding: 11px 20px; font-size: 10px; letter-spacing: 0.2em; }
.sgn-code p {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px; line-height: 1.55; color: var(--ink-dim);
  margin: 0 auto; max-width: 34em;
}

/* il modulo dentro la strada A */
.sgn-branch .sgn-form-shell[hidden] { display: none; }
.sgn-branch .sgn-form-shell { margin-top: 0; animation: none; max-width: none; }
.sgn-form-head { margin-bottom: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.sgn-form-head h3 { font-size: clamp(24px, 2.6vw, 32px); font-style: italic; margin-bottom: 12px; }
.sgn-form-head h3 em { color: var(--amber-soft); }
.sgn-form-head p { font-size: 16px; line-height: 1.6; color: var(--ink-dim); margin: 0; max-width: 40em; }

.sgn-branch .sgn-done { margin-top: 0; }

/* ---------- 5. DOMANDE --------------------------------------------------- */

.sgn-faq { border-top: 1px solid var(--line-2); }
.sgn-faq details { border-bottom: 1px solid var(--line); }
.sgn-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 40px 26px 0;
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  color: var(--ink);
  transition: color 200ms;
}
.sgn-faq summary::-webkit-details-marker { display: none; }
.sgn-faq summary:hover { color: var(--amber-soft); }
.sgn-faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid var(--ink-mute);
  border-bottom: 1px solid var(--ink-mute);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 240ms, border-color 240ms;
}
.sgn-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); border-color: var(--amber); }
.sgn-faq .a {
  padding: 0 60px 30px 0;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.62;
  max-width: 46em;
}
.sgn-faq .a p { margin: 0 0 14px; }
.sgn-faq .a p:last-child { margin-bottom: 0; }
.sgn-faq .a a { color: var(--amber-soft); text-decoration: none; border-bottom: 1px solid rgba(231,162,74,0.3); }

/* ---------- 6. CHIUSURA -------------------------------------------------- */

.sgn-close { padding: 40px 0 130px; text-align: center; }
.sgn-close .wrap { max-width: 900px; }
.sgn-close-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.4;
  color: var(--ink-dim);
  margin: 0 0 38px;
}
.sgn-close-text em { color: var(--amber-soft); font-style: italic; }
.sgn-ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- 7. IL BLOCCO IN HOME + LA RIGA NELL'HERO --------------------- */

.home-sgn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
/* La foto in home va tenuta nella misura delle altre immagini della pagina.
   Misurate a schermo: la copertina dell'hero è 340 px, il ritratto
   dell'autore 380 (la colonna 1fr di .author-grid meno i 40+40 di margine
   che il browser mette di suo sulle <figure>). Questa era 556 — una volta e
   mezza il ritratto, ed era l'immagine più grande della home. A 380 combacia
   con il ritratto: stessa larghezza, stessa altezza, stesso peso.
   Centrata nella colonna, non spinta a destra: senza didascalia non c'è più
   niente da allineare al bordo. */
.home-sgn-grid .sgn-shot { max-width: 380px; margin: 0 auto; }
/* alone e ombra scalano con la figura, ma su un'immagine più piccola pesano
   di più: alleggeriti, o l'ingombro visivo torna quello di prima */
.home-sgn-grid .sgn-shot img {
  box-shadow: 0 26px 62px rgba(0,0,0,0.62), 0 0 0 1px rgba(231,162,74,0.12);
}
.home-sgn-copy .kicker { color: var(--amber-soft); margin-bottom: 16px; }
.home-sgn-copy h3 {
  font-size: clamp(28px, 3vw, 42px);
  font-style: italic;
  line-height: 1.14;
  margin-bottom: 20px;
}
.home-sgn-copy h3 em { color: var(--amber-soft); }
.home-sgn-copy p { color: var(--ink-dim); font-size: 17px; line-height: 1.6; margin: 0 0 14px; max-width: 32em; }
.home-sgn-copy .fine {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 22px;
}
.home-sgn-copy .btn { margin-top: 26px; }

/* la riga discreta nell'hero della home */
.hero-ribbon {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 30em;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-style: italic;
  color: var(--ink-mute);
  line-height: 1.5;
}
.hero-ribbon a {
  color: var(--amber-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(231,162,74,0.35);
  font-style: normal;
  transition: border-color 200ms, color 200ms;
}
.hero-ribbon a:hover { color: #fff; border-color: var(--amber); }

/* ---------- 8. RESPONSIVE ------------------------------------------------ */

@media (max-width: 1080px) {
  .sgn-hero { padding: 150px 0 70px; }
  .sgn-split,
  .home-sgn-grid { grid-template-columns: 1fr; gap: 46px; }
  /* una colonna sola: i tre pezzi dell'hero si impilano come sono scritti —
     testa, fotografia, misure e tasti.
     ⚠️ Non basta cambiare le colonne: senza azzerare anche le collocazioni del
     desktop, il `grid-column: 2` della figura si crea una seconda colonna da
     solo e la griglia resta a due, con il testo schiacciato a sinistra.
     Provato a 430 px: succede davvero. */
  .sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy {
    grid-template-columns: 1fr; grid-template-rows: none; row-gap: 40px; }
  .sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy > .sgn-hero-testa,
  .sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy > .sgn-hero-coda,
  .sgn-hero:not(.sgn-hero-solo) .sgn-hero-copy > .sgn-shot { grid-column: 1; grid-row: auto; }
  /* in home la fotografia sale sotto il titolo della sezione, prima del testo:
     è lei che dice al primo colpo d'occhio che cos'è il segnalibro, e su uno
     schermo stretto arrivava dopo due paragrafi, un tasto e la riga delle
     scorte — cioè quasi mai */
  .home-sgn-grid .sgn-shot { order: -1; }
  .sgn-split.flip .sgn-shot { order: 0; }
  .sgn-shot { max-width: 480px; }
  /* impilate: le foto tornano centrate, e il margin-left:auto del desktop
     va annullato esplicitamente perché ha la stessa specificità di queste */
  .sgn-hero .sgn-shot { max-width: 420px; margin: 0 auto; }
  .sgn-split > .sgn-shot { max-width: 420px; margin: 0 auto; }
  .home-sgn-grid .sgn-shot { max-width: 420px; margin: 0 auto; }
  .sgn-steps { grid-template-columns: 1fr; }
  .sgn-step { border-right: 0; border-bottom: 1px solid var(--line); padding: 30px 0; }
  .sgn-step:not(:first-child) { padding-left: 0; }
  .sgn-step:last-child { border-bottom: 0; }
  .sgn-ways { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sgn-page .sec { padding: 60px 0; }
  .sgn-page .sec-head { grid-template-columns: 1fr; }
  .sgn-hero { padding: 130px 0 50px; }
  .sgn-form-shell { padding: 32px 22px; }
  .sgn-row, .sgn-row.thirds, .sgn-choices, .sgn-duo, .sgn-fork-btns { grid-template-columns: 1fr; }
  .sgn-code { padding: 30px 20px 26px; }
  .sgn-code code { letter-spacing: 0.16em; }
  .sgn-fork-btn { padding: 22px 22px; }
  .sgn-fork-btn .dot { top: 26px; right: 22px; }
  .sgn-howto li { grid-template-columns: 30px 1fr; gap: 12px; }
  .sgn-faq summary { font-size: 19px; padding-right: 34px; }
  .sgn-faq .a { padding-right: 10px; }
  .sgn-done { padding: 44px 24px; }
  .sgn-pull { font-size: 22px; padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sgn-form-shell, .sgn-reveal, .sgn-done { animation: none; }
}

/* ---------- 9. PAGINA INFORMATIVA (privacy-segnalibro.html) -------------- */

.sgn-hero-solo .wrap { display: block; max-width: 900px; }
.sgn-hero-solo .sgn-sub a {
  color: var(--amber-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(231,162,74,0.3);
}
.sgn-updated {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 28px;
}

.sgn-legal { max-width: 780px; }
.sgn-legal h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-style: italic;
  color: var(--ink);
  margin: 56px 0 18px;
}
.sgn-legal h2:first-of-type { margin-top: 0; }
.sgn-legal p,
.sgn-legal li {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-dim);
}
.sgn-legal p { margin: 0 0 16px; }
.sgn-legal strong { color: var(--ink); font-weight: 400; }
.sgn-legal em { font-style: italic; }
.sgn-legal ul { margin: 0 0 16px; padding-left: 22px; }
.sgn-legal li { margin-bottom: 12px; }
.sgn-legal li::marker { color: var(--amber); }
.sgn-legal a { color: var(--amber-soft); text-decoration: none; border-bottom: 1px solid rgba(231,162,74,0.3); }
.sgn-legal a:hover { color: #fff; border-color: var(--amber); }

.sgn-tldr {
  border-left: 1px solid rgba(231,162,74,0.4);
  padding: 4px 0 4px 26px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 23px) !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  /* 48 e non 12: il blocco «In sintesi» è un riquadro a sé, con il suo filo
     verticale, e sotto viene subito «Chi sono» — che è il primo h2 del blocco e
     quindi ha il margine superiore azzerato da .sgn-legal h2:first-of-type.
     Il respiro fra i due lo deve dare tutto questa riga. */
  margin: 0 0 48px !important;
}

.sgn-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.sgn-table th {
  text-align: left;
  vertical-align: top;
  width: 34%;
  padding: 16px 24px 16px 0;
  border-top: 1px solid var(--line-2);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.6;
}
.sgn-table th em { text-transform: none; letter-spacing: 0; font-style: italic; }
.sgn-table td {
  vertical-align: top;
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-dim);
}

.sgn-legal-back { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line-2); }

@media (max-width: 760px) {
  .sgn-legal h2 { margin-top: 42px; }
  .sgn-table th, .sgn-table td { display: block; width: auto; }
  .sgn-table th { border-top: 1px solid var(--line-2); padding-bottom: 6px; }
  .sgn-table td { border-top: 0; padding-top: 0; padding-bottom: 18px; }
}

/* ---------- 10. §III · LA PROMOZIONE SPIEGATA -------------------------------- */

.sgn-offer { max-width: 860px; }
.sgn-offer .lead {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 18px;
}
.sgn-offer .lead strong { color: var(--amber-soft); font-weight: 400; }
.sgn-offer > p { font-size: 18px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 26px; }

.sgn-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.sgn-offer-list li {
  position: relative;
  padding: 22px 26px 22px 30px;
  border-left: 1px solid rgba(231,162,74,0.35);
  background: linear-gradient(90deg, rgba(231,162,74,0.05), transparent 60%);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-dim);
}
.sgn-offer-list li strong { color: var(--ink); font-weight: 400; }
.sgn-offer-list li strong em { color: var(--amber-soft); font-style: italic; }

.sgn-arriva {
  margin-top: 48px;
  border: 1px solid var(--line-2);
  padding: 32px 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
}
.sgn-arriva .kicker { color: var(--amber-soft); margin-bottom: 14px; }
.sgn-arriva p { font-size: 17px; line-height: 1.62; color: var(--ink-dim); margin: 0; max-width: 62em; }
.sgn-arriva .note {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink-mute);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sgn-arriva .note strong { color: var(--ink-dim); font-weight: 500; }

@media (max-width: 760px) {
  .sgn-arriva { padding: 24px 20px; }
  .sgn-offer-list li { padding: 18px 0 18px 20px; }
}

/* ---------- 9. IL VIDEO NEL RIQUADRO DELL'HERO --------------------------
   02/09/2026. La fotografia dell'hero e il video stanno nello STESSO riquadro:
   nessuna sezione in più, e la pagina non si allunga di un pixel.

   🔴 IL CONTO CHE TIENE FERMA LA PAGINA, e non va toccato:
        foto  3:4  a larghezza 100 %  →  altezza 1,3333 × L
        video 9:16 a larghezza  75 %  →  altezza 1,3333 × L
   Le due altezze coincidono: passando da uno stato all'altro cambia solo la
   LARGHEZZA, quindi il testo sotto non si muove. Con qualunque valore diverso
   da 75 % la pagina sobbalza a ogni play.

   LO SCAMBIO: la fotografia è inclinata come tutte le foto della pagina; il
   video appare DRITTO. Non è una tendina — è un cambio secco e breve (240 ms),
   incrociato appena quanto basta a non sembrare uno stacco.

   La cornice NON è ridefinita qui: è quella condivisa con `.sgn-shot img`, in
   cima al file. Una sola definizione per tutti e due gli stati. */

.sgn-film { position: relative; }

.sgn-film-photo {
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.4,0,.2,1);
}
.sgn-film.is-playing .sgn-film-photo {
  opacity: 0;
  transform: rotate(-1.6deg) scale(0.97);   /* si ritira di un soffio mentre esce */
  pointer-events: none;
}

.sgn-film .sgn-film-video {
  position: absolute;
  top: 0; left: 12.5%;
  width: 75%;                    /* ← il 75 % del conto qui sopra */
  aspect-ratio: 900 / 1600;      /* = l'altezza esatta della fotografia */
  background: #060708;
  transform: rotate(0deg);       /* DRITTO: è la differenza fra i due stati */
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.sgn-film.is-playing .sgn-film-video {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease 60ms, visibility 0s;
}

/* la pozza di luce sotto segue il riquadro: quando c'è il video è più stretta */
.sgn-hero .sgn-film.is-playing::after { width: 74%; }

/* IL TASTO — in basso a sinistra, sulla pagina chiara del libro: lì la
   pastiglia scura stacca e si LEGGE, che è quello che deve fare. (In alto a
   sinistra la fotografia è scura — luma 42 contro 157 — e il tasto ci spariva
   dentro: più discreto, ma meno leggibile.)
   A riposo 55 %, al passaggio del mouse 100 %. Su touch, dove l'hover non
   esiste, resta al 72 %. Mentre il video va, sparisce. */
.sgn-film-play {
  position: absolute;
  z-index: 2;
  left: 16px; bottom: 76px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 10px;
  min-height: 44px;              /* bersaglio touch minimo */
  border: 1px solid rgba(231,162,74,0.34);
  border-radius: 999px;
  background: rgba(6,7,8,0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--amber-soft);
  font-family: "Inter", sans-serif;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0.55;
  transform: rotate(-1.6deg);    /* segue l'inclinazione della fotografia */
  transition: opacity 240ms ease, border-color 240ms ease;
}
.sgn-film-play-ico {
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 4px;
}
.sgn-film:hover .sgn-film-play,
.sgn-film-play:focus-visible { opacity: 1; border-color: rgba(231,162,74,0.62); }
.sgn-film-play:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 3px; }
.sgn-film.is-playing .sgn-film-play { opacity: 0; pointer-events: none; }

@media (hover: none) { .sgn-film-play { opacity: 0.72; } }
@media (max-width: 760px) { .sgn-film-play { left: 12px; bottom: 70px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .sgn-film-photo, .sgn-film .sgn-film-video, .sgn-film-play { transition: none; }
}

/* il tasto mentre il video si carica: pulsa piano, così il clic non sembra perso.
   Dura poco — spesso nulla, perché al passaggio del mouse i metadati sono già
   stati chiesti — ma su una connessione lenta è la differenza fra «sta caricando»
   e «non ha funzionato». */
.sgn-film-play.is-loading {
  opacity: 1;
  pointer-events: none;
  animation: sgnFilmAttesa 1100ms ease-in-out infinite;
}
@keyframes sgnFilmAttesa {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .sgn-film-play.is-loading { animation: none; opacity: 0.7; }
}