/* MARCA_87401_COME_FUNZIONA — foglio di stile della pagina «Come funziona» (consegna 87401, 4/10/2026, D662-D676, D684).
   Si appoggia a quello che c'e' gia' (sito.css, pagine-info.css): qui stanno solo le poche cose che la pagina
   ha di suo. Per toglierlo: consegna 87402. */

/* i mestieri: pastiglie che vanno a capo, ognuna alta almeno 44 punti (si prende col dito) */
.cf-mestieri{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cf-mestieri li{margin:0;max-width:none}
.cf-mestieri a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-strong);font-size:15px;font-weight:700;
  text-decoration:none;transition:background var(--tr),border-color var(--tr),color var(--tr)}
.cf-mestieri a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){
  .cf-mestieri a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
}
.cf-mestieri + .gruppo-bottoni{margin-top:22px}

/* il riquadro finale: testo e pulsanti a sinistra (D684), come il resto della pagina */
.cf-richiamo{text-align:left;padding:clamp(24px,3.4vw,40px)}
.cf-richiamo h2{max-width:22ch}
.cf-richiamo p{margin-inline:0;max-width:60ch}
.cf-richiamo .gruppo-bottoni{justify-content:flex-start}

/* le schede delle funzioni: il collegamento in fondo ha sempre la stessa altezza */
.pi-scheda .pi-vai{align-self:flex-start}

/* il titolo di ogni gruppo non si centra mai */
.fascia .pi-testa:not(.centrata){text-align:left}