/* Pagina Sperimentazione: solo regole di pagina. Tema, header, footer, pulsanti, hero e pannello finale sono in ../theme.css. */

.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.step{min-width:0;padding:clamp(1.5rem,2.4vw,2rem)}
.step-number{display:block;font-size:2.5rem;font-weight:300;line-height:1;color:var(--bright)}
.step .eyebrow{margin:1.25rem 0 .5rem}
.step>p:last-child{margin-top:.75rem;font-size:.9688rem;color:var(--muted)}

.principle{padding:clamp(3.5rem,8vw,7rem) var(--gutter);border-top:1px solid var(--line-soft)}
.principle-inner{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:clamp(1.75rem,4vw,3.5rem);border:1px solid var(--line);border-radius:28px;background:radial-gradient(ellipse at 88% 0,rgba(38,154,226,.2),transparent 55%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.principle-inner>p{max-width:46rem;margin-top:1.5rem;font-size:1.125rem;color:var(--muted)}
.principle-inner>.principle-visual{position:absolute;z-index:-1;top:50%;right:-5rem;width:min(26rem,48vw);height:auto;margin-top:-13rem;opacity:.9}
.pv-ring{fill:none;stroke:var(--line);stroke-width:1.5}
.pv-dash{stroke:var(--accent);stroke-dasharray:3 10;stroke-linecap:round}
.pv-dot{fill:var(--bright)}
.pv-core{fill:rgba(38,154,226,.18);stroke:var(--accent);stroke-width:1.5}
@media(prefers-reduced-motion:no-preference){
@keyframes pv-spin{to{rotate:360deg}}
.principle-visual{animation:pv-spin 90s linear infinite}
}
.case .icon{margin-bottom:1.25rem}

.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.case{min-width:0;padding:clamp(1.5rem,2.4vw,2rem)}
.case-status{margin-bottom:.75rem;font-size:.875rem;font-weight:600;color:var(--bright)}
.case h3{max-width:24ch;font-size:1.5rem}
.case>p:last-child{max-width:52ch;margin-top:.75rem;font-size:.9688rem;color:var(--muted)}
.case-note{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line-soft);font-size:.9375rem;color:var(--muted)}
.cases .text-link{margin-top:1.25rem}

.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.evidence-grid>div p{max-width:56ch;color:var(--muted)}
.evidence-grid>div>p+p{margin-top:1rem}

@media(max-width:900px){
  .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-heading,.evidence-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .principle-inner>.principle-visual{opacity:.35}
  .step-grid,.case-grid{grid-template-columns:1fr}
}