*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#102a2e;background:#f7f5ef;font-family:"Trebuchet MS","Avenir Next",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffb000;outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.06;letter-spacing:-.035em}
h1{font-size:clamp(2.8rem,7vw,6.4rem);max-width:980px;margin-bottom:24px}
h2{font-size:clamp(2rem,4vw,3.6rem);margin-bottom:22px}
h3{font-size:1.55rem}
.wrap{width:min(1160px,calc(100% - 40px));margin:0 auto}
.narrow{max-width:820px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,245,239,.95);border-bottom:1px solid #b8c1bb;backdrop-filter:blur(14px)}
.nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.03em;font-size:1.15rem}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid #102a2e;background:#e9ff70;font-size:.72rem;letter-spacing:-.06em;box-shadow:3px 3px 0 #102a2e}
.nav-links{display:flex;align-items:center;gap:24px;font-size:.88rem;font-weight:800}
.nav-links a:hover,.topic-links a:hover,.site-footer nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.nav-cta{padding:10px 15px;border:1.5px solid #102a2e;background:#102a2e;color:#fff}
.home-hero,.page-hero{overflow:hidden;position:relative}
.home-hero{padding:80px 0 72px;background:radial-gradient(circle at 76% 35%,rgba(20,184,166,.15),transparent 28%),linear-gradient(135deg,#f7f5ef 0 67%,#dff7f1 67%)}
.page-hero{padding:28px 0 76px;background:linear-gradient(115deg,#f7f5ef 0 73%,#e9ff70 73%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:64px;align-items:center}
.home-grid h1{max-width:760px}
.eyebrow,.kicker{font-size:.76rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.eyebrow{display:inline-block;padding:7px 10px;border:1px solid #102a2e;background:#e9ff70;margin-bottom:22px;box-shadow:3px 3px 0 #102a2e}
.kicker{color:#087f73;margin-bottom:12px}
.lead{font-size:clamp(1.12rem,2vw,1.42rem);max-width:800px;color:#345156}
.button-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 20px;border:2px solid #102a2e;font-weight:900;transition:transform .18s,box-shadow .18s}
.button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #102a2e}
.button-primary{background:#ffb000;color:#102a2e}
.button-outline{background:transparent}
.button-light{background:#e9ff70;color:#102a2e}
.button-light:hover{box-shadow:5px 5px 0 #fff}
.text-link{font-weight:900;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.proof-line{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.proof-line span{font-size:.68rem;font-weight:900;letter-spacing:.07em;border-left:3px solid #087f73;padding-left:8px}
/* ── Badge «Presto sul Chrome Web Store» ── */
.store-soon{display:flex;width:fit-content;align-items:center;gap:13px;margin:26px 0 0;padding:9px 20px 9px 10px;background:#fff;border:2px solid #102a2e;border-radius:999px;box-shadow:4px 4px 0 rgba(16,42,46,.85);animation:storeGlow 2.4s ease-in-out infinite;max-width:100%}
.store-soon .chrome-ic{width:38px;height:38px;flex:none;display:block}
.store-soon b{display:block;font-size:.98rem;font-weight:900;letter-spacing:-.015em;color:#102a2e;line-height:1.25}
.store-soon small{display:block;font-size:.74rem;font-weight:600;color:#2a4a4e;line-height:1.35}
@keyframes storeGlow{0%,100%{box-shadow:4px 4px 0 rgba(16,42,46,.85)}50%{box-shadow:4px 4px 0 rgba(16,42,46,.85),0 0 0 7px rgba(233,255,112,.4)}}
@media(prefers-reduced-motion:reduce){.store-soon{animation:none}}
@media(max-width:640px){.store-soon{gap:10px;padding:8px 16px 8px 9px}.store-soon .chrome-ic{width:30px;height:30px}.store-soon b{font-size:.85rem}.store-soon small{font-size:.68rem}}
.browser-visual{border:2px solid #102a2e;background:#fff;box-shadow:14px 14px 0 #102a2e;transform:rotate(1.2deg)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 13px;border-bottom:2px solid #102a2e;background:#dff7f1}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#102a2e}
.browser-bar span{margin-left:8px;font:700 .68rem monospace;opacity:.65}
.visual-body{padding:22px}
.mock-table{border:1px solid #9eb0aa;font:700 .78rem monospace}
.mock-table>div{display:grid;grid-template-columns:1.2fr 1fr .65fr;padding:10px;border-bottom:1px solid #d3dcd7}
.mock-table>div:last-child{border:0}
.mock-head{background:#102a2e;color:#fff}
.up{color:#087f73}
.down{color:#b4432f}
.flow-output{display:flex;gap:12px;margin-top:18px;padding:16px;background:#102a2e;color:#fff}
.pulse-dot{width:10px;height:10px;flex:0 0 10px;margin-top:6px;border-radius:50%;background:#e9ff70;box-shadow:0 0 0 5px rgba(233,255,112,.18)}
.flow-output small,.flow-output strong{display:block}
.flow-output small{font:700 .62rem monospace;color:#9bd8cf}
.flow-output p{font-size:.78rem;line-height:1.45;margin:7px 0 0;color:#d8e6e3}
.signal-strip{background:#102a2e;color:#fff}
.signal-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.signal-grid div{display:flex;align-items:center;gap:12px;padding:19px 12px;border-right:1px solid #486065}
.signal-grid div:last-child{border:0}
.signal-grid strong{color:#e9ff70;font:900 .75rem monospace}
.signal-grid span{font-size:.82rem;font-weight:800}
.section{padding:86px 0}
.section-tint{background:#e8f0eb;border-block:1px solid #b8c1bb}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
.intro-split{align-items:baseline}
.large-copy{font-family:Georgia,serif;font-size:1.4rem;line-height:1.55}
.solution-panel{border-left:6px solid #ffb000;padding-left:28px}
.steps{display:grid;gap:12px;margin-top:30px}
.step{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start;padding:17px;border:1px solid #b8c1bb;background:#fff}
.step span{display:grid;place-items:center;width:40px;height:40px;background:#e9ff70;border:1.5px solid #102a2e;font:900 .75rem monospace}
.step strong{display:block;margin-bottom:4px}
.step p{margin:0;font-size:.9rem;color:#52686c}
.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:36px}
.section-heading>p{max-width:480px}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.topic-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px;padding:24px;border:1.5px solid #102a2e;background:#f7f5ef}
.topic-card span,.card-index{font:900 .65rem monospace;letter-spacing:.09em;color:#087f73}
.topic-card h3{margin:7px 0 8px}
.topic-card p{font-size:.9rem;color:#52686c}
.topic-links{display:flex;flex-direction:column;gap:8px;border-left:1px solid #b8c1bb;padding-left:20px}
.topic-links a{font-size:.85rem;font-weight:900}
.compat-matrix{border:2px solid #102a2e;background:#fff;box-shadow:9px 9px 0 #ffb000}
.compat-matrix div{display:flex;justify-content:space-between;gap:20px;padding:18px;border-bottom:1px solid #b8c1bb}
.compat-matrix div:last-child{border:0}
.compat-matrix span{font:900 .7rem monospace;color:#087f73}
.compat-matrix b{text-align:right;font-size:.83rem}
.cta-band{padding:64px 0;background:#087f73;color:#fff}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:50px}
.cta-inner h2,.cta-inner p{max-width:760px}
.cta-band .kicker{color:#e9ff70}
.form-section{background:#ffedbd}
.lead-form{display:grid;gap:16px;padding:28px;border:2px solid #102a2e;background:#fff;box-shadow:10px 10px 0 #102a2e}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lead-form label{display:grid;gap:6px;font-size:.78rem;font-weight:900}
.lead-form input,.lead-form textarea{width:100%;padding:13px 14px;border:1.5px solid #102a2e;border-radius:0;background:#f9faf7;color:#102a2e;font:inherit}
.lead-form textarea{resize:vertical}
.form-note{margin:0;font-size:.74rem;color:#52686c}
.honeypot{position:absolute;left:-9999px}
.home-warning{margin-top:30px}
.breadcrumb{display:flex;gap:9px;align-items:center;margin:0 0 54px;font-size:.78rem;font-weight:800}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.data-card{padding:28px;border:2px solid #102a2e;background:#102a2e;color:#fff;box-shadow:10px 10px 0 #ffb000}
.data-card p{font:1.55rem/1.35 Georgia,serif;margin:20px 0 28px}
.data-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.data-flow span{padding:6px 8px;border:1px solid #8eb1aa;font:700 .62rem monospace}
.data-flow i{width:14px;height:1px;background:#e9ff70}
.use-case-grid{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.use-case-grid li{display:flex;align-items:center;gap:16px;padding:22px;border:1.5px solid #102a2e;background:#fff;font-weight:900}
.use-case-grid span{font:900 .72rem monospace;color:#087f73}
.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.example-grid article{min-height:220px;padding:24px;border:1.5px solid #102a2e;background:#fff;display:flex;flex-direction:column;align-items:flex-start}
.example-grid article>span{font:900 .68rem monospace;letter-spacing:.1em;color:#087f73}
.example-grid article h3{margin:18px 0 12px}
.example-grid article p{font-size:1rem}
.example-grid article .text-link{margin-top:auto}
.demo-kit-section{background:#fff}
.demo-kit-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:2px solid #102a2e}
.demo-kit-grid article{min-height:260px;padding:24px 20px;border-right:1px solid #9eb0aa;background:#f7f5ef}
.demo-kit-grid article:last-child{border-right:0}
.demo-kit-grid article>span{display:inline-grid;place-items:center;width:34px;height:34px;border:1.5px solid #102a2e;background:#e9ff70;font:900 .7rem monospace;box-shadow:3px 3px 0 #102a2e}
.demo-kit-grid h3{margin:26px 0 12px;font-size:1.35rem}
.demo-kit-grid p{margin:0;font-size:.88rem;color:#52686c}
.demo-kit-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:26px}
.demo-kit-cta p{max-width:650px;margin:0}
.visual-proof-section{background:#102a2e;color:#fff}
.visual-proof-section .kicker{color:#e9ff70}
.visual-proof-grid{display:grid;grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);gap:64px;align-items:center}
.illustrative-note{display:inline-block;margin-top:18px;padding:7px 10px;border:1px solid #78918c;color:#b8c9c5;font:700 .67rem monospace;text-transform:uppercase;letter-spacing:.07em}
.visual-pipeline{display:grid;grid-template-columns:1.15fr auto .85fr auto .9fr;gap:14px;align-items:center}
.pipeline-card{min-height:220px;padding:20px;border:2px solid #102a2e;background:#f7f5ef;color:#102a2e;box-shadow:7px 7px 0 #ffb000}
.pipeline-card>span{font:900 .65rem monospace;letter-spacing:.1em;color:#087f73}
.pipeline-card>strong{display:block;margin:18px 0;font-family:Georgia,serif;font-size:1.18rem;line-height:1.2}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #9eb0aa;font:700 .58rem monospace}
.mini-grid i{padding:7px 5px;border-right:1px solid #d3dcd7;border-bottom:1px solid #d3dcd7;font-style:normal}
.mini-grid i:nth-child(3n){border-right:0}
.mini-grid i:nth-last-child(-n+3){border-bottom:0}
.pipeline-export code{display:block;padding:12px;background:#e8f0eb;font-size:.66rem;line-height:1.7;overflow-wrap:anywhere}
.pipeline-ai{background:#e9ff70}
.pipeline-ai p{font-size:.8rem;line-height:1.5}
.pipeline-arrow{text-align:center;color:#e9ff70}
.pipeline-arrow b{display:block;font:900 2rem monospace}
.pipeline-arrow small{display:block;width:72px;font:700 .58rem monospace;text-transform:uppercase}
.about-section{background:#ffedbd}
.about-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:70px;align-items:start}
.profile-stamp{aspect-ratio:1;display:grid;place-items:center;align-content:center;border:2px solid #102a2e;background:#ffb000;box-shadow:12px 12px 0 #102a2e;transform:rotate(-2deg)}
.profile-stamp span{font:900 5.5rem/1 Georgia,serif;letter-spacing:-.08em}
.profile-stamp small{margin-top:18px;font:900 .62rem monospace;letter-spacing:.1em}
.about-lead{max-width:850px;font-family:Georgia,serif;font-size:1.35rem;line-height:1.5}
.experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:30px 0;background:#102a2e;border:1px solid #102a2e}
.experience-grid p{display:flex;flex-direction:column;gap:7px;margin:0;padding:20px;background:#fff}
.experience-grid strong{font-family:Georgia,serif;font-size:1.2rem}
.experience-grid span{font-size:.82rem;color:#52686c}
.secondary-claim{font:900 .7rem monospace;letter-spacing:.08em;text-transform:uppercase}
.check-list{list-style:none;padding:0;margin:25px 0 0}
.check-list li{padding:12px 0 12px 28px;border-bottom:1px solid #c9d2cd;position:relative}
.check-list li:before{content:"";position:absolute;left:2px;top:19px;width:10px;height:10px;background:#ffb000;border:1px solid #102a2e}
.compatibility-block{align-items:center}
.warning-card{padding:24px;border:2px solid #102a2e;background:#ffedbd;box-shadow:8px 8px 0 #102a2e}
.warning-card>span{font:900 .67rem monospace;letter-spacing:.1em;color:#b4432f}
.warning-card p{margin:12px 0 0;font-size:.88rem}
.faq-list{border-top:2px solid #102a2e}
.faq-list details{border-bottom:1px solid #9eb0aa;padding:0}
.faq-list summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;font-weight:900;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";position:absolute;right:4px;font:900 1.4rem monospace;color:#087f73}
.faq-list details[open] summary:after{content:"−"}
.faq-list details p{padding:0 35px 20px 0;color:#435e62}
.all-faq{margin-top:24px}
.related-section{padding-top:40px}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.related-card{min-height:145px;padding:20px;border:1.5px solid #102a2e;background:#fff;display:flex;flex-direction:column;justify-content:space-between;transition:background .18s,transform .18s}
.related-card:hover{background:#e9ff70;transform:translateY(-3px)}
.related-card span{font:900 .65rem monospace;color:#087f73}
.related-card strong{font-family:Georgia,serif;font-size:1.12rem}
.site-footer{padding:54px 0 24px;background:#102a2e;color:#dbe7e4}
.footer-grid{display:flex;justify-content:space-between;gap:40px}
.footer-brand{color:#fff}
.footer-brand .brand-mark{color:#102a2e}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;font-size:.83rem;font-weight:900}
.disclaimer{margin-top:38px;padding-top:25px;border-top:1px solid #53696d;font-size:.78rem;color:#b8c9c5}
.legal-line{margin-top:20px;font:700 .62rem monospace;color:#78918c}
.thanks-page{min-height:62vh;padding:100px 0;background:linear-gradient(120deg,#f7f5ef 75%,#e9ff70 75%)}
.thanks-page h1{font-size:clamp(2.8rem,6vw,5.6rem)}
@media(max-width:900px){
.nav-links a:not(.nav-cta){display:none}
.hero-grid,.split{grid-template-columns:1fr}
.home-hero{background:#f7f5ef}
.page-hero{background:linear-gradient(180deg,#f7f5ef 86%,#e9ff70 86%)}
.browser-visual{max-width:620px}
.signal-grid{grid-template-columns:repeat(2,1fr)}
.signal-grid div:nth-child(2){border-right:0}
.signal-grid div:nth-child(-n+2){border-bottom:1px solid #486065}
.topic-grid{grid-template-columns:1fr}
.example-grid{grid-template-columns:1fr}
.demo-kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-kit-grid article{min-height:auto;border-right:1px solid #9eb0aa;border-bottom:1px solid #9eb0aa}
.demo-kit-grid article:nth-child(2n){border-right:0}
.demo-kit-grid article:last-child{grid-column:1/-1;border-bottom:0}
.visual-proof-grid{grid-template-columns:1fr}
.visual-pipeline{grid-template-columns:1fr}
.pipeline-card{min-height:auto}
.pipeline-arrow{display:flex;align-items:center;justify-content:center;gap:12px}
.pipeline-arrow b{transform:rotate(90deg)}
.pipeline-arrow small{width:auto}
.about-grid{grid-template-columns:1fr}
.profile-stamp{width:220px}
.related-grid{grid-template-columns:repeat(2,1fr)}
.section-heading,.cta-inner{align-items:flex-start;flex-direction:column}
.split{gap:42px}
}
@media(max-width:600px){
.wrap{width:min(100% - 26px,1160px)}
.nav-shell{min-height:66px}
.home-hero,.page-hero{padding:46px 0 54px}
.breadcrumb{margin-bottom:38px}
.section{padding:62px 0}
.topic-card{grid-template-columns:1fr}
.topic-links{border-left:0;border-top:1px solid #b8c1bb;padding:16px 0 0}
.form-row,.use-case-grid,.related-grid{grid-template-columns:1fr}
.demo-kit-grid,.experience-grid{grid-template-columns:1fr}
.demo-kit-grid article,.demo-kit-grid article:nth-child(2n){border-right:0;border-bottom:1px solid #9eb0aa}
.demo-kit-grid article:last-child{grid-column:auto}
.demo-kit-cta{align-items:flex-start;flex-direction:column}
.visual-proof-grid{gap:36px}
.profile-stamp{width:180px}
.button-row .button{width:100%}
.button-row{align-items:flex-start}
.signal-grid div{padding:15px 8px;gap:7px}
.signal-grid span{font-size:.7rem}
.cta-band{padding:50px 0}
.lead-form{padding:20px;box-shadow:6px 6px 0 #102a2e}
.footer-grid{flex-direction:column}
.site-footer nav{flex-direction:column;gap:10px}
.browser-visual{transform:none;box-shadow:7px 7px 0 #102a2e}
.data-card{box-shadow:6px 6px 0 #ffb000}
.proof-line{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.related-card{transition:none}}
/* ─── Download Faro: CTA nav + modal installazione + termini ─────────────── */
.nav-dl { font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 8px; background: #0b6b60; color: #fff; text-decoration: none; white-space: nowrap; }
.nav-dl:hover { background: #09584f; color: #fff; }
@media (max-width: 860px) { .nav-dl { display: none; } }
.dl-backdrop { position: fixed; inset: 0; background: rgba(8,24,22,.62); backdrop-filter: blur(3px); z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.dl-backdrop[hidden] { display: none; }
.dl-modal { background: #fbfaf7; color: #1d2a28; border-radius: 16px; max-width: 640px; width: 100%; margin: auto 0; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.dl-modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: linear-gradient(140deg, #0b6b60, #07534d); color: #fff; }
.dl-modal-head .dl-icon { font-size: 30px; line-height: 1; }
.dl-modal-head h2 { margin: 0; font-size: 20px; color: #fff; }
.dl-modal-head .dl-sub { margin: 2px 0 0; font-size: 12.5px; color: #cfe7e2; }
.dl-close { margin-left: auto; background: none; border: none; color: #cfe7e2; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.dl-close:hover { color: #fff; }
.dl-body { padding: 20px 22px 22px; max-height: 62vh; overflow-y: auto; }
.dl-steps { list-style: none; counter-reset: step; margin: 0 0 14px; padding: 0; }
.dl-steps li { counter-increment: step; position: relative; padding: 0 0 14px 44px; font-size: 14px; line-height: 1.55; }
.dl-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #0b6b60; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.dl-steps code { background: #eef3f1; border: 1px solid #d3e0dc; border-radius: 5px; padding: 1px 6px; font-size: 12.5px; }
.dl-warn { background: #fdf6e7; border: 1px solid #eedf9e; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #6b5313; margin: 0 0 16px; }
.dl-tc { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.dl-tc input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #0b6b60; }
.dl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-btn { font: inherit; font-weight: 700; border-radius: 10px; padding: 12px 20px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 14.5px; }
.dl-btn-primary { background: #0b6b60; color: #fff; border: none; }
.dl-btn-primary:not(:disabled):hover { background: #09584f; }
.dl-btn-primary:disabled { background: #b9cac6; cursor: not-allowed; }
.dl-btn-ghost { background: none; border: 1.5px solid #c6d5d0; color: #34453f; }
.dl-btn-ghost:hover { border-color: #0b6b60; color: #0b6b60; }
.tc-full-backdrop { position: fixed; inset: 0; background: rgba(8,24,22,.62); z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.tc-full-backdrop[hidden] { display: none; }
.tc-full { background: #fbfaf7; color: #1d2a28; border-radius: 14px; max-width: 720px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.tc-full-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #dfe6e3; }
.tc-full-head h2 { margin: 0; font-size: 17px; color: #07534d; }
.tc-full-body { padding: 18px 22px 22px; max-height: 64vh; overflow-y: auto; font-size: 13px; line-height: 1.6; }
.tc-full-body h3 { font-size: 13.5px; color: #07534d; margin: 16px 0 4px; }
.tc-full-body p { margin: 4px 0; }
.tc-version { font-size: 11.5px; color: #6a7a75; }
@media print {
body.printing-dl > *:not(#dl-backdrop) { display: none !important; }
#dl-backdrop { position: static; background: none; padding: 0; display: block; overflow: visible; }
#dl-modal { box-shadow: none; max-width: 100%; }
.dl-body { max-height: none; overflow: visible; }
.dl-actions .dl-btn-primary, .dl-actions .dl-btn-ghost, .dl-close { display: none !important; }
.dl-tc { display: none !important; }
}
/* ─── Cookie banner ────────────────────────────────────────────────────────── */
.cookie-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;display:flex;gap:14px;align-items:center;flex-wrap:wrap;max-width:680px;width:calc(100% - 32px);background:#0d2b27;color:#e8f2ef;border-radius:14px;padding:16px 20px;box-shadow:0 16px 40px rgba(0,0,0,.35);font-size:13px;line-height:1.5}
.cookie-banner[hidden]{display:none}
.cookie-banner a{color:#8fe0cf}
.cookie-banner p{margin:0}
.cb-actions{display:flex;gap:8px;margin-left:auto}
.cb-btn{font:inherit;font-weight:700;border-radius:8px;padding:9px 16px;cursor:pointer;border:none;white-space:nowrap}
.cb-primary{background:#17a08a;color:#06251f}
.cb-primary:hover{background:#138a77}
.cb-ghost{background:transparent;color:#cfe7e2;border:1.5px solid #4d6f68}
.cb-ghost:hover{border-color:#8fe0cf}
@media(max-width:600px){.cb-actions{margin-left:0;width:100%}.cb-btn{flex:1}}
/* ─── Dati societari nel footer ────────────────────────────────────────────── */
.company-block { padding: 14px 0 4px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 14px; }
.company-head { margin: 0 0 6px; font-size: 13px; color: #9fb3ad; }
.company-data { margin: 0; font-size: 12px; line-height: 1.7; color: #9fb3ad; }
.company-data strong { color: #cfd9d5; font-size: 12.5px; }
.company-data a { color: #8fd6c5; }
/* ─── Footer professionale a colonne (ridisegno v2) ────────────────────────── */
.footer-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(150px,.65fr) minmax(150px,.65fr);gap:52px;align-items:start}
.footer-brand-col{min-width:0}
.footer-tagline{margin:10px 0 0;font-size:.85rem;color:#b8c9c5;max-width:36ch;line-height:1.55}
.company-data{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.company-name{margin:0 0 7px;font-size:.8rem;color:#cfd9d5;line-height:1.5}
.company-lines{margin:0;font-size:.78rem;line-height:1.8;color:#9fb3ad}
.company-lines a{color:#8fd6c5;text-decoration:none}
.company-lines a:hover{text-decoration:underline}
.site-footer .footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:.83rem;font-weight:400}
.site-footer .footer-col h4{margin:2px 0 7px;font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#78918c}
.site-footer .footer-col a{color:#dbe7e4;text-decoration:none}
.site-footer .footer-col a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.disclaimer{margin-top:40px;padding-top:22px;border-top:1px solid #53696d;font-size:.7rem;line-height:1.65;color:#a3b6b2}
.disclaimer strong{color:#c8d6d2;font-size:.72rem;letter-spacing:.02em}
.legal-line{margin-top:16px;font:700 .62rem monospace;color:#78918c;letter-spacing:.04em}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr;gap:30px}.company-data{max-width:420px}}
/* ─── Demo hero animata: domanda → risposta Faro ───────────────────────────── */
.hero-demo .visual-body{display:flex;flex-direction:column;gap:12px}
.demo-row.is-late{background:rgba(220,80,60,.08)}
.demo-q{border:1.5px solid #cfe0db;border-radius:10px;padding:9px 12px;background:#fff}
.demo-tag{display:block;font-size:.58rem;font-weight:900;letter-spacing:.13em;color:#087f73;margin-bottom:3px}
.demo-q p{margin:0;font-size:.86rem;font-weight:700;color:#1d2a28;min-height:1.3em}
.type-caret{display:inline-block;width:2px;height:1em;background:#087f73;margin-left:2px;vertical-align:-2px;animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
.demo-answer{opacity:.25;transform:translateY(4px);transition:opacity .45s,transform .45s}
.demo-answer.demo-visible{opacity:1;transform:none}
.demo-answer strong{font-size:.86rem}
.demo-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.demo-kpis span{font-size:.62rem;font-weight:700;color:#345156;border:1px solid #cfe0db;border-radius:999px;padding:3px 9px;background:#f2faf8}
.demo-kpis b{font-size:.72rem;color:#065f46}
.demo-bars{display:flex;gap:5px;align-items:flex-end;height:34px;margin-top:9px}
.demo-bars i{flex:1;max-width:34px;background:linear-gradient(180deg,#0b6b60,#0b6b60aa);border-radius:3px 3px 0 0;height:var(--h,40%);transform-origin:bottom;animation:demo-grow .7s cubic-bezier(.22,1,.36,1) backwards}
@keyframes demo-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.demo-bars i,.type-caret{animation:none}}
/* ─── Allegati nei form lead ────────────────────────────────────────────────── */
.faro-file-label input[type=file]{font-size:.8rem;padding:8px}
.faro-file-note{display:block;margin:-6px 0 12px;color:#6a7a75;font-size:.75rem}
/* ─── reCAPTCHA nei form lead ──────────────────────────────────────────────── */
.g-recaptcha-box{margin:6px 0 14px;min-height:1px}
/* ═══ v2 — Sezioni meccanismo (03/09): finestre animate che mostrano
COME funziona Faro: grounding, raccolta completa, BI/proiettore.
Animazioni attivate da .is-live (IntersectionObserver in index.html);
prefers-reduced-motion mostra lo stato finale. ═══ */
.mech-window{border:2px solid #102a2e;background:#fff;box-shadow:14px 14px 0 #102a2e;overflow:hidden}
.mech-window .browser-bar{border-bottom:2px solid #102a2e}
.mech-body{padding:16px 16px 18px;font-family:"Trebuchet MS",sans-serif}
.mech-q{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #102a2e;border-radius:999px;background:#f2faf8;padding:6px 12px;font-size:.78rem;font-weight:800}
.mech-q .who{font-size:.6rem;letter-spacing:.08em;color:#0b6b60;font-weight:900}
.mech-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.js .mech-steps li{display:flex;align-items:center;gap:10px;border:1px dashed #9eb0aa;border-radius:10px;padding:8px 11px;font-size:.78rem;background:#fff;opacity:.25;transform:translateX(-6px);transition:opacity .5s,transform .5s}
.mech-steps li b{font-family:monospace;font-size:.68rem;background:#102a2e;color:#e9ff70;border-radius:6px;padding:2px 7px;flex:0 0 auto}
.mech-steps li i{margin-left:auto;font-style:normal;font-weight:900;color:#0b6b60;opacity:0;transition:opacity .4s}
.is-live .mech-steps li{opacity:1;transform:none}
.is-live .mech-steps li:nth-child(1){transition-delay:.15s}
.is-live .mech-steps li:nth-child(2){transition-delay:.95s}
.is-live .mech-steps li:nth-child(3){transition-delay:1.75s}
.is-live .mech-steps li i{opacity:1;transition-delay:1.9s}
.mech-answer{margin-top:14px;display:flex;gap:11px;background:#102a2e;color:#fff;border-radius:12px;padding:13px 14px}
.mech-answer .dot{width:9px;height:9px;flex:0 0 9px;margin-top:5px;border-radius:50%;background:#e9ff70;box-shadow:0 0 0 4px rgba(233,255,112,.16)}
.mech-answer small{display:block;font:700 .6rem monospace;color:#9bd8cf;letter-spacing:.06em}
.mech-answer strong{display:block;font-size:.84rem;margin-top:4px}
.mech-answer .count{color:#e9ff70}
.mech-certain{display:inline-flex;align-items:center;gap:5px;margin-left:8px;background:#e9ff70;color:#102a2e;font-size:.56rem;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:2px 8px;vertical-align:2px}
/* Raccolta completa: pagina ferma vs contatore che sale */
.mech-collect{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin-top:14px}
.mech-static table{border-collapse:collapse;width:100%;font:700 .7rem monospace}
.mech-static th{background:#dff7f1;border:1px solid #9eb0aa;padding:5px 7px;text-align:left}
.mech-static td{border:1px solid #d3dcd7;padding:4px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mech-static .cap{margin-top:7px;font-size:.62rem;font-weight:800;color:#0b6b60;display:flex;gap:6px;align-items:center}
.mech-static .cap:before{content:"⏸";font-size:.8rem}
.mech-collect-or{position:relative;border:1.5px solid #102a2e;border-radius:12px;background:#f2faf8;padding:12px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.mech-collect-or .cap{font:900 .58rem monospace;letter-spacing:.1em;color:#0b6b60}
.mech-big{font:900 1.7rem Georgia,serif;color:#065f46;letter-spacing:-.02em}
.mech-big small{display:block;font:700 .62rem "Trebuchet MS",sans-serif;color:#345156;letter-spacing:0}
.mech-prog{height:10px;border:1.5px solid #102a2e;border-radius:999px;background:#fff;overflow:hidden}
.mech-prog i{display:block;height:100%;width:6%;background:repeating-linear-gradient(45deg,#0b6b60 0 8px,#0b6b60aa 8px 16px);transition:width 2.2s cubic-bezier(.3,.8,.3,1)}
.is-live .mech-prog i{width:100%}
.mech-collect-or .done{align-self:flex-start;border:1.5px solid #102a2e;background:#e9ff70;color:#102a2e;font-size:.62rem;font-weight:900;border-radius:999px;padding:3px 10px;opacity:0;transform:translateY(4px);transition:.5s}
.is-live .mech-collect-or .done{opacity:1;transform:none;transition-delay:2.3s}
.mech-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.mech-badges span{border:1.5px solid #102a2e;border-radius:999px;padding:4px 11px;font-size:.64rem;font-weight:900;background:#fff;box-shadow:3px 3px 0 #102a2e}
.mech-badges span:nth-child(2n){background:#dff7f1;transform:rotate(-.6deg)}
.mech-badges span:nth-child(2n+1){transform:rotate(.5deg)}
/* Mini-mock dentro le card BI/proiettore/formule */
.mech-mini{border:2px solid #102a2e;border-radius:10px;background:#fff;margin:0 0 12px;overflow:hidden;box-shadow:6px 6px 0 #102a2e}
.mech-mini .mm-bar{display:flex;gap:5px;align-items:center;padding:6px 9px;border-bottom:2px solid #102a2e;background:#dff7f1;font:900 .56rem monospace;letter-spacing:.06em;color:#102a2e}
.mech-mini .mm-bar i{width:6px;height:6px;border-radius:50%;background:#102a2e}
.mm-body{padding:11px}
.mm-pivot{width:100%;border-collapse:collapse;font:700 .62rem monospace}
.mm-pivot th,.mm-pivot td{border:1px solid #d3dcd7;padding:4px 6px;text-align:right}
.mm-pivot th{background:#f2faf8;text-align:left}
.mm-pivot .tot{background:#dff7f1;font-weight:900}
.is-live .mm-pivot td,.is-live .mm-pivot .tot{animation:mmPop .45s cubic-bezier(.22,1,.36,1) backwards}
.is-live .mm-pivot td:nth-child(2){animation-delay:.5s}
.is-live .mm-pivot td:nth-child(3){animation-delay:.75s}
.is-live .mm-pivot .tot{animation-delay:1.05s}
@keyframes mmPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.mm-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:800 .68rem "Trebuchet MS",sans-serif}
.mm-chips .chip{border:1.5px solid #102a2e;border-radius:8px;padding:4px 9px;background:#f2faf8;opacity:0;transform:translateY(7px)}
.mm-chips .op{font-family:monospace;font-size:.9rem;color:#0b6b60;opacity:0}
.is-live .mm-chips .chip,.is-live .mm-chips .op{animation:mmIn .5s cubic-bezier(.22,1,.36,1) forwards}
.is-live .mm-chips .chip:nth-of-type(1){animation-delay:.2s}
.is-live .mm-chips .op:nth-of-type(2){animation-delay:.7s}
.is-live .mm-chips .chip:nth-of-type(3){animation-delay:.9s}
.is-live .mm-chips .op:nth-of-type(4){animation-delay:1.4s}
.is-live .mm-chips .chip:nth-of-type(5){animation-delay:1.6s}
@keyframes mmIn{to{opacity:1;transform:none}}
.mm-result{margin-top:9px;display:flex;align-items:center;gap:8px;border:1.5px solid #102a2e;border-radius:9px;background:#e9ff70;padding:6px 10px;font-size:.72rem;font-weight:900;opacity:0;transform:translateY(5px)}
.is-live .mm-result{animation:mmIn .5s cubic-bezier(.22,1,.36,1) 2.15s forwards}
.mm-result .bar{flex:1;height:9px;border:1.5px solid #102a2e;border-radius:999px;overflow:hidden;background:#fff}
.mm-result .bar i{display:block;height:100%;width:0;background:#0b6b60}
.is-live .mm-result .bar i{width:34.2%;transition:width 1s cubic-bezier(.3,.8,.3,1) 2.3s}
.mm-proj{display:grid;grid-template-columns:1fr 1.3fr;gap:9px;align-items:stretch}
.mm-tile{border:1.5px solid #102a2e;border-radius:9px;background:#102a2e;color:#fff;padding:8px 9px;display:flex;flex-direction:column;justify-content:center}
.mm-tile small{font:700 .52rem monospace;letter-spacing:.08em;color:#9bd8cf}
.mm-tile b{font:900 1.05rem Georgia,serif;color:#e9ff70}
.mm-graph{border:1.5px solid #102a2e;border-radius:9px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:6px}
.mm-graph .row{display:flex;align-items:center;gap:6px;font:700 .56rem monospace}
.mm-graph .row em{font-style:normal;width:44px;opacity:.7;white-space:nowrap;overflow:hidden}
.mm-graph .row .tr{flex:1;height:8px;border:1px solid #9eb0aa;border-radius:999px;background:#f2faf8;overflow:hidden}
.mm-graph .row .tr i{display:block;height:100%;width:0;background:#0b6b60;border-radius:999px}
.is-live .mm-graph .row:nth-child(1) .tr i{width:82%;transition:width .8s cubic-bezier(.3,.8,.3,1) .3s}
.is-live .mm-graph .row:nth-child(2) .tr i{width:58%;transition:width .8s cubic-bezier(.3,.8,.3,1) .5s}
.is-live .mm-graph .row:nth-child(3) .tr i{width:71%;transition:width .8s cubic-bezier(.3,.8,.3,1) .7s}
.is-live .mm-graph .row:nth-child(4) .tr i{width:36%;transition:width .8s cubic-bezier(.3,.8,.3,1) .9s}
.mm-full{align-self:flex-start;border:1.5px solid #102a2e;border-radius:999px;background:#dff7f1;font-size:.55rem;font-weight:900;padding:2px 9px;letter-spacing:.05em}
@media(prefers-reduced-motion:reduce){
.mech-steps li,.mech-prog i,.mech-collect-or .done,.mm-chips .chip,.mm-chips .op,.mm-result{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
.mm-pivot td,.mm-pivot .tot{animation:none!important;opacity:1!important}
.mm-result .bar i,.mm-graph .row .tr i{width:var(--w,60%)!important;transition:none!important}
}
/* ═══ v2.1 — Animazioni più teatrali (richiesta Luca) + sezione intro ═══ */
/* Finestra grounding: passi a pop, risposta che sale, badge che rimbalza */
.is-live .mech-steps li{animation:stepPop .55s cubic-bezier(.22,1.4,.36,1) backwards}
.is-live .mech-steps li:nth-child(1){animation-delay:.2s}
.is-live .mech-steps li:nth-child(2){animation-delay:1s}
.is-live .mech-steps li:nth-child(3){animation-delay:1.8s}
@keyframes stepPop{from{opacity:0;transform:translateX(-14px) scale(.94)}to{opacity:1;transform:none}}
.is-live .mech-steps li:nth-child(1) b{animation:chipPulse 1s 1s}
.is-live .mech-steps li:nth-child(2) b{animation:chipPulse 1s 1.8s}
.is-live .mech-steps li:nth-child(3) b{animation:chipPulse 1s 2.6s}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,107,96,0)}45%{box-shadow:0 0 0 6px rgba(11,107,96,.18)}}
.js .mech-answer{opacity:0;transform:translateY(10px)}
.is-live .mech-answer{animation:answerIn .6s cubic-bezier(.22,1.3,.36,1) 2.5s forwards}
@keyframes answerIn{to{opacity:1;transform:none}}
.is-live .mech-certain{animation:badgePop .5s cubic-bezier(.3,1.6,.4,1) 3s}
@keyframes badgePop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.mech-type{border-right:2px solid #0b6b60;padding-right:2px}
.is-live .mech-type{border-color:transparent}
.mech-window.is-typing .mech-type{animation:caretBlink .8s step-end infinite;border-color:#0b6b60}
@keyframes caretBlink{50%{border-color:transparent}}
/* Finestra raccolta: ⏸ che respira, log di raccolta, pill a cascata */
.is-live .mech-static .cap:before{animation:pauseBreath 2.2s ease-in-out infinite}
@keyframes pauseBreath{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
.mech-log{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:5px;font-size:.66rem;font-weight:800;color:#345156}
.js .mech-log li{display:flex;gap:7px;align-items:center;opacity:0;transform:translateY(5px)}
.mech-log li i{font-style:normal;color:#0b6b60;font-weight:900;opacity:0}
.is-live .mech-log li{animation:mmIn .45s cubic-bezier(.22,1.3,.36,1) forwards}
.is-live .mech-log li:nth-child(1){animation-delay:.5s}
.is-live .mech-log li:nth-child(2){animation-delay:1.3s}
.is-live .mech-log li:nth-child(3){animation-delay:2.1s}
.is-live .mech-log li i{animation:mmIn .3s 2.3s forwards}
.mech-big b{display:inline-block}
.is-live .mech-big .count{animation:bigPulse .45s cubic-bezier(.3,1.6,.4,1) 2.45s}
@keyframes bigPulse{0%{transform:scale(1)}55%{transform:scale(1.14);color:#0b6b60}100%{transform:scale(1)}}
.js .mech-badges span{opacity:0;transform:translateY(8px) rotate(var(--r,0deg))}
.is-live .mech-badges span{animation:pillIn .5s cubic-bezier(.22,1.4,.36,1) forwards}
.is-live .mech-badges span:nth-child(1){--r:-2deg;animation-delay:2.6s}
.is-live .mech-badges span:nth-child(2){--r:1.5deg;animation-delay:2.75s}
.is-live .mech-badges span:nth-child(3){--r:-1deg;animation-delay:2.9s}
.is-live .mech-badges span:nth-child(4){--r:2deg;animation-delay:3.05s}
.is-live .mech-badges span:nth-child(5){--r:-1.5deg;animation-delay:3.2s}
@keyframes pillIn{to{opacity:1;transform:none}}
/* Sezione intro «Il collo di bottiglia»: entrata + percorso prima/dopo */
.js .mech-on .kicker,.js .mech-on h2,.js .mech-on .large-copy p{opacity:0;transform:translateY(14px)}
.mech-on.is-live .kicker{animation:mmIn .55s .05s cubic-bezier(.22,1,.36,1) forwards}
.mech-on.is-live h2{animation:mmIn .55s .18s cubic-bezier(.22,1,.36,1) forwards}
.mech-on.is-live .large-copy p:nth-child(1){animation:mmIn .55s .32s cubic-bezier(.22,1,.36,1) forwards}
.mech-on.is-live .large-copy p:nth-child(2){animation:mmIn .55s .46s cubic-bezier(.22,1,.36,1) forwards}
.mech-paths{margin-top:26px;display:grid;gap:14px}
.path{border:1.5px solid #102a2e;border-radius:12px;background:#fff;padding:12px 14px;box-shadow:6px 6px 0 #102a2e}
.path.is-short{background:#dff7f1}
.path-title{display:block;font:900 .58rem monospace;letter-spacing:.1em;color:#0b6b60;margin-bottom:9px}
.path-line{position:relative;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow:hidden;padding:2px 0}
.path-line .node{flex:0 0 auto;border:1.5px solid #102a2e;border-radius:999px;padding:4px 11px;font-size:.66rem;font-weight:900;background:#f7f5ef;white-space:nowrap}
.is-short .path-line .node{background:#fff}
.is-short .path-line .node.ok{background:#e9ff70}
.path-line .gap{flex:1;height:0;border-top:2px dashed #9eb0aa;min-width:14px}
.is-short .path-line .gap{border-top-style:solid;border-color:#0b6b60}
.path-line .runner{position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#102a2e;box-shadow:0 0 0 4px rgba(16,42,46,.12)}
.is-live .is-long .runner{animation:runLong 3.4s cubic-bezier(.45,.05,.55,.95) 1.2s infinite}
.is-live .is-short .runner{animation:runShort 1.1s cubic-bezier(.45,.05,.55,.95) 1.2s infinite;background:#0b6b60;box-shadow:0 0 0 4px rgba(11,107,96,.16)}
@keyframes runLong{0%{left:0;opacity:0}6%{opacity:1}88%{opacity:1}100%{left:calc(100% - 11px);opacity:0}}
@keyframes runShort{0%{left:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{left:calc(100% - 11px);opacity:0}}
.path-time{font:900 .6rem monospace;color:#345156;margin-top:8px;display:inline-block;border:1px dashed #9eb0aa;border-radius:6px;padding:2px 8px}
.is-short .path-time{color:#065f46;border-color:#0b6b60}
@media(max-width:720px){.mech-collect{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
.mech-window.is-typing .mech-type{animation:none;border-color:transparent}
.is-live .mech-steps li,.is-live .mech-answer,.is-live .mech-log li,.is-live .mech-badges span,
.mech-on .kicker,.mech-on h2,.mech-on .large-copy p,.is-live .mech-big .count,.is-live .mech-certain,
.is-live .mech-log li i{animation:none!important;opacity:1!important;transform:none!important}
.is-live .mech-static .cap:before,.is-live .is-long .runner,.is-live .is-short .runner{animation:none!important}
.is-live .is-long .runner,.is-live .is-short .runner{left:calc(100% - 11px)}
}
/* ═══ v2.2 — Sezione BI: una colonna, scene GRANDI animate ═══ */
.bi-stack{display:grid;gap:38px;margin-top:34px}
.bi-row{display:grid;grid-template-columns:1.12fr .88fr;gap:30px;align-items:center;border:2px solid #102a2e;background:#fff;box-shadow:12px 12px 0 #102a2e;padding:26px;border-radius:4px}
.bi-row:nth-child(even) .bi-visual{order:2}
.bi-row:nth-child(even) .bi-copy{order:1}
.bi-copy>span{display:inline-block;font:900 .62rem monospace;letter-spacing:.12em;background:#102a2e;color:#e9ff70;padding:4px 10px;margin-bottom:10px}
.bi-copy h3{margin:0 0 10px}
.bi-copy p{font-size:.95rem;color:#345156;margin:0 0 16px}
@media(max-width:900px){.bi-row{grid-template-columns:1fr}.bi-row:nth-child(even) .bi-visual{order:1}.bi-row:nth-child(even) .bi-copy{order:2}}
/* Scena 1 — Pivot XL: dropzone chip + griglia che si popola in sequenza */
.pivot-xl .drop{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:2px solid #102a2e;background:#f2faf8}
.js .pivot-xl .drop .dz{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #102a2e;border-radius:9px;background:#fff;padding:6px 11px;font:800 .7rem "Trebuchet MS",sans-serif;opacity:0;transform:translateY(9px) scale(.9)}
.pivot-xl .drop .dz b{font:900 .56rem monospace;color:#0b6b60;letter-spacing:.06em}
.pivot-xl.is-live .drop .dz{animation:mmIn .5s cubic-bezier(.22,1.5,.36,1) forwards}
.pivot-xl.is-live .drop .dz:nth-child(1){animation-delay:.25s}
.pivot-xl.is-live .drop .dz:nth-child(2){animation-delay:.5s}
.pivot-xl.is-live .drop .dz:nth-child(3){animation-delay:.75s}
.pivot-xl table{width:100%;border-collapse:collapse;font:800 .76rem monospace}
.pivot-xl th,.pivot-xl td{border:1px solid #d3dcd7;padding:9px 12px;text-align:right;background:#fff}
.pivot-xl thead th,.pivot-xl tbody th{background:#dff7f1;text-align:left}
.js .pivot-xl td{opacity:0;transform:scale(.55)}
.pivot-xl.is-live td{animation:mmPop .5s cubic-bezier(.22,1.4,.36,1) forwards}
.pivot-xl.is-live tbody tr:nth-child(1) td:nth-child(2){animation-delay:.95s}
.pivot-xl.is-live tbody tr:nth-child(1) td:nth-child(3){animation-delay:1.1s}
.pivot-xl.is-live tbody tr:nth-child(1) td:nth-child(4){animation-delay:1.25s}
.pivot-xl.is-live tbody tr:nth-child(2) td:nth-child(2){animation-delay:1.4s}
.pivot-xl.is-live tbody tr:nth-child(2) td:nth-child(3){animation-delay:1.55s}
.pivot-xl.is-live tbody tr:nth-child(2) td:nth-child(4){animation-delay:1.7s}
.pivot-xl.is-live tbody tr:nth-child(3) td:nth-child(2){animation-delay:1.85s}
.pivot-xl.is-live tbody tr:nth-child(3) td:nth-child(3){animation-delay:2s}
.pivot-xl.is-live tbody tr:nth-child(3) td:nth-child(4){animation-delay:2.15s}
.pivot-xl .tot td,.pivot-xl .tot th{background:#102a2e;color:#fff;font-weight:900}
.pivot-xl .tot td{color:#e9ff70}
.pivot-xl.is-live .tot td{animation-delay:2.45s}
.pivot-xl .rowhl{position:relative;overflow:hidden}
.pivot-xl.is-live .rowhl:after{content:"";position:absolute;inset:0;background:rgba(11,107,96,.14);transform:translateX(-101%);animation:rowSweep 1.6s ease 2.9s 2}
@keyframes rowSweep{to{transform:translateX(101%)}}
.pivot-xl .grand{font:900 1rem Georgia,serif}
/* Scena 2 — Builder XL: chip grandi che si assemblano, risultato che conta */
.builder-xl .pad{padding:16px}
.builder-xl .zone{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-height:64px;border:2px dashed #9eb0aa;border-radius:12px;padding:12px;background:#fff}
.js .builder-xl .fchip{display:inline-flex;align-items:center;border:2px solid #102a2e;border-radius:11px;padding:9px 16px;font:900 .95rem "Trebuchet MS",sans-serif;background:#dff7f1;box-shadow:4px 4px 0 #102a2e;opacity:0;transform:translateY(16px) rotate(-2deg)}
.js .builder-xl .fop{font:900 1.5rem Georgia,serif;color:#0b6b60;opacity:0}
.js .builder-xl .feq{font:900 1rem monospace;color:#345156;opacity:0}
.builder-xl.is-live .fchip,.builder-xl.is-live .fop,.builder-xl.is-live .feq{animation:chipXL .55s cubic-bezier(.22,1.5,.36,1) forwards}
@keyframes chipXL{from{opacity:0;transform:translateY(16px) rotate(-2deg) scale(.85)}to{opacity:1;transform:none}}
.builder-xl.is-live .fchip:nth-of-type(1){animation-delay:.3s}
.builder-xl.is-live .fop:nth-of-type(2){animation-delay:.85s}
.builder-xl.is-live .fchip:nth-of-type(3){animation-delay:1.05s}
.builder-xl.is-live .feq:nth-of-type(4){animation-delay:1.6s}
.builder-xl.is-live .fchip:nth-of-type(5){animation-delay:1.8s}
.js .builder-xl .out{margin-top:16px;display:flex;align-items:center;gap:14px;border:2px solid #102a2e;border-radius:12px;background:#e9ff70;padding:13px 16px;opacity:0;transform:translateY(10px)}
.builder-xl.is-live .out{animation:mmIn .55s cubic-bezier(.22,1.4,.36,1) 2.35s forwards}
.builder-xl .out .name{font:900 .8rem "Trebuchet MS",sans-serif}
.builder-xl .out .val{font:900 1.7rem Georgia,serif;color:#065f46;margin-left:auto}
.builder-xl .out .bar{flex:1;height:14px;border:2px solid #102a2e;border-radius:999px;background:#fff;overflow:hidden;max-width:220px}
.builder-xl .out .bar i{display:block;height:100%;width:0;background:#0b6b60}
.builder-xl.is-live .out .bar i{width:34.2%;transition:width 1.1s cubic-bezier(.3,.8,.3,1) 2.55s}
.builder-xl .uses{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.js .builder-xl .uses span{border:1.5px solid #102a2e;border-radius:999px;padding:4px 12px;font:800 .68rem "Trebuchet MS",sans-serif;background:#fff;opacity:0}
.builder-xl.is-live .uses span{animation:mmIn .45s cubic-bezier(.22,1.4,.36,1) forwards}
.builder-xl.is-live .uses span:nth-child(1){animation-delay:2.9s}
.builder-xl.is-live .uses span:nth-child(2){animation-delay:3.05s}
.builder-xl.is-live .uses span:nth-child(3){animation-delay:3.2s}
/* Scena 3 — Proiettore XL v2.6: cruscotto da riunione (header + 3 KPI +
grafico per cliente). is-live sta sempre SULL'ARTICOLO .proj-xl, unica
fonte di verità: gli stati attivi sono discendenti .proj-xl.is-live —
mai .screen-xl.is-live (elemento interno che is-live non riceve). */
.screen-xl{position:relative;aspect-ratio:16/8.4;background:linear-gradient(160deg,#0e2823,#102a2e);border-top:2px solid #102a2e;overflow:hidden;display:flex;flex-direction:column;padding:16px 18px}
.screen-xl .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(233,255,112,.09) 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.proj-xl.is-live .shine{animation:shine 3.4s ease 1.1s infinite}
@keyframes shine{to{transform:translateX(120%)}}
.screen-xl .full{position:absolute;right:16px;top:14px;border:1.5px solid #2b5a52;border-radius:999px;color:#9bd8cf;font:900 .56rem monospace;letter-spacing:.08em;padding:4px 11px}
.screen-xl .scr-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px;flex-wrap:wrap}
.screen-xl .scr-head b{font:900 .95rem Georgia,serif;color:#f2fff0;letter-spacing:.02em}
.screen-xl .scr-head small{font:700 .56rem monospace;letter-spacing:.08em;color:#7fbfb2}
.js .screen-xl .scr-head{opacity:0;transform:translateY(8px)}
.proj-xl.is-live .scr-head{animation:mmIn .5s cubic-bezier(.22,1.3,.36,1) .15s forwards}
.screen-xl .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.js .screen-xl .xl-tile{border:1.5px solid #2b5a52;border-radius:12px;padding:10px 14px;background:rgba(255,255,255,.04);opacity:0;transform:translateY(12px)}
.proj-xl.is-live .xl-tile{animation:mmIn .6s cubic-bezier(.22,1.3,.36,1) forwards}
.proj-xl.is-live .xl-tile:nth-child(1){animation-delay:.35s}
.proj-xl.is-live .xl-tile:nth-child(2){animation-delay:.55s}
.proj-xl.is-live .xl-tile:nth-child(3){animation-delay:.75s}
.screen-xl .xl-tile small{display:block;font:700 .56rem monospace;letter-spacing:.1em;color:#9bd8cf;margin-bottom:2px}
.screen-xl .xl-tile b{display:block;font:900 1.5rem Georgia,serif;color:#e9ff70;letter-spacing:-.02em;line-height:1.15}
.screen-xl .xl-tile b em{font-style:normal;font-size:.78rem;color:#9bd8cf}
.screen-xl .chart{margin-top:14px;flex:1;display:flex;flex-direction:column;min-height:0}
.js .screen-xl .chart{opacity:0;transform:translateY(10px)}
.proj-xl.is-live .chart{animation:mmIn .6s cubic-bezier(.22,1.3,.36,1) .95s forwards}
.screen-xl .chart-t{font:700 .56rem monospace;letter-spacing:.1em;color:#7fbfb2;margin:0 2px 6px}
.screen-xl .bars{flex:1;display:flex;gap:10px;min-height:0}
.screen-xl .bcol{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.screen-xl .bwrap{flex:1;display:flex;align-items:flex-end;min-height:0}
.screen-xl .bwrap i{flex:1;background:linear-gradient(180deg,#17c3a5,#0b6b60);border-radius:6px 6px 0 0;height:8%;min-height:5px}
.screen-xl .bcol>span{font:700 .52rem monospace;letter-spacing:.06em;color:#7fbfb2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-xl.is-live .bwrap i{animation:barXL .9s cubic-bezier(.22,1.3,.36,1) forwards}
.proj-xl.is-live .bcol:nth-child(1) i{--bh:86%;animation-delay:1.15s}
.proj-xl.is-live .bcol:nth-child(2) i{--bh:58%;animation-delay:1.3s}
.proj-xl.is-live .bcol:nth-child(3) i{--bh:72%;animation-delay:1.45s}
.proj-xl.is-live .bcol:nth-child(4) i{--bh:41%;animation-delay:1.6s}
.proj-xl.is-live .bcol:nth-child(5) i{--bh:64%;animation-delay:1.75s}
.proj-xl.is-live .bcol:nth-child(6) i{--bh:33%;animation-delay:1.9s}
@keyframes barXL{to{height:var(--bh,60%)}}
@media(prefers-reduced-motion:reduce){
.pivot-xl td,.builder-xl .fchip,.builder-xl .fop,.builder-xl .feq,.builder-xl .out,.builder-xl .uses span,
.pivot-xl .drop .dz,.js .screen-xl .xl-tile,.js .screen-xl .scr-head,.js .screen-xl .chart,
.js .any-card .arow,.js .any-card .afoot{animation:none!important;opacity:1!important;transform:none!important}
.screen-xl .bwrap i{height:var(--bh,60%)!important;animation:none!important}
.builder-xl .out .bar i{width:34.2%!important;transition:none!important}
.pivot-xl.is-live .rowhl:after,.proj-xl.is-live .shine{animation:none!important;display:none}
}
/* ═══ v2.3 — Torna su (go to top): appare dopo 600px di scroll ═══ */
.to-top{position:fixed;right:22px;bottom:22px;z-index:30;width:48px;height:48px;border:2px solid #102a2e;border-radius:12px;background:#e9ff70;color:#102a2e;font:900 1.25rem Georgia,serif;display:grid;place-items:center;cursor:pointer;box-shadow:5px 5px 0 #102a2e;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s,box-shadow .15s}
.to-top.is-on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #102a2e}
.to-top:focus-visible{outline:3px solid #0b6b60;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}}
/* ============================================================
v2.7 — Sezione «qualsiasi tabella sul web» (.anyweb)
is-live sta SULLA CARD .any-card (elemento osservato dallo
script): tutti gli stati attivi sono discendenti.
============================================================ */
.anyweb .section-heading p{max-width:56ch}
.anyweb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:34px}
.any-card{background:#fff;border:2px solid #102a2e;border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 rgba(16,42,46,.85);transition:transform .18s ease,box-shadow .18s ease}
.any-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(16,42,46,.85)}
.any-card .browser-bar{border-bottom:2px solid #102a2e}
.atbl{padding:6px 0 4px}
.arow{display:flex;gap:14px;align-items:baseline;padding:7px 14px;font-size:.82rem}
.arow:not(.ahead):nth-child(even){background:rgba(16,42,46,.035)}
.arow>span:first-child{flex:1;min-width:0;text-align:left;font-weight:600}
.arow b{font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.arow b:first-of-type{width:6.8em}
.arow b:last-of-type{width:3.8em}
.arow .up{color:#0b6b60}
.arow .dn{color:#b3261e}
.ahead{background:#102a2e;color:#e9ff70;font:700 .6rem/1.4 monospace;letter-spacing:.09em;text-transform:uppercase;padding:8px 14px}
.ahead b{color:#e9ff70}
.afoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:2px solid #102a2e;background:#dff7f1;padding:10px 14px;font-size:.82rem}
.anum{background:#e9ff70;border:1.5px solid #102a2e;border-radius:999px;font:700 .55rem/1 monospace;letter-spacing:.08em;padding:4px 10px;text-transform:uppercase}
.ares{color:#102a2e}
.ares b{font-variant-numeric:tabular-nums}
.anyweb-note{margin:26px auto 0;max-width:62ch;text-align:center;font-size:.95rem;color:#2a4a4e}
/* Stati iniziali nascosti SOLO con JS: senza JavaScript tutto visibile */
.js .any-card .ahead{opacity:0;transform:translateY(6px)}
.js .any-card .arow:not(.ahead){opacity:0;transform:translateX(-10px)}
.js .any-card .afoot{opacity:0;transform:translateY(8px)}
/* Sequenza: header → righe una a una con flash di lettura → footer col risultato */
.any-card.is-live .ahead{animation:mmIn .35s cubic-bezier(.22,1.3,.36,1) .05s forwards}
.any-card.is-live .arow:not(.ahead):nth-child(2){animation:mmIn .45s cubic-bezier(.22,1.3,.36,1) .45s forwards,rowFlash .65s ease 1.35s}
.any-card.is-live .arow:not(.ahead):nth-child(3){animation:mmIn .45s cubic-bezier(.22,1.3,.36,1) .65s forwards,rowFlash .65s ease 1.55s}
.any-card.is-live .arow:not(.ahead):nth-child(4){animation:mmIn .45s cubic-bezier(.22,1.3,.36,1) .85s forwards,rowFlash .65s ease 1.75s}
.any-card.is-live .arow:not(.ahead):nth-child(5){animation:mmIn .45s cubic-bezier(.22,1.3,.36,1) 1.05s forwards,rowFlash .65s ease 1.95s}
.any-card.is-live .afoot{animation:mmIn .5s cubic-bezier(.22,1.3,.36,1) 2.35s forwards}
@keyframes rowFlash{0%,100%{background:transparent}35%{background:rgba(233,255,112,.55)}}
@media(max-width:880px){.anyweb-grid{grid-template-columns:1fr}}
/* ============================================================
v2.8 — MOBILE: nessuno sforamento orizzontale
Nodi dei percorsi a capo; tabelle mock scrollabili DENTRO le
finestre animate (i numeri tipo 1.847.128.533.360,00 non si
spezzano e allargavano tutto); numeri ridotti; guard clip.
============================================================ */
html{overflow-x:clip}
@media(max-width:640px){
.path-line{flex-wrap:wrap;gap:6px}
.path-line .gap{min-width:10px}
.path-line .runner{display:none}
.mech-window{min-width:0;box-shadow:8px 8px 0 #102a2e}
.bi-visual{min-width:0}
.bi-visual .mech-window{box-shadow:8px 8px 0 #102a2e}
.mech-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
.screen-xl .xl-tile b{font-size:1.12rem}
.screen-xl .kpi-row{gap:8px}
.arow{gap:10px;padding:7px 10px;font-size:.76rem}
.arow b:first-of-type{width:5.6em}
.arow b:last-of-type{width:3.2em}
.afoot{font-size:.74rem}
.proof-line{gap:8px}
.hero-demo .browser-bar span{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* ============================================================
v2.9 — GUIDA (layout documenti: nav laterale + articolo)
============================================================ */
.docs-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start;padding:36px 0 64px}
.docs-nav{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;border:2px solid #102a2e;border-radius:14px;background:#fff;box-shadow:6px 6px 0 rgba(16,42,46,.85);padding:16px 6px 12px}
.docs-nav .docs-nav-title{display:block;padding:6px 14px 10px;font:900 .95rem Georgia,serif;color:#102a2e;text-decoration:none;border-bottom:2px solid #102a2e;margin:0 8px 6px}
.docs-nav h5{font:900 .62rem monospace;letter-spacing:.12em;color:#0b6b60;text-transform:uppercase;margin:14px 14px 4px}
.docs-nav a.docs-link{display:block;padding:6px 14px;border-radius:8px;color:#2a4a4e;text-decoration:none;font:600 .86rem system-ui,sans-serif}
.docs-nav a.docs-link:hover{background:#dff7f1;color:#102a2e}
.docs-nav a.docs-link.active{background:#102a2e;color:#e9ff70}
.docs-article{max-width:78ch}
.docs-article h1{font-family:Georgia,serif;font-weight:900;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;color:#102a2e;margin:6px 0 14px;line-height:1.15}
.docs-article h2{margin-top:36px;font:900 1.28rem Georgia,serif;color:#102a2e}
.docs-article h3{margin-top:24px;font:800 1.02rem system-ui,sans-serif;color:#102a2e}
.docs-article p{font-size:.95rem;line-height:1.7;color:#2a4a4e;margin:10px 0}
.docs-article ul,.docs-article ol{padding-left:22px;margin:10px 0}
.docs-article li{font-size:.95rem;line-height:1.65;color:#2a4a4e;margin:4px 0}
.docs-meta{font:700 .66rem monospace;letter-spacing:.12em;color:#0b6b60;text-transform:uppercase}
.callout{border:2px solid #102a2e;border-left:10px solid #e9ff70;border-radius:10px;background:#f7f5ef;padding:12px 16px;margin:18px 0;font-size:.9rem;line-height:1.6;color:#2a4a4e}
.callout.warn{border-left-color:#ffb000}
.docs-article kbd{font:700 .8rem monospace;border:1.5px solid #102a2e;border-bottom-width:3px;border-radius:6px;padding:1px 6px;background:#fff;color:#102a2e}
.docs-article table{border-collapse:collapse;width:100%;font-size:.88rem;margin:16px 0}
.docs-article th,.docs-article td{border:1.5px solid #102a2e;padding:7px 10px;text-align:left;vertical-align:top}
.docs-article th{background:#dff7f1;font:800 .78rem system-ui,sans-serif;color:#102a2e}
.docs-next{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:18px;border-top:2px dashed #9bd8cf}
.docs-next a{border:2px solid #102a2e;border-radius:10px;padding:10px 14px;font:700 .84rem system-ui,sans-serif;color:#102a2e;text-decoration:none;background:#fff;box-shadow:4px 4px 0 rgba(16,42,46,.85)}
@media(max-width:900px){
.docs-shell{grid-template-columns:1fr;gap:24px;padding-top:20px}
.docs-nav{position:static;max-height:none}
}
.docs-nav a.docs-link-active{background:#102a2e;color:#e9ff70}
/* figure della guida */
.docs-article figure{margin:20px 0;border:2px solid #102a2e;border-radius:12px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 rgba(16,42,46,.25)}
.docs-article figure img{display:block;width:100%;height:auto}
.docs-article figcaption{padding:9px 14px;background:#dff7f1;border-top:2px solid #102a2e;font:700 .74rem system-ui,sans-serif;color:#2a4a4e}
/* ============================================================
v2.10 — GUIDA mobile: menu a scomparsa (drawer sinistro)
Su schermi stretti la nav della guida diventa un cassetto
fisso a sinistra, aperto dal bottone «☰ Indice della guida».
============================================================ */
.docs-menu-btn{display:none}
.docs-scrim{display:none}
@media(max-width:900px){
.docs-shell{padding-top:14px}
.docs-menu-btn{display:flex;align-items:center;gap:10px;grid-column:1/-1;justify-self:center;
position:sticky;top:12px;z-index:50;width:max-content;margin-bottom:4px;
background:#fff;border:2px solid #102a2e;border-radius:10px;padding:10px 16px;
font:800 .9rem system-ui,sans-serif;color:#102a2e;box-shadow:4px 4px 0 rgba(16,42,46,.85);cursor:pointer}
.docs-nav{position:fixed;top:0;bottom:0;left:0;width:min(84vw,320px);max-height:none;
z-index:70;margin:0;border-radius:0 14px 14px 0;box-shadow:14px 0 40px rgba(16,42,46,.35);
transform:translateX(-103%);transition:transform .25s ease}
.docs-nav.open{transform:none}
.docs-scrim{display:block;position:fixed;inset:0;background:rgba(16,42,46,.45);z-index:65}
.docs-scrim[hidden]{display:none}
}
/* ============================================================
v2.11 — Scena «Faro Pocket» nel bi-stack: QR cifrato + telefono
con il report. is-live sull'ARTICOLO .pocket-xl (regola d'oro).
============================================================ */
.pocket-xl .pk-stage{position:relative;background:linear-gradient(160deg,#0e2823,#102a2e);border-top:2px solid #102a2e;padding:22px 20px 20px;display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;min-height:300px}
.pocket-xl .pk-qr{position:relative;background:#fff;border-radius:12px;padding:12px;width:max-content;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.js .pocket-xl .pk-qr{opacity:0;transform:scale(.85)}
.pocket-xl.is-live .pk-qr{animation:mmIn .5s cubic-bezier(.22,1.3,.36,1) .3s forwards}
.pk-qr-t{font:800 9px monospace;letter-spacing:.12em;color:#102a2e;text-align:center;margin-bottom:7px}
.pk-qr-svg{display:block;width:118px;height:118px}
.pk-qr svg path{fill:#102a2e}
.pk-scan{position:absolute;left:8px;right:8px;top:30px;height:3px;background:linear-gradient(90deg,transparent,#2fd4c4,transparent);border-radius:2px;opacity:0}
.pocket-xl.is-live .pk-scan{animation:pkScan 1.6s ease-in-out 1s 2}
@keyframes pkScan{0%{top:30px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:130px;opacity:0}}
.pocket-xl .pk-flow{position:absolute;left:24px;bottom:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.js .pocket-xl .pk-step{opacity:0;transform:translateY(8px)}
.pocket-xl.is-live .pk-step{animation:mmIn .4s cubic-bezier(.22,1.3,.36,1) forwards}
.pocket-xl.is-live .pk-step.s1{animation-delay:.6s}
.pocket-xl.is-live .pk-step.s2{animation-delay:1.5s}
.pocket-xl.is-live .pk-step.s3{animation-delay:2.4s}
.pk-step{background:rgba(255,255,255,.06);border:1px solid #2b5a52;border-radius:999px;color:#9bd8cf;font:700 9.5px monospace;letter-spacing:.06em;padding:5px 10px}
.pk-arrow{color:#2fd4c4;font-size:12px}
.js .pocket-xl .pk-arrow{opacity:0}
.pocket-xl.is-live .pk-arrow{animation:mmIn .3s ease forwards}
.pocket-xl.is-live .pk-arrow:first-of-type{animation-delay:1.2s}
.pocket-xl.is-live .pk-arrow:last-of-type{animation-delay:2.1s}
.pocket-xl .pk-phone{position:relative;margin-left:auto;width:min(240px,52%);background:#0b1418;border:2px solid #1e3640;border-radius:22px;padding:20px 12px 14px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.pk-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:64px;height:7px;border-radius:99px;background:#1e3640}
.pk-screen{display:flex;flex-direction:column;gap:9px;background:#fffdf9;border-radius:12px;padding:12px;min-height:170px}
.js .pocket-xl .pk-screen{opacity:0;transform:translateY(10px)}
.pocket-xl.is-live .pk-screen{animation:mmIn .55s cubic-bezier(.22,1.3,.36,1) 2.7s forwards}
.pk-head{display:flex;align-items:center;gap:6px}
.pk-head b{font:900 12px Georgia,serif;color:#24302e}
.pk-head small{margin-left:auto;font:700 7.5px monospace;color:#5a6b68;letter-spacing:.06em}
.pk-tile{background:#f2ede3;border-radius:9px;padding:8px 10px}
.pk-tile small{display:block;font:800 7.5px monospace;letter-spacing:.09em;color:#5a6b68}
.pk-tile b{font:900 17px Georgia,serif;color:#096b63}
.pk-tile b em{font-style:normal;font-size:10px;color:#5a6b68}
.pk-bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.pk-bars i{flex:1;background:linear-gradient(180deg,#17a394,#096b63);border-radius:4px 4px 0 0;height:10%}
.pocket-xl.is-live .pk-bars i{animation:barXL .7s cubic-bezier(.22,1.3,.36,1) forwards}
.pocket-xl.is-live .pk-bars i:nth-child(1){--bh:84%;animation-delay:3.3s}
.pocket-xl.is-live .pk-bars i:nth-child(2){--bh:52%;animation-delay:3.4s}
.pocket-xl.is-live .pk-bars i:nth-child(3){--bh:68%;animation-delay:3.5s}
.pocket-xl.is-live .pk-bars i:nth-child(4){--bh:36%;animation-delay:3.6s}
.pocket-xl.is-live .pk-bars i:nth-child(5){--bh:60%;animation-delay:3.7s}
.pk-badge{display:inline-block;background:#e9ff70;border:1px solid #102a2e;border-radius:999px;font:800 7.5px monospace;letter-spacing:.05em;color:#102a2e;padding:4px 9px;align-self:flex-start}
.js .pocket-xl .pk-badge{opacity:0}
.pocket-xl.is-live .pk-badge{animation:badgePop .5s cubic-bezier(.22,1.6,.36,1) 4s both}
.pk-wa{margin-top:10px;text-align:center;background:#0c2a1e;border:1px solid #25d366;color:#25d366;border-radius:10px;font:800 11px system-ui,sans-serif;padding:8px}
.pk-wa-ic{font-size:12px}
.js .pocket-xl .pk-wa{opacity:0;transform:scale(.9)}
.pocket-xl.is-live .pk-wa{animation:mmIn .45s cubic-bezier(.22,1.3,.36,1) 4.5s forwards}
@media(max-width:900px){
.bi-row.pocket-xl .bi-visual{order:2}
.bi-row.pocket-xl .bi-copy{order:1}
.pocket-xl .pk-stage{grid-template-columns:1fr;justify-items:center}
.pocket-xl .pk-phone{margin-left:0}
.pocket-xl .pk-flow{position:static;justify-content:center;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
.js .pocket-xl .pk-qr,.js .pocket-xl .pk-step,.js .pocket-xl .pk-arrow,.js .pocket-xl .pk-screen,.js .pocket-xl .pk-badge,.js .pocket-xl .pk-wa{animation:none!important;opacity:1!important;transform:none!important}
.pocket-xl .pk-bars i{height:var(--bh,60%)!important;animation:none!important}
.pk-scan{display:none}
}
/* ============================================================
v2.12 — DEMO 30" : flusso completo su ERP anonimo.
Scena 900×540 scalata via JS; timeline con classi s-*.
============================================================ */
.demo30-sec .section-heading p{max-width:60ch}
.d30-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 10px}
.d30-chips span{border:1.5px solid #d8d4c8;border-radius:999px;padding:5px 12px;font:700 .74rem system-ui,sans-serif;color:#6a7a75;background:#fff}
.d30-chips span.on{border-color:#102a2e;background:#102a2e;color:#e9ff70}
.d30-viewport{position:relative;width:100%;overflow:hidden;border:2.5px solid #102a2e;border-radius:14px;background:#f4f2ec;box-shadow:8px 8px 0 rgba(16,42,46,.85)}
.d30-stage{position:absolute;top:0;left:0;width:900px;height:540px;transform-origin:top left;font-family:"Trebuchet MS",system-ui,sans-serif}
.d30-prog{position:absolute;top:0;left:0;height:4px;width:0;background:#e9ff70;border-right:2px solid #102a2e;z-index:9}
.d30-stage.run .d30-prog{animation:d30p 30s linear forwards}
@keyframes d30p{to{width:100%}}
/* ERP */
.d30-erp{position:absolute;top:14px;left:14px;width:520px;background:#fff;border:1px solid rgba(36,48,46,.18);border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(30,42,39,.12)}
.d30-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#22303c}
.d30-bar i{width:9px;height:9px;border-radius:50%;background:#46545e}
.d30-bar span{margin-left:8px;color:#cfd8dc;font:600 11px system-ui,sans-serif}
.d30-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.d30-tbl td{padding:8px 12px;border-bottom:1px solid #eef0ec;color:#263238}
.d30-tbl .h td{background:#f7f8f7;font:800 9.5px monospace;letter-spacing:.08em;color:#5a6b68}
.d30-tbl .n{text-align:right;font-variant-numeric:tabular-nums}
/* lucciola */
.d30-lucciola{position:absolute;right:326px;bottom:36px;opacity:0;transform:scale(.6)}
.d30-stage.s-lucc .d30-lucciola{opacity:1;transform:none;transition:all .4s cubic-bezier(.22,1.3,.36,1)}
.d30-orb{width:52px;height:52px;border-radius:50%;margin-left:auto;filter:drop-shadow(0 2px 6px rgba(6,62,58,.35))}
.d30-bub{position:absolute;right:66px;bottom:8px;width:190px;background:#fffdf9;color:#173b38;border:1px solid rgba(13,118,110,.2);border-radius:12px 12px 3px 12px;padding:9px 11px;box-shadow:0 8px 24px rgba(6,67,62,.14);opacity:0;transform:translateY(6px);transition:all .35s ease .15s}
.d30-stage.s-lucc .d30-bub{opacity:1;transform:none}
.d30-bub b{display:block;font-size:11.5px}
.d30-bub span{display:block;font-size:10.5px;color:#5a6b68;margin:2px 0 7px}
.d30-bub em{font-style:normal;background:#096b63;color:#fff;border-radius:7px;padding:4px 10px;font-size:10.5px;font-weight:800}
.d30-stage.s-open .d30-bub{opacity:0;transform:translateY(6px)}
/* sidebar */
.d30-sb{position:absolute;top:0;right:0;bottom:0;width:360px;background:#fffdf9;border-left:1px solid rgba(36,48,46,.18);box-shadow:-14px 0 30px rgba(30,42,39,.16);transform:translateX(105%);transition:transform .5s cubic-bezier(.22,.9,.3,1);display:flex;flex-direction:column}
.d30-stage.s-open .d30-sb{transform:none}
.d30-sbh{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid rgba(36,48,46,.12)}
.d30-sbh b{font:900 14px Georgia,serif;color:#24302e}
.d30-sbh span{margin-left:auto;font-size:10.5px;color:#5a6b68}
.d30-sbh em{color:#096b63;font-weight:800;font-style:normal}
.d30-sbtabs{display:flex;background:#f2ede3;border-bottom:1px solid rgba(36,48,46,.12)}
.d30-sbtabs span{flex:1;text-align:center;padding:8px 4px;font-size:11.5px;font-weight:700;color:#5a6b68}
.d30-sbtabs span.on{color:#096b63;background:#fffdf9;box-shadow:inset 0 -2px 0 #096b63}
.d30-view{display:none;flex:1;padding:14px;flex-direction:column;gap:10px}
.d30-view.on{display:flex}
/* raccolta */
.d30-collect{background:#fff;border:1px solid rgba(36,48,46,.14);border-radius:11px;padding:11px 12px}
.d30-prog2{height:8px;border-radius:99px;background:#eee9dc;overflow:hidden}
.d30-prog2 i{display:block;height:100%;width:6%;background:linear-gradient(90deg,#096b63,#17a394);transition:width 2.6s ease}
.d30-stage.s-log1 .d30-prog2 i{width:58%}
.d30-stage.s-log2 .d30-prog2 i{width:92%}
.d30-log{margin-top:9px;font-size:10.5px;color:#24302e;line-height:1.9;font-weight:600}
.d30-log span{display:block;opacity:0;transform:translateX(-6px)}
.d30-stage.s-log1 .d30-log span:nth-child(1),.d30-stage.s-log2 .d30-log span:nth-child(2),.d30-stage.s-log3 .d30-log span:nth-child(3){opacity:1;transform:none;transition:all .3s ease}
.d30-log span:before{content:"✓ ";color:#096b63;font-weight:800}
/* domanda */
.d30-q{align-self:flex-end;max-width:92%;background:#096b63;color:#fff;border-radius:12px 12px 4px 12px;padding:8px 11px;font-size:12px;min-height:32px}
.d30-caret{display:inline-block;width:2px;height:12px;background:#fff;margin-left:2px;vertical-align:-2px;animation:d30c .8s steps(1) infinite}
@keyframes d30c{50%{opacity:0}}
.d30-a{background:#102a2e;color:#f2fff0;border-radius:12px 12px 12px 4px;padding:11px 13px}
.d30-a b{display:block;font-size:22px;color:#e9ff70;font-family:Georgia,serif}
.d30-a small{display:block;font-size:10.5px;color:#9bd8cf;margin:3px 0 7px}
.d30-a em{font-style:normal;background:#e9ff70;color:#102a2e;border-radius:999px;font:800 8.5px monospace;letter-spacing:.05em;padding:4px 9px;opacity:0;transform:scale(.8)}
.d30-stage.s-ans .d30-a em{opacity:1;transform:none;transition:all .35s cubic-bezier(.22,1.6,.36,1)}
/* totali */
.d30-trow{display:flex;justify-content:space-between;background:#fff;border:1px solid rgba(36,48,46,.14);border-radius:10px;padding:8px 12px;font-size:12px}
.d30-trow span{color:#5a6b68}
.d30-tres{margin-top:6px;background:#102a2e;border-radius:12px;padding:13px 15px}
.d30-tres small{font:800 9px monospace;letter-spacing:.09em;color:#9bd8cf}
.d30-tres b{display:block;font:900 24px Georgia,serif;color:#e9ff70;margin-top:3px}
.d30-tres i{font:700 10.5px monospace;color:#9bd8cf;font-style:normal}
/* proiettore */
.d30-prj{background:transparent;padding:0!important}
.d30-prj-in{flex:1;background:#0b1418;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.d30-pt small{display:block;font:800 9px monospace;letter-spacing:.1em;color:#8fb0ad}
.d30-pt b{font:900 26px Georgia,serif;color:#2fd4c4}
.d30-pt b i{font-style:normal;font-size:12px;color:#8fb0ad}
.d30-pbars{flex:1;display:flex;align-items:flex-end;gap:9px}
.d30-pbars i{flex:1;height:var(--h,60%);background:linear-gradient(180deg,#2fd4c4,#177a6e);border-radius:5px 5px 0 0}
/* end card */
.d30-end{position:absolute;inset:0;background:rgba(16,42,46,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .5s ease}
.d30-stage.s-end .d30-end{opacity:1}
.d30-end b{font:900 24px Georgia,serif;color:#e9ff70}
.d30-end span{background:#e9ff70;border:2px solid #102a2e;border-radius:10px;padding:8px 14px;font:800 13px system-ui,sans-serif;color:#102a2e;box-shadow:4px 4px 0 rgba(0,0,0,.3)}
.d30-note{text-align:center;font-size:.8rem;color:#6a7a75;margin-top:12px}
@media(max-width:640px){
.d30-chips{display:none}
}
@media(prefers-reduced-motion:reduce){
.d30-prog{width:100%!important;animation:none!important}
.d30-caret{animation:none!important}
}
/* ============================================================
v2.13 — DEMO 30" come PLAYER a schermo intero
Card stile YouTube sulla landing; overlay player nero;
suggerimento rotazione su mobile verticale; CTA cliccabile.
============================================================ */
.yt-head{margin-bottom:16px}
.yt-card{display:block;width:min(720px,100%);margin:0 auto;background:#0f0f0f;border:0;border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;padding:0;box-shadow:0 18px 50px rgba(16,42,46,.28);transition:transform .15s ease,box-shadow .15s ease;font-family:inherit}
.yt-card:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(16,42,46,.38)}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;background:
radial-gradient(circle at 78% 30%,rgba(242,107,56,.16),transparent 30%),
linear-gradient(150deg,#0e2823 10%,#102a2e 55%,#0b1418)}
.yt-grid{position:absolute;inset:14px auto 14px 18px;width:38%;display:grid;grid-template-rows:repeat(3,1fr);gap:7px;opacity:.5}
.yt-grid i{background:#f4f2ec;border-radius:4px}
.yt-grid i:nth-child(2n){width:82%}
.yt-orb{position:absolute;right:26%;bottom:22%;width:44px;height:44px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yt-play svg{width:64px;height:45px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));border-radius:12px}
.yt-card:hover .yt-play svg{filter:drop-shadow(0 4px 18px rgba(255,0,0,.45))}
.yt-dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.85);color:#fff;font:800 11.5px system-ui,sans-serif;border-radius:5px;padding:3px 7px;letter-spacing:.03em}
.yt-live{position:absolute;left:14px;top:12px;background:#e9ff70;border:1.5px solid #102a2e;border-radius:999px;font:800 9.5px monospace;letter-spacing:.06em;color:#102a2e;padding:4px 10px}
.yt-title{display:block;padding:13px 16px 15px;color:#f1f5f3;font:700 .92rem system-ui,sans-serif;line-height:1.45}
.yt-sub{margin:12px auto 0;max-width:56ch;text-align:center;font-size:.86rem;color:#6a7a75}
.d30-player{position:fixed;inset:0;background:#000;z-index:2147482000;display:flex;flex-direction:column}
.d30-player[hidden]{display:none}
.d30-player-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#0f0f0f;color:#eaf3f2;flex-wrap:wrap}
.d30-ptitle{font:700 13px system-ui,sans-serif}
.d30-player-bar .d30-chips{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.d30-player-bar .d30-chips span{border:1px solid #2a3a38;background:#141f1d;color:#8fb0ad;font:700 10.5px system-ui,sans-serif;border-radius:999px;padding:4px 10px}
.d30-player-bar .d30-chips span.on{border-color:#2fd4c4;color:#2fd4c4;background:#0d211e}
.d30-close{background:#f00;color:#fff;border:0;border-radius:8px;padding:7px 13px;font:800 12.5px system-ui,sans-serif;cursor:pointer}
.d30-canvas{position:relative;flex:1;overflow:hidden;background:#000}
.d30-canvas .d30-stage{left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center}
.d30-rotate{position:absolute;inset:0;z-index:20;background:#0f0f0f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#eaf3f2;text-align:center;padding:20px}
.d30-rotate[hidden]{display:none}
.d30-rot-ic{font-size:46px;animation:d30rot 2.2s ease-in-out infinite}
@keyframes d30rot{0%,20%{transform:rotate(0)}55%,80%{transform:rotate(90deg)}100%{transform:rotate(90deg)}}
.d30-rotate b{font-size:17px}
.d30-rotate p{font-size:13px;color:#8fb0ad;max-width:34ch}
.d30-rotate button{background:none;border:1px solid #2a3a38;color:#8fb0ad;border-radius:9px;padding:8px 14px;font:700 12.5px system-ui,sans-serif;cursor:pointer}
.d30-cta{display:inline-block;margin-top:4px;background:#e9ff70;color:#102a2e;border:2.5px solid #fff;border-radius:12px;padding:12px 22px;font:800 15px system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45);animation:d30cta 1.8s ease-in-out infinite}
.d30-cta:hover{transform:translateY(-2px)}
@keyframes d30cta{0%,100%{box-shadow:0 6px 24px rgba(0,0,0,.45)}50%{box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 0 8px rgba(233,255,112,.35)}}
@media(prefers-reduced-motion:reduce){.d30-cta{animation:none!important}}
/* ============================================================
v2.14 — Player full-bleed: niente barra, OSD floating,
capitoli in overlay in basso, stage zoomato a copertura.
============================================================ */
.d30-player{background:#000}
.d30-canvas{position:relative;flex:1;overflow:hidden}
.d30-osd{position:absolute;z-index:15;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#eaf3f2;border-radius:9px;padding:7px 12px;font:700 12px system-ui,sans-serif;pointer-events:none}
.d30-osd-title{left:14px;top:12px}
.d30-close{position:absolute;right:14px;top:12px;z-index:16;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:7px 12px;font:800 12px system-ui,sans-serif;cursor:pointer}
.d30-close:hover{background:#f00;border-color:#f00}
.d30-chipbar{position:absolute;left:0;right:0;bottom:16px;z-index:15;display:flex;justify-content:center;pointer-events:none}
.d30-chipbar .d30-chips{margin:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border-radius:999px;padding:7px 10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:94%}
.d30-chipbar .d30-chips span{border:0;background:transparent;color:#9fb5b0;font:700 11px system-ui,sans-serif;border-radius:999px;padding:4px 10px;white-space:nowrap}
.d30-chipbar .d30-chips span.on{background:#2fd4c4;color:#06231f;font-weight:800}
.d30-player .d30-prog{z-index:14}
/* ============================================================
v2.15 — Demo player FLUIDO: lo stage è un vero schermo,
riempie il canvas a qualsiasi rapporto (niente nero/tagli);
end card cliccabile quando visibile.
============================================================ */
.d30-canvas .d30-stage{left:auto;top:auto;transform:none;width:100%;height:100%;display:flex;background:#eef1ee}
.d30-player .d30-canvas{background:#eef1ee}
.d30-player .d30-erp{position:relative;flex:1;align-self:stretch;margin:14px 0 14px 14px;display:flex;flex-direction:column}
.d30-player .d30-tbl{width:100%}
.d30-player .d30-lucciola{right:calc(min(360px,44%) + 26px);bottom:78px}
.d30-player .d30-sb{width:min(360px,44%);flex:0 0 auto}
/* end card cliccabile quando visibile */
.d30-end{pointer-events:none;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
.d30-stage.s-end .d30-end{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:760px){
.d30-player .d30-sb{width:min(300px,48%)}
.d30-player .d30-erp{margin:10px 0 10px 10px}
}
/* ============================================================
v2.16 — Controlli video: play/pausa, seek scrubbable, replay
============================================================ */
.d30-controls{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0f0f0f;border-top:1px solid #1a1a1a}
.d30-pbtn{width:38px;height:38px;border-radius:50%;border:0;background:#e9ff70;color:#102a2e;font-size:15px;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.d30-pbtn:hover{filter:brightness(1.08)}
.d30-seek{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:rgba(255,255,255,.22);outline:none;cursor:pointer}
.d30-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#2fd4c4;border:2px solid #0f0f0f;cursor:grab}
.d30-seek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#2fd4c4;border:2px solid #0f0f0f;cursor:grab}
.d30-seek::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.22)}
.d30-time{color:#8fb0ad;font:700 11.5px ui-monospace,monospace;flex:0 0 auto}
.d30-replay{position:absolute;left:50%;top:16%;transform:translate(-50%,0);z-index:18;background:#e9ff70;border:2.5px solid #102a2e;border-radius:999px;padding:12px 24px;font:900 15px Georgia,serif;color:#102a2e;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.d30-replay:hover{transform:translate(-50%,0) scale(1.05)}
.d30-stage.q-typing .d30-caret{opacity:1}
.d30-stage:not(.q-typing) .d30-caret{display:none}
.d30-orb svg,.yt-orb svg{width:100%;height:100%;display:block}
/* ============================================================
v2.17 — DEMO profilo COMPATTOr mobile-landscape: stessa scena,
tutto ricalibrato perché entri perfettamente in full screen
(niente tagli, niente overflow) su telefoni in orizzontale.
============================================================ */
@media(max-width:850px),(max-height:500px){
.d30-player .d30-stage{font-family:"Trebuchet MS",system-ui,sans-serif}
.d30-player .d30-erp{margin:8px 0 8px 8px}
.d30-player .d30-bar{padding:6px 10px;gap:5px}
.d30-player .d30-bar i{width:7px;height:7px}
.d30-player .d30-bar span{font-size:9px;margin-left:6px}
.d30-player .d30-tbl td{padding:4px 8px;font-size:10.5px}
.d30-player .d30-tbl .h td{padding:4px 8px;font-size:8px}
.d30-player .d30-sb{width:44%;flex:0 0 auto}
.d30-player .d30-sbh{padding:7px 10px;gap:6px}
.d30-player .d30-sbh b{font-size:12px}
.d30-player .d30-sbh span{font-size:8.5px}
.d30-player .d30-sbtabs span{font-size:9.5px;padding:6px 2px}
.d30-player .d30-view{padding:8px;gap:7px}
.d30-player .d30-collect{padding:8px 10px}
.d30-player .d30-log{font-size:8.5px;line-height:1.75}
.d30-player .d30-q{font-size:10px;padding:6px 9px;border-radius:10px 10px 3px 10px}
.d30-player .d30-a{padding:8px 10px;border-radius:10px 10px 10px 3px}
.d30-player .d30-a b{font-size:16px}
.d30-player .d30-a small{font-size:8.5px;margin:2px 0 5px}
.d30-player .d30-a em{font-size:7px;padding:3px 7px}
.d30-player .d30-trow{font-size:10px;padding:5px 9px;border-radius:8px}
.d30-player .d30-tres{padding:9px 12px;border-radius:10px;margin-top:8px}
.d30-player .d30-tres small{font-size:8px}
.d30-player .d30-tres b{font-size:18px;margin-top:2px}
.d30-player .d30-tres i{font-size:9px}
.d30-player .d30-prj-in{padding:10px;gap:8px;border-radius:10px}
.d30-player .d30-pt b{font-size:18px}
.d30-player .d30-pt small{font-size:8px}
.d30-player .d30-pbars{gap:6px;padding-top:10px}
.d30-player .d30-end b{font-size:17px;text-align:center}
.d30-player .d30-cta{font-size:12.5px;padding:9px 16px;border-width:2px;white-space:nowrap}
.d30-player .d30-orb{width:38px;height:38px}
.d30-player .d30-lucciola{bottom:46px;right:calc(44% + 12px)}
.d30-player .d30-bub{width:150px;padding:7px 9px;right:50px;bottom:10px}
.d30-player .d30-bub b{font-size:10px}
.d30-player .d30-bub span{font-size:8.5px;margin:2px 0 5px}
.d30-player .d30-bub em{font-size:9px;padding:3px 8px}
.d30-player .d30-osd-title{font-size:9.5px;padding:5px 9px;top:8px;left:8px}
.d30-player .d30-close{padding:5px 9px;font-size:10.5px;top:8px;right:8px}
.d30-player .d30-chipbar{bottom:7px}
.d30-chipbar .d30-chips{padding:5px 8px;gap:3px;max-width:92%}
.d30-chipbar .d30-chips span{font-size:8.5px;padding:3px 7px}
.d30-player .d30-controls{padding:5px 10px;gap:8px;border-top:0}
.d30-player .d30-pbtn{width:28px;height:28px;font-size:11px}
.d30-player .d30-seek{height:5px}
.d30-player .d30-time{font-size:9px}
}
/* h1 hero: il secondo «Qualsiasi!!!» evidenziato */
.hl-any{color:#0b6b60;background:linear-gradient(120deg,rgba(233,255,112,.0) 0%,rgba(233,255,112,.0) 3%,#e9ff70 3%,#e9ff70 97%,rgba(233,255,112,.0) 97%);padding:0 8px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}