/* ==========================================================================
   LyamFlow — Pagine di posizionamento (SEO)
   --------------------------------------------------------------------------
   Le pagine sotto /software-prenotazioni-* sono documenti di testo, non la
   landing: niente GSAP, niente Lenis, niente loader. Devono essere leggibili
   al primo byte, perché è così che le leggono Google e — soprattutto — i
   motori di risposta (Perplexity, ChatGPT Search), che il JavaScript spesso
   non lo eseguono affatto.

   Da qui la regola di questo file: nessuna classe dipende da JavaScript, e
   nessun contenuto parte invisibile. Le animazioni `[data-reveal]` di
   base.css non vanno usate su queste pagine — si attivano solo con la classe
   `.lf--js`, che qui non mettiamo apposta.

   I colori, i raggi e i caratteri arrivano tutti da tokens.css: queste pagine
   non introducono identità, la ereditano.
   ========================================================================== */

/* ------------------------------------------------------------------- Fondo */

/*
 * Il fondo scuro vive su `.lf` (base.css), non su `html`: sulla landing non si
 * nota perché il contenitore copre tutta la pagina, ma basta un rimbalzo di
 * scorrimento — o una pagina più corta dello schermo — per far comparire il
 * bianco del browser sotto un testo chiaro. Qui lo si mette anche sulla radice.
 */
html {
  background: #04060c;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Testata */

.lf-doc__top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(224 24% 5% / 0.82);
  backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
  border-bottom: 1px solid var(--lf-line-soft);
}

.lf-doc__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

/* ------------------------------------------------------------------- Briciole */

.lf-crumbs {
  font-size: var(--lf-t-xs);
  color: var(--lf-faint);
  padding: 1.75rem 0 0;
}

.lf-crumbs a {
  color: var(--lf-fg-dim);
  text-decoration: none;
}

.lf-crumbs a:hover {
  color: var(--lf-fg);
  text-decoration: underline;
}

.lf-crumbs span[aria-current] {
  color: var(--lf-faint);
}

/* ---------------------------------------------------------------------- Hero */

.lf-doc__hero {
  padding: 2.5rem 0 3.5rem;
  border-bottom: 1px solid var(--lf-line-soft);
}

/*
 * Misura propria, non `--lf-t-h1`. Il token della landing è clamp(2.75rem,
 * 8vw, 6.5rem): su uno schermo da 1280 sono 102px, giusti per un titolo che
 * deve fermare chi scorre, sbagliati per l'intestazione di un documento che
 * si legge. Qui si sta sui 52px, e la riga sotto resta leggibile.
 */
.lf-doc__hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0.6rem 0 0;
}

.lf-doc__hero .lf__lead {
  max-width: 62ch;
  margin-top: 1.25rem;
}

.lf-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ------------------------------------------------------------------ Contenuto */

.lf-doc {
  padding-bottom: 4rem;
}

.lf-doc section {
  padding: 3.25rem 0 0;
}

.lf-doc h2 {
  font-size: var(--lf-t-h3);
  line-height: 1.25;
  letter-spacing: var(--lf-track-tight);
  margin: 0 0 1rem;
  color: var(--lf-fg);
}

.lf-doc h3 {
  font-size: var(--lf-t-lead);
  margin: 2rem 0 0.6rem;
  color: var(--lf-fg);
}

.lf-doc p {
  max-width: 68ch;
  color: var(--lf-fg-dim);
  margin: 0 0 1rem;
}

.lf-doc ul:not([class]) {
  max-width: 68ch;
  color: var(--lf-fg-dim);
  padding-left: 1.15rem;
  margin: 0 0 1rem;
}

.lf-doc ul:not([class]) li {
  margin-bottom: 0.5rem;
}

.lf-doc strong {
  color: var(--lf-fg);
  font-weight: 600;
}

.lf-doc a:not([class]) {
  color: var(--lf-azure-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La risposta secca sotto un titolo-domanda: è il paragrafo che Google e le
   AI estraggono. Va evidenziato perché lo legga anche un essere umano. */
.lf-answer {
  border-left: 2px solid var(--lf-azure);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 0 0 1.25rem;
}

.lf-answer p {
  margin: 0;
  color: var(--lf-fg);
}

/* ------------------------------------------------------------------- Griglie */

.lf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.lf-grid li {
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-md);
  padding: 1.1rem 1.15rem;
}

.lf-grid b {
  display: block;
  color: var(--lf-fg);
  font-size: var(--lf-t-sm);
  margin-bottom: 0.3rem;
}

.lf-grid span {
  display: block;
  color: var(--lf-muted);
  font-size: var(--lf-t-sm);
  line-height: 1.5;
}

/* --------------------------------------------------------------- Tabella */

.lf-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 0;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-md);
}

.lf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lf-t-sm);
  min-width: 520px;
}

.lf-table th,
.lf-table td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--lf-line-soft);
  vertical-align: top;
}

.lf-table thead th {
  color: var(--lf-fg);
  font-weight: 600;
  background: var(--lf-surface);
}

.lf-table td {
  color: var(--lf-fg-dim);
}

.lf-table tbody th {
  color: var(--lf-fg-dim);
  font-weight: 500;
}

.lf-table tr:last-child th,
.lf-table tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------ Prezzi */

.lf-doc__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.lf-doc__price li {
  flex: 1 1 240px;
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-lg);
  padding: 1.35rem;
}

.lf-doc__price b {
  display: block;
  color: var(--lf-fg);
  font-size: var(--lf-t-h4);
  margin-bottom: 0.15rem;
}

.lf-doc__price em {
  display: block;
  font-style: normal;
  color: var(--lf-muted);
  font-size: var(--lf-t-sm);
  margin-bottom: 0.9rem;
}

.lf-doc__price span {
  display: block;
  color: var(--lf-fg-dim);
  font-size: var(--lf-t-sm);
  line-height: 1.55;
}

/* --------------------------------------------------------------------- FAQ */

/* <details> e non un accordion in JavaScript: le risposte sono nel documento
   anche a script spento, che è la condizione in cui le leggono i crawler. */
.lf-faq {
  margin: 1.5rem 0 0;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-md);
  overflow: hidden;
}

.lf-faq details {
  border-bottom: 1px solid var(--lf-line-soft);
}

.lf-faq details:last-child {
  border-bottom: 0;
}

.lf-faq summary {
  cursor: pointer;
  padding: 1rem 1.15rem;
  color: var(--lf-fg);
  font-weight: 500;
  font-size: var(--lf-t-sm);
  list-style: none;
}

.lf-faq summary::-webkit-details-marker {
  display: none;
}

.lf-faq summary::after {
  content: '+';
  float: right;
  color: var(--lf-muted);
  font-weight: 400;
}

.lf-faq details[open] summary::after {
  content: '−';
}

.lf-faq summary:hover {
  background: var(--lf-surface);
}

.lf-faq details > p {
  padding: 0 1.15rem 1.1rem;
  margin: 0;
  color: var(--lf-fg-dim);
  font-size: var(--lf-t-sm);
  line-height: 1.65;
}

/* --------------------------------------------------------------- Chiusura */

.lf-doc__cta {
  margin: 3.5rem 0 0;
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-xl);
  padding: 2.25rem;
}

.lf-doc__cta h2 {
  margin-bottom: 0.6rem;
}

.lf-doc__note {
  margin-top: 1.25rem;
  font-size: var(--lf-t-xs);
  color: var(--lf-faint);
  max-width: 68ch;
}

/* ------------------------------------------------------------------- Piede */

.lf-doc__foot {
  border-top: 1px solid var(--lf-line-soft);
  padding: 2rem 0;
  color: var(--lf-faint);
  font-size: var(--lf-t-xs);
}

.lf-doc__foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.lf-doc__foot a {
  color: var(--lf-fg-dim);
  text-decoration: none;
}

.lf-doc__foot a:hover {
  color: var(--lf-fg);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .lf-doc__cta {
    padding: 1.5rem;
  }

  .lf-doc section {
    padding-top: 2.5rem;
  }
}