/* =====================================================================
   Sezione 01: Perché Rigo + Come funziona + La scienza in breve.
   Telefono prima. Solo token. Ogni selettore comincia con #come-funziona.
   ===================================================================== */

#come-funziona .cf-intro{display:grid;gap:var(--s-5);margin-bottom:clamp(2.5rem, 1.5rem + 4vw, 4.5rem)}
#come-funziona .cf-intro__title{max-width:14ch}

/* ---------------- A. la storia del nome ---------------- */
#come-funziona .cf-story{position:relative}
#come-funziona .cf-steps{margin:0;padding:0;list-style:none;display:grid;gap:clamp(3.5rem, 2.5rem + 4vw, 6rem)}
#come-funziona .cf-step{display:grid;gap:var(--s-3);align-content:start}
#come-funziona .cf-step__n{display:flex;gap:.6em;align-items:center;color:var(--muted);margin-bottom:var(--s-1)}
#come-funziona .cf-step__n b{color:var(--accent);font-weight:500}
#come-funziona .cf-step__n::before{content:"";width:2px;height:1.1em;background:var(--accent)}
#come-funziona .cf-step__say{font-size:var(--fs-h3);font-weight:700;line-height:1.25;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
#come-funziona .cf-step__fact{color:var(--muted);max-width:var(--max-text);text-wrap:pretty}
#come-funziona .cf-step__src{display:flex;align-items:center;gap:.7em;color:var(--muted);font-size:calc(var(--fs-mono) * .95)}
#come-funziona .cf-step__src::before{content:"";width:14px;height:1px;background:var(--line-strong)}
#come-funziona .cf-step__stage{margin-top:var(--s-4)}
#come-funziona .cf-step__stage:empty{display:none}

#come-funziona .cf-story__stage,
#come-funziona .cf-progress{display:none}

/* elenco su desktop (movimento ridotto): testo a sinistra, disegno a destra */
@media (min-width:48em){
  #come-funziona .cf-story.is-list .cf-step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-8);align-items:center}
  #come-funziona .cf-story.is-list .cf-step > *:not(.cf-step__stage){grid-column:1}
  #come-funziona .cf-story.is-list .cf-step__stage{grid-column:2;grid-row:1 / span 4;margin:0}
}

/* la storia ferma (desktop, con movimento): un solo disegno, i passi uno sopra l'altro */
#come-funziona .cf-story.is-scrub{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(2rem, 1rem + 3vw, 4.5rem);align-items:center;min-height:min(30rem, calc(100vh - var(--header-h) - 15rem))}
/* a scene il titolo resta fermo con la storia: meno spazio fra i due */
#come-funziona .cf-a:has(.cf-story.is-scrub) .cf-intro{margin-bottom:clamp(1.5rem, .5rem + 2.5vw, 3rem)}
#come-funziona .cf-story.is-scrub .cf-story__text{position:relative;padding-left:var(--s-6)}
#come-funziona .cf-story.is-scrub .cf-steps{display:grid;gap:0}
#come-funziona .cf-story.is-scrub .cf-step{grid-area:1 / 1;align-self:center;will-change:transform,opacity}
#come-funziona .cf-story.is-scrub .cf-step__stage{display:none}
#come-funziona .cf-story.is-scrub .cf-story__stage{display:block;min-width:0}
#come-funziona .cf-story.is-scrub .cf-progress{display:block;position:absolute;left:0;top:0;bottom:0;width:2px}
#come-funziona .cf-progress__rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
#come-funziona .cf-progress__notch{position:absolute;left:-.5px;top:0;width:2px;height:2.4rem;background:var(--accent);will-change:transform}

/* ---------------- il palco: il rigo, l'occhio, la partitura ---------------- */
#come-funziona .cf-stage{--cf-fs:clamp(1.05rem, .85rem + 1vw, 1.3rem);position:relative;background:var(--surface);border:var(--rule);border-radius:var(--radius-lg);padding:var(--s-5) 0 var(--s-4);box-shadow:var(--shadow);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#come-funziona .cf-story.is-scrub .cf-stage{--cf-fs:clamp(1.45rem, .55rem + 1.55vw, 2.05rem);padding:var(--s-6) 0 var(--s-5);border-radius:calc(var(--radius-lg) + 4px)}
#come-funziona .cf-stage__top{display:grid;padding-inline:var(--s-5);color:var(--muted)}
#come-funziona .cf-stage__top > span{grid-area:1 / 1}
#come-funziona .cf-stage__lb{color:var(--ink);opacity:0}

#come-funziona .cf-stage__field{--cf-top:calc(var(--cf-fs) * 3.4);position:relative;height:calc(var(--cf-top) + 4.9em);font-size:var(--cf-fs);overflow:hidden;margin-top:var(--s-2)}
#come-funziona .cf-stage__line{position:absolute;left:0;top:var(--cf-top);white-space:pre;font-family:var(--font-word);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);will-change:transform}
#come-funziona .cf-w{transition:none}
#come-funziona .cf-w__p.is-on{color:var(--pivot)}
#come-funziona .cf-stage__eye{position:absolute;left:0;top:calc(var(--cf-top) - .75em);height:calc(1.3em + 1.5em);width:2px;will-change:transform}
#come-funziona .cf-stage__eye i{position:absolute;left:0;width:2px;height:.5em;background:var(--accent)}
#come-funziona .cf-stage__eye i:first-child{top:0}
#come-funziona .cf-stage__eye i:last-child{bottom:0}
#come-funziona .cf-stage__focus{position:absolute;left:0;top:calc(var(--cf-top) - .2em);width:3.6em;height:1.7em;border-radius:var(--radius-pill);background:var(--accent-soft);will-change:transform,opacity}
#come-funziona .cf-stage__rule{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line-strong);opacity:0}
#come-funziona .cf-stage__rule--top{top:calc(var(--cf-top) - .75em)}
#come-funziona .cf-stage__rule--bot{top:calc(var(--cf-top) + 1.3em + .75em)}
#come-funziona .cf-stage__arcs{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#come-funziona .cf-arc{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;opacity:0}
#come-funziona .cf-arc--back{stroke:var(--muted);stroke-dasharray:3 5}
#come-funziona .cf-ann{position:absolute;top:calc(var(--cf-top) + var(--cf-fs) * 2.45);font-size:var(--fs-mono);transform:translateX(-50%);white-space:nowrap;line-height:1;color:var(--muted);opacity:0}
#come-funziona .cf-ann--sac{color:var(--accent)}
#come-funziona .cf-ann--sharp{color:var(--accent)}

#come-funziona .cf-stage__score{position:relative;height:3.4rem;margin-top:var(--s-3);overflow:hidden;opacity:0}
#come-funziona .cf-stage--s1 .cf-stage__score,
#come-funziona .cf-stage--s2 .cf-stage__score,
#come-funziona .cf-stage--s3 .cf-stage__score{display:none}
#come-funziona .cf-stage__staff{position:absolute;left:0;right:0;top:.35rem;display:grid;gap:5px}
#come-funziona .cf-stage__staff i{display:block;height:1px;background:var(--line-strong);opacity:.4}
#come-funziona .cf-stage__track{position:absolute;left:0;top:calc(.35rem + 12px - 2px);height:6px;will-change:transform}
#come-funziona .cf-bar{position:absolute;top:0;height:6px;border-radius:3px;background:var(--line-strong);opacity:.55}
#come-funziona .cf-bar.is-past{background:var(--muted);opacity:.8}
#come-funziona .cf-bar.is-on{background:var(--ink);opacity:1}
#come-funziona .cf-stage__head{position:absolute;left:0;top:0;height:calc(.35rem + 30px);width:2px;background:var(--accent)}
#come-funziona .cf-stage__bpm{position:absolute;left:var(--s-5);bottom:0;font-size:var(--fs-mono);color:var(--muted);line-height:1}
#come-funziona .cf-stage__bpm b{color:var(--ink);font-weight:500}

/* ---------------- B. come funziona: cinque passi lungo un rigo verticale ---------------- */
#come-funziona .cf-how,
#come-funziona .cf-sci{margin-top:clamp(6rem, 3.5rem + 9vw, 11rem)}
#come-funziona .cf-how__rule{display:block;--notch-x:0px;margin-bottom:var(--s-6)}
#come-funziona .cf-how__head{margin-bottom:clamp(2.5rem, 1.5rem + 4vw, 4rem)}
#come-funziona .cf-how__list{--cf-draw:1;position:relative;margin:0;padding:0 0 0 3.25rem;list-style:none;display:grid;gap:clamp(2.5rem, 2rem + 2vw, 3.5rem)}
#come-funziona .cf-how__list::before{content:"";position:absolute;left:.9rem;top:.4rem;bottom:.4rem;width:1px;background:var(--line);transform-origin:50% 0;transform:scaleY(var(--cf-draw))}
#come-funziona .cf-how__item{position:relative;display:grid;gap:var(--s-3)}
#come-funziona .cf-how__n{position:absolute;left:calc(-3.25rem + .9rem - .85rem);top:calc(var(--fs-h3) * .62 - .8rem);width:1.7rem;height:1.6rem;display:grid;place-items:center;background:var(--bg);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--accent);font-weight:500}
#come-funziona .cf-how__item h3{max-width:22ch}
#come-funziona .cf-how__item p{color:var(--muted)}
#come-funziona .cf-how__item--wide{padding:var(--s-5);margin-left:calc(var(--s-5) * -1 + 0px);background:var(--surface);border:var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
#come-funziona .cf-how__item--wide .cf-how__n{left:calc(-3.25rem + .9rem - .85rem + var(--s-5) - 1px);top:calc(var(--s-5) + var(--fs-h3) * .62 - .8rem)}
#come-funziona .cf-how__item--wide p{color:var(--ink)}
#come-funziona .cf-file{font-family:var(--font-num);font-size:.86em;white-space:nowrap;padding:0 .3em;border:1px solid var(--line);border-radius:6px;color:var(--ink)}

@media (min-width:64em){
  #come-funziona .cf-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-8);align-items:start}
  #come-funziona .cf-how__head{margin-bottom:0;padding-top:.4rem;position:sticky;top:calc(var(--header-h) + 2.5rem)}
}

/* ---------------- C. la scienza, in breve ---------------- */
#come-funziona .cf-sci__head{display:grid;gap:var(--s-5);max-width:48rem;margin-bottom:clamp(2.5rem, 1.5rem + 4vw, 4.5rem)}
#come-funziona .cf-sci__head .cf-how__rule{margin-bottom:var(--s-1)}

/* la scala delle velocita' */
#come-funziona .cf-scale{position:relative;padding:var(--s-5) var(--s-5) var(--s-5);background:var(--surface);border:var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:clamp(3rem, 2rem + 4vw, 5.5rem)}
#come-funziona .cf-scale__cap{color:var(--muted)}
#come-funziona .cf-scale__plot{position:relative;height:9.5rem;margin:var(--s-2) var(--s-2) 0}
#come-funziona .cf-scale__axis{position:absolute;inset:0}
#come-funziona .cf-scale__base{position:absolute;left:0;right:0;top:4.6rem;height:1px;background:var(--line-strong)}
#come-funziona .cf-scale__tick,
#come-funziona .cf-scale__avg{position:absolute;top:4.6rem;left:calc((var(--v) - 100) / 900 * 100%);width:0}
#come-funziona .cf-scale__tick::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:11px;background:var(--line-strong)}
#come-funziona .cf-scale__tick span{position:absolute;top:2.6rem;left:0;transform:translateX(-50%);font-size:var(--fs-mono);color:var(--muted);white-space:nowrap}
#come-funziona .cf-scale__tick:first-of-type span,
#come-funziona .cf-scale__tick[style*="--v:100"] span{transform:none}
#come-funziona .cf-scale__tick--end span{transform:translateX(-100%)}
#come-funziona .cf-scale__band{position:absolute;top:calc(4.6rem - 11px);height:22px;left:calc(150 / 900 * 100%);width:calc(100 / 900 * 100%);background:var(--accent-soft);border-inline:2px solid var(--accent)}
#come-funziona .cf-scale__band-label{position:absolute;left:-2px;bottom:calc(100% + .7rem);white-space:nowrap;color:var(--accent);line-height:1.35}
#come-funziona .cf-scale__band-label b{font-weight:500;font-size:1.25em;letter-spacing:.04em}
#come-funziona .cf-scale__avg::before{content:"";position:absolute;left:-1px;top:-14px;width:2px;height:28px;background:var(--ink)}
#come-funziona .cf-scale__avg span{position:absolute;top:1.15rem;right:5px;font-size:var(--fs-mono);color:var(--ink);white-space:nowrap}
#come-funziona .cf-scale__avg--b span{right:auto;left:5px}
#come-funziona .cf-scale__note{max-width:var(--max-text);margin-top:var(--s-2)}

/* i fatti: una tabella sobria, domanda a sinistra e risposta a destra */
#come-funziona .cf-facts{margin:0;display:grid}
#come-funziona .cf-fact{--cf-rule:1;position:relative;display:grid;gap:var(--s-3);padding-block:var(--s-6) var(--s-7)}
#come-funziona .cf-fact::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;transform:scaleX(var(--cf-rule))}
#come-funziona .cf-fact dt{max-width:20ch}
#come-funziona .cf-fact dd{margin:0;display:grid;gap:var(--s-3)}
#come-funziona .cf-fact__src{display:flex;align-items:center;gap:.7em;color:var(--muted);font-size:calc(var(--fs-mono) * .95)}
#come-funziona .cf-fact__src::before{content:"";width:14px;height:1px;background:var(--line-strong)}
#come-funziona .cf-fact--last{border-bottom:var(--rule)}
@media (min-width:48em){
  #come-funziona .cf-fact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-8)}
}

#come-funziona .cf-sources{display:grid;gap:var(--s-4);margin-top:var(--s-7);max-width:var(--max-text)}
#come-funziona .cf-sources__list{display:flex;flex-wrap:wrap;gap:0 var(--s-4);margin:0;padding:0;list-style:none}
#come-funziona .cf-sources__list a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em;text-decoration-thickness:1px;transition:color var(--dur-fast) ease}
#come-funziona .cf-sources__list a:hover{color:var(--ink)}

#come-funziona .cf-stage--s3 .cf-stage__field,
#come-funziona .cf-stage--s4 .cf-stage__field{--cf-top:calc(var(--cf-fs) * 1.6)}
#come-funziona .cf-stage--s4 .cf-stage__field{height:calc(var(--cf-top) + 3.1em)}