/* Compatibilità casi studio: vecchie variabili → token V2 (tema chiaro/scuro inclusi) */
.cs-v1{--mono:var(--f-mono);--sans:var(--f-display);--serif:var(--f-serif);--ink-0:var(--text);--ink-1:var(--text);--ink-2:var(--text-2);--ink-3:var(--text-3);--line-1:var(--line);--purple:var(--violet)}
.cs-v1{padding-top:clamp(64px,8vw,96px)}
.cs-v1 .eyebrow{margin-bottom:16px}
.cs-v1 .eyebrow .dot{display:none}
.cs-v1 .eyebrow>span:last-child{display:contents}
.cs-v1 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-v1 .grad-text-lime{color:var(--accent-ink)}
.cs-v1 .cs-hero-title{font-family:var(--f-display);font-weight:600;letter-spacing:-.045em;line-height:1.02;font-size:clamp(36px,4.6vw,68px)}
.cs-v1 .cs-hero-title em,.cs-v1 .cs-section-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em}
.cs-v1 .cs-section-title{font-family:var(--f-display);font-weight:600;letter-spacing:-.04em;line-height:1.04;font-size:clamp(30px,3.8vw,56px)}
.cs-v1 .cs-body-text{font-size:clamp(16.5px,1.3vw,18.5px)}
.cs-v1 .cs-crumbs{font-size:12.5px}
.cs-v1 .cs-meta-pill{font-size:12px;background:var(--surface)}
.cs-v1 .cs-section{border-top-color:var(--line)}
.cs-v1 [class*="cs-"][class*="label"],.cs-v1 .cs-info-label,.cs-v1 .cs-result-label{font-size:max(12px,1em)}
.cs-lang-note{max-width:var(--maxw);margin:0 auto -40px;padding:0 var(--gutter);font:500 12.5px var(--f-mono);color:var(--text-3)}
/* tema chiaro: superfici "vetro bianco" dei vecchi stili diventano leggibili */
[data-theme="light"] .cs-v1 [style*="rgba(255,255,255,.0"],[data-theme="light"] .cs-v1 .cs-meta-pill{background:var(--surface)}
.cs-v1 .eyebrow{white-space:normal;max-width:100%}.cs-v1 .cs-hero-grid>*,.cs-v1 .cs-2col>*{min-width:0}
@media (max-width:600px){.cs-v1 [style*="grid-template-columns:auto 1fr auto"]{grid-template-columns:auto 1fr!important}.cs-v1 [style*="grid-template-columns:auto 1fr auto"]>:nth-child(3){grid-column:2}}.cs-v1 [style*="grid-template-columns:auto 1fr auto"]>*{min-width:0}
.cs-v1 .cs-tl-body,.cs-v1 .cs-tl-item>*{min-width:0;overflow-wrap:anywhere}

/* CTA finali dei casi: su mobile pulsanti uno sotto l'altro, a tutta larghezza */
@media (max-width:560px){.cs-v1 .cs-cta-buttons{flex-direction:column;align-items:stretch}.cs-v1 .cs-cta-buttons>a{justify-content:center;text-align:center}}

/* ============================================================
   Contrasto (WCAG AA): colori pensati per il fondo scuro → versioni leggibili sul tema chiaro
   ============================================================ */
.cs-v1 .cs-code .cm,.cs-v1 .cs-code-body .cm{color:#7c7f8a}
[data-theme="light"] .cs-v1 .cs-btn-primary{background:var(--text);color:var(--bg)}
[data-theme="light"] .cs-v1 :is([style*="color:var(--lime)"],.cs-result-num,.cs-result-num *){color:var(--accent-ink)!important;-webkit-text-fill-color:var(--accent-ink)}
[data-theme="light"] .cs-v1 :is([style*="color:var(--cyan)"],[style*="color:rgba(34,211,238"],.cs-crumbs .cur){color:#0e7490!important}
[data-theme="light"] .cs-v1 [style*="color:#C9A04A" i]{color:#7d5a12!important}
[data-theme="light"] .cs-v1 [style*="color:#FBBF24" i]{color:#92400e!important}
[data-theme="light"] .cs-v1 .cs-annotation strong{color:#92400e}
[data-theme="light"] .cs-v1 .cs-ch-num{color:var(--text-3)}
[data-theme="light"] .cs-v1 td.pos{color:#6d28d9}
/* blocchi di codice: restano scuri anche nel tema chiaro (i colori della sintassi sono per il fondo scuro) */
[data-theme="light"] .cs-v1 .cs-code-block{background:#0e0e16;border-color:#1e1e2e}
[data-theme="light"] .cs-v1 .cs-code-block .cs-code-header{color:#b794f6}
/* contrasto (tema scuro): etichette secondarie dei mockup troppo tenui */
.cs-v1 .cs-code-block .cs-code-header{color:#b794f6}
.cs-v1 .cs-gbp-bar-label{color:var(--text-3)}
.cs-v1 [style*="color:rgba(249,115,22,.5)"]{color:rgba(249,115,22,.85)!important}
.cs-v1 .cs-code [style*="color:rgba(255,255,255,.3)"],.cs-v1 [class*="code"] [style*="color:rgba(255,255,255,.3)"]{color:rgba(255,255,255,.55)!important}

/* ============================================================
   Scenari di progetto (inc/scenari.php): corpo della pagina dopo l'hero
   ============================================================ */
.cs-v1 .scn .cs-wrap,.cs-v1 .scn-cta .cs-wrap{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.scn-label{margin:0 0 12px;font:500 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.scn-note{position:relative;max-width:920px;padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,30px);border:1px solid color-mix(in srgb,var(--lime) 30%,var(--line));border-radius:22px;background:color-mix(in srgb,var(--lime) 5%,var(--surface))}
.scn-note .scn-label{color:var(--accent-ink)}
.scn-note p:last-child{margin:0;color:var(--text-2);font-size:clamp(15.5px,1.15vw,17px);line-height:1.65}
.scn-start{max-width:880px}
.scn-lead{margin:0;font:400 clamp(19px,1.7vw,24px)/1.5 var(--f-body);letter-spacing:-.01em;color:var(--text)}
.cs-v1 .scn-h{margin:0}
.scn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
.scn-step{position:relative;padding:22px 20px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:border-color .3s,transform .5s var(--ease)}
.scn-step:hover{border-color:var(--line-3);transform:translateY(-3px)}
.scn-step::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;border-radius:2px;background:var(--grad);opacity:.7}
.scn-n{display:block;margin-bottom:14px;font:500 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.scn-step h3{margin:0 0 8px;font:600 clamp(18px,1.4vw,21px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.scn-step p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.scn-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.scn-box{padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.scn-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.scn-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--text)}
.scn-list .ic{margin-top:3px;color:var(--accent-ink)}
.scn-time{margin:0 0 22px;font:600 clamp(24px,2.2vw,32px)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--text)}
.scn-chips{display:flex;flex-wrap:wrap;gap:8px}
.scn-chips span{padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;font:500 12.5px var(--f-mono);color:var(--text-2);background:var(--surface)}
.scn-cta-card{position:relative;overflow:hidden;padding:clamp(28px,4vw,56px);border:1px solid var(--line-2);border-radius:30px;background:radial-gradient(600px 300px at 90% -20%,color-mix(in srgb,var(--violet) 18%,transparent),transparent 70%),var(--surface)}
.scn-cta-card .cs-section-title{margin:0 0 12px}
.scn-cta-card>p{max-width:620px;margin:0 0 26px;color:var(--text-2);font-size:clamp(16px,1.2vw,18px);line-height:1.6}
.scn-cta-b{display:flex;flex-wrap:wrap;gap:12px}
.scn-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.scn-nav a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:border-color .3s,transform .5s var(--ease)}
.scn-nav a:hover{border-color:var(--line-3);transform:translateY(-2px)}
.scn-nav-next{text-align:right;align-items:flex-end}
.scn-nav small{font:500 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.scn-nav b{font:600 clamp(18px,1.5vw,22px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.scn-nav span{font-size:14px;color:var(--text-3)}
@media (max-width:1024px){.scn-steps{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.scn-steps,.scn-cols,.scn-nav{grid-template-columns:1fr}.scn-nav-next{text-align:left;align-items:flex-start}.scn-cta-b .btn{width:100%;justify-content:space-between}}

/* Punteggi PageSpeed (caso portfolio): 4 colonne se c'è spazio, altrimenti 2x2; le etichette non si spezzano a metà parola */
.cs-v1 .cs-scores{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.cs-v1 .cs-score-card{padding:18px 10px}
.cs-v1 .cs-score-num{font-size:clamp(28px,2.6vw,36px)}
.cs-v1 .cs-score-label{font-size:10px;letter-spacing:.04em;line-height:1.35}
/* riga "Mobile" (stili in linea dell'originale): sempre 4 colonne uguali */
.cs-v1 .cs-hero-mockup div[style*="flex-wrap:wrap"]{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-v1 .cs-hero-mockup div[style*="min-width:80px"]{min-width:0!important}
.scn-note-top{margin-bottom:clamp(36px,5vw,64px)}
.scn-note-top .scn-note{max-width:none}