/* =====================================================================
   Rigo, la storia per telefono e tablet (sotto i 1024 px). Vedi MOBILE.md.
   Otto schermate intere (100svh) con scroll-snap verticale. Lo schermo
   intero fa da mirino: righe in alto e in basso (header e barra), due
   tacche ciano ferme al 38%. Sopra i 1024 px tutto questo e' nascosto
   e il sito desktop resta com'era.
   Solo token: nessun colore scritto a mano.
   ===================================================================== */

/* ---------- lo scambio: desktop o storia ---------- */
.m-story{display:none}

@media (max-width:63.99em){
  :root{--bar-h:64px;--m-top:calc(var(--header-h) + 12px);--m-bot:calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px)}
  html{scroll-snap-type:y mandatory;scroll-padding-top:0}
  html.m-lock{overflow:hidden}
  main > section,.site-footer{display:none !important}
  .m-story{display:block}

  /* header: sempre visibile, vetro fisso, niente menu ne' pulsante (c'e' la barra in basso) */
  .site-header,.site-header.is-hidden{transform:none}
  .site-header{background:var(--scrim);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line)}
  .site-nav,.site-header__actions > .btn--primary,.page-progress{display:none !important}
}

/* ---------- la schermata ---------- */
.m-scr{position:relative;height:100vh;height:100svh;min-height:30rem;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.m-in{height:100%;width:100%;max-width:calc(40rem + 2 * var(--gutter));margin-inline:auto;padding:var(--m-top) var(--gutter) var(--m-bot);display:flex;flex-direction:column;justify-content:center;gap:var(--s-5)}
.m-in--rail{padding-inline:0;max-width:none}
.m-in--rail > :not(.m-rail){width:100%;max-width:calc(40rem + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.m-head{display:grid;gap:var(--s-3)}

.m-t{font-size:clamp(2.05rem, 1.05rem + 5vw, 3.5rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.m-t__soft{color:var(--muted);font-size:.62em;letter-spacing:-.025em;margin-top:.15em}
.m-sub{font-size:clamp(1.0625rem, .95rem + .5vw, 1.3rem);line-height:1.45;color:var(--muted);max-width:30rem;text-wrap:pretty}
.m-sub b{display:block;margin-top:.15em;color:var(--ink);font-weight:700}
.m-src{display:block;margin-top:var(--s-2);color:var(--muted);font-size:.68rem}
.m-note{font-size:.8125rem;line-height:1.4}

/* stati iniziali: solo con JS e movimento (li scopre storia.js) */
.js:not(.reduced) .m-story [data-m],
.js:not(.reduced) .m-story [data-m-step],
.js:not(.reduced) .m-story [data-m-punch],
.js:not(.reduced) .m-story [data-m-forte]{opacity:0}
.js:not(.reduced) .m-story [data-m-split]{visibility:hidden}
.m-story [data-m-split].is-split{visibility:visible !important}
.anim-failed .m-story [data-m],.anim-failed .m-story [data-m-step],.anim-failed .m-story [data-m-punch],.anim-failed .m-story [data-m-forte]{opacity:1 !important;transform:none !important}
.anim-failed .m-story [data-m-split]{visibility:visible !important}

/* ---------- il mirino fisso: due tacche al 38% ---------- */
.m-notch{position:fixed;left:38%;z-index:49;width:2px;height:10px;background:var(--accent);transform:translateX(-1px);pointer-events:none;transition:transform var(--dur) var(--ease-out)}
.m-notch--top{top:var(--header-h)}
.m-notch--bot{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
.m-story[data-cur="8"] .m-notch--bot{transform:translate(-1px, var(--bar-h))}

/* ---------- barra in basso ---------- */
.m-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:calc(var(--bar-h) + env(safe-area-inset-bottom));padding:0 max(var(--gutter), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--gutter), env(safe-area-inset-left));background:var(--scrim);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-top:1px solid var(--line);transition:transform var(--dur) var(--ease-out)}
.m-story[data-cur="8"] .m-bar{transform:translateY(100%)}
.m-bar__prog{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex:1}
.m-bar__k{font-size:.75rem;color:var(--muted);letter-spacing:.04em;flex:none}
.m-bar__k b{color:var(--ink);font-weight:500}
.m-bar__segs{display:flex;gap:4px;flex:1;max-width:9rem}
.m-bar__segs i{flex:1;height:2px;background:var(--line-strong);border-radius:1px;transform-origin:50% 50%;transition:background-color var(--dur) ease, transform var(--dur) var(--ease-out)}
.m-bar__segs i.is-past{background:var(--muted)}
.m-bar__segs i.is-on{background:var(--accent);transform:scaleY(2)}
.m-bar__cta{flex:none}

/* ---------- invito a scorrere ---------- */
.m-next{position:absolute;left:50%;bottom:calc(var(--m-bot) - 6px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 .8em;color:var(--muted);text-decoration:none;font-size:.7rem}
.m-next__a{display:inline-block}
.m-scr.is-on .m-next__a{animation:m-bob 1.8s var(--ease-inout) infinite}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- 1. apertura ---------- */
.m-apri .m-in{gap:var(--s-4);justify-content:center;padding-bottom:calc(var(--m-bot) + 40px)}
.m-apri__stage{order:-1;position:relative;display:grid;align-content:center;gap:var(--s-3);min-height:min(34svh, 17rem);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-apri__demo{--word-size:clamp(2.6rem, 1.5rem + 5.4vw, 4.6rem);width:100vw;margin-left:calc(50% - 50vw)}
.m-apri__demo .reticle__w{transition:none}
.m-apri__demo:not(.is-idle) .reticle__w{opacity:1}
.m-apri__stage.is-paused .reticle__w{opacity:.6}
.m-apri__stage.is-paused .reticle__w--p{opacity:1}
.m-apri__hint{display:flex;justify-content:space-between;gap:var(--s-3);color:var(--muted);font-size:.68rem}
.m-apri__n{letter-spacing:.04em}
.m-apri__t{font-size:clamp(2rem, 1rem + 5vw, 3.6rem);font-weight:800;line-height:1;letter-spacing:-.04em}
.m-apri__lead{font-size:clamp(1.0625rem, .95rem + .5vw, 1.3rem);line-height:1.45;color:var(--muted);max-width:28rem}
.m-apri__ctl{display:flex;align-items:center;gap:var(--s-3)}
.m-apri__play{flex:none;border-color:var(--line-strong)}
.m-apri__play[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.m-ico{width:20px;height:20px;fill:currentColor}
.m-ico--pause{display:none}
.m-apri__play[aria-pressed="true"] .m-ico--pause{display:block}
.m-apri__play[aria-pressed="true"] .m-ico--play{display:none}
.m-speed{display:flex;align-items:center;gap:var(--s-1);border:var(--rule);border-radius:var(--radius-pill);padding:0 2px}
.m-speed__b{font-size:1.4rem;color:var(--ink);font-weight:500}
.m-speed__v{display:flex;align-items:baseline;gap:.4em;min-width:8.6rem;justify-content:center;white-space:nowrap}
.m-speed__v output{font-size:1.05rem;color:var(--ink);font-weight:500;min-width:3ch;text-align:right}
.m-speed__v .t-mono{font-size:.66rem;color:var(--muted);letter-spacing:.08em}
.m-apri__warn{min-height:1.3em;margin-top:calc(var(--s-2) * -1);font-size:.875rem}

/* ---------- 2. perche' ---------- */
.m-perche .m-in{gap:var(--s-4)}
.m-perche__fig{position:relative;display:grid;min-height:8.5rem;align-items:center}
.m-perche__fig > *{grid-area:1/1}
.m-perche__page{position:relative;display:grid;gap:.35rem;font-size:1.0625rem;line-height:1.35;color:var(--muted);padding-top:18px}
.m-perche__row{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip}
.m-perche__row > span{transition:color var(--dur-fast) ease}
.m-perche__row > span.is-at{color:var(--ink)}
.m-perche__row--g{opacity:.55}
.m-perche__eye{position:absolute;left:0;top:0;width:2px;height:12px;background:var(--accent);transform:translateX(-1px);opacity:0;will-change:transform}
.m-perche__back{position:absolute;left:0;top:-14px;font-size:.62rem;color:var(--accent);opacity:0;white-space:nowrap}
.m-perche__demo{--word-size:clamp(2rem, 1.3rem + 3.6vw, 3.4rem);opacity:0;width:100vw;margin-left:calc(50% - 50vw)}
.m-perche__fig{justify-items:start}
.reduced .m-perche__demo{opacity:1}
.reduced .m-perche__page{opacity:0}
.m-perche__fact{font-size:1rem;line-height:1.45;color:var(--muted);max-width:30rem}
.m-perche__punch{font-size:clamp(1.3rem, 1rem + 1.6vw, 1.9rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.m-perche__again{align-self:flex-start;margin-top:calc(var(--s-3) * -1);padding-inline:.5em;margin-left:-.5em}

/* ---------- 3. come funziona ---------- */
.m-come__wrap{position:relative;padding-left:2.25rem}
.m-come__rail{position:absolute;left:.5rem;top:.5rem;bottom:.5rem;width:1px;background:var(--line-strong);transform-origin:50% 0}
.m-come__dot{position:absolute;left:calc(.5rem - 6px);top:.35rem;width:13px;height:2px;background:var(--accent);will-change:transform}
.m-come__list{display:grid;gap:clamp(1rem, .4rem + 2.6svh, 1.75rem)}
.m-come__i{display:grid;gap:.2rem}
.m-come__n{font-size:.72rem;color:var(--accent);letter-spacing:.06em}
.m-come__i h3{font-size:clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.m-come__i p{font-size:1rem;line-height:1.45;color:var(--muted);max-width:28rem}
.m-come__foot{color:var(--muted);padding-left:2.25rem}

/* ---------- caroselli (per chi, cosa cambia) ---------- */
.m-rail{position:relative;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:4px var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-rail::-webkit-scrollbar{display:none}
.m-rail:focus-visible{outline-offset:-2px}
.m-card{flex:0 0 min(calc(100% - 2 * var(--gutter) - 28px), 24rem);scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:var(--rule);border-radius:var(--radius-lg);min-height:clamp(15rem, 36svh, 20rem);transition:border-color var(--dur) ease}
.m-card.is-on{border-color:var(--line-strong)}
.m-rail::after{content:"";flex:0 0 1px}
.m-card__n{color:var(--muted);font-size:.7rem}
.m-card__n b{color:var(--accent);font-weight:500}
.m-card__t{font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em}
.m-card__p{font-size:1rem;line-height:1.45;color:var(--muted)}
.m-card__demo{--word-size:clamp(1.7rem, 1.2rem + 2.4vw, 2.4rem);margin-top:auto}
.m-card:not(.is-on) .m-card__demo .reticle__w--p{color:inherit}

.m-dots{display:flex;align-items:center;gap:2px;margin-top:calc(var(--s-3) * -1)}
.m-dots__hint{order:1;margin-left:auto;padding-left:var(--s-2);font-size:.62rem;color:var(--muted);white-space:nowrap}
.m-dots button{width:28px;height:36px;flex:none;display:grid;place-items:center;border-radius:8px}
.m-dots button i{display:block;width:14px;height:2px;background:var(--line-strong);border-radius:1px;transition:transform var(--dur) var(--ease-out), background-color var(--dur) ease}
.m-dots button[aria-current="true"] i{background:var(--accent);transform:scaleX(1.7)}

/* cosa cambia: la scheda di confronto */
.m-diff .m-in{gap:var(--s-4)}
.m-diff__c{gap:var(--s-4);min-height:clamp(13rem, 30svh, 17rem)}
.m-diff__k{color:var(--muted);font-size:.72rem;font-weight:500;letter-spacing:var(--track-mono)}
.m-diff__k b{color:var(--accent);font-weight:500;margin-right:.4em}
.m-diff__a,.m-diff__b{display:grid;gap:.3rem}
.m-diff__l{font-size:.64rem;color:var(--muted)}
.m-diff__x{font-size:1.0625rem;line-height:1.35;color:var(--muted)}
.m-diff__b{position:relative;padding-top:var(--s-4);margin-top:auto}
.m-diff__b::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;transform:scaleX(var(--m-rule,1));transition:transform .7s var(--ease-out)}
.m-diff__b::after{content:"";position:absolute;left:38%;top:-6px;width:2px;height:13px;background:var(--accent);transform:translateX(-1px) scaleY(var(--m-rule,1));transition:transform .5s var(--ease-out) .3s}
.m-diff__y{font-size:clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.m-diff__c.is-pre{--m-rule:0}
.m-diff__c.is-pre .m-diff__y{opacity:0;transform:translateY(14px)}
.m-diff__y{transition:opacity .6s var(--ease-out) .25s, transform .8s var(--ease-out) .25s}

/* ---------- 6. onesta' e ritmo ---------- */
.m-ritmo .m-in{gap:var(--s-4)}
.m-ritmo__box{display:grid;gap:var(--s-3);padding:var(--s-4);background:var(--surface);border:var(--rule);border-radius:var(--radius-lg)}
.m-ritmo__demo{--word-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.8rem);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-ritmo__scale{position:relative;margin-top:var(--s-4)}
.m-ritmo__band{position:absolute;top:0;height:44px;left:calc(11px + (100% - 22px) * .1667);width:calc((100% - 22px) * .1111);display:flex;align-items:flex-start;justify-content:center;pointer-events:none}
.m-ritmo__band::before{content:"";position:absolute;top:50%;left:0;right:0;height:12px;margin-top:-6px;border-left:2px solid var(--accent);border-right:2px solid var(--accent);background:var(--accent-soft);border-radius:2px}
.m-ritmo__band b{position:absolute;bottom:100%;font-size:.6rem;color:var(--accent);font-weight:500;white-space:nowrap}
.m-ritmo__range{position:relative;z-index:1;margin:0;display:block}
.m-ritmo__nums{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.m-ritmo__nums output{color:var(--ink)}
.m-ritmo__msg{font-size:1rem;line-height:1.4;min-height:2.8em}
.m-ritmo__box[data-zona="cala"] .m-ritmo__msg,.m-ritmo__box[data-zona="molto"] .m-ritmo__msg{color:var(--ink)}
.m-open{align-self:flex-start}

/* ---------- 7. la storia ---------- */
.m-t--story{font-size:clamp(1.85rem, 1rem + 4.2vw, 3rem)}
.m-story__body{display:grid;gap:var(--s-3);max-width:30rem}
.m-story__body p{font-size:clamp(1.0625rem, .95rem + .5vw, 1.25rem);line-height:1.5;color:var(--muted)}
.m-story__forte{position:relative;padding-top:var(--s-5);font-size:clamp(1.3rem, 1rem + 1.6vw, 1.9rem);font-weight:800;line-height:1.18;letter-spacing:-.02em}
.m-story__forte::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.m-story__forte::after{content:"";position:absolute;left:38%;top:-6px;width:2px;height:13px;background:var(--accent);transform:translateX(-1px)}
.m-story__firma{display:grid;gap:.2rem}
.m-story__nome{font-weight:700}
.m-story__firma .t-mono{color:var(--muted);font-size:.66rem}

/* ---------- 8. finale ---------- */
.m-fine .m-in{--m-bot:calc(env(safe-area-inset-bottom) + 16px);gap:var(--s-4)}
.m-t--fine{font-size:clamp(2rem, .9rem + 4.6vw, 4rem)}
.m-fine__demo{--word-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.8rem);width:100vw;margin-left:calc(50% - 50vw);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-fine__cta{display:grid;gap:var(--s-3)}
.m-fine__btn{width:100%;max-width:24rem;--btn-h:56px;font-size:1.0625rem}
.m-foot{margin-top:var(--s-2);padding-top:var(--s-3);border-top:var(--rule);font-size:.8125rem;color:var(--muted);display:grid;gap:var(--s-1)}
.m-foot a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:.2em}
.m-foot ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-4);margin:0;padding:0}
.m-foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}

/* ---------- fogli (limiti, domande) ---------- */
.m-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:40rem;max-height:88svh;padding:0;border:var(--rule);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow:hidden;flex-direction:column}
.m-sheet[open]{display:flex}
.m-sheet::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.m-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);border-bottom:var(--rule);flex:none}
.m-sheet__t{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.m-sheet__x{font-size:1.7rem;color:var(--ink);font-weight:400}
.m-sheet__body{overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom))}
.m-lim{display:grid;gap:var(--s-4);margin:0;padding:0}
.m-lim li{display:grid;grid-template-columns:2.2rem 1fr;gap:var(--s-2);font-size:1rem;line-height:1.45;color:var(--muted)}
.m-lim li .t-num{color:var(--accent);font-size:.8rem;padding-top:.2em}
.m-lim strong{color:var(--ink)}
.m-sheet__src{margin-top:var(--s-5)}
.m-faq details{border-bottom:var(--rule)}
.m-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding-block:var(--s-2);font-weight:700;font-size:1.0625rem;line-height:1.3;cursor:pointer}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"+";flex:none;width:28px;text-align:center;font-family:var(--font-num);font-weight:400;font-size:1.3rem;color:var(--accent);transition:transform var(--dur) var(--ease-out)}
.m-faq details[open] summary::after{transform:rotate(45deg)}
.m-faq details p{padding-bottom:var(--s-4);color:var(--muted);line-height:1.55}

/* ---------- tablet: piu' aria, schede a fianco ---------- */
@media (min-width:48em){
  .m-in{gap:var(--s-6)}
  .m-card{flex-basis:22rem}
  .m-rail{scroll-padding-inline:max(var(--gutter), calc((100% - 40rem) / 2));padding-inline:max(var(--gutter), calc((100% - 40rem) / 2))}
}

/* ---------- schermi bassi (telefoni piccoli, orizzontale) ---------- */
@media (max-width:63.99em) and (max-height:700px){
  .m-in{gap:var(--s-3)}
  .m-opt{display:none}
  .m-t{font-size:clamp(1.8rem, .9rem + 4.4vw, 2.6rem)}
  .m-apri__stage{min-height:26svh}
  .m-card{min-height:12.5rem;padding:var(--s-4)}
  .m-come__list{gap:.7rem}
  .m-come__i p{font-size:.9375rem}
  .m-ritmo__box{padding:var(--s-3)}
}
@media (max-width:63.99em) and (max-height:600px){
  .m-opt2{display:none}
  .m-perche__fig{min-height:6.5rem}
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce){
  .m-scr.is-on .m-next__a{animation:none}
  .m-diff__c.is-pre{--m-rule:1}
  .m-diff__c.is-pre .m-diff__y{opacity:1;transform:none}
}