/* ==========================================================================
   Book Demo — 37:1732 · 1512 x 991
   Flusso verticale: 80 + 93 (Text) + 40 (gap) + 698 (Calendly) + 80 = 991.
   Base .section + .section--compact (padding-block 80, padding-inline 40,
   column, align-items center).
   ========================================================================== */

.demo {
  gap: var(--space-5);                     /* 40px — gap dell'auto-layout 37:1732 */
  background: var(--color-white);          /* #ffffff, tinta piatta */
  color: var(--text-on-light);
}

/* --- Text 37:1740 — 1432 x 93 (58 + 16 + 19) -----------------------------
   column, items-center, gap 16, padding 0, text-align center. */
.demo__head {
  width: var(--container-width);           /* 1432px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                     /* 16px */
}

/* 37:1742 — 48/58, #00122b, box 1432 x 58 */
.demo__h2 {
  width: var(--container-width);
  color: var(--color-tertiary);
  text-align: center;
}

/* 37:1743 — 16/19, #525e6f, box 1432 x 19, 1 riga */
.demo__lead {
  width: var(--container-width);
  color: var(--text-on-light-muted);       /* #525e6f — Tertiaty/300 */
  text-align: center;
}

/* --- Card Calendly 37:1759 — 1140 x 698 ----------------------------------
   Contenitore dell'inline widget Calendly (decisione del cliente: embed
   reale, nessuna ricostruzione HTML del calendario — spec 05 §4).
   Misure prese dal frame Figma: 1140 x 698, radius 16, stroke INSIDE 1px
   #e8e8e8 (border + box-sizing: border-box = stroke inside), fondo bianco,
   overflow hidden. L'altezza 698 e quella che chiude la somma a 991.
   Nota: il valore 1px del bordo non e a token (--stroke-hairline esiste ma
   e una shorthand `border`, qui servono i tre pezzi separati per chiarezza). */
.demo__calendly {
  width: 1140px;
  height: 698px;
  flex: 0 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);  /* #e8e8e8 — Neutrals/200 */
  border-radius: var(--radius-lg);             /* 16px */
  overflow: hidden;                            /* clip content: SI in Figma */
}

/* Placeholder finche l'embed non e attivo: riempie tutto il contenitore.
   1138 x 696 = 1140 x 698 meno il bordo di 1px per lato. */
.demo__calendly-ph {
  width: 100%;
  height: 100%;
}