/* =============================================================
   DENTAL GO — Pagina "Richiedi l’analisi"
   Foglio dedicato, caricato SOLO su /richiedi-analisi/.
   Pagina chiara orientata alla conversione: bianco dominante, titoli
   e testi navy, Blu Dental Go per occhiello, asterischi, focus e CTA.
   Testata a due colonne (copy a sinistra, modulo a destra), poi le
   fasce a tutta larghezza: cosa analizziamo, cosa ricevi, come
   funziona, rassicurazione, domande frequenti.
   Token, tipografia, occhiello, bottoni, form (.form__*, .form__row,
   textarea/select), preset chiaro (.bg-white / .bg-off-white: input
   bianchi, testi navy) e reveal sono quelli di main.css; l'accordion
   delle FAQ è quello del tema (blog.css). Qui solo la composizione.
   Ogni selettore parte da .ofy-analisi-page, .ofy-analisi-band,
   .ofy-analisi-areas, .ofy-analisi-steps, .ofy-analisi-sure o
   .ofy-analisi-faq.
   ============================================================= */

.ofy-analisi-page {
  --ana-line: rgba(7, 16, 26, 0.12);        /* filetti e bordo card su fondo chiaro */
  --ana-gap: clamp(40px, 6vw, 110px);       /* colonna copy / colonna modulo */
  background: var(--color-white);
  color: var(--color-navy);
  /* Header fisso + top bar sopra la pagina, come .page-hero */
  padding-block: calc(var(--header-h, 96px) + var(--topbar-h, 40px) + var(--section-pad-sm)) var(--section-pad-sm);
}

/* ---------------------------------------------------- griglia */
.ofy-analisi-page__grid {
  display: grid;
  gap: var(--space-8) var(--ana-gap);
}
@media (min-width: 1024px) {
  .ofy-analisi-page__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ------------------------------------------------------- copy */
.ofy-analisi-page__copy { min-width: 0; }

.ofy-analisi-page__title {
  margin: 0;
  max-width: 16em;
  font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: 1.04;
  text-wrap: balance;
}

.ofy-analisi-page__text { margin-top: var(--space-6); }
.ofy-analisi-page__text p {
  max-width: 56ch;
  margin: 0 0 var(--space-5);
}
.ofy-analisi-page__text p:last-child { margin-bottom: 0; }

/* La riga di contesto chiude la colonna, subito prima del modulo. */
.ofy-analisi-page__meta { margin-top: var(--space-6); }

/* ----------------------------------------------------- modulo
   Il blocco che introduce il modulo e il modulo stesso stanno nella
   stessa colonna: prima si legge perché compilarlo, poi lo si compila. */
.ofy-analisi-page__aside { min-width: 0; }

.ofy-analisi-page__form-title {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
}
.ofy-analisi-page__form-text { margin-top: var(--space-4); }
.ofy-analisi-page__form-text p {
  max-width: 46ch;
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.ofy-analisi-page__form-text p:last-child { margin-bottom: 0; }

/* Card bianca con bordo e ombra morbida (solo opacità della palette);
   input bianchi del preset .bg-white, etichette navy, focus in Blu
   Dental Go con anello, CTA primaria a tutta larghezza. */
.ofy-analisi-page__form {
  margin-top: var(--space-6);
  min-width: 0;
  padding: var(--card-pad);
  background: var(--color-white);
  border: 1px solid var(--ana-line);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 48px rgba(7, 16, 26, 0.08);
}

.ofy-analisi-page .form__label { color: var(--color-navy); }
.ofy-analisi-page .form__field:focus-within .form__label { color: var(--color-primary); }

/* Asterisco dei campi obbligatori */
.ofy-analisi-page__req { color: var(--color-primary); }

/* Focus visibile sugli input: bordo + anello in Blu Dental Go */
.ofy-analisi-page .form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(42, 106, 220, 0.18);
}
.ofy-analisi-page .form__field.has-error .form__input:focus { box-shadow: 0 0 0 3px rgba(216, 84, 84, 0.18); }

/* Consenso: tutta l'etichetta è area di tocco (≥ 44px), link navy → blu */
.ofy-analisi-page .form__privacy {
  min-height: 44px;
  color: var(--text-muted);
}
.ofy-analisi-page .form__privacy a:hover,
.ofy-analisi-page .form__privacy a:focus-visible { color: var(--color-primary); }

/* CTA a tutta larghezza della card */
.ofy-analisi-page .form__submit {
  align-self: stretch;
  margin-top: var(--space-3);
}

/* Esito: la card è già il contenitore, niente seconda card annidata */
.ofy-analisi-page .form__success {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ----------------------------------------------------- mobile
   Sotto i 640px la card lascia il posto al modulo a larghezza piena
   (solo un filetto sopra): più spazio agli input, campi touch. */
@media (max-width: 639px) {
  .ofy-analisi-page__form {
    padding: var(--space-6) 0 0;
    border: 0;
    border-top: 1px solid var(--ana-line);
    border-radius: 0;
    box-shadow: none;
  }
}

/* =============================================================
   Le fasce sotto la testata.
   Nessun componente nuovo del design system: composizione con i
   token di main.css e i preset chiari .bg-white / .bg-off-white,
   che rimappano --text-muted e --line-soft da soli.
   ============================================================= */

.ofy-analisi-band {
  --ana-line: rgba(7, 16, 26, 0.12);
  padding-block: var(--section-pad-sm);
}

.ofy-analisi-band__title {
  margin: 0;
  max-width: 18em;
  font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.75rem);
  line-height: 1.08;
  text-wrap: balance;
}

/* Titolo a sinistra, testo introduttivo a destra: la fascia si apre
   senza che il lettore debba scendere di due blocchi. */
.ofy-analisi-band__head { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .ofy-analisi-band__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
  }
}
.ofy-analisi-band__lead p {
  max-width: 54ch;
  margin: 0 0 var(--space-4);
  color: var(--text-body);
}
.ofy-analisi-band__lead p:last-child { margin-bottom: 0; }

.ofy-analisi-band__outro {
  margin: var(--space-7) 0 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ------------------------------------ le sei aree che guardiamo */
.ofy-analisi-areas {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6) var(--space-7);
}
@media (min-width: 640px) {
  .ofy-analisi-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ofy-analisi-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ofy-analisi-areas__item {
  border-top: 1px solid var(--ana-line);
  padding-top: var(--space-5);
}
.ofy-analisi-areas__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
}
.ofy-analisi-areas__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ------------------------------------------- passaggi numerati
   Stessa struttura di .work-steps (pagine servizio), qui su fondo
   chiaro e con il numero in Blu Dental Go. */
.ofy-analisi-steps__list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-7) var(--space-6);
}
@media (min-width: 640px) {
  .ofy-analisi-steps__list--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ofy-analisi-steps__list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ofy-analisi-steps__item {
  border-top: 1px solid var(--ana-line);
  padding-top: var(--space-5);
}
.ofy-analisi-steps__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.ofy-analisi-steps__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
}
.ofy-analisi-steps__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --------------------------------------------- rassicurazione */
.ofy-analisi-sure__grid { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .ofy-analisi-sure__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
  }
}
.ofy-analisi-sure__body { min-width: 0; }
.ofy-analisi-sure .ofy-analisi-page__text { margin-top: 0; }

/* Stesso filetto blu delle altre frasi forti del sito. */
.ofy-analisi-sure__callout {
  max-width: 34ch;
  margin: var(--space-7) 0 0;
  padding-left: clamp(20px, 2.5vw, 32px);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* ------------------------------------------------------- FAQ
   L'accordion è quello del tema (blog.css). Qui solo la misura:
   le domande non devono correre per tutta la larghezza. */
.ofy-analisi-faq {
  max-width: 820px;
  margin-top: var(--space-8);
}