/* Le demo (Flow Scrum 75 s, Flow Kanban 90 s): player a tutto schermo, leggibile da proiettore (misure in rem che crescono con lo schermo) */
:root {
  --safe: 15rem; /* spazio riservato in basso a didascalia e controlli */
}
* { box-sizing: border-box; }
html { font-size: clamp(12px, min(1.12vw, 2vh), 30px); }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sc-tav-nero-2); color: var(--sc-testo); font-family: var(--sc-font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.hidden { display: none !important; }
.kbd { display: inline-block; min-width: 1.3em; padding: .05em .4em; margin: 0 .12em; border-radius: .3em; background: var(--sc-demo-bordo); border: 1px solid var(--sc-su-colore-a18); font-size: .85em; text-align: center; }
.hmuted { color: var(--sc-testo-secondario); font-weight: 500; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }
#shade { position: fixed; inset: 0; background: var(--sc-tav-nero-a58); opacity: 0; transition: opacity .6s; pointer-events: none; z-index: 1; }
#shade.on { opacity: 1; }
/* fascia scura in basso: le didascalie restano leggibili su qualsiasi sfondo */
body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 18rem; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, var(--sc-tav-nero-a86), var(--sc-tav-nero-a55) 45%, transparent); }
#layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; transition: opacity .6s; }
#layer.fade { opacity: 0; }
#cursors { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .3s; }
#cursors.on { opacity: 1; }

/* ---------- marchio e logo */
.logo { display: flex; align-items: center; gap: .6rem; }
.logo .brick { width: 1.6rem; height: 1.05rem; background: var(--sc-azione); border-radius: .22rem; position: relative; margin-top: .35rem; box-shadow: inset 0 -.18rem 0 var(--sc-tav-nero-a18); }
.logo .brick::before, .logo .brick::after { content: ''; position: absolute; top: -.32rem; width: .48rem; height: .38rem; background: var(--sc-azione); border-radius: .1rem .1rem 0 0; }
.logo .brick::before { left: .22rem; } .logo .brick::after { right: .22rem; }
.logo.big .brick { transform: scale(2.4); margin: 1.4rem auto 1.2rem; }
#brand { font-family: var(--sc-font-marchio); position: fixed; top: 1.1rem; left: 1.4rem; right: 1.4rem; display: flex; align-items: center; justify-content: space-between; z-index: 6; pointer-events: none; transition: opacity .5s; }
#brand .logo b { font-size: 1.15rem; letter-spacing: -.01em; text-shadow: 0 1px 6px var(--sc-tav-nero-a50); }
#brand .logo span { font-size: .8rem; color: var(--sc-su-azione); background: var(--sc-azione); padding: .15rem .55rem; border-radius: 99px; font-weight: 700; }
#brand .hintx { font-size: .8rem; color: var(--sc-tav-grigio-chiaro); background: var(--sc-tav-nero-a55-2); padding: .35rem .7rem; border-radius: 99px; }

/* ---------- didascalia */
#cap { position: fixed; left: 50%; bottom: 6.6rem; translate: -50% 0; width: min(90vw, 72rem); text-align: center; z-index: 5; pointer-events: none; }
#cap .kick { display: inline-block; font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-su-azione); background: var(--sc-azione); padding: .2rem .7rem; border-radius: .4rem; margin-bottom: .55rem; }
#cap .line { font-size: 2.15rem; line-height: 1.22; font-weight: 750; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 12px var(--sc-tav-nero-a65), 0 0 2px var(--sc-tav-nero-a80); }
#cap.empty { opacity: 0; }
#cap.swap .line { animation: capIn .55s ease-out; }
@keyframes capIn { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }

/* ---------- barra dei controlli */
#bar { position: fixed; left: 1.4rem; right: 1.4rem; bottom: .9rem; display: flex; align-items: center; gap: .7rem; z-index: 7; padding: .55rem .8rem; border-radius: .9rem;
  background: var(--sc-tav-nero-a72); border: 1px solid var(--sc-demo-bordo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .5s, transform .5s; }
/* i comandi della barra sono i bottoni dell'app (.ui-btn, css/componenti.css): qui solo la misura nella barra.
   Un solo giallo: in pausa il ▶ grande al centro; il play/pausa della barra è secondario (stile unico, PR 9). */
#bar .ui-btn { min-height: 2.4rem; }
#bar .ui-btn--icona { min-width: 2.4rem; padding: 0; }
#trackWrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
#track { position: relative; height: .55rem; border-radius: 99px; background: var(--sc-su-colore-a16); cursor: pointer; touch-action: none; }
#fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--sc-azione); }
#knob { position: absolute; top: 50%; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--sc-su-colore); transform: translate(-50%, -50%); box-shadow: 0 1px 6px var(--sc-tav-nero-a50); }
#ticks i { position: absolute; top: -.15rem; bottom: -.15rem; width: 2px; background: var(--sc-tav-nero-a90-2); }
#chapters { position: relative; height: 1.2rem; }
.chap { position: absolute; top: 0; height: 100%; padding: 0 .25rem; font-size: .68rem; color: var(--sc-testo-secondario); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: .3rem; }
.chap span { font-weight: 800; color: var(--sc-tav-blu-chiaro-2); }
.chap:hover, .chap:focus-visible { color: var(--sc-su-colore); background: var(--sc-su-colore-a8); }
.chap:focus-visible { outline-offset: calc(-1 * var(--sc-focus-spessore)); } /* dentro: la riga dei capitoli taglia */
.chap.on { color: var(--sc-azione); } .chap.on span { color: var(--sc-azione); }
#time { font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 700; color: var(--sc-tav-grigio-chiaro); min-width: 5.6rem; text-align: center; }

body.idle { cursor: none; }
body.idle #bar { opacity: 0; transform: translateY(1rem); }
body.idle #brand .hintx { opacity: 0; }
body.idle #cap { bottom: 3rem; }
#cap { transition: bottom .5s; }

#bigPlay { position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 6.5rem; height: 6.5rem; border-radius: 50%; z-index: 6; display: grid; place-items: center;
  background: var(--sc-azione); color: var(--sc-su-azione); box-shadow: var(--sc-ombra-3); }
#bigPlay:hover { background: var(--sc-azione-hover); }
#bigPlay .ui-ico { width: 2.6rem; height: 2.6rem; margin-left: .3rem; }
#loader { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; text-align: center; gap: .6rem; background: var(--sc-tav-nero-2); font-size: 1.2rem; color: var(--sc-testo-secondario); }
body:not(.loading) #loader { display: none; }

/* ---------- cartolina finale */
#end { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; }
.endcard { pointer-events: auto; text-align: center; padding: 2.2rem 3.4rem 2.4rem; border-radius: 1.4rem; background: var(--sc-tav-grigio-scuro-a88); border: 1px solid var(--sc-demo-bordo);
  box-shadow: 0 20px 80px var(--sc-tav-nero-a55-3); animation: endIn .7s ease-out; max-width: min(92vw, 44rem); margin-bottom: 6rem; }
.endcard h1 { margin: 0 0 .4rem; font-size: 3.4rem; letter-spacing: -.02em; }
.endcard p { margin: 0 0 1.6rem; font-size: 1.3rem; color: var(--sc-tav-blu-chiaro-2); line-height: 1.4; }
.endbtns { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.endbtns .ui-btn { font-size: 1.2rem; padding: .75rem 1.5rem; text-decoration: none; } /* i bottoni dell'app, più grandi: è un video */
@keyframes endIn { from { opacity: 0; transform: scale(.94) translateY(1rem); } to { opacity: 1; transform: none; } }

/* ---------- elementi comuni dei pannelli */
.scene { position: absolute; inset: 0; }
.pnl { border-radius: 1rem; box-shadow: 0 14px 50px var(--sc-tav-nero-a42); animation: pnlIn .5s ease-out both; }
.pnl.dark { background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--sc-azione); margin-bottom: .5rem; }
@keyframes pnlIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
[data-at] { opacity: 0; transform: translateY(.6rem) scale(.98); transition: opacity .45s, transform .45s; }
[data-at].in { opacity: 1; transform: none; }
.pnl[data-at] { animation: none; }

/* scena 1 · brief */
.brief { position: absolute; left: 2rem; top: 4.6rem; width: min(31rem, 46vw); padding: 1.5rem 1.6rem; }
.brief h2 { margin: 0 0 .6rem; font-size: 2rem; letter-spacing: -.01em; }
.brief p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.45; color: var(--sc-tav-grigio-chiaro); }
.brief .r1, .brief .r2, .brief .r3 { opacity: 0; transform: translateY(.5rem); transition: opacity .5s, transform .5s; }
.brief.s1 .r1, .brief.s2 .r2, .brief.s3 .r3 { opacity: 1; transform: none; }
.stk { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.stk div { background: var(--sc-campo); border-radius: .6rem; padding: .5rem .7rem; }
.stk b { display: block; font-size: 1rem; } .stk small { color: var(--sc-testo-secondario); font-size: .85rem; }
.cons div { font-size: 1rem; font-weight: 650; padding: .3rem 0; }

/* scena 2 · ruoli */
.roles { position: absolute; left: 50%; top: 5rem; translate: -50% 0; width: min(94vw, 76rem); display: flex; flex-direction: column; gap: 1.4rem; align-items: center; }
.teams { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.tchip { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: 99px; background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); animation: pnlIn .5s both; }
.tchip i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); }
.tchip b { font-size: 1.1rem; }
.avs { display: flex; }
.av { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .72rem; color: var(--sc-tav-nero); background: var(--d); border: 2px solid var(--sc-tav-grigio-scuro-2); margin-left: -.45rem; }
.av:first-child { margin-left: 0; }
.rcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; }
.rcard { background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); border-radius: 1rem; padding: 1.2rem 1.2rem 1.3rem; box-shadow: 0 14px 40px var(--sc-tav-nero-a35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rcard .ric { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.rcard b { display: block; font-size: 1.35rem; margin-bottom: .35rem; }
.rcard small { display: block; font-size: 1rem; color: var(--sc-tav-blu-chiaro-2); line-height: 1.38; }

/* tema "Jira" scuro: planning, review, Scrum of Scrums */
.pnl.jira { background: var(--sc-fondo); border: 1px solid var(--sc-bordo); color: var(--sc-board-testo); }
.jhead { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--sc-bordo); font-size: 1rem; }
.jhead b { color: var(--sc-testo); font-size: 1.15rem; }
.jlogo { color: var(--sc-info); font-size: 1.2rem; }
.jcrumb { color: var(--sc-testo-secondario); }
.jsp { flex: 1; }
.jbtn { padding: .25rem .7rem; border-radius: .3rem; background: var(--sc-superficie); border: 1px solid var(--sc-bordo); font-size: .85rem; }
.jsh { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.jsh b { color: var(--sc-testo); font-size: 1.05rem; }
.jcount { color: var(--sc-testo-secondario); font-size: .88rem; }
.jlist { display: flex; flex-direction: column; gap: 2px; }
.jrow { display: grid; grid-template-columns: 1.2rem 4.3rem 1.6rem 1fr auto 2rem; align-items: center; gap: .55rem; padding: .48rem .7rem; background: var(--sc-superficie-2); border-radius: .25rem; font-size: 1rem; }
.jrow.fresh { animation: rowIn .5s ease-out; box-shadow: inset 3px 0 0 var(--sc-info); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-.8rem); background: var(--sc-tav-blu-scuro); } to { opacity: 1; transform: none; } }
.jt { color: var(--sc-board-verde); } .jk { color: var(--sc-testo-secondario); font-size: .85rem; } .ji { font-size: 1.1rem; }
.jn { color: var(--sc-testo); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn small { display: block; font-weight: 500; color: var(--sc-testo-secondario); font-size: .8rem; }
.jep { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .45rem; border-radius: .25rem; color: var(--sc-su-colore); background: var(--c); white-space: nowrap; }
.jp { justify-self: end; min-width: 1.8rem; text-align: center; padding: .08rem .4rem; border-radius: 99px; background: var(--sc-tav-grigio); color: var(--sc-testo); font-weight: 700; font-size: .85rem; }

.plan { position: absolute; left: 50%; top: 4.4rem; translate: -50% 0; width: min(62rem, 94vw); max-height: calc(100vh - 4.4rem - var(--safe)); overflow: hidden; }
.jsprint, .jback { margin: .9rem 1.1rem; padding: .8rem; border-radius: .4rem; background: var(--sc-superficie); }
.jsprint { border: 1px dashed var(--sc-bordo-controllo); }
.jempty { padding: 1rem; text-align: center; color: var(--sc-testo-secondario); font-size: .95rem; }
.jgoal { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; font-size: .9rem; color: var(--sc-testo-secondario); }
.jgi { flex: 1; min-height: 2.1rem; padding: .4rem .6rem; border-radius: .25rem; background: var(--sc-fondo); border: 1px solid var(--sc-bordo); color: var(--sc-testo); font-size: 1rem; font-weight: 600; }
.jgi.typing { border-color: var(--sc-azione); box-shadow: 0 0 0 1px var(--sc-azione); }
.jgi.typing::after { content: '|'; color: var(--sc-azione); animation: blink .8s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.jstart { padding: .35rem .9rem; border-radius: var(--sc-raggio-m); background: var(--sc-azione); color: var(--sc-su-azione); font-weight: 800; font-size: .95rem; transition: transform .15s, box-shadow .3s; }
.jstart.press { transform: scale(.94); box-shadow: 0 0 0 .5rem var(--sc-azione-tenue), 0 0 0 1.1rem var(--sc-azione-velo); background: var(--sc-board-verde); }
.jstart.press::before { content: '✓ '; }
.fakeptr { position: absolute; right: 30%; top: 70%; font-size: 1.8rem; color: var(--sc-su-colore); transform: rotate(-120deg); text-shadow: 0 2px 6px var(--sc-tav-nero-a60); opacity: 0;
  transition: right 1s cubic-bezier(.3,.7,.3,1), top 1s cubic-bezier(.3,.7,.3,1), opacity .3s; }
.fakeptr.go { opacity: 1; right: 4.2rem; top: 5.4rem; }

/* scena 4 · sprint */
.hudbar { position: absolute; left: 50%; top: 1rem; translate: -50% 0; display: flex; align-items: center; gap: .9rem; padding: .5rem 1.2rem; border-radius: 99px;
  background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); font-size: 1.05rem; font-weight: 650; box-shadow: 0 10px 30px var(--sc-tav-nero-a35); animation: pnlIn .5s both; white-space: nowrap; }
.pill { padding: .3rem .8rem; border-radius: 99px; font-weight: 800; font-size: .9rem; letter-spacing: .04em; }
.pill.sprint { background: var(--sc-ok-a22); color: var(--sc-tav-verde); }
.timer { font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 850; min-width: 5.4rem; text-align: center; }
.hsep { width: 1px; height: 1.6rem; background: var(--sc-demo-bordo); }
.side { position: absolute; right: 1.6rem; top: 5rem; width: min(23rem, 40vw); display: flex; flex-direction: column; gap: .9rem; max-height: calc(100vh - 5rem - var(--safe)); overflow: hidden; }
.side.left { right: auto; left: 1.6rem; }
.side.wide { width: min(29rem, 44vw); }
.mini { padding: 1rem 1.1rem; }
#sBurn { width: 100%; height: 7.5rem; display: block; }
#sBurn .ax { stroke: var(--sc-su-colore-a30); stroke-width: 2; }
#sBurn .ideal { stroke: var(--sc-su-colore-a45); stroke-width: 2.5; stroke-dasharray: 8 7; }
#sBurn .act { fill: none; stroke: var(--sc-tav-rosso-chiaro); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.brow { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; color: var(--sc-testo-secondario); margin-top: .3rem; }
.brow b { font-size: 1.6rem; color: var(--sc-testo); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cols h4 { margin: 0 0 .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-testo-secondario); }
.cols > div { background: var(--sc-su-colore-a5); border-radius: .5rem; padding: .45rem; min-height: 9rem; }
.mcard { display: block; position: relative; padding-right: 1.7rem !important; background: var(--sc-board-card); border-radius: .35rem; padding: .35rem .45rem; margin-bottom: .35rem;
  font-size: .78rem; line-height: 1.25; box-shadow: inset 3px 0 0 var(--c); animation: rowIn .45s ease-out; }
.mcard b { position: absolute; right: .35rem; top: .35rem; font-size: .72rem; background: var(--sc-tav-grigio); border-radius: 99px; padding: 0 .35rem; }

/* scena 5 · presenza e cursori */
.presence { position: absolute; left: 50%; top: 1rem; translate: -50% 0; display: flex; align-items: center; gap: .8rem; padding: .55rem 1.1rem; border-radius: 99px; font-size: 1rem; white-space: nowrap; }
.presence .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--sc-ok); box-shadow: 0 0 0 .3rem var(--sc-ok-a25); }
.pp { display: flex; align-items: center; gap: .4rem; font-weight: 650; }
.pp em { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--c); color: var(--sc-tav-nero); font-size: .85rem; }
.pp small { color: var(--sc-testo-secondario); font-weight: 500; font-size: .75rem; }
.dcur { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .25s; }
.dcur svg { width: 2.2rem; height: 2.2rem; display: block; filter: drop-shadow(0 2px 4px var(--sc-tav-nero-a50)); }
.dcur span { position: absolute; left: 1.8rem; top: 1.7rem; padding: .2rem .6rem; border-radius: .5rem; font-weight: 800; font-size: 1rem; color: var(--sc-tav-nero); white-space: nowrap; box-shadow: 0 2px 8px var(--sc-tav-nero-a35); }

/* scena 6 · review */
.rev { padding: 1rem 1.1rem; }
.rrow { display: grid; grid-template-columns: 1.7rem 1fr 2rem auto; gap: .6rem; align-items: center; padding: .55rem .6rem; border-radius: .3rem; background: var(--sc-superficie-2); margin-bottom: 3px; font-size: 1rem; }
.stamp { font-size: .82rem; font-weight: 800; padding: .25rem .55rem; border-radius: .3rem; white-space: nowrap; }
.rrow .stamp { opacity: 0; transform: scale(1.6) rotate(-8deg); transition: opacity .35s .35s, transform .35s .35s cubic-bezier(.2,1.6,.4,1); }
.rrow.in .stamp { opacity: 1; transform: rotate(-3deg); }
.stamp.ok { background: var(--sc-board-verde-scuro); color: var(--sc-su-colore); } .stamp.ko { background: var(--sc-tav-rosso); color: var(--sc-su-colore); }
.rsum { margin-top: .6rem; font-size: .92rem; color: var(--sc-testo-secondario); } .rsum b { color: var(--sc-testo); }
.goals { padding: 1rem 1.1rem; }
.goal { display: flex; align-items: center; gap: .55rem; font-size: 1rem; padding: .28rem 0; }
.goal span { width: 1.6rem; text-align: center; } .goal b { margin-left: auto; font-size: 1.15rem; }
.goal.ok b { color: var(--sc-tav-verde); } .goal.ko b { color: var(--sc-danger); } .goal.ko { color: var(--sc-tav-blu-chiaro-2); }
.tourtag { position: absolute; left: 50%; translate: -50% 0; top: 1rem; white-space: nowrap; padding: .55rem 1rem; border-radius: 99px; font-size: 1rem; font-weight: 700; }

/* scena 7 · retrospettiva: la lavagna scura dell'app, coi post-it di carta (stile unico, PR 6 e 9) */
.retroWrap { position: absolute; left: 50%; top: 4rem; translate: -50% 0; width: min(96vw, calc((100vh - 8.7rem - var(--safe)) * 1.6 + 19.7rem)); background: var(--sc-fondo); color: var(--sc-testo);
  border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 60px var(--sc-tav-nero-a50); animation: pnlIn .5s both; }
.rhead { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; background: var(--sc-superficie); border-bottom: 1px solid var(--sc-bordo); font-size: 1rem; }
.rhead .hmuted { color: var(--sc-testo-secondario); }
.rlogo { width: 1.7rem; height: 1.7rem; border-radius: .4rem; background: var(--sc-azione); display: grid; place-items: center; }
.rsteps { display: flex; gap: .3rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.rstep { display: flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 99px; font-size: .82rem; font-weight: 700; color: var(--sc-testo-secondario); transition: background .3s, color .3s; }
.rstep i { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; background: var(--sc-secondario-hover); color: var(--sc-testo); }
.rstep.on { background: var(--sc-azione-tenue); color: var(--sc-testo); box-shadow: inset 0 0 0 1px var(--sc-azione-bordo); } .rstep.on i { background: var(--sc-azione); color: var(--sc-su-azione); }
.rstep.done i { background: var(--sc-ok); color: var(--sc-su-ok); }
.rmain { display: flex; gap: .9rem; padding: .9rem; background-image: radial-gradient(var(--sc-retro-puntini) 1px, transparent 1px); background-size: 1.1rem 1.1rem; }
.rboard { position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 10; background: var(--sc-superficie); border: 1px solid var(--sc-bordo); border-radius: .8rem; box-shadow: var(--sc-ombra-2); overflow: hidden; container-type: inline-size; }
.rboard svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rboard .ray { fill: none; stroke: var(--sc-testo-secondario); opacity: .55; stroke-width: 7; stroke-linecap: round; }
.rboard .lab { font: 800 50px "Marker Felt", "Comic Sans MS", "Segoe Print", system-ui, sans-serif; text-anchor: middle; }
.pnote { position: absolute; width: 15cqw; min-height: 9.5cqw; padding: .9cqw .9cqw .6cqw; border-radius: 3px; background: var(--bg); color: var(--sc-carta-testo); display: flex; flex-direction: column;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(.6); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1);
  box-shadow: var(--sc-carta-ombra); font-size: 1.55cqw; line-height: 1.25; font-weight: 600; }
.pnote.in { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)); }
.pnote .nsec { display: none; flex: 1; place-items: center; font-size: 3cqw; color: var(--sc-carta-testo-2); }
.pnote.secret { background: var(--sc-carta-segreta); }
.pnote.secret .ntxt { display: none; } .pnote.secret .nsec { display: grid; }
.ntxt { flex: 1; }
.nfoot { display: flex; align-items: center; gap: .5cqw; margin-top: .5cqw; font-size: 1.05cqw; color: var(--sc-carta-testo-2); font-weight: 600; }
.nfoot em { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .9cqw; font-weight: 800; background: var(--sc-tav-blu-scuro-a12); }
.votes { margin-left: auto; display: flex; gap: .3cqw; }
.vdot { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--sc-info); box-shadow: 0 0 0 2px var(--sc-carta-testo); opacity: 0; transform: scale(2.2); transition: opacity .25s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.vdot.in { opacity: 1; transform: none; }
.racts { width: 17rem; flex: 0 0 auto; display: flex; flex-direction: column; gap: .55rem; }
.racts h4 { margin: 0 0 .2rem; font-size: 1.05rem; background: var(--sc-superficie); border-radius: .7rem; padding: .7rem .8rem; border: 1px solid var(--sc-bordo); }
.ract { background: var(--sc-superficie); border: 1px solid var(--sc-bordo); border-left: .3rem solid var(--sc-ok); border-radius: .7rem; padding: .65rem .8rem; }
.ract b { display: block; font-size: 1rem; margin-bottom: .2rem; } .ract small { color: var(--sc-testo-secondario); font-size: .85rem; }

/* scena 8 · Scrum of Scrums */
.sos { padding: 1rem 1.1rem; }
.steam { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; padding: .6rem .75rem; border-radius: .35rem; background: var(--sc-superficie-2); margin-bottom: 4px; box-shadow: inset .25rem 0 0 var(--c); }
.steam b { color: var(--sc-testo); font-size: 1.02rem; } .steam span { font-size: .95rem; text-align: right; } .steam small { grid-column: 1 / 3; color: var(--sc-testo-secondario); font-size: .82rem; }
.simp { margin-top: .55rem; padding: .6rem .75rem; border-radius: .35rem; background: var(--sc-tav-rosso-a18); border: 1px solid var(--sc-tav-rosso-a50); font-size: .95rem; line-height: 1.35; color: var(--sc-testo); }
.steam .jowner { color: var(--c); font-weight: 700; }
.sone { margin-top: .55rem; padding: .6rem .75rem; border-radius: .35rem; background: var(--sc-azione-a12); border: 1px solid var(--sc-azione-bordo); font-size: .95rem; line-height: 1.35; color: var(--sc-testo); }
.simp.dep { background: var(--sc-info-tenue); border-color: var(--sc-info-a45); }
.simp small { display: block; color: var(--sc-testo-secondario); font-size: .8rem; margin-top: .15rem; }

/* capitolo · la pagina d'ingresso (gialla come essereagile.com) e la scelta del workshop */
.ingr { position: absolute; left: 50%; top: 3.8rem; translate: -50% 0; width: min(64rem, 94vw); padding: 1.3rem 1.8rem 1.4rem; border-radius: 1.2rem;
  background: var(--sc-marchio); color: var(--sc-marchio-testo); box-shadow: 0 20px 70px var(--sc-tav-nero-a50); animation: pnlIn .5s both; font-family: "Avenir Next", Avenir, var(--sc-font);
  max-height: calc(100vh - 3.8rem - var(--safe)); overflow: hidden; }
.ihead { display: flex; align-items: center; gap: .5rem; font-size: .8rem; line-height: 1; }
.ihead img { width: 2.2rem; height: 2.2rem; }
.ingr h2 { margin: .3rem 0 .2rem; font-size: 2.3rem; letter-spacing: -.02em; }
.ilead { margin: 0 0 .9rem; font-size: 1.1rem; }
.irow { display: grid; grid-template-columns: 1fr 1.4fr; gap: .8rem; margin-bottom: .9rem; }
.istep { display: flex; gap: .7rem; align-items: flex-start; background: var(--sc-marchio-carta); border-radius: .9rem; padding: .7rem .9rem; }
.istep .in1 { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--sc-marchio-testo); color: var(--sc-marchio); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.istep b { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.iprof { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.iprof em, .mkcli em, .krow em, .jav { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; color: var(--sc-tav-nero); background: var(--c); flex: 0 0 auto; }
.ipills { display: flex; gap: .5rem; flex-wrap: wrap; }
.ipill { font-style: normal; padding: .35rem .9rem; border-radius: var(--sc-raggio-m); background: var(--sc-marchio-testo); color: var(--sc-su-colore); font-weight: 700; font-size: .95rem; transition: transform .2s, box-shadow .3s; }
.ipill.ghost { background: transparent; color: var(--sc-marchio-testo); border: 2px solid var(--sc-marchio-testo); }
.ipill.press { transform: scale(.95); box-shadow: 0 0 0 .4rem var(--sc-marchio-testo-a25); }
.igames { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .9rem; }
.igame { background: var(--sc-tav-giallo-chiaro-2); border-radius: .9rem; padding: .7rem 1rem; border: 3px solid transparent; transition: border-color .3s, transform .3s; }
.igame small { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-tav-giallo); font-weight: 800; }
.igame b { display: block; font-size: 1.35rem; } .igame span { font-size: .95rem; }
.igame.on { border-color: var(--sc-marchio-testo); transform: translateY(-.15rem); }
.itrainer { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; background: var(--sc-marchio-testo); color: var(--sc-su-colore); border-radius: .9rem; padding: .7rem .9rem; font-size: .95rem; }
.itrainer b { margin-right: .4rem; }
.ilab { color: var(--sc-tav-giallo-chiaro-3); margin-left: .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.iopt { font-style: normal; padding: .3rem .7rem; border-radius: .5rem; background: var(--sc-demo-bordo); transition: background .3s, color .3s; }
.iopt.on { background: var(--sc-marchio); color: var(--sc-marchio-testo); font-weight: 800; }
.istart { font-style: normal; margin-left: auto; padding: .35rem 1rem; border-radius: .5rem; background: var(--sc-ok); color: var(--sc-su-colore); font-weight: 800; transition: transform .15s, box-shadow .3s; }
.istart.press { transform: scale(.94); box-shadow: 0 0 0 .45rem var(--sc-ok-a30); }

/* capitolo · Skill building */
.skl { min-width: 0; }
.kstep { display: grid; grid-template-columns: 2rem 1fr 1.4rem; align-items: center; gap: .5rem; padding: .5rem .55rem; border-radius: .55rem; margin-bottom: .35rem; background: var(--sc-su-colore-a5); opacity: .55; transition: opacity .3s, background .3s; }
.kstep span { font-size: 1.4rem; text-align: center; }
.kstep b { font-size: 1rem; } .kstep b small { display: block; font-weight: 500; color: var(--sc-testo-secondario); font-size: .82rem; }
.kstep em { font-style: normal; color: var(--sc-tav-verde); font-weight: 900; opacity: 0; }
.kstep.on { opacity: 1; background: var(--sc-azione-a16); box-shadow: inset 3px 0 0 var(--sc-azione); }
.kstep.done { opacity: .9; } .kstep.done em { opacity: 1; }
.krow { display: grid; grid-template-columns: 1.8rem 7rem minmax(4rem, 1fr) auto; align-items: center; gap: .55rem; padding: .4rem 0; font-size: .95rem; }
.krow b small { display: block; font-weight: 500; color: var(--sc-testo-secondario); font-size: .78rem; }
.kbar { height: .5rem; border-radius: 99px; background: var(--sc-demo-bordo); overflow: hidden; }
.kbar i { display: block; height: 100%; background: var(--sc-ok); border-radius: 99px; }
.kx { font-size: .82rem; color: var(--sc-tav-blu-chiaro-2); white-space: nowrap; }
.ksum { margin-top: .5rem; font-size: .88rem; color: var(--sc-testo-secondario); }

/* le storie gemelle nel backlog */
.jrow { grid-template-columns: 1.2rem 4.3rem 1.6rem 1fr auto auto 2rem; }
.jtw { font-size: .72rem; font-weight: 800; padding: .12rem .45rem; border-radius: .25rem; white-space: nowrap; }
.jtw.d { background: var(--sc-azione-a18); color: var(--sc-tav-giallo-2); } .jtw.b { background: var(--sc-info-a16); color: var(--sc-tav-blu-chiaro-3); }

/* capitolo · la board come Jira */
.side.wideB { width: min(46rem, 60vw); }
.jb { overflow: hidden; }
.jtab { font-size: .82rem; padding: .25rem .55rem; border-radius: .3rem; color: var(--sc-testo-secondario); }
.jtab.on { color: var(--sc-testo); box-shadow: inset 0 -2px 0 var(--sc-azione); border-radius: 0; font-weight: 700; }
.jcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: .7rem; }
.jcols h4 { margin: 0 0 .45rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-testo-secondario); }
.jcols > div { background: var(--sc-superficie); border-radius: .4rem; padding: .5rem; min-height: 14rem; }
.jcard { background: var(--sc-superficie-2); border-radius: .35rem; padding: .5rem .55rem; margin-bottom: .45rem; box-shadow: inset 3px 0 0 var(--c); animation: rowIn .45s ease-out; }
.jct { color: var(--sc-testo); font-weight: 650; font-size: .9rem; line-height: 1.25; margin-bottom: .3rem; }
.jcm { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.jlink, .jmk { font-size: .7rem; font-weight: 700; padding: .08rem .35rem; border-radius: .25rem; background: var(--sc-tav-rosso-a25); color: var(--sc-tav-rosso-chiaro-3); white-space: nowrap; }
.jlink.ok { background: var(--sc-su-colore-a8); color: var(--sc-testo-secondario); text-decoration: line-through; }
.jmk { background: var(--sc-azione-a16); color: var(--sc-tav-giallo-2); } .jmk.wait { background: var(--sc-info-a18); color: var(--sc-tav-blu-chiaro-3); }
.jcf { display: flex; align-items: center; gap: .4rem; font-size: .78rem; }
.jcf b { margin-left: auto; background: var(--sc-tav-grigio); border-radius: 99px; padding: 0 .4rem; color: var(--sc-testo); font-size: .72rem; }
.jchk { color: var(--sc-testo-secondario); } .jchk.full { color: var(--sc-board-verde); font-weight: 800; }
.javs { display: flex; }
.jav { width: 1.45rem; height: 1.45rem; font-size: .66rem; border: 2px solid var(--sc-superficie-2); margin-left: -.4rem; }
.javs .jav:first-child { margin-left: 0; }

/* capitolo · il mockup in Sprint Review */
.mk { position: absolute; left: 50%; top: 4.2rem; translate: -50% 0; width: min(66rem, 94vw); background: var(--sc-fondo); border: 1px solid var(--sc-bordo); color: var(--sc-board-testo);
  max-height: calc(100vh - 4.2rem - var(--safe)); overflow: hidden; }
.mkhead { display: flex; align-items: center; gap: .7rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--sc-bordo); font-size: 1rem; }
.mkhead b { color: var(--sc-testo); font-size: 1.1rem; }
.mkv { padding: .1rem .45rem; border-radius: .3rem; background: var(--sc-superficie); border: 1px solid var(--sc-bordo); font-size: .8rem; }
.mkst { padding: .2rem .6rem; border-radius: 99px; background: var(--sc-info-a18); color: var(--sc-tav-blu-chiaro-3); font-weight: 800; font-size: .85rem; transition: background .3s; }
.mkst.ok { background: var(--sc-board-verde-scuro); color: var(--sc-su-colore); }
.mkbody { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1rem; padding: 1rem 1.1rem 1.1rem; }
.mkimg { position: relative; border-radius: .6rem; overflow: hidden; background: var(--sc-tav-grigio-chiaro-5); aspect-ratio: 7 / 5; }
.mkimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkstamp { position: absolute; right: 1rem; top: 1rem; font-size: 1.5rem; font-weight: 900; padding: .35rem .9rem; border-radius: .5rem; background: var(--sc-board-verde-scuro); color: var(--sc-su-colore);
  opacity: 0; transform: scale(1.8) rotate(-10deg); transition: opacity .3s, transform .4s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 6px 20px var(--sc-tav-nero-a35); }
.mkstamp.in { opacity: 1; transform: rotate(-4deg); }
.mkside { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.mklist { background: var(--sc-superficie); border-radius: .4rem; padding: .4rem; }
.mkrow { display: flex; justify-content: space-between; padding: .35rem .5rem; font-size: .92rem; color: var(--sc-testo); border-radius: .3rem; }
.mkrow:first-child { background: var(--sc-superficie-2); }
.mkrow i { font-style: normal; } .mkrow .a { display: none; } .mkrow.ok .a { display: inline; } .mkrow.ok .w { display: none; }
.mkcli { display: flex; gap: .6rem; align-items: center; padding: .55rem .6rem; border-radius: .4rem; background: var(--sc-su-colore-a5); }
.mkcli em { --c: var(--sc-tav-arancio-2); }
.mkcli b { display: block; color: var(--sc-testo); } .mkcli small { color: var(--sc-testo-secondario); }
.mkbtns { display: flex; gap: .5rem; }
.mkbtns i { font-style: normal; flex: 1; text-align: center; padding: .55rem .6rem; border-radius: .4rem; font-weight: 800; background: var(--sc-superficie-2); }
.mkok { background: var(--sc-board-verde-scuro) !important; color: var(--sc-su-colore); transition: transform .15s, box-shadow .3s; }
.mkok.press { transform: scale(.94); box-shadow: 0 0 0 .45rem var(--sc-board-verde-scuro-a35); }
.mknote { font-size: .95rem; line-height: 1.35; padding: .6rem .7rem; border-radius: .4rem; background: var(--sc-tav-blu-chiaro-a12); border: 1px solid var(--sc-tav-blu-chiaro-a40); color: var(--sc-testo); }

/* capitolo · sulla sagoma */
.grow { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem 0; font-size: .98rem; border-bottom: 1px solid var(--sc-demo-bordo); }
.grow .jav { border-color: var(--sc-tav-grigio-scuro-3); }
.gnote { margin-top: .55rem; font-size: .88rem; line-height: 1.35; color: var(--sc-tav-blu-chiaro-2); }

/* schermi stretti: pannelli impilati e più piccoli */
@media (max-width: 900px) {
  .rcards { grid-template-columns: repeat(2, 1fr); }
  .racts { display: none; }
  .side, .side.wide { width: min(92vw, 22rem); }
  #brand .hintx { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.rrow[data-at] { opacity: 1; transform: none; }