/* servizi.css: la pagina dei servizi (PIANO-PAGINE §4.3). Si carica DOPO shell.css e film.css.
   Ogni servizio e' una battuta del film (.cs-svc): la scheda dice il problema e cosa facciamo, la scena fa vedere l'uno e l'altro (servizi.js). */

/* indice in testa */
.cs-toc { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-top: var(--s-4); border-top: 1px solid rgb(245 243 238 / .12); }
.cs-toc .toc-h { font: 650 var(--t-xs)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: .35rem; }
.cs-toc ul { list-style: none; }
.cs-toc li { line-height: 1.3; }
.cs-toc a { display: inline-block; padding-block: .3rem; font-weight: 600; font-size: var(--t-sm); text-decoration: none; text-wrap: balance; }
.cs-toc a:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: .25em; }
@media (pointer: coarse) { .cs-toc a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; } }
@media (max-width: 47.99rem) { .cs-toc { grid-template-columns: 1fr 1fr; } .cs-toc > div:first-child { grid-column: 1 / -1; } }

/* le schede dei servizi: problema e soluzione con le stesse etichette delle nuvolette (rosso, verde) */
.cs-svc .cs-card { width: min(100%, 33rem); }
.tag { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--s-4); font: 650 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.tag::before { content: ''; width: .55rem; height: .55rem; border-radius: 2px; background: var(--mark-sol, #2fb67c); }
.tag.prob::before { background: var(--mark-prob, #e5484d); }
.cs-card > p.tag + p { margin-top: var(--s-2) !important; }
em { font-style: normal; color: var(--fg); background: linear-gradient(transparent 62%, rgb(0 255 229 / .22) 62%); }
.note { font-size: var(--t-sm); color: var(--fg-mute); margin-top: var(--s-3); }
.proof { margin-top: var(--s-4); padding: .9rem 1rem; border-left: 3px solid var(--cyan); background: rgb(245 243 238 / .04); font-size: var(--t-sm); line-height: 1.5; color: var(--fg-mute); }
.proof b { display: block; color: var(--fg); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3rem; }

/* come si comincia */
.cs-how { list-style: none; counter-reset: k; margin-top: var(--s-4); display: grid; gap: .9rem; }
.cs-how li { counter-increment: k; display: grid; grid-template-columns: 2.4rem 1fr; gap: .15rem .9rem; }
.cs-how li::before { content: counter(k); grid-row: span 2; font-family: var(--pixel); font-size: 2rem; line-height: 1; color: var(--cyan); }
.cs-how b { font-weight: 680; }
.cs-how span { color: var(--fg-mute); line-height: 1.45; }
.cs-end { height: 1px; }
.cs-svc h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; font-weight: 720; letter-spacing: -.02em; }