/* SchieraXI: sito di presentazione. Nessun font o file esterno. Colori da MARCHIO.md.
   Animazioni solo con transform/opacity (e translate/scale), rispettano prefers-reduced-motion. */
@view-transition { navigation: auto; }

:root {
  color-scheme: light dark;
  --sfondo: #f4f9f4; --carta: #ffffff; --carta-2: #eaf3ee; --testo: #10201a; --tenue: #475a50;
  --bordo: #cfdcd3; --azione: #526600; --azione-testo: #ffffff; --capitano: #86a800; --capitano-testo: #1a2600;
  --verde: #0a7d4c; --grad-c: #0a7d4c; --glow: rgba(134, 168, 0, .28); --glow-2: rgba(18, 92, 66, .22); --xi: #378000;
  --campo-1: #125c42; --campo-2: #06281e; --punto: #eaf6ee;
  --ombra: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 34px rgba(0, 0, 0, .16);
  --molla: cubic-bezier(.34, 1.45, .5, 1); --fluida: cubic-bezier(.22, .8, .2, 1);
  --margine: clamp(1rem, 4vw, 3.5rem); --max: 72rem; --alto-cab: 3.75rem;
  --sez: clamp(3.5rem, 5vw + 1.5rem, 9rem);
  --alto: calc(var(--alto-cab) + env(safe-area-inset-top, 0px));
}
@supports (color: light-dark(red, blue)) {
  :root {
    --sfondo: light-dark(#f4f9f4, #07100b); --carta: light-dark(#ffffff, #0e1b14); --carta-2: light-dark(#eaf3ee, #12241a);
    --testo: light-dark(#10201a, #eef6f0); --tenue: light-dark(#475a50, #a9bdb1);
    --bordo: light-dark(#cfdcd3, rgba(255, 255, 255, .14)); --azione: light-dark(#526600, #3ddc97);
    --azione-testo: light-dark(#ffffff, #04301c); --capitano: light-dark(#86a800, #d4f34a);
    --verde: light-dark(#0a7d4c, #3ddc97); --grad-c: light-dark(#0a7d4c, #d4f34a); --glow: light-dark(rgba(134, 168, 0, .28), rgba(212, 243, 74, .16));
    --glow-2: light-dark(rgba(18, 92, 66, .22), rgba(61, 220, 151, .18)); --xi: light-dark(#378000, #d4f34a);
  }
}
:root[data-tema="chiaro"] { color-scheme: light; }
:root[data-tema="scuro"] { color-scheme: dark; }
@media (min-width: 100rem) { :root { --max: 88rem; } }
@media (min-width: 140rem) { :root { --max: 105rem; } }
@media (min-width: 187rem) { :root { --max: 125rem; } }
@media (min-width: 80em) and (max-height: 40rem) { :root { --alto-cab: 3.25rem; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--alto) + 1rem); -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, .42vw + .7rem, 185%);
}
body {
  margin: 0; background: var(--sfondo); color: var(--testo); overflow-x: clip;
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
img, svg { max-width: 100%; }
a { color: var(--azione); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--azione); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, .8rem + 3.7vw, 5.8rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.6rem); }
h3 { font-size: clamp(1.1rem, .9rem + .5vw, 1.55rem); letter-spacing: -.01em; }
.salta { position: fixed; left: .5rem; top: -4rem; background: var(--azione); color: var(--azione-testo); padding: .6rem 1rem; border-radius: .5rem; z-index: 200; }
.salta:focus { top: .5rem; }
.cont { width: min(100% - 2 * var(--margine), var(--max)); margin-inline: auto; }
.sopra { font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--azione); margin-bottom: .8rem; }
.intro { font-size: clamp(1.05rem, .95rem + .45vw, 1.5rem); color: var(--tenue); max-width: 42ch; }
.sotto { color: var(--tenue); font-size: .95rem; }
.sez { padding-block: var(--sez); position: relative; }
.sez-alt { background: var(--carta); border-block: 1px solid var(--bordo); }
.lunga { content-visibility: auto; contain-intrinsic-size: auto 36rem; }

/* progresso di lettura (solo dove il browser sa legarlo allo scorrimento) */
.avanzamento { display: none; }
@supports (animation-timeline: scroll()) {
  .avanzamento {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--azione), var(--capitano)); animation: prog linear both; animation-timeline: scroll(root);
  }
}
@keyframes prog { to { transform: scaleX(1); } }

/* testata */
.alto {
  position: fixed; inset: 0 0 auto 0; z-index: 100; view-transition-name: alto; padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--sfondo) 78%, transparent); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.alto .cab { width: min(100% - 2 * var(--margine), var(--max)); margin-inline: auto; min-height: var(--alto-cab); display: flex; align-items: center; gap: 1rem; }
body.dopo-eroe .alto { border-bottom-color: var(--bordo); }
.nome { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; color: var(--testo); text-decoration: none; margin-right: auto; }
.nome img { width: 2.1rem; height: 2.1rem; border-radius: .55rem; transition: transform .5s var(--molla); }
.nome:hover img { transform: rotate(-8deg) scale(1.1); }
.menu { display: none; gap: 1.1rem; }
.menu a { color: var(--testo); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .3rem 0; position: relative; }
.menu a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--azione); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--fluida); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.menu a[aria-current] { color: var(--azione); }
@media (min-width: 52rem) { .menu { display: flex; } }
.cab-azioni { display: flex; align-items: center; gap: .6rem; }
.icona, .lingua {
  display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--bordo); border-radius: 999px;
  background: transparent; color: var(--testo); font: inherit; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; transition: transform .25s var(--molla), border-color .2s, background .2s;
}
.icona:hover, .lingua:hover { border-color: var(--azione); transform: translateY(-1px); }
.icona:active, .lingua:active { transform: scale(.94); }
.tema-btn svg { width: 1.2rem; height: 1.2rem; }
.tema-btn .i-chiaro, .tema-btn .i-scuro { display: none; }
:root[data-tema="chiaro"] .tema-btn .i-chiaro, :root[data-tema="scuro"] .tema-btn .i-scuro { display: block; }
:root[data-tema="chiaro"] .tema-btn .i-auto, :root[data-tema="scuro"] .tema-btn .i-auto { display: none; }
.tasto.tasto-cab { display: none; }
@media (min-width: 52rem) { body.dopo-eroe .tasto.tasto-cab { display: inline-flex; animation: entra .4s var(--molla) both; } }
@keyframes entra { from { opacity: 0; scale: .85; } }

/* pulsanti */
.tasto {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .55rem 1.4rem;
  border-radius: .85rem; font-weight: 800; text-decoration: none; border: 2px solid var(--azione); background: var(--azione); color: var(--azione-testo);
  cursor: pointer; font-size: 1rem; overflow: hidden; isolation: isolate; transition: translate .2s var(--fluida), scale .2s var(--molla), box-shadow .25s;
}
.tasto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); z-index: -1; }
.tasto:hover::before { transform: translateX(120%); transition: transform .7s var(--fluida); }
.tasto:hover { box-shadow: 0 8px 26px var(--glow-2); }
.tasto:active { scale: .96; }
.tasto.secondario { background: transparent; color: var(--azione); }
.tasto.piccolo { min-height: 2.5rem; padding: .3rem 1rem; font-size: .92rem; border-radius: .7rem; }
.tasto.grande { min-height: 3.4rem; padding-inline: 2rem; font-size: 1.12rem; }
.tasto svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--molla); }
.tasto:hover svg { transform: translateX(3px); }
.etichetta { display: inline-flex; align-items: center; min-height: 3rem; padding: .5rem 1.2rem; border: 2px dashed var(--bordo); border-radius: .85rem; color: var(--tenue); font-weight: 600; }
.azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1rem; }

/* comparsa allo scorrimento (solo con JS) */
.js .r { opacity: 0; translate: 0 1.6rem; transition: opacity .7s var(--fluida), translate .7s var(--fluida); transition-delay: calc(var(--i, 0) * 90ms); }
.js .r.r-sx { translate: -2.4rem 0; }
.js .r.visto, .rivela-tutto .r { opacity: 1; translate: none; }
.js .r.visto { will-change: auto; }

/* prima schermata */
.eroe { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--alto) + 2rem) 0 clamp(3rem, 6vw, 6rem); overflow: clip; isolation: isolate; }
.fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--carta-2), var(--sfondo) 70%); }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.b1 { width: 55vmax; height: 55vmax; left: -15vmax; top: -20vmax; background: radial-gradient(closest-side, var(--glow), transparent); animation: deriva 22s ease-in-out infinite alternate; }
.b2 { width: 50vmax; height: 50vmax; right: -12vmax; bottom: -22vmax; background: radial-gradient(closest-side, var(--glow-2), transparent); animation: deriva 28s ease-in-out -9s infinite alternate-reverse; }
.b3 { width: 28vmax; height: 28vmax; right: 18%; top: 8%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .6; animation: deriva 18s ease-in-out -4s infinite alternate; }
@keyframes deriva { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.15); } }
.linee { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; color: var(--verde); }
@supports (animation-timeline: scroll()) {
  .b1, .b3 { animation: deriva 22s ease-in-out infinite alternate, para linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100svh; }
  .linee { animation: para linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
}
@keyframes para { to { translate: 0 22vh; } }
.eroe-in { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .eroe-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.eroe-testo { max-width: 52rem; }
h1 .riga { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
h1 .riga > span { display: inline-block; animation: sale .9s var(--fluida) both; }
h1 .riga:nth-child(2) > span { animation-delay: .12s; }
@keyframes sale { from { transform: translateY(105%); } }
.grad { background: linear-gradient(95deg, var(--azione), var(--grad-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eroe .sopra, .eroe .pron, .eroe .intro, .eroe .azioni, .eroe .slogan, .eroe .sotto { animation: sfuma .8s var(--fluida) both; }
.eroe .sopra { animation-delay: .05s; } .eroe .intro { animation-delay: .3s; } .eroe .azioni { animation-delay: .42s; } .eroe .sotto { animation-delay: .6s; } .eroe .nome-gioco { animation-delay: .1s; } .eroe .pron { animation-delay: .2s; } .eroe .slogan { animation-delay: .5s; }
@keyframes sfuma { from { opacity: 0; translate: 0 1rem; } }
.eroe-campo { --t0: 2.5s; justify-self: center; width: 100%; perspective: 1000px; }
.campo-hero {
  --d: clamp(1.6rem, 10cqw, 3.2rem); position: relative; container-type: size; aspect-ratio: 4 / 5; width: min(100%, 36rem, 66svh * .8); margin-inline: auto;
  border-radius: 1.6rem; background: radial-gradient(circle at 50% 40%, var(--campo-1), var(--campo-2)); color: var(--campo-2);
  box-shadow: 0 30px 80px -20px rgba(6, 40, 30, .55), inset 0 0 0 1px rgba(234, 246, 238, .12);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--fluida); animation: entra-campo 1s var(--molla) .15s both;
}
@keyframes entra-campo { from { opacity: 0; translate: 0 2rem; scale: .94; } }
.linee-campo { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(234, 246, 238, .28); }
.pt {
  position: absolute; left: 0; top: 0; width: var(--d); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--punto); font-weight: 800; font-size: calc(var(--d) * .38); will-change: transform;
  transform: translate(calc(var(--x) * 1cqw - 50%), calc(var(--y) * 1cqh - 50%)) scale(var(--s));
  transition: transform 1.05s cubic-bezier(.34, 1.5, .6, 1), background .5s, opacity .5s; transition-delay: calc(var(--k, 0) * 35ms);
  animation: pop .7s var(--molla) calc(var(--t0, .3s) + var(--k, 0) * 70ms) both;
}
.pt.cap { background: #d4f34a; box-shadow: 0 0 0 .35rem rgba(212, 243, 74, .22); }
.pt.cap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #d4f34a; animation: anello 2.2s ease-out calc(var(--t0, .3s) + 1.4s) infinite; }
@property --s { syntax: "<number>"; inherits: false; initial-value: 1; }
@keyframes pop { from { --s: 0; opacity: 0; } }
.chip-modulo { position: absolute; left: 50%; top: .9rem; translate: -50% 0; background: rgba(6, 40, 30, .7); color: var(--punto); border: 1px solid rgba(234, 246, 238, .25); border-radius: 999px; padding: .15rem .9rem; font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.didascalia { text-align: center; font-size: .85rem; color: var(--tenue); margin: 1rem 0 0; }
.glare { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.glare::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; left: 10%; top: 10%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); translate: calc(var(--gx, 50%) - 50%) calc(var(--gy, 50%) - 50%); opacity: 0; transition: opacity .3s; }
[data-tilt]:hover .glare::before { opacity: 1; }
.scorri { position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0; width: 2.4rem; height: 2.4rem; display: none; place-items: center; color: var(--tenue); animation: rimbalza 2s ease-in-out infinite; }
@media (min-height: 40rem) and (min-width: 56rem) { .scorri { display: grid; } }
@keyframes rimbalza { 50% { transform: translateY(.5rem); } }

/* schermi ultra larghi (21:9, 32:9): una terza colonna con due schede di esempio */
.eroe-lato { display: none; }
@media (min-aspect-ratio: 9/5) and (min-width: 112rem) {
  .eroe-in { grid-template-columns: minmax(0, 1.1fr) auto minmax(0, .8fr); }
  .eroe-campo { width: min(26vw, 78svh * .8); }
  .campo-hero { width: 100%; }
  .eroe-testo { max-width: 64rem; }
  .eroe-lato { display: grid; gap: 1.2rem; align-content: center; max-width: 30rem; }
  .carta-lato { background: color-mix(in srgb, var(--carta) 82%, transparent); border: 1px solid var(--bordo); border-radius: 1.3rem; padding: 1.3rem; box-shadow: var(--ombra); backdrop-filter: blur(10px); animation: fluttua 7s ease-in-out infinite alternate, sfuma 1s var(--fluida) .5s both; }
  .carta-lato.c2 { animation-delay: -3s, .8s; margin-left: 2.5rem; }
  .carta-lato .esempio { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--tenue); border: 1px dashed var(--bordo); border-radius: 999px; padding: 0 .6rem; margin-bottom: .5rem; }
  .mk-t { font-size: .85rem; color: var(--tenue); margin: 0; }
  .mk-g { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 0; }
  .mk-r { margin: .5rem 0; font-weight: 600; }
}
@keyframes fluttua { to { transform: translateY(-.8rem); } }

/* cosa facciamo e numeri */
.doppia { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .doppia { grid-template-columns: 1fr 1fr; } }
.doppia p:not(.sopra):not(.intro) { max-width: 60ch; }
.numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 140rem) { .numeri { grid-template-columns: repeat(4, 1fr); } }
.numeri li { background: var(--carta); border: 1px solid var(--bordo); border-radius: 1.2rem; padding: 1.2rem; }
.sez-alt .numeri li { background: var(--sfondo); }
.numeri strong { display: block; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--azione), var(--verde)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numeri span { color: var(--tenue); font-size: .95rem; }


/* il nome: Schierali -> SchieraXI (la L diventa X, la I si fa grande) */
.xi { color: var(--xi); }
.slogan { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin: .2rem 0 .8rem; }
.cta-finale .xi { color: #d4f34a; }
.evid { background: linear-gradient(transparent 64%, color-mix(in srgb, var(--capitano) 42%, transparent) 64%); }
footer .xi { font-weight: 800; }

/* linee del campo che si disegnano; panchina */
.dis { stroke-dasharray: 1; stroke-dashoffset: 1; animation: disegna 2s var(--fluida) .2s forwards; }
@keyframes disegna { to { stroke-dashoffset: 0; } }
.campo-hero .panca-sfondo { inset: 89.5% 0 0 0; border-radius: 0 0 1.6rem 1.6rem; }
.pt.pan { opacity: .8; --s: .72; }
.pt.entra::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #d4f34a; animation: anello 1.1s ease-out; }
@keyframes anello { from { transform: scale(1); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }

/* cosa ti dice: il campo che reagisce allo scorrimento */
.storia { display: grid; gap: 1.5rem; }
.storia-vis { position: sticky; top: var(--alto); z-index: 3; padding: .6rem 0 2.6rem; background: var(--sfondo); box-shadow: 0 1.2rem 1rem -.6rem var(--sfondo); }
.campo-storia { --t0: 0s; width: min(100%, 24rem, 36svh * .8); }
.campo-storia .pt { animation: none; }
.campo-storia .pt::before { animation: none; }
.campo-storia .pt { font-weight: 800; }
.campo-storia .pt em { font-style: normal; font-size: calc(var(--d) * .36); }
.campo-storia .pt b { position: absolute; left: 50%; bottom: calc(100% + .1rem); translate: -50% 0; background: #0b1f16; color: #eef6f0; border: 1px solid rgba(234, 246, 238, .35); border-radius: 999px; padding: 0 .35em; font-size: calc(var(--d) * .32); line-height: 1.35; font-variant-numeric: tabular-nums; }
.campo-storia .pt i { position: absolute; left: 0; top: calc(100% + .18rem); width: 100%; height: .22rem; border-radius: 9px; background: #d4f34a; transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--fluida); }
.campo-storia.p1 .pt i { transform: scaleX(var(--v, 1)); }
.campo-storia.p1 .pt.dub { outline: 2px dashed #ffb4b4; outline-offset: 2px; }
.campo-storia .pt.out { background: #ff7b7b; }
.campo-storia .pt.out em, .campo-storia .pt.out b, .campo-storia .pt.out i { opacity: 0; }
.campo-storia .pt.out::before { content: "\271A"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--d) * .5); color: #5a0b0b; }
.campo-storia.p3 .pt.pan::before { content: attr(data-ord); position: absolute; right: -.25em; top: -.25em; width: 1.5em; aspect-ratio: 1; border-radius: 50%; background: #d4f34a; color: #1a2600; font-size: calc(var(--d) * .3); display: grid; place-items: center; }
.leg { position: absolute; top: 100%; left: 0; right: 0; margin-top: .7rem; text-align: center; font-weight: 800; color: var(--azione); opacity: 0; translate: 0 .6rem; transition: opacity .4s, translate .5s var(--fluida); pointer-events: none; }
.campo-storia[data-passo="0"] .l0, .campo-storia[data-passo="1"] .l1, .campo-storia[data-passo="2"] .l2, .campo-storia[data-passo="3"] .l3 { opacity: 1; translate: none; }
.passo { min-height: 56svh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s; }
.passo.att { opacity: 1; }
.passo .n { font-size: clamp(2.6rem, 2rem + 3vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--azione); margin-bottom: .6rem; }
.passo p { max-width: 52ch; }
.come-si-legge { background: var(--carta); border-left: 4px solid var(--capitano); border-radius: 0 .8rem .8rem 0; padding: .7rem 1rem; color: var(--tenue); }
@media (max-width: 55.99rem) { .campo-storia .chip-modulo { display: none; } }
html:not(.js) .storia-vis { display: none; }
html:not(.js) .passo { opacity: 1; min-height: 0; padding: 1.2rem 0; }
@media (min-width: 56rem) {
  .storia { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; }
  .storia-vis { top: calc(var(--alto) + 1rem); align-self: start; background: none; box-shadow: none; padding: 0 0 3rem; }
  .campo-storia { width: min(100%, 34rem, 62svh * .8); }
  .passo { min-height: 78svh; }
}

/* formula con i cursori */
.colonna-d { display: grid; gap: 1.2rem; }
.fr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: baseline; margin-bottom: 1rem; }
.fr input { grid-column: 1 / -1; width: 100%; accent-color: var(--azione); height: 1.8rem; }
.fr .barra-p { grid-column: 1 / -1; margin: 0; }
.fr label, .fr > span { font-weight: 700; }
.fr output { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.35rem; }
.fr.tot output { font-size: 2.4rem; letter-spacing: -.03em; }
.fr.tot > span { color: var(--azione); }
.formula .sotto { min-height: 3em; margin: 0; }

/* demo */
.demo-sez { background: radial-gradient(90% 60% at 20% 0%, var(--glow), transparent), var(--sfondo); }
.intest { max-width: 52rem; margin-bottom: 2rem; }
.demo > * { min-width: 0; }
.demo { display: none; gap: clamp(1.2rem, 3vw, 3rem); align-items: start; }
.js .demo { display: grid; }
@media (min-width: 60rem) { .demo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.senza-js { background: var(--carta); border: 1px dashed var(--bordo); border-radius: 1rem; padding: 1rem 1.2rem; }
.js .senza-js { display: none; }
.moduli { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-width: 0; }
.moduli legend { float: left; margin-right: .8rem; font-weight: 700; padding: 0; line-height: 2.6rem; }
.moduli label { position: relative; }
.moduli input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.moduli span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; border: 2px solid var(--bordo); font-weight: 800; font-variant-numeric: tabular-nums; transition: background .25s, color .25s, border-color .25s, scale .25s var(--molla); background: var(--carta); }
.moduli label:hover span { border-color: var(--azione); }
.moduli input:checked + span { background: var(--azione); color: var(--azione-testo); border-color: var(--azione); scale: 1.06; }
.moduli input:focus-visible + span { outline: 3px solid var(--azione); outline-offset: 3px; }
.demo-campo {
  position: relative; container-type: size; aspect-ratio: 100 / 118; width: min(100%, 40rem, 76svh * .85); margin-inline: auto; border-radius: 1.4rem;
  background: radial-gradient(circle at 50% 38%, var(--campo-1), var(--campo-2)); box-shadow: var(--ombra), inset 0 0 0 1px rgba(234, 246, 238, .12); touch-action: manipulation; user-select: none;
}
.demo-campo .linee-campo { color: rgba(234, 246, 238, .3); }
.panca-sfondo { position: absolute; inset: 86% 0 0 0; background: rgba(0, 0, 0, .28); border-radius: 0 0 1.4rem 1.4rem; border-top: 1px dashed rgba(234, 246, 238, .3); }
.panca-sfondo span { position: absolute; left: .6rem; top: -1.25em; font-size: clamp(.6rem, 2.3cqw, .75rem); color: rgba(234, 246, 238, .75); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.gioc {
  --d: clamp(2.1rem, 10.5cqw, 3.5rem); position: absolute; left: 0; top: 0; width: calc(var(--d) * 1.6); display: grid; justify-items: center; gap: .15rem; padding: 0; border: 0; background: none; color: #eef6f0; font: inherit; cursor: grab;
  transform: translate(calc(var(--x, 50) * 1cqw - 50%), calc(var(--y, 50) * 1cqh - 50%)); transition: transform .8s cubic-bezier(.34, 1.45, .55, 1) calc(var(--k, 0) * 28ms); will-change: transform; touch-action: manipulation;
}
.gioc.arrastra { transition: none; z-index: 20; cursor: grabbing; }
.faccia { width: var(--d); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: calc(var(--d) * .36); color: #06281e; background: var(--punto); border: .17rem solid var(--ring, #eaf6ee); transition: box-shadow .3s, scale .3s var(--molla); }
.r-P { --ring: #ffd166; } .r-D { --ring: #4cc9f0; } .r-C { --ring: #80ed99; } .r-A { --ring: #ff9b9b; }
.ruolo { position: absolute; left: calc(50% - var(--d) * .62); top: 0; width: calc(var(--d) * .36); aspect-ratio: 1; border-radius: 50%; background: var(--campo-2); color: var(--ring); border: 1px solid var(--ring); font-size: calc(var(--d) * .22); font-weight: 800; display: grid; place-items: center; }
.pt-e { position: absolute; right: calc(50% - var(--d) * .72); top: calc(var(--d) * -.08); background: #0b1f16; color: #eef6f0; border: 1px solid rgba(234, 246, 238, .35); border-radius: 999px; padding: 0 .35em; font-size: clamp(.58rem, 2.4cqw, .75rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.gioc .etq { font-size: clamp(.58rem, 2.6cqw, .8rem); font-weight: 700; margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.gioc.dubbio .faccia { border-style: dashed; opacity: .85; }
.gioc.top .faccia { box-shadow: 0 0 0 .22rem rgba(212, 243, 74, .55), 0 0 1.2rem rgba(212, 243, 74, .55); }
.gioc[data-ord]::before { content: attr(data-ord); position: absolute; left: calc(50% + var(--d) * .3); top: calc(var(--d) * .62); width: 1.1em; aspect-ratio: 1; border-radius: 50%; background: #d4f34a; color: #1a2600; font-size: clamp(.55rem, 2.3cqw, .72rem); font-weight: 800; display: grid; place-items: center; z-index: 1; }
@media (hover: hover) { .gioc:hover .faccia { scale: 1.1; } }
.gioc.sel .faccia { box-shadow: 0 0 0 .3rem #fff, 0 0 1.6rem rgba(255, 255, 255, .6); scale: 1.12; }
.gioc.bersaglio .faccia { animation: invita 1.1s ease-in-out infinite; box-shadow: 0 0 0 .22rem #d4f34a; }
@keyframes invita { 50% { scale: 1.1; } }
.gioc.no .faccia { animation: scuoti .4s; }
@keyframes scuoti { 20%, 60% { rotate: -9deg; } 40%, 80% { rotate: 9deg; } }
.demo-campo.scelto .gioc:not(.sel):not(.bersaglio) { opacity: .55; }
.aiuto { color: var(--tenue); font-size: .92rem; margin: 1rem 0 0; }
.demo-dx { display: grid; gap: 1rem; }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 1.2rem; padding: clamp(1rem, 2vw, 1.5rem); }
.sez-alt .scheda { background: var(--sfondo); }
.totale .tit { color: var(--tenue); font-weight: 700; margin: 0; }
.num-grande { display: block; font-size: clamp(3rem, 2rem + 3.4vw, 5.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.conf { display: inline-block; border-radius: 999px; padding: .15rem .8rem; background: var(--carta-2); font-weight: 700; font-size: .9rem; margin-top: .5rem; }
.conf.ok { background: color-mix(in srgb, var(--capitano) 30%, transparent); }
.dettaglio h3 { margin-bottom: .1rem; }
.dettaglio dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: .8rem 0; }
.dettaglio dt { color: var(--tenue); } .dettaglio dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.barra-p { height: .6rem; border-radius: 99px; background: var(--carta-2); overflow: hidden; margin-bottom: .8rem; }
.barra-p i { display: block; height: 100%; background: linear-gradient(90deg, var(--azione), var(--capitano)); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform .5s var(--fluida); }
.stato { min-height: 3.2em; color: var(--tenue); font-size: .95rem; margin: 0; }
.etichetta-demo { font-size: .85rem; color: var(--tenue); border-top: 1px dashed var(--bordo); padding-top: .8rem; margin: 0; }

.scelte { display: grid; margin-bottom: .4rem; }
.moduli { margin: 0 0 .5rem; }
.moduli legend { min-width: 5.2rem; }
.gioc .etq { margin-top: .3rem; }
.pr { position: absolute; left: 50%; top: calc(var(--d) + .14rem); width: var(--d); translate: -50% 0; height: .22rem; border-radius: 9px; background: rgba(234, 246, 238, .28); overflow: hidden; }
.pr i { display: block; height: 100%; background: #d4f34a; transform-origin: 0 50%; transform: scaleX(var(--v, 1)); transition: transform .6s var(--fluida); }
.sg { position: absolute; left: calc(50% - var(--d) * .62); top: calc(var(--d) * .62); width: calc(var(--d) * .42); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--d) * .22); font-weight: 800; background: #eaf6ee; color: #06281e; opacity: 0; scale: .3; transition: opacity .3s, scale .4s var(--molla); z-index: 1; }
.gioc[data-s] .sg { opacity: 1; scale: 1; }
.gioc[data-s="inf"] .sg { background: #ff7b7b; } .gioc[data-s="sq"] .sg { background: #ffd166; } .gioc[data-s="prob"] .sg { background: #d4f34a; }
.gioc.fuori .faccia { opacity: .5; filter: grayscale(1); }
.gioc.lampo .faccia { animation: lampo 1.3s; }
@keyframes lampo { 30% { scale: 1.45; box-shadow: 0 0 0 .4rem #fff; } }
.notizie h3 { margin-bottom: .6rem; }
.notizie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.notizia { width: 100%; text-align: left; font: inherit; font-size: .95rem; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); border-radius: .7rem; padding: .45rem .7rem; cursor: pointer; transition: transform .25s var(--molla), border-color .2s; }
.notizia:hover { border-color: var(--azione); transform: translateX(4px); }
.tag { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .05rem .5rem; border-radius: 99px; margin-right: .3rem; background: var(--carta-2); }
.n-inf .tag { background: #ffb4b4; color: #4a0b0b; } .n-sq .tag { background: #ffd166; color: #3b2a00; } .n-prob .tag { background: #d4f34a; color: #1a2600; }
.conf-mia h3 { margin-bottom: .4rem; }
.conf-mia dl { margin: .5rem 0 .3rem; }
.scambio { grid-column: 1 / -1; }
.scambio h3 { margin-bottom: .3rem; }
.scambio-sel { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; margin: 1rem 0; }
.scambio-sel label { display: grid; gap: .3rem; font-weight: 700; min-width: 0; }
select { font: inherit; min-height: 2.9rem; padding: .5rem .8rem; border-radius: .75rem; border: 2px solid var(--bordo); background: var(--sfondo); color: var(--testo); max-width: 100%; }
select:focus-visible { outline: 3px solid var(--azione); outline-offset: 2px; }
.scambio-ris { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.esito { border: 1px solid var(--bordo); border-radius: 1rem; padding: 1rem; background: var(--sfondo); }
.esito .tit { color: var(--tenue); font-weight: 700; margin: 0; }
.num-medio { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; font-variant-numeric: tabular-nums; margin: 0; letter-spacing: -.03em; }
.delta { font-size: 1rem; font-weight: 800; padding: .1rem .6rem; border-radius: 99px; background: var(--carta-2); letter-spacing: 0; vertical-align: .3em; }
.delta[data-segno="+"] { background: color-mix(in srgb, var(--capitano) 38%, transparent); }
.delta[data-segno="-"] { background: rgba(255, 120, 120, .3); }

/* probabilità */
.fascia-vis { background: var(--carta); border: 1px solid var(--bordo); border-radius: 1.3rem; padding: clamp(1.2rem, 3vw, 2.2rem); }
.asse { position: relative; height: 3.4rem; margin: 1.2rem 0 .4rem; }
.asse::before { content: ""; position: absolute; inset: 1.5rem 0 auto 0; height: .35rem; border-radius: 9px; background: var(--carta-2); }
.dentro { position: absolute; left: 22%; right: 18%; top: 1.5rem; height: .35rem; border-radius: 9px; background: linear-gradient(90deg, var(--azione), var(--capitano)); transform-origin: 50% 50%; transform: scaleX(0); transition: transform 1.2s var(--fluida) .2s; }
.visto .dentro, .rivela-tutto .dentro { transform: scaleX(1); }
html:not(.js) .dentro { transform: none; }
.marc { position: absolute; top: .9rem; left: 55%; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; border-radius: 50%; background: var(--capitano); border: 3px solid var(--sfondo); box-shadow: 0 0 0 2px var(--capitano); }
.visto .marc { animation: pop-marc 1s var(--molla) .9s both; }
@keyframes pop-marc { from { scale: 0; } }
.estremi { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-weight: 800; }
.estremi small { display: block; font-weight: 500; color: var(--tenue); }
.fascia-vis p { margin: 1rem 0 0; color: var(--tenue); }

/* confronto */
.confronto { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 2rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: 1.2rem; overflow: hidden; }
.confronto caption { text-align: left; color: var(--tenue); padding-bottom: .8rem; caption-side: bottom; font-size: .9rem; padding-top: .8rem; }
.confronto th, .confronto td { text-align: left; padding: 1rem 1.2rem; vertical-align: top; border-top: 1px solid var(--bordo); }
.confronto thead th { border-top: 0; background: var(--carta-2); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.confronto td:last-child { font-weight: 700; background: color-mix(in srgb, var(--capitano) 12%, transparent); }
.confronto td:last-child::before { content: "✓ "; color: var(--azione); }
.confronto td:nth-child(2) { color: var(--tenue); }
.confronto tbody th { font-weight: 800; }
@media (max-width: 42rem) {
  .confronto thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .confronto caption { display: block; }
  .confronto, .confronto tbody, .confronto tr, .confronto th, .confronto td { display: block; }
  .confronto tr { border-top: 1px solid var(--bordo); padding: .6rem 0; }
  .confronto tbody th, .confronto td { border: 0; padding: .3rem 1.1rem; }
  .confronto td::before { content: attr(data-e) " "; display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
  .confronto td:last-child::before { content: "✓ " attr(data-e); }
}

/* tre passi */
.passi { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.2rem, 3vw, 3rem); list-style: none; padding: 0; margin: 2.5rem 0 0; counter-reset: p; }
.passi li { counter-increment: p; position: relative; }
.passi .fig { width: 100%; max-width: 15rem; aspect-ratio: 3 / 2; border-radius: 1.1rem; background: linear-gradient(135deg, var(--campo-1), var(--campo-2)); display: grid; place-items: center; margin-bottom: 1rem; overflow: hidden; position: relative; }
.passi .fig svg { width: 78%; }
.passi h3::before { content: counter(p); display: inline-grid; place-items: center; width: 1.9em; aspect-ratio: 1; border-radius: 50%; background: var(--capitano); color: var(--capitano-testo); font-size: .8em; margin-right: .5em; vertical-align: .05em; }
.js .passi .pp { opacity: 0; transform-origin: center; transform-box: fill-box; }
.js .passi.visto .pp, .rivela-tutto .passi .pp { animation: pp .8s var(--molla) both; animation-delay: calc(var(--j, 0) * 110ms + var(--q, 0) * 300ms); }
@keyframes pp { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (min-width: 52rem) {
  .passi::before { content: ""; position: absolute; left: 8%; right: 8%; top: 5rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--azione), var(--capitano)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--fluida) .3s; opacity: .55; z-index: -0; }
  .passi.visto::before { transform: scaleX(1); }
  .passi .fig { position: relative; z-index: 1; }
}

/* dove averla */
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(.9rem, 2vw, 1.6rem); margin-top: 2rem; }
.griglia .scheda { display: flex; flex-direction: column; }
.griglia .scheda p { color: var(--tenue); flex: 1; }
.griglia .azioni { margin: 1rem 0 0; }
.guida { margin-top: 1.5rem; }
code { background: var(--sfondo); border: 1px solid var(--bordo); padding: .1rem .4rem; border-radius: .35rem; font-size: .88em; word-break: break-all; }

/* domande a fisarmonica */
details { background: var(--carta); border: 1px solid var(--bordo); border-radius: 1rem; padding: 0 1.2rem; margin-bottom: .7rem; transition: border-color .25s; }
.sez-alt details { background: var(--sfondo); }
details:hover, details[open] { border-color: var(--azione); }
summary { cursor: pointer; font-weight: 700; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: .65rem; height: .65rem; border-right: 3px solid var(--azione); border-bottom: 3px solid var(--azione); rotate: 45deg; margin-top: -.25rem; transition: rotate .35s var(--molla); }
details[open] > summary::after { rotate: 225deg; }
details > :not(summary) { margin: 0 0 1.1rem; color: var(--tenue); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--fluida), content-visibility .4s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}
.faq { max-width: 60rem; }

.privacy-l { max-width: 60rem; padding-left: 1.2rem; }
.privacy-l li { margin-bottom: .4rem; }

/* chiusura e piè di pagina */
.cta-finale { text-align: center; background: radial-gradient(70% 90% at 50% 100%, var(--glow), transparent), linear-gradient(160deg, var(--campo-1), var(--campo-2)); color: #eef6f0; overflow: clip; }
.cta-finale h2 { margin-inline: auto; max-width: 20ch; }
.cta-finale p { color: #cfe3d6; margin-inline: auto; max-width: 46ch; }
.cta-finale .azioni { justify-content: center; }
.cta-finale .tasto { background: #d4f34a; color: #1a2600; border-color: #d4f34a; }
.cta-finale .tasto.secondario { background: transparent; color: #eef6f0; border-color: rgba(238, 246, 240, .5); }
footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--bordo); font-size: .92rem; color: var(--tenue); }
footer ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer p { max-width: 80ch; }

/* barra fissa sul telefono */
.barra-cta {
  position: fixed; inset: auto 0 0 0; z-index: 90; display: flex; gap: .6rem; padding: .7rem var(--margine) max(.7rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--sfondo) 85%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--bordo);
  transform: translateY(110%); visibility: hidden; transition: transform .45s var(--fluida), visibility 0s .45s;
}
.barra-cta .tasto { flex: 1; }
body.dopo-eroe .barra-cta { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 52rem) { .barra-cta { display: none; } }
@media (max-width: 51.99rem) { body { padding-bottom: 0; } footer { padding-bottom: 6rem; } }


/* onda al tocco, installazione, finestra dell'app */
.onda { position: absolute; width: 12rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .38); translate: -50% -50%; scale: 0; pointer-events: none; z-index: -1; animation: onda .6s ease-out forwards; }
@keyframes onda { to { scale: 1; opacity: 0; } }
.suggerimento { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 130; display: flex; gap: .8rem; align-items: center; width: max-content; max-width: calc(100% - 2rem); background: var(--carta); border: 1px solid var(--bordo); border-radius: 1rem; padding: .7rem .9rem; box-shadow: var(--ombra); animation: entra-su .5s var(--molla); }
@keyframes entra-su { from { opacity: 0; translate: -50% 1.5rem; } }
@media (max-width: 51.99rem) { .suggerimento { bottom: calc(5rem + env(safe-area-inset-bottom)); } }
.indietro svg { width: 1.2rem; height: 1.2rem; }
#installa { white-space: nowrap; }
@media (max-width: 51.99rem) {
  .alto .cab { gap: .5rem; }
  #installa { min-width: 2.5rem; padding: 0; }
  #installa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lingua { padding: 0 .6rem; font-size: .82rem; }
  .barra-cta .tasto { padding-inline: .5rem; font-size: .92rem; }
}
@media (display-mode: standalone) { html { overscroll-behavior-y: none; } body { -webkit-tap-highlight-color: transparent; } }


/* tra le sezioni e allo scorrimento (solo con le timeline di scorrimento) */
.sez::before { content: ""; position: absolute; inset: 0 var(--margine) auto; height: 2px; background: linear-gradient(90deg, transparent, var(--azione), var(--capitano), transparent); opacity: .5; }
@supports (animation-timeline: view()) {
  .sez::before { transform: scaleX(0); animation: linea linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  [data-para] > :nth-child(odd) { animation: par-a linear both; animation-timeline: view(); }
  [data-para] > :nth-child(even) { animation: par-b linear both; animation-timeline: view(); }
  .fascia-vis, .formula { animation: par-b linear both; animation-timeline: view(); }
  .eroe-campo { animation: sposta linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
  .passo .n { animation: par-b linear both; animation-timeline: view(); }
}
@keyframes linea { to { transform: scaleX(1); } }
@keyframes par-a { from { transform: translateY(2.4rem); } to { transform: translateY(-2.4rem); } }
@keyframes par-b { from { transform: translateY(-1.4rem); } to { transform: translateY(1.4rem); } }
@keyframes sposta { to { translate: 0 6svh; scale: .9; opacity: .55; } }

/* film delle transizioni di vista */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* movimento ridotto: versione statica ma completa */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .r { opacity: 1; translate: none; }
  .dentro, .passi::before, .sez::before, .ng::after { transform: none; }
  .dis { stroke-dashoffset: 0; }
  .js .r.r-sx { translate: none; }
  .passo { opacity: 1; }
  .campo-storia .pt i { transform: scaleX(var(--v, 1)); }
  .onda { display: none; }
  .js .passi .pp { opacity: 1; }
  @view-transition { navigation: none; }
}
/* pochi dati: niente sfondi animati né sfocature */
@media (prefers-reduced-data: reduce) {
  .blob { animation: none; display: none; }
  .alto, .barra-cta, .chip-modulo { backdrop-filter: none; }
}
@media (forced-colors: active) { .faccia, .pt { border: 2px solid CanvasText; } }
@media print { .alto, .barra-cta, .suggerimento, .fondo { display: none; } .js .r { opacity: 1; translate: none; } }

/* Valori che prima stavano negli attributi style delle pagine (così la Content-Security-Policy non ha bisogno di 'unsafe-inline') */
.pos0 { --x: 50; --y: 86; --k: 0; }
.pos1 { --x: 21.5; --y: 63; --k: 1; }
.pos2 { --x: 40.5; --y: 63; --k: 2; }
.pos3 { --x: 59.5; --y: 63; --k: 3; }
.pos4 { --x: 78.5; --y: 63; --k: 4; }
.pos5 { --x: 24.7; --y: 40; --k: 5; }
.pos6 { --x: 50; --y: 40; --k: 6; }
.pos7 { --x: 75.3; --y: 40; --k: 7; }
.pos8 { --x: 24.7; --y: 16; --k: 8; }
.pos9 { --x: 50; --y: 16; --k: 9; }
.pos10 { --x: 75.3; --y: 16; --k: 10; }
.pos11 { --x: 26; --y: 95; --k: 11; }
.pos12 { --x: 50; --y: 95; --k: 12; }
.pos13 { --x: 74; --y: 95; --k: 13; }
.v56 { --v: .56; } .v60 { --v: .6; } .v68 { --v: .68; } .v70 { --v: .7; } .v76 { --v: .76; } .v80 { --v: .8; } .v90 { --v: .9; }
.j0 { --j: 0; } .j1 { --j: 1; } .j2 { --j: 2; } .j3 { --j: 3; } .j4 { --j: 4; } .j5 { --j: 5; } .j6 { --j: 6; } .j7 { --j: 7; } .j8 { --j: 8; } .j9 { --j: 9; } .j10 { --j: 10; }
.q0 { --q: 0; } .q1 { --q: 1; } .q2 { --q: 2; }
.u-m0 { margin: 0; }
.u-mb4 { margin: 0 0 .4rem; }
.u-mb6 { margin: 0 0 .6rem; }
.u-mb8 { margin: 0 0 .8rem; }
.u-mt3 { margin: .3rem 0 0; }
.u-tit { margin: 0; color: var(--tenue); font-weight: 700; }
.u-60ch { max-width: 60ch; }
.u-inizio { justify-self: start; }
.u-lime { color: #d4f34a; }
.u-p4 { padding: 4rem 0; }
.u-p5 { padding: 5rem 0 3rem; }
.u-h2sec { font-size: 1.4rem; margin-top: 2rem; }

/* ---- wordmark: «Schiera» più leggero, «XI» pesante e staccato (due pali e un incrocio, come un 11 romano) ---- */
.xi { font-weight: 900; letter-spacing: .045em; padding-left: .01em; font-feature-settings: "lnum", "kern"; font-stretch: 105%; }

/* ---- schermi larghi (desktop, ultra wide): più contenuto per schermata, colonne affiancate ---- */
@media (min-width: 75rem) {
  :root { --sez: clamp(2.2rem, 1.2vw + 1.4rem, 4.2rem); --max: min(96vw, 150rem); }
  .eroe { padding-top: calc(var(--alto) + 1rem); padding-bottom: 1.5rem; }
  .eroe h1 { font-size: clamp(2.2rem, min(3.4vw, 7.4svh), 5.8rem); }
  .eroe .intro { max-width: 46ch; }
  .intest { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: end; margin-bottom: 1.2rem; }
  .intest > .sopra, .intest > h2 { grid-column: 1; }
  .intest > .intro { grid-column: 2; grid-row: 1 / span 2; max-width: 62ch; margin: 0; }
  .doppia { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .doppia p:not(.sopra):not(.intro) { max-width: 72ch; }
  .numeri { grid-template-columns: repeat(2, 1fr); }
  .storia { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 8rem); }
  .passo { min-height: 38svh; }
  .passo p { max-width: 62ch; }
  .campo-storia { width: min(100%, 34rem, 56svh * .8); }
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1rem, 2vw, 2.5rem); }
  .demo .scambio { grid-column: auto; }
  .demo-campo { width: min(100%, 40rem, 60svh * .85); }
  .passi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #per-chi > .cont, #privacy > .cont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: start; }
  #per-chi > .cont > *, #privacy > .cont > * { grid-column: 2; }
  #per-chi > .cont > .sopra, #per-chi > .cont > h2, #privacy > .cont > .sopra, #privacy > .cont > h2 { grid-column: 1; }
  #per-chi > .cont > .sopra, #privacy > .cont > .sopra { grid-row: 1; }
  #per-chi > .cont > h2, #privacy > .cont > h2 { grid-row: 2; }
  .faq { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 3rem); align-items: start; }
  .faq > .sopra, .faq > h2, .faq > p { grid-column: 1 / -1; }
  footer p { max-width: none; }
}
/* molto larghi: la demo usa tre colonne piene e le schede stanno affiancate, così entra in una schermata */
@media (min-width: 105rem) {
  .demo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, .85fr); }
  .demo-dx { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .demo-dx .totale { grid-column: 1 / -1; }
  .demo-dx .totale .num-grande { font-size: clamp(2.6rem, 2rem + 2vw, 4.4rem); }
  .demo-campo { width: min(100%, 40rem, 50svh * .85); }
  .demo .scambio-sel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo .scambio-sel .tasto { grid-column: 1 / -1; }
  .demo .scambio-ris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo .scambio-ris .num-medio { font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.8rem); }
}
EOF

/* ---- wordmark SchieraXI disegnato su misura (SVG, nessun font): X a incrocio con punti alle estremita, I palo con il punto in testa ---- */
.sprite { display: none; }
.wm-svg { display: block; height: 1.5rem; width: auto; aspect-ratio: 332 / 78; overflow: visible; }
.xi-t { stroke: var(--xi); }
.xi-f { fill: var(--xi); }
.wm-bar { height: 1.7rem; }
.wm-pie { display: inline-block; height: 1.15rem; vertical-align: -.3em; }
.nome-gioco { display: block; margin: .3rem 0 .6rem; line-height: 0; }
.wm-hero { height: clamp(3rem, min(4.6vw, 10svh), 6.2rem); }
@media (min-width: 75rem) { .eroe .wm-hero { height: clamp(3.4rem, min(4vw, 9.5svh), 6.2rem); } }
/* apertura: Schierali -> SchieraXI (la L diventa la X disegnata, la i si allunga in I con il punto in testa) */
.wm-L { opacity: 0; }
.wm-a, .wm-X, .wm-xd, .wm-I, .wm-Id { transform-box: fill-box; transform-origin: center; }
.wm-X { stroke-dasharray: 1 1; }
.wm-I { stroke-dasharray: 55 55; }
.wm-a { animation: wm-in .55s var(--fluida) both; }
.wm-s > .wm-a:nth-child(2) { animation-delay: .08s; } .wm-s > .wm-a:nth-child(3) { animation-delay: .16s; }
.wm-s > .wm-a:nth-child(4) { animation-delay: .24s; } .wm-s > .wm-a:nth-child(5) { animation-delay: .32s; }
.wm-s > .wm-a:nth-child(6) { animation-delay: .4s; } .wm-s > .wm-a:nth-child(7) { animation-delay: .48s; }
.wm-a8 { animation-delay: .56s; } .wm-a9 { animation-delay: .64s; }
.wm-L { animation: wm-l .55s var(--molla) 1.5s both; }
.wm-X { animation: wm-disegna .55s var(--fluida) both; }
.wm-X1 { animation-delay: 1.65s; } .wm-X2 { animation-delay: 1.85s; }
.wm-xd { animation: wm-pop .45s var(--molla) both; }
.wm-xd0 { animation-delay: 1.9s; } .wm-xd3 { animation-delay: 2.05s; } .wm-xd1 { animation-delay: 2.1s; } .wm-xd2 { animation-delay: 2.25s; }
.wm-I { animation: wm-palo .7s var(--fluida) 1.5s both; }
.wm-Id { animation: wm-testa .7s var(--molla) 1.5s both; }
@keyframes wm-in { from { opacity: 0; translate: 0 5px; } }
@keyframes wm-l { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: rotate(50deg) scale(.2); } }
@keyframes wm-disegna { from { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } }
@keyframes wm-pop { from { transform: scale(0); } }
@keyframes wm-palo { from { stroke-dashoffset: 18; stroke: currentColor; } }
@keyframes wm-testa { from { transform: translateY(4px) scale(.85); fill: currentColor; } }