/* ============================================================
   extra.css — componenti aggiuntivi per la landing DDS 101
   Coerente con tokens.css (apple-motion · Fraunces + Geist)
   ============================================================ */

/* Riga di attributi sintetici sotto un blocco percorso */
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 24px; }
.tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border: 1px solid var(--c-line); border-radius: 100px;
  background: var(--c-bg-warm); font-size: 14px; color: var(--c-navy);
}
.tag .k {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-sky);
}
.tag b { font-weight: 600; color: var(--c-navy); }

/* Processo a step */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Nota a piè di sezione */
.note {
  font-size: 14.5px; color: var(--c-muted); max-width: 70ch;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 20px; border-top: 1px solid var(--c-line);
}
.note b { color: var(--c-navy); }

/* Lista puntata su pannello (finanziamento) */
.ticks { display: grid; gap: 14px; }
.tick { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.tick svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--c-sky-bright); }
.tick p { margin: 0; font-size: 15.5px; }
.panel:not(.panel--accent) .tick svg { color: var(--c-sky); }

/* Doppio pulsante CTA */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Riga contatti */
.contact-list { display: grid; gap: 10px; margin-top: 8px; }
.contact-list a, .contact-list span { color: #C6D6E8; font-size: 16px; }
.contact-list a:hover { color: #fff; }
.contact-list .k {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-sky-bright); display: block; margin-bottom: 2px;
}

/* Equilibrio dei blocchi: percorsi 2+2, docenti 5+5 */
@media (min-width: 901px) {
  .cards--two .card { grid-column: span 6; }
}
.tools--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .tools--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tools--five { grid-template-columns: 1fr; } }