/* ============================================================
   ByeHuman — home page
   Mobile first. Un solo breakpoint: 900px.
   Regola sulla spaziatura: il ritmo verticale tra sezioni è
   gestito SOLO dal padding di .section. I figli non portano mai
   margin-top: si usa `> * + *` e margini in basso. Così nessuna
   classe può annullare la spaziatura di un'altra.
   ============================================================ */

/* == 0. TOKEN ============================================== */

:root {
  --ink:      #0B0B0B;  /* testo e blocchi in negativo */
  --paper:    #FFFFFF;  /* sfondo dominante */
  --paper-2:  #F1F1EF;  /* fondo sezioni alternate */
  --rule:     #D6D6D2;  /* filetti secondari */
  --muted:    #5E5E5E;  /* testo secondario — 6.9:1 su bianco */
  /* Nessun colore d'accento: la pagina è monocroma. I segni grafici
     ricorrenti (icone, trattini, filetto della citazione) usano
     --ink, così il contrasto è pieno e nessuna informazione dipende
     dal colore. */

  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --pad-x: 1.25rem;      /* gutter orizzontale mobile */
  --pad-y: 3.5rem;       /* ritmo verticale mobile */
  --measure: 62ch;       /* misura di lettura */
}

@media (min-width: 900px) {
  :root {
    --pad-x: 2.5rem;
    --pad-y: 6rem;
  }
}

/* == 1. RESET E BASE ======================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis-weight: none;
}

@media (min-width: 900px) {
  body { font-size: 1.125rem; }
}

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

a { color: inherit; }

/* Focus visibile ovunque. Sui blocchi in negativo l'outline
   diventa bianco (vedi sezione 3). */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* == 2. LAYOUT ============================================= */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
}

.section--alt { background: var(--paper-2); }

/* Griglia a scheda tecnica: etichetta marginale + colonna testo.
   Su mobile è una colonna sola, l'etichetta sta sopra. */
.grid { display: block; }

@media (min-width: 900px) {
  .grid {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }

  /* Sezioni a specchio: la colonna marginale passa a destra.
     Applicata a Metodo e Azienda, così l'etichetta alterna
     sinistra/destra lungo la pagina. L'ordine nel DOM non cambia
     (etichetta sempre prima del contenuto): si sposta solo la
     posizione in griglia, quindi lettura e tab-order restano
     invariati. */
  .grid--right {
    grid-template-columns: minmax(0, 1fr) 11rem;
  }
  .grid--right > .label {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .grid--right .label .ico {
    margin-left: auto;   /* icona allineata al margine esterno */
  }
  .grid--right > .col {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Elemento-firma: l'etichetta di sezione in maiuscoletto, allineata
   alla prima riga del contenuto (la regola orizzontale). */
.label {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Icone di sezione. Decorative: il testo dell'etichetta porta già
   il significato, quindi sono aria-hidden e non hanno <title>.
   Riquadro in negativo: sono l'unico segno che si ripete in ogni
   sezione, quindi bastano a dare ritmo alla pagina senza toccare
   il testo. */
.ico {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  box-sizing: border-box;
  padding: 0.4375rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0.375rem;
  overflow: hidden;
}

@media (min-width: 900px) {
  .label {
    /* allinea otticamente alla riga forte sopra l'h2 */
    padding-top: 1.75rem;
    margin-bottom: 0;
    /* in colonna: icona sopra, etichetta sotto */
    display: block;
  }
  .ico {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.875rem;
  }
}

.col > * + * { margin-top: 1.25rem; }

/* Regola forte: una sola linea, ripetuta sopra ogni titolo. */
.rule {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0 0 1.5rem;
  height: 0;
}
.col > .rule + * { margin-top: 0; }

/* == 3. TIPOGRAFIA ========================================= */

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 7.2vw, 4.125rem);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(1.75rem, 4.3vw, 2.625rem);
  max-width: 24ch;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
  max-width: none;
}

/* Eyebrow sotto l'h1: fa da didascalia al titolo invece che da
   etichetta di sezione. Più aria sotto, per staccarla dalla lede
   che segue. Usata in privacy.html. */
.eyebrow--after {
  margin-bottom: 1.75rem;
}

/* Eyebrow sopra l'h1 (hero della home): qui etichetta il titolo, e
   un'etichetta sta attaccata a ciò che etichetta — margine più
   stretto del default, altrimenti sembra staccata e fluttuante. */
.eyebrow--before {
  margin-bottom: 0.875rem;
}

/* Seconda riga dell'h1: la prima è l'affermazione, questa è la
   conseguenza. La gerarchia la fa solo il corpo più piccolo — il
   colore resta quello del titolo (--ink, ereditato). La misura è in
   em, non in rem, così resta proporzionale al clamp dell'h1 e scala
   insieme a lui sul mobile. */
.h1-soft {
  font-size: 0.68em;
  letter-spacing: -0.01em;
  line-height: 1.18;

  /* Peso sottile: la gerarchia con la prima riga la fanno corpo e
     peso, non il colore. Il 300 va richiesto esplicitamente nel
     link a Google Fonts (index.html, privacy.html) — body imposta
     font-synthesis-weight: none, quindi un peso non caricato non
     verrebbe simulato ma silenziosamente arrotondato al 500. */
  font-weight: 300;
}

/* Placeholder di contenuto mancante: devono restare BEN visibili.
   Non rimuovere questo stile finché ci sono [[ ]] in pagina. */
.ph {
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--muted);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px, var(--rule) 5px, var(--rule) 6px
  );
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: 0.05em 0.35em;
}

/* == 4. HEADER ============================================= */

.site-head {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Il logo è un'immagine, non più testo: il nome del brand vive
   nell'alt. Vincoliamo l'altezza (non la larghezza) così resta
   allineato alla riga del link accanto; width:auto preserva le
   proporzioni del file 302x124. */
.logo {
  display: block;
  height: 3.5rem;
  width: auto;
}

@media (min-width: 900px) {
  .logo { height: 5rem; }
}

/* Mobile: logo e payoff impilati. Da 900px stanno sulla stessa
   riga, separati da un filetto. */
.head-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  min-width: 0;
}

/* Il payoff disambigua il nome: "ByeHuman" da solo suona come
   "via le persone". */
.payoff {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  color: var(--muted);
  margin: 0;
}

@media (min-width: 900px) {
  .head-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .payoff {
    line-height: 1;
    padding-left: 0.75rem;
    border-left: 1px solid var(--rule);
    white-space: nowrap;
  }
}

.head-link {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.head-link:hover { border-bottom-width: 2px; }

/* == 5. HERO (sez. 1) ====================================== */

.section--hero {
  padding-top: calc(var(--pad-y) * 0.9);
  padding-bottom: calc(var(--pad-y) * 1.1);
}

.lede {
  font-size: 1.1875rem;
  color: var(--ink);
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .lede { font-size: 1.3125rem; }
}

/* CTA — azione primaria, ripetuta due volte */
.cta-row {
  margin-bottom: 0.75rem;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 1rem 1.75rem;
  /* bordo trasparente: tiene .cta e .cta--ghost alla stessa altezza
     nonostante box-sizing conti il bordo del secondo */
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.cta:hover { background: #2A2A2A; }
.cta:focus-visible { outline-offset: 4px; }

/* Azione secondaria: stesso ingombro, peso visivo minore. Il contorno
   la tiene leggibile come bottone senza competere con la primaria. */
.cta--ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.cta--ghost:hover { background: var(--paper-2); }

.cta-or {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--muted);
}

.cta-note {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0;
}

/* == 5b. FORM DI CONTATTO ================================== */

.form-panel {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
  max-width: 34rem;
}
.form-panel[hidden] { display: none; }

.form-intro {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.field {
  margin-bottom: 1.125rem;
  max-width: none;
}

.field label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.field .opt {
  font-weight: 500;
  color: var(--muted);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.field textarea { resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

/* Consenso: la checkbox sta sulla riga del testo, non sopra */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.field--check input { margin-top: 0.2rem; flex: none; }
.field--check label {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 0;
}

/* Honeypot: fuori dal flusso e fuori dallo schermo. Niente
   display:none, che alcuni bot riconoscono e saltano. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-esito {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
}
.form-esito--ko {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
}

/* == 6. PROBLEMA (sez. 2) ================================== */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.list li {
  padding: 0.875rem 0 0.875rem 1.75rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
.list li:last-child { border-bottom: 1px solid var(--rule); }

/* trattino al posto del bullet: coerente col registro "documento" */
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.875rem + 0.8em);   /* padding-top + mezza riga */
  width: 0.75rem;
  height: 1px;
  background: var(--ink);
}

.closing { font-weight: 600; }

/* == 7. COSA FACCIAMO (sez. 3) =============================
   Due percorsi di ingresso, peso visivo identico: il lettore
   deve auto-selezionarsi. Nessun blocco in negativo qui — i due
   fuochi della pagina restano quelli della sezione Metodo.
   ========================================================== */

.paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;                   /* spazio vuoto tra i due blocchi */
}

/* Più specifico di `.col > * + *`, che altrimenti imporrebbe 1.25rem:
   i due percorsi devono staccarsi dal cappello della sezione. */
.col > .paths { margin-top: 2.75rem; }

@media (min-width: 900px) {
  .paths {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .col > .paths { margin-top: 3.5rem; }
}

/* Nessun riquadro: i due percorsi sono separati da un solo filetto,
   quello in mezzo. Stessa tipografia per entrambi: nessuna delle due
   colonne deve sembrare l'opzione consigliata. */
.path {
  display: flex;
  flex-direction: column;
}

/* Mobile: colonna unica, il filetto è orizzontale tra i due. */
.path + .path {
  border-top: 1px solid var(--rule);
  padding-top: 2.5rem;
}

@media (min-width: 900px) {
  /* Desktop: filetto verticale. padding-left = gap, così la linea
     resta otticamente al centro tra le due colonne. */
  .path + .path {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--rule);
    padding-left: 3rem;
  }
}


.path-kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  max-width: none;
}

.path h3 {
  font-size: 1.4375rem;
  margin-bottom: 0.625rem;
}

@media (min-width: 900px) {
  .path h3 { font-size: 1.625rem; }
}

.path-lede {
  font-size: 0.9375rem;
  margin-bottom: 1.125rem;
  max-width: none;
}

/* <ul>, non <ol>: le tre voci di ogni card sono servizi acquistabili
   separatamente, non fasi da percorrere in ordine. La sequenza del
   lavoro sta nel Metodo (01 Diagnosi → 02 Costruzione → 03
   Manutenzione); numerare anche qui prometterebbe un ordine che non
   esiste e duplicherebbe quella scala a poche righe di distanza.
   Il marker è quindi un segno neutro, disegnato da noi per
   controllarne allineamento e colore: un quadratino pieno. */
.path-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.path-list li {
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0 0 0 1.5rem;
  position: relative;
}
.path-list li + li { margin-top: 1.25rem; }

.path-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38rem;               /* centra sulla prima riga dello strong */
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--muted);
}

.path-list strong {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  margin-bottom: 0.125rem;
}

/* == 8. METODO (sez. 4) ==================================== */

.phase { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.phase:first-of-type { border-top: 0; padding-top: 0; }

.phase-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
  max-width: none;
}
.phase-n {
  font-size: 1.5rem;
  vertical-align: -0.15em;
}

/* --- Blocchi in negativo: SOLO DUE in tutta la pagina. ---
   Sono i due fuochi visivi richiesti dal brief:
   1) "cosa non conviene automatizzare"  2) la riga dei tempi.
   Non aggiungerne altri: l'effetto vive della scarsità. */
.invert {
  background: var(--ink);
  color: var(--paper);
  padding: 1.5rem;
  border-radius: 2px;
  margin-top: 1.5rem;
  max-width: var(--measure);
}

.invert :focus-visible { outline-color: var(--paper); }

.invert-kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B8B8B8;             /* 8.1:1 su --ink */
  margin-bottom: 0.75rem;
  max-width: none;
}

.invert-body { margin-bottom: 0; }

/* dentro il negativo il placeholder si inverte anche lui */
.invert .ph {
  color: var(--paper);
  background: none;
  box-shadow: inset 0 0 0 1px #6E6E6E;
}

.invert--data { padding-bottom: 1.25rem; }

.data-line {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0;
  max-width: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.data-unit {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #B8B8B8;
}

/* == 9. PROVE (sez. 5) ===================================== */

.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) {
  .cases { grid-template-columns: 1fr 1fr; }
}
.case {
  background-color: #ffffff;
  background-image: radial-gradient(#eeeeeb 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid #8C8C88;
  border-radius: 4px;
  padding: 1.5rem;
}
.case > :last-child { margin-bottom: 0; }
.case h3 {
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
}
.case p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ext {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.ext::after { content: " \2197"; }
.ext:hover { border-bottom-width: 2px; }

/* == 10. AZIENDA (sez. 6) =================================== */

.pull {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.2vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ink);
  max-width: 26ch;
}
.pull::before { content: "\201C"; }
.pull::after  { content: "\201D"; }

.legal {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: none;
  margin-top: 2.5rem;
}

/* == 11. FAQ (sez. 7) — details nativi, zero JS ============ */

details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }

/* i details sono fratelli diretti: annullo il gap generico di .col
   per non raddoppiare i bordi */
.col > details + details { margin-top: 0; }

summary {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  padding: 1.125rem 2.5rem 1.125rem 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }

/* segno +/− costruito con due filetti, ruota all'apertura */
summary::before,
summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.875rem;
  height: 1px;
  background: var(--ink);
  transform: translateY(-50%);
}
summary::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 120ms ease;
}
details[open] summary::after { transform: translateY(-50%) rotate(0deg); }

summary:focus-visible { outline-offset: -2px; }

.answer {
  padding: 0 0 1.375rem;
  max-width: var(--measure);
}

/* == 12. CHIUSURA (sez. 8) ================================= */

.section--close { padding-bottom: calc(var(--pad-y) * 1.1); }
.section--close h2 { max-width: 18ch; }

/* == 13. FOOTER (sez. 9) =================================== */

.site-foot {
  border-top: 1px solid var(--ink);
  padding: 2rem 0 3rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}

.site-foot p { margin-bottom: 0.5rem; max-width: none; }
.site-foot p:last-child { margin-bottom: 0; }

.foot-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.foot-links a:hover { border-bottom-color: var(--ink); }

@media (min-width: 900px) {
  .site-foot .wrap {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
  .site-foot p { margin-bottom: 0; }
}

/* == 14. MOTION ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}