/* =============================================================================
   HOWAR MIRROR — Pagina pubblica "com'è fatto il report".
   Vive SOPRA mirror.css: le sezioni del report usano le classi vere (.rep-*),
   qui c'è solo l'impalcatura della demo (hero, foglio, annotazioni, CTA).
   ============================================================================= */

.demo-page{ background:#eef1f5; margin:0; }

/* ---------------------------------------------------------------- HERO */
.demo-hero{
  background:linear-gradient(135deg,#1B2E47 0%,#223B57 55%,#1d3b3a 100%);
  color:#fff; padding:56px 20px 64px;
}
.demo-hero-in{ max-width:760px; margin:0 auto; text-align:center; }
/* Solo dove la frase-manifesto e' lunga (esempio-report): a 1.18rem ne chiede
   782px e in 760 andava a capo, spezzando la domanda in due. Si allarga la
   sola intestazione, il paragrafo sotto tiene il suo max-width e resta stretto. */
.demo-hero-largo .demo-hero-in{ max-width:860px; }
.demo-hero-largo .demo-claim{ max-width:840px; }
.demo-hero .brand-badge{
  display:inline-block; letter-spacing:.12em; font-size:2.1rem; font-weight:800;
  color:#fff; margin-bottom:30px; line-height:1.1;
}
.demo-hero .brand-badge .tm{ font-size:.42em; vertical-align:super; letter-spacing:0; opacity:.85; }
.demo-hero .brand-badge b{ color:#57A035; }
.demo-hero h1{
  margin:0 0 18px; font-size:2.35rem; line-height:1.18; font-weight:800; letter-spacing:-.02em;
}
.demo-hero h1 .hl{ color:#7ac943; }
.demo-claim{
  /* 720px, non 600: a 1.18rem la frase e' lunga ~680px e andava a capo,
     spezzando in due una riga che deve leggersi d'un fiato. Sotto i 760px
     di finestra torna su due righe da sola, ed e' giusto cosi'. */
  margin:0 auto 22px; max-width:720px; font-size:1.18rem; line-height:1.5;
  color:#dbe4ee; font-weight:600;
}
.demo-sub{ margin:0 auto 30px; max-width:620px; font-size:.98rem; line-height:1.65; color:#c6d5e4; }
.demo-sub strong{ color:#dbe4ee; }
.demo-cta-hero{
  display:inline-block; background:#57A035; color:#fff; text-decoration:none;
  padding:15px 34px; border-radius:10px; font-weight:700; font-size:1.02rem;
  box-shadow:0 6px 18px rgba(87,160,53,.32); transition:transform .15s, box-shadow .15s;
}
.demo-cta-hero:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(87,160,53,.4); }
.demo-hero-nota{ margin:18px 0 0; font-size:.84rem; color:#c6d5e4; }

/* -------------------------------------------------- IMPALCATURA DEI PASSI */
.demo-wrap{ max-width:1180px; margin:0 auto; padding:56px 20px 20px; }

/* Foglio + annotazione affiancati; l'annotazione scavalca il bordo del foglio. */
.demo-step{ position:relative; margin:0 0 68px; padding-left:300px; }
.demo-sheet{
  background:#fff; border:1px solid #dfe4ea; border-radius:14px; padding:26px 28px;
  box-shadow:0 10px 30px rgba(27,46,71,.09);
}
.demo-sheet-dark{ padding:0; overflow:hidden; border:none; }
.demo-sheet .rep-cover{ border-radius:0; min-height:0; }

.demo-nota{
  position:absolute; left:0; top:26px; width:274px;
  background:#1B2E47; color:#dbe4ee; border-radius:12px; padding:18px 20px 20px;
  box-shadow:0 8px 24px rgba(27,46,71,.22);
}
.demo-nota .n{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:#57A035; color:#fff; font-weight:800; font-size:.95rem; margin-bottom:10px;
}
.demo-nota h3{ margin:0 0 8px; font-size:1.02rem; color:#fff; line-height:1.3; }
.demo-nota p{ margin:0 0 10px; font-size:.87rem; line-height:1.6; }
.demo-nota p:last-child{ margin-bottom:0; }
.demo-nota strong{ color:#fff; }
.demo-nota em{ color:#a9bacd; }
.demo-nota-hl{
  background:rgba(87,160,53,.16); border-left:3px solid #7ac943;
  border-radius:0 8px 8px 0; padding:9px 12px; font-size:.85rem !important;
}
.demo-nota .dot-tu, .demo-nota .dot-altri{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px;
}
.demo-nota .dot-tu{ background:#2a78d6; }
.demo-nota .dot-altri{ background:#eb6834; }

/* ---------------------------------------------------- VOCI / REFERENZE */
/* Fascia a tutta larghezza subito prima delle FAQ: chiude la lettura del
   report con la voce di chi l'ha ricevuto, poi le domande. BLU PIENO, non il
   gradiente dell'header: la pagina alterna blu / grigio / blu / bianco / blu,
   e i due gradienti restano le estremita'. Card bianche sopra il blu, cosi'
   le citazioni si leggono come su carta. */
.demo-voci-band{ background:#1B2E47; padding:54px 20px 58px; margin-top:16px; }
.demo-voci-in{ max-width:1180px; margin:0 auto; }
.demo-voci-in h2{ text-align:center; color:#fff; font-size:1.55rem; margin:0 0 26px; }
/* La fascia si adatta al NUMERO delle voci (10/09/2026: si accende con tre, e
   altre ne arriveranno). Righe centrate di schede larghe fino a 285px: tre
   voci stanno al centro senza un buco a destra, quattro riempiono la riga, e
   la voce che resta sola su una riga nuova sta al centro, non appesa a
   sinistra. Con la grid quest'ultima cosa non si ottiene, per questo e' flex.
   Spaziatura coi margini e non con gap: il gap della flex manca su Safari
   prima della 14.1, e il margine negativo del contenitore compensa quello
   delle schede sui bordi. */
.demo-voci-griglia{ display:flex; flex-wrap:wrap; justify-content:center; margin:-9px; }
.demo-voci-griglia .demo-voce{ flex:0 1 285px; min-width:230px; margin:9px; }
.demo-voce{
  margin:0; background:#fff; border-left:3px solid #57A035;
  border-radius:0 12px 12px 0; padding:20px 20px; display:flex; flex-direction:column;
  justify-content:space-between; box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.demo-voce blockquote{ margin:0 0 14px; font-size:.95rem; line-height:1.55; color:#2E3A59; font-style:italic; }
.demo-voce figcaption{ font-size:.95rem; font-weight:700; color:#468729; }
.demo-voce figcaption span{ display:block; font-weight:500; font-style:normal; color:#6b7280; font-size:.87rem; margin-top:2px; }
/* Sotto i 620px una colonna sola, a tutta larghezza: colonne strette
   sarebbero torri di parole. */
@media (max-width:620px){
  .demo-voci-griglia .demo-voce{ flex-basis:100%; min-width:0; }
  .demo-voci-in h2{ font-size:1.3rem; }
}

/* --------------------------------------------------------------- FAQ */
/* Fascia bianca a tutta larghezza: interrompe il grigio dei cinque passi e
   segnala che l'anteprima del report è finita. L'accordion NON è dentro una
   card, così non si confonde con i fogli del report. */
.demo-faq-band{
  background:#fff; border-top:1px solid #dfe4ea; border-bottom:1px solid #dfe4ea;
  padding:58px 20px 62px; margin-top:16px;
}
.demo-faq-in{ max-width:760px; margin:0 auto; }
.demo-faq-in h2{ text-align:center; color:#1B2E47; font-size:1.55rem; margin:0 0 6px; }
.demo-faq-in .demo-faq-sub{ text-align:center; color:#6b7280; font-size:.95rem; margin:0 0 24px; }
/* dentro la fascia l'accordion perde il proprio riquadro */
.demo-faq-band .wiz-faq{ background:transparent; border:none; border-radius:0; padding:0; margin:0; }

/* --------------------------------------------------------------- CTA */
.demo-cta{
  max-width:760px; margin:0 auto 60px; text-align:center; background:#fff;
  border:1px solid #dfe4ea; border-radius:16px; padding:38px 28px;
  box-shadow:0 10px 30px rgba(27,46,71,.08);
}
.demo-cta h2{ margin:0 0 12px; color:#1B2E47; font-size:1.6rem; }
.demo-cta p{ margin:0 auto 22px; max-width:520px; color:#5b6472; line-height:1.6; }
.demo-cta-btn{
  display:inline-block; background:#57A035; color:#fff; text-decoration:none;
  padding:15px 34px; border-radius:10px; font-weight:700; font-size:1.02rem;
  box-shadow:0 6px 18px rgba(87,160,53,.3); transition:transform .15s;
}
.demo-cta-btn:hover{ transform:translateY(-2px); }
/* margin auto sui lati: senza, il blocco resta a sinistra nonostante il box sia centrato. */
.demo-cta-nota{ margin:16px auto 0 !important; font-size:.84rem; color:#5b6472 !important; text-align:center; }
.demo-cta-nota a{ color:#5b6472; }

/* ------------------------------------------------------------ RESPONSIVE */
/* Sotto i 1000px l'annotazione non sta più a fianco: passa sopra al foglio,
   che è l'ordine di lettura giusto (prima la spiegazione, poi l'esempio). */
@media (max-width:1000px){
  .demo-step{ padding-left:0; }
  .demo-nota{ position:static; width:auto; margin:0 0 14px; }
  .demo-wrap{ padding-top:40px; }
}
@media (max-width:620px){
  .demo-hero{ padding:40px 16px 48px; }
  .demo-hero h1{ font-size:1.75rem; }
  .demo-claim{ font-size:1.05rem; }
  .demo-sheet{ padding:18px 16px; }
}

/* Prezzo di lancio: importo pieno barrato + scadenza. */
.demo-promo{ margin:12px 0 0 !important; font-size:.88rem; color:#c6d5e4; }
.demo-promo .pieno{ text-decoration:line-through; opacity:.75; margin-right:6px; }
.demo-promo strong{ color:#7ac943; }
.demo-promo-light{ color:#5b6472 !important; margin:14px auto 0 !important; text-align:center; }
.demo-promo-light strong{ color:#57A035; }

/* ---------------------------------------------------- CHIUSURA A TUTTA PAGINA */
/* Stesso gradiente dell'header, specchiato: la pagina apre e chiude sul blu. */
.demo-close{
  background:linear-gradient(135deg,#1d3b3a 0%,#223B57 45%,#1B2E47 100%);
  color:#fff; padding:60px 20px 66px; margin-top:20px;
}
.demo-close-in{ max-width:680px; margin:0 auto; text-align:center; }
.demo-close h2{ margin:0 0 14px; font-size:1.9rem; font-weight:800; letter-spacing:-.01em; color:#fff; }
.demo-close p{ margin:0 auto 26px; max-width:560px; color:#c6d5e4; line-height:1.65; }
.demo-close .demo-promo{ margin:14px auto 0 !important; }
.demo-close-nota{ margin:18px auto 0 !important; font-size:.84rem; color:#c6d5e4; }
.demo-close-nota a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:620px){
  .demo-close{ padding:44px 16px 50px; }
  .demo-close h2{ font-size:1.5rem; }
}