/* =====================================================================
   IRIGuest — Stili per la guida "Come scegliere un software registro visitatori"
   Caricato dopo site.css + header.css + obbligo.css.
   Usa le variabili globali definite in site.css.
   Prefisso .cs-* per isolamento completo.
   ===================================================================== */

/* ---- Hero compatto dark (stessa logica di obbligo) -------------------- */
.hero .lead { margin-top: 16px; }
.cs-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bright); margin: 0 0 18px;
}
.cs-hero-badge::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bright); opacity: .7;
}

/* ---- Griglia 10 caratteristiche -------------------------------------- */
.cs-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 28px 0 0;
}
.cs-feat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.cs-feat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cs-feat-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(31,111,147,.12); color: var(--teal-deep);
  font-size: .82rem; font-weight: 700;
  margin: 0 0 14px;
  flex-shrink: 0;
}
.cs-feat-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(31,111,147,.12) 0%, rgba(46,155,196,.14) 100%);
  color: var(--teal); margin: 0 0 14px;
}
.cs-feat-ico svg { width: 22px; height: 22px; }
.cs-feat-card h3 {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  margin: 0 0 8px; line-height: 1.3;
}
.cs-feat-card p { font-size: .93rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.55; }
.cs-feat-benefit {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .85rem; font-weight: 500; color: var(--teal-deep);
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px;
}
.cs-feat-benefit::before {
  content: "✓"; font-weight: 700; color: var(--teal); flex-shrink: 0; margin-top: 1px;
}

/* ---- Header numerico + icona (layout orizzontale per le card) --------- */
.cs-feat-header {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
}
.cs-feat-header .cs-feat-num { margin: 0; }
.cs-feat-header .cs-feat-ico { margin: 0; }

/* ---- Errori da evitare ----------------------------------------------- */
.cs-mistake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 28px 0 0;
}
.cs-mistake-card {
  background: #fff8f8;
  border: 1px solid rgba(200,50,50,.15);
  border-left: 4px solid #d94f4f;
  border-radius: var(--radius-sm);
  padding: 18px 18px 16px;
}
.cs-mistake-card h3 {
  font-size: .97rem; font-weight: 600; color: #b83232;
  margin: 0 0 6px;
}
.cs-mistake-card p { font-size: .9rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ---- Checklist domande da fare al fornitore --------------------------- */
.cs-checklist-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 26px 28px;
  margin: 28px 0 0;
}
.cs-checklist-box h3 {
  font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 16px;
}
.cs-checklist-box ol {
  margin: 0; padding: 0; list-style: none; counter-reset: cl;
}
.cs-checklist-box li {
  counter-increment: cl;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .96rem; color: var(--text);
}
.cs-checklist-box li:last-child { border-bottom: none; }
.cs-checklist-box li::before {
  content: counter(cl);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(31,111,147,.12); color: var(--teal-deep);
  font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}

/* ---- Tabella confronto ----------------------------------------------- */
.cs-compare-wrap { overflow-x: auto; margin: 28px 0 0; -webkit-overflow-scrolling: touch; }
.cs-compare {
  width: 100%; border-collapse: collapse; min-width: 560px;
  font-size: .94rem;
}
.cs-compare thead th {
  padding: 14px 16px; text-align: center;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  border-bottom: 2px solid var(--line);
}
.cs-compare thead th:first-child { text-align: left; }
.cs-compare thead th.cs-th-paper { background: #fafafa; color: var(--text-muted); }
.cs-compare thead th.cs-th-excel { background: #f0f7ed; color: #3d7336; }
.cs-compare thead th.cs-th-digital { background: rgba(31,111,147,.07); color: var(--teal-deep); }
.cs-compare tbody tr { border-bottom: 1px solid var(--line); }
.cs-compare tbody tr:last-child { border-bottom: none; }
.cs-compare tbody td { padding: 11px 16px; vertical-align: middle; text-align: center; }
.cs-compare tbody td:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.cs-ok  { color: #2e7d32; font-weight: 600; }
.cs-ko  { color: #b83232; }
.cs-mid { color: #c27c00; }

/* ---- Trigger list "quando passare" ------------------------------------ */
.cs-trigger-list {
  list-style: none; margin: 24px 0 0; padding: 0;
}
.cs-trigger-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cs-trigger-list li:first-child { padding-top: 0; }
.cs-trigger-list li:last-child { border-bottom: none; }
.cs-trigger-ico {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(31,111,147,.10); color: var(--teal);
}
.cs-trigger-ico svg { width: 18px; height: 18px; }
.cs-trigger-list strong { color: var(--ink); }

/* ---- Tabella IRIGuest (disponibilità feature) ------------------------- */
.cs-iri-table { width: 100%; border-collapse: collapse; margin: 24px 0 0; font-size: .94rem; }
.cs-iri-table th {
  padding: 12px 14px; text-align: left; font-size: .82rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 2px solid var(--line);
}
.cs-iri-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cs-iri-table tr:last-child td { border-bottom: none; }
.cs-iri-table .cs-iri-feat { font-weight: 500; color: var(--ink); }
.cs-iri-check { color: #2e7d32; font-weight: 700; font-size: 1.1rem; }
.cs-iri-opt   { color: var(--text-muted); font-size: .88rem; font-style: italic; }

/* ---- Box download PDF ------------------------------------------------- */
.cs-pdf-box {
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(135deg, rgba(31,111,147,.07) 0%, rgba(46,155,196,.06) 100%);
  border: 1px solid rgba(31,111,147,.18);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  margin: 34px 0 0;
}
.cs-pdf-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--teal); color: #fff;
}
.cs-pdf-ico svg { width: 26px; height: 26px; }
.cs-pdf-body h3 { font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.cs-pdf-body p  { font-size: .91rem; color: var(--text-muted); margin: 0 0 12px; }
.cs-pdf-body .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 580px) {
  .cs-pdf-box { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---- CTA IRIGuest dark (identica a .rd-iriguest-cta) ----------------- */
.cs-cta-dark {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 60%, #0E3344 100%);
  border-radius: var(--radius);
  padding: clamp(28px,4vw,44px) clamp(24px,4vw,42px);
  text-align: center;
  margin: 34px 0 0;
}
.cs-cta-dark h3 { font-size: clamp(1.3rem,2.4vw,1.75rem); color: #fff; margin: 0 0 10px; }
.cs-cta-dark p { font-size: 1rem; color: var(--invert-muted); margin: 0 0 22px; }
.cs-cta-dark .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 680px) {
  .cs-feat-grid { grid-template-columns: 1fr; }
  .cs-mistake-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .cs-checklist-box { padding: 18px 16px; }
  .cs-cta-dark .actions { flex-direction: column; align-items: center; }
}