/* Caso d'uso "Rete retail" dentro il layout di eurekago.it (24/10/2026).
   La demo nasce come pagina a se'; qui vive sotto l'header e sopra il footer
   del sito. Header replicato di EurekaBike tolto, classi in conflitto col
   sito rinominate (uc-btn, uc-hero, uc-cta, uc-tag), barre agganciate sotto
   la nav del sito (--nav-h, impostata dal JS). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;900&family=Rubik:wght@400;500;600;700;800&family=Overpass:wght@600;700;800;900&family=Open+Sans:wght@400;600;700&display=swap");

/* site.css azzera margini e padding di tutto e rende block ogni svg: la demo
   e' disegnata sui valori di default del browser. :where() tiene a zero la
   specificita', quindi qualunque regola della demo vince comunque. */
:where(.uc) *, :where(.uc) *::before, :where(.uc) *::after { margin: revert; padding: revert; }
:where(.uc) svg { display: revert; }

/* Intro compatta: la demo deve stare nella prima schermata. */
.hero.hero-page.uc-intro .hero-text { padding: 40px 0 24px; }
.uc-intro .uc-hint { margin-top: 14px; font-size: 14px; color: var(--fog); }

/* Barra in fondo alla demo: precedente, tutti i casi d'uso, successiva. */
.uc-pager { background: #F5F3EC; border-top: 1px solid #E0DDD6; font-family: Archivo, sans-serif; }
.uc-pager-in { max-width: 1600px; margin: 0 auto; padding: 18px 16px 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.uc-pager [data-uc-prev] { justify-self: start; }
.uc-pager [data-uc-next] { justify-self: end; }
/* Nascosto ma al suo posto: "Tutti i casi d'uso" resta sempre al centro. */
.uc-pager [hidden] { display: inline-flex; visibility: hidden; }
.uc-all { font-size: 14px; font-weight: 600; color: var(--ink); }
.uc-pager [data-uc-end] { justify-self: end; grid-column: 3; grid-row: 1; }
.uc-note { max-width: 1600px; margin: 0 auto; padding: 0 16px 24px; text-align: center; font-size: 12px; color: var(--fog); }
/* Schede centrate (Jacopo 24/10/2026); sotto i 760px restano una striscia
   che scorre di lato, e li' centrare taglierebbe la prima. */
@media (min-width: 761px) {
  .chrome-in, .chrome .tabs { justify-content: center; }
}
.uc-all:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .uc-pager-in { grid-template-columns: 1fr 1fr; }
  .uc-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .uc-pager [data-uc-end] { grid-column: 2; }
  .uc-pager .btn { font-size: 13px; padding: 10px 12px; }
}

/* ============ Token ============ */
:root{
  /* backend EurekaBike */
  --eb-blue:#199bd7; --eb-blue-d:#178cd8; --eb-blue-t:#199bd7; --eb-page:#f8f9fa; --eb-line:#dee2e6;
  --eb-ink:#252525; --eb-mute:#6c757d; --eb-card-b:#dfe3e8;
  /* stati disponibilità */
  --in:#1b8a4b; --in-bg:#e3f4ea; --no:#6b6f73; --no-bg:#eceef0; --arr:#F07A00; --arr-bg:#fff1e0; --na:#D32F2F; --na-bg:#fdecec;
  /* Brand / vetrina */
  --brand-c:#2C2A26; --g-ink:#111; --shop:#6B7548; --shop-d:#586039;
}
*{box-sizing:border-box}
.uc{line-height:normal;font-family:Rubik,system-ui,"Segoe UI",Arial,sans-serif;color:var(--eb-ink);background:#F5F3EC;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
a{color:inherit}

/* ============ Barra dello use case (schede della demo) ============ */
.chrome{position:sticky;top:var(--nav-h,64px);z-index:99;background:var(--cream,#F5F3EC);border-bottom:1px solid #E0DDD6;font-family:Archivo,sans-serif;color:#0A0A0A}
/* titolo comune a tutte le schede dello use case */
.uc-head{--ink:#0A0A0A;--az:#00AEEF;--g05:#524F49;--g06:#6B6860;--g10:#D6D3CC;display:flex;justify-content:center;text-align:center;padding:24px 16px 20px;background:#fff;font-family:Archivo,sans-serif;color:#0A0A0A;border-bottom:1px solid #E4E2DB}
.uc-head .ey{align-self:stretch;display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--az);margin-bottom:8px;white-space:nowrap}
.uc-head .ey::before,.uc-head .ey::after{content:'';flex:1;min-width:20px;height:2px;background:var(--az)}
.uc-head h2{margin:0;font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.uc-head p{margin:6px 0 0;color:var(--g05);font-size:16px}
.uc-head .dx-view{justify-content:center;margin-top:14px}
body:not(.on-F) #dx-mode{display:none}
/* barra dei flussi: sotto il titolo, poi agganciata sotto la barra delle schede */
.uc-flows{position:sticky;top:calc(var(--nav-h,64px) + var(--chrome-h,0px));z-index:98;background:#F5F3EC;border-bottom:1px solid #E0DDD6;font-family:Archivo,sans-serif}
.chrome-dx{display:none;--ink:#0A0A0A;--az:#00AEEF;--g06:#6B6860;--g10:#D6D3CC;padding:8px 16px 10px}
body.on-F .chrome-dx{display:grid;gap:6px}
.chrome-dx .dx-row{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chrome-dx .dx-row::-webkit-scrollbar{display:none}
.chrome-dx .dx-row button,.chrome-dx .lb{flex:none;white-space:nowrap}
.chrome-dx .dx-row > .lb:first-child{width:74px;flex:none;margin-left:0}
.chrome-in{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding:10px 16px;max-width:1600px;margin:0 auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.chrome .tab{border:1px solid #D6D3CC;background:#fff;color:#0A0A0A;padding:7px 13px;border-radius:999px;font:600 13.5px Archivo,sans-serif}
.chrome .tab:hover{border-color:#0A0A0A}
.chrome .tab b{color:#8A8780;margin-right:6px;font-weight:700}
.chrome .tab[aria-selected="true"]{background:#00AEEF;border-color:#00AEEF;color:#fff}
.chrome .tab[aria-selected="true"] b{color:#fff}
.private{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:#6B6860}
.private .pill{background:#0A0A0A;color:#fff;font-weight:700;letter-spacing:.14em;padding:4px 9px;border-radius:3px;font-size:10.5px;text-transform:uppercase}
.private{display:none}
@media (max-width:760px){ .private span.txt{display:none} .chrome-in{padding:8px 12px;gap:6px 12px} .private{margin-left:auto} .tabs{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .chrome .tab{flex:none;padding:6px 11px;font-size:13px} }
.screen{display:none;min-height:calc(100vh - 130px)}
.screen.on{display:block}

/* ============ Logo EurekaBike ============ */
.eblogo{display:inline-flex;align-items:baseline;font-family:Rubik,sans-serif;letter-spacing:.01em;color:#111;white-space:nowrap;line-height:1}
.eblogo b{font-weight:800}
.eblogo .kk{display:inline-block;transform:scaleX(1.05)}
.eblogo .bk{font-weight:600}
.eblogo .pr{font-weight:400;margin-left:.28em}

/* ============ Backend EurekaBike (admin) ============ */
.eb{display:grid;grid-template-columns:298px 1fr;min-height:calc(100vh - 52px);background:var(--eb-page)}
.eb-side{background:#fff;box-shadow:4px 4px 25px rgba(109,105,105,.15);position:relative;z-index:2}
.eb-logo{height:66px;display:flex;align-items:center;justify-content:center;padding:0 16px;border-bottom:1px solid var(--eb-line)}
.eb-logo svg{width:90%;height:auto}
.eb-menu a{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 16px;border-top:1px solid var(--eb-line);color:#8b8a8a;text-decoration:none;font-size:16px;cursor:pointer}
.eb-menu a:hover{background:#f2f2f2}
.eb-menu a.cur{background:rgba(25,155,215,.9);color:#fff}
.eb-menu a .n{font-size:13px;font-weight:600;background:#eef1f4;color:#55606b;border-radius:10px;padding:2px 8px}
.eb-menu a.cur .n{background:rgba(255,255,255,.25);color:#fff}
.eb-main{min-width:0;display:flex;flex-direction:column}
.eb-top{height:66px;background:var(--eb-blue);display:flex;align-items:center;padding:0 16px;color:#fff;gap:16px}
.hamb{width:24px;height:18px;position:relative;flex:none}
.hamb::before,.hamb::after,.hamb i{content:"";position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px}
.hamb::before{top:0}.hamb i{top:8px}.hamb::after{bottom:0}
.eb-top .r{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14px}
.eb-top .acc{display:flex;flex-direction:column;line-height:1.1;border-right:1px solid rgba(255,255,255,.35);padding-right:18px}
.eb-top .acc small{font-size:10px;opacity:.8;letter-spacing:.06em}
.eb-top .acc b{font-weight:700}
.eb-head{background:#fff;min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--eb-line)}
.eb-head h1{margin:0;font-size:20px;font-weight:700;color:#252525}
.eb-head .bc{font-size:13px;font-weight:300;color:var(--eb-blue)}
.eb-body{padding:22px 22px 40px}
.eb-intro{font-size:16px;margin:0 0 18px}
.eb-card{background:#fff;border-radius:4px;box-shadow:0 0 10px 0 rgba(0,0,0,.05);margin-bottom:20px}
.eb-card-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.eb-card-t{font-size:16px;font-weight:700;color:var(--eb-blue);text-transform:uppercase}
.eb-card-b{padding:12px 20px 20px}
.eb-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.eb-tile{border:1px solid var(--eb-line);border-radius:.375rem;padding:18px 20px;display:flex;justify-content:space-between;align-items:center}
.eb-tile .v{font-size:32px;font-weight:600;line-height:1}
.eb-tile .l{font-size:14px;color:var(--eb-mute);margin-top:6px}
.eb-ic{width:52px;height:52px;border-radius:50%;background:#f3f5f7;display:grid;place-items:center;color:#9aa4ae;flex:none}
.eb-act{border:1px solid var(--eb-line);border-radius:.375rem;padding:20px 22px}
.eb-act .u{font-size:15px}
.eb-act .u b{color:var(--eb-blue-t);font-weight:500}
.eb-act .d{font-size:13px;color:#555;margin-top:6px}
.eb-act .x{border-top:1px solid #ccd2d8;margin-top:14px;padding-top:14px;font-size:15px;line-height:1.35}
.eb-act.new{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:#e3f4fc;border-color:var(--eb-blue)}100%{background:#fff}}
table.eb-t{border-collapse:collapse;width:100%}
.eb-t th{font-size:14px;font-weight:600;color:#282929;text-align:left;padding:14px 16px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);white-space:nowrap}
.eb-t td{padding:12px 16px;border-bottom:1px solid #f3f2f5;font-size:15px;color:#282929;vertical-align:middle}
.eb-t tr.click{cursor:pointer}
.eb-t tr.click:hover td{background:#f6f9fc}
.eb-t .strong{font-weight:600}
.eb-t small{color:var(--eb-mute);font-size:13px}
.tw{overflow-x:auto}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;white-space:nowrap}
.badge i{width:8px;height:8px;border-radius:50%;display:block;background:currentColor}
.b-ok{background:#d1f7d6;color:#0f5132}
.b-kyk{background:#dbefff;color:#084298}
.b-wip{background:#fff3cd;color:#664d03}
.b-gray{background:#eef0f2;color:#59626b}
.uc-btn{border:1px solid var(--eb-blue);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500;background:#fff;color:var(--eb-blue);text-transform:uppercase}
.uc-btn.sec{color:#6c757d;border-color:#6c757d}
.thumb{width:74px;height:50px;object-fit:contain;background:#fff;border-radius:3px}
.sizes{display:flex;gap:4px;flex-wrap:wrap}
.sizes span{min-width:38px;text-align:center;font-size:12px;font-weight:600;padding:4px 4px;border-radius:3px;background:#dbefff;color:#084298}
.sizes span.off{background:#f0f2f4;color:#c3c9cf}
.chan{display:inline-flex;gap:6px}
.chan span{font-size:12px;font-weight:600;border:1px solid var(--eb-line);background:#f8f9fa;color:#6c757d;border-radius:999px;padding:3px 9px}
.rule{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--eb-line)}
.rule:last-child{border-bottom:0}
.rule.hi{background:#eef8fd;border:1px solid #a9daf1;border-radius:4px;padding:18px;margin-bottom:8px}
.rule .t{font-size:17px;font-weight:600}
.rule .d{font-size:15px;color:#495057;margin-top:4px;line-height:1.45}
.rule .who{font-size:12px;font-weight:600;color:var(--eb-blue-t);text-transform:uppercase;letter-spacing:.05em;margin-top:8px}
.sw{flex:none;width:50px;height:28px;border-radius:999px;background:#c9cfd5;position:relative;border:0;padding:0;margin-top:2px;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw.on{background:var(--eb-blue)}
.sw.on::after{left:25px}
.sw.lock{cursor:not-allowed}
.flow{display:flex;align-items:stretch;gap:0;margin-top:14px;flex-wrap:wrap}
.flow .st{flex:1;min-width:180px;border:1px solid var(--eb-card-b);border-radius:4px;padding:14px 16px;background:#fff}
.flow .st b{display:block;font-size:13px;color:var(--eb-blue-t);text-transform:uppercase;letter-spacing:.05em}
.flow .st span{display:block;font-size:16px;font-weight:600;margin-top:4px}
.flow .st small{display:block;font-size:13px;color:var(--eb-mute);margin-top:3px}
.flow .ar{display:grid;place-items:center;padding:0 10px;color:#9aa4ae;font-size:22px}
.decide{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.decide ul{margin:8px 0 0;padding-left:18px;line-height:1.7;font-size:15px}
.lock{color:#9aa4ae}
.back{font-size:14px;color:var(--eb-blue-t);cursor:pointer;margin-bottom:14px;display:inline-block}
.src{font-size:12px;font-weight:600;padding:3px 7px;border-radius:3px}
.src.auto{background:#eef0f2;color:#59626b}
.src.man{background:#dbefff;color:#084298}
.stat{font-size:13px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.stat.in{background:var(--in-bg);color:var(--in)} .stat.no{background:var(--no-bg);color:var(--no)} .stat.arr{background:var(--arr-bg);color:var(--arr)}

/* ============ Scheda 2 · pannello di rete in un monitor ============ */
#B,#C,#D,#E{background:#F5F3EC;padding:44px 16px 64px;font-family:Archivo,sans-serif;color:#0A0A0A}
/* scheda 4: telefono e monitor affiancati, scenario sotto in quattro passi */
.stageD{display:grid;grid-template-columns:350px 860px;gap:60px 56px;align-items:center;justify-content:center;max-width:1400px;margin:0 auto}
#D .phone{transform:perspective(1800px) rotateY(16deg) rotateX(3deg) rotateZ(-.6deg);transition:transform .7s cubic-bezier(.42,0,.58,1);height:min(640px,calc(100vh - 200px));min-height:560px}
#D .phone:hover{transform:perspective(1800px) rotateY(4deg) rotateX(1deg)}
#D .lt-view{height:520px;overflow:auto;background:#fff;border-radius:0 0 4px 4px;scrollbar-width:thin}
#D .vt{min-height:0}
#D .uc-hero{height:300px}
#D .uc-hero h2{font-size:38px}
.stageD .notes{grid-column:1/-1;max-width:none}
.stageD .notes ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.stageD .notes li{padding:46px 0 0}
.stageD .notes li::after{display:none}
@media (max-width:1330px){ .stageD{grid-template-columns:1fr;justify-items:center} #D .phone,#D .phone:hover{transform:none} .stageD .notes ol{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .stageD .notes ol{grid-template-columns:1fr} }
/* la vetrina scorre dentro lo schermo del monitor */
#C .lt-view{height:540px;overflow:auto;background:#fff;border-radius:0 0 4px 4px;scrollbar-width:thin}
#C .vt{min-height:0}
.stageB{display:grid;grid-template-columns:minmax(0,820px) minmax(0,380px);gap:130px;align-items:center;justify-content:center;max-width:1400px;margin:0 auto}
.lt-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#ECEAE4;border-radius:6px 6px 0 0;font-size:11.5px;color:#6B6860}
.lt-bar i{width:9px;height:9px;border-radius:50%;background:#C2BFB8}
.lt-bar span{margin:0 auto;background:#fff;border-radius:999px;padding:3px 14px}
#B .eb,#E .eb{height:540px;min-height:0;overflow:auto;grid-template-columns:188px 1fr;background:#F5F3EC;border-radius:0 0 4px 4px;font-family:Archivo,sans-serif;color:#0A0A0A;scrollbar-width:thin}
#B .eb-side,#E .eb-side{box-shadow:none;border-right:1px solid #E4E2DB;position:sticky;top:0;align-self:start;min-height:100%}
#B .eb-logo,#E .eb-logo{height:48px;padding:0 14px;border-bottom:1px solid #E4E2DB}
#B .eb-logo svg,#E .eb-logo svg{width:88%}
#B .eb-menu a,#E .eb-menu a{padding:10px 14px;font-size:13px;color:#524F49;border-top:0}
#B .eb-menu a:hover,#E .eb-menu a:hover{background:#F5F3EC}
#B .eb-menu a.cur,#E .eb-menu a.cur{background:#00AEEF;color:#fff}
#B .eb-menu a .n,#E .eb-menu a .n{font-size:10.5px;background:#F5F3EC;color:#524F49}
#B .eb-menu a.cur .n,#E .eb-menu a.cur .n{background:rgba(255,255,255,.25);color:#fff}
#B .eb-top,#E .eb-top{height:44px;background:#0A0A0A;padding:0 14px;position:sticky;top:0;z-index:3}
#B .eb-top .r,#E .eb-top .r{font-size:12px;gap:16px}
#B .eb-top .acc,#E .eb-top .acc{padding-right:14px;border-right-color:rgba(255,255,255,.2)}
#B .eb-top .acc small,#E .eb-top .acc small{font-size:9px;letter-spacing:.12em}
#B .eb-head,#E .eb-head{min-height:42px;padding:0 16px;border-bottom:1px solid #E4E2DB}
#B .eb-head h1,#E .eb-head h1{font-size:16px;font-weight:700;letter-spacing:-.01em;color:#0A0A0A}
#B .eb-head .bc,#E .eb-head .bc{font-size:11px;font-weight:500;color:#6B6860}
#B .eb-body,#E .eb-body{padding:14px 16px 24px}
#B .eb-intro,#E .eb-intro{font-size:12.5px;color:#2C2A26;margin:0 0 12px}
#B .eb-card,#E .eb-card{border-radius:8px;box-shadow:none;border:1px solid #E4E2DB;margin-bottom:12px}
#B .eb-card-h,#E .eb-card-h{padding:12px 14px 4px}
#B .eb-card-t,#E .eb-card-t{font-size:10px;font-weight:600;letter-spacing:.14em;color:#6B6860}
#B .eb-card-b,#E .eb-card-b{padding:8px 14px 14px}
#B .eb-grid4,#E .eb-grid4{gap:10px}
#B .eb-tile,#E .eb-tile{padding:12px 12px;border-color:#E4E2DB;border-radius:8px}
#B .eb-tile .v,#E .eb-tile .v{font-size:24px;font-weight:700;letter-spacing:-.02em}
#B .eb-tile .l,#E .eb-tile .l{font-size:11px;color:#6B6860;margin-top:4px}
#B .eb-ic,#E .eb-ic{width:32px;height:32px;font-size:13px;background:#F5F3EC;color:#8A8780}
#B .eb-act,#E .eb-act{padding:10px 12px;border-color:#E4E2DB;border-radius:8px}
#B .eb-act .u,#E .eb-act .u{font-size:12px}
#B .eb-act .u b,#E .eb-act .u b{color:#0A0A0A;font-weight:600}
#B .eb-act .d,#E .eb-act .d{font-size:10.5px;color:#8A8780;margin-top:3px}
#B .eb-act .x,#E .eb-act .x{font-size:12px;margin-top:8px;padding-top:8px;border-top-color:#E4E2DB}
#B .eb-t th,#E .eb-t th{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B6860;padding:8px 10px;box-shadow:none;border-bottom:1px solid #E4E2DB}
#B .eb-t td,#E .eb-t td{font-size:12.5px;padding:8px 10px;border-bottom-color:#F1EFEA}
#B .eb-t small,#E .eb-t small{font-size:11px}
#B .eb-t tr.click:hover td,#E .eb-t tr.click:hover td{background:#F5F3EC}
#B .badge,#E .badge{font-size:10.5px;padding:3px 8px}
#B .uc-btn,#E .uc-btn{font:600 11px Archivo,sans-serif;padding:4px 10px;border-color:#00AEEF;color:#00AEEF;text-transform:none}
#B .uc-btn.sec,#E .uc-btn.sec{border-color:#8A8780;color:#524F49}
#B .chan span,#E .chan span{font-size:10.5px;padding:2px 7px;background:#F5F3EC;border-color:#E4E2DB;color:#524F49}
#B .sizes span,#E .sizes span{min-width:28px;font-size:10px;padding:3px}
#B .thumb,#E .thumb{width:54px;height:36px;border-radius:6px}
#B .flow .st,#E .flow .st{padding:10px 12px;border-radius:8px;border-color:#E4E2DB;min-width:150px}
#B .flow .st b,#E .flow .st b{font-size:9.5px;letter-spacing:.12em;color:#6B6860}
#B .flow .st span,#E .flow .st span{font-size:13px}
#B .flow .st small,#E .flow .st small{font-size:11px}
#B .flow .ar,#E .flow .ar{font-size:16px;padding:0 8px}
#B .rule,#E .rule{padding:12px 0;gap:12px}
#B .rule.hi,#E .rule.hi{background:#fff;border-color:#00AEEF;padding:12px}
#B .rule .t,#E .rule .t{font-size:13.5px}
#B .rule .d,#E .rule .d{font-size:12.5px;color:#2C2A26}
#B .rule .who,#E .rule .who{font-size:10px;color:#6B6860;letter-spacing:.1em}
#B .sw,#E .sw{width:40px;height:22px}
#B .sw::after,#E .sw::after{width:16px;height:16px}
#B .sw.on,#E .sw.on{background:#00AEEF}
#B .sw.on::after,#E .sw.on::after{left:21px}
#B .decide ul,#E .decide ul{font-size:12.5px}
#B .back,#E .back{font-size:12px;color:#0A0A0A;border-bottom:2px solid #00AEEF}
@media (max-width:1250px){ .stageB{grid-template-columns:1fr;justify-items:center;gap:40px} }
#B,#C,#D,#E{overflow-x:clip}
/* ============ Monitor: foto reale con lo schermo trasparente, l'interfaccia sotto ============ */
/* posizione dello schermo nella foto, in percentuale (aggiornata quando arriva la foto definitiva) */
.device{--sx:5.745%;--sy:3.561%;--sw:89.291%;--sh:70.905%;position:relative;width:100%;max-width:860px;aspect-ratio:1410/983}
.dv-screen{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);overflow:hidden;background:#fff;display:flex;flex-direction:column;z-index:1}
.dv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}
#B .dv-screen .eb,#E .dv-screen .eb,#C .dv-screen .lt-view,#D .dv-screen .lt-view{flex:1;height:auto;min-height:0}
#E #metis{flex:1;min-height:0;display:flex;flex-direction:column}
/* finché manca la foto: cornice scura provvisoria */
.device.noimg{aspect-ratio:16/10;background:#141416;border-radius:16px;box-shadow:0 40px 80px -40px rgba(10,10,10,.5)}
.device.noimg .dv-screen{left:2.2%;top:3%;width:95.6%;height:94%;border-radius:4px}

/* ============ Telefono KYKLOS ============ */
/* Interfaccia KYKLOS in Archivo (playbook EurekaBike), colori del negozio (vetrina: nero + arancio del negozio) */
#A{background:#F5F3EC;padding:44px 16px 64px;font-family:Archivo,sans-serif;color:#0A0A0A}
.stageA{display:grid;grid-template-columns:auto minmax(0,470px);gap:80px;align-items:center;justify-content:center;max-width:1200px;margin:0 auto}
.phone{flex:none;position:relative;width:350px;height:min(720px,calc(100vh - 150px));min-height:600px;border-radius:50px;padding:9px;
  background:linear-gradient(150deg,#4a4a4d 0%,#1d1d1f 30%,#0c0c0d 70%,#2b2b2d 100%);
  box-shadow:inset 0 0 0 1.5px #6a6a6e,inset 0 0 0 3px #0a0a0a,0 50px 90px -40px rgba(10,10,10,.55),0 22px 40px -24px rgba(10,10,10,.4)}
.phone::before{content:"";position:absolute;right:-3px;top:170px;width:3px;height:74px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#1b1b1d,#4a4a4d)}
.phone::after{content:"";position:absolute;left:-3px;top:140px;width:3px;height:44px;border-radius:3px 0 0 3px;background:linear-gradient(270deg,#1b1b1d,#4a4a4d);box-shadow:0 58px 0 #2e2e30}
/* vista 3/4: il telefono guarda verso il racconto; al passaggio del mouse si raddrizza */
#A .phone{transform:perspective(1800px) rotateY(16deg) rotateX(3deg) rotateZ(-.6deg);transition:transform .7s cubic-bezier(.42,0,.58,1)}
#A .phone:hover{transform:perspective(1800px) rotateY(4deg) rotateX(1deg) rotateZ(0deg)}
.ph{position:relative;height:100%;border-radius:42px;overflow:hidden;background:#fff;display:flex;flex-direction:column;font-family:Archivo,sans-serif;color:#0A0A0A}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:12px 26px 6px;font-size:12px;font-weight:600;background:#0b0b0b;color:#fff}
.ph-status .isl{width:88px;height:24px;border-radius:14px;background:#000}
.ph-app{background:#0b0b0b;color:#fff;padding:8px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--shop)}
.ph-app svg{width:74px;height:14px;color:#fff;flex:none}
.ph-app .sep{width:1px;height:24px;background:#444}
.ph-app .rl{height:46px;width:auto;display:block;flex:none}
.ph-app b{display:block;font-family:Overpass,Archivo,sans-serif;font-size:13px;font-weight:900;letter-spacing:.02em;line-height:1}
.ph-app small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.14em;color:#C9D3A6;margin-top:0;line-height:1.4}
.ph-scroll{flex:1;overflow-y:auto;padding:16px 14px 18px;background:#fff;scrollbar-width:none}
.ph-scroll::-webkit-scrollbar{display:none}
.ph-h{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ph-h small{display:block;font-size:11.5px;font-weight:500;color:#6B6860;letter-spacing:0;margin-top:3px}
.sum{margin:14px 0 18px;background:#F5F3EC;border-radius:12px;padding:14px 14px 12px}
.sum .big{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sum .big span{color:var(--in)}
.sum .fr{display:flex;align-items:center;gap:7px;font-size:12px;color:#524F49;margin-top:5px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--in);flex:none}
.dot.pulse{animation:pulse 1.2s ease-out 2}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,138,75,.6)}100%{box-shadow:0 0 0 10px rgba(27,138,75,0)}}
.sum .gsplit{margin-top:10px;padding-top:10px;border-top:1px solid #E0DDD6;font-size:12px;line-height:1.4;color:#2C2A26}
.ph-sec{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6B6860;margin:4px 2px 8px}
.ph-sec b{font-size:11px;letter-spacing:0;color:#0A0A0A}
.row{padding:10px 0;border-top:1px solid #ECEAE4}
.row:first-of-type{border-top:0}
.rtop{display:flex;gap:10px;align-items:center}
.rimg{flex:none;width:58px;height:40px;background:#fff;border:1px solid #ECEAE4;border-radius:8px;display:grid;place-items:center;overflow:hidden}
.rimg img{width:100%;height:100%;object-fit:contain}
.rinfo{flex:1;min-width:0}
.rname{font-size:13.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{font-size:11.5px;color:#6B6860;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sz{display:inline-block;min-width:26px;text-align:center;font-size:10.5px;font-weight:700;color:#0A0A0A;background:#F5F3EC;border-radius:4px;padding:1px 5px;margin-right:5px}
.st-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#C2BFB8}
.row[data-s="in"] .st-dot{background:var(--in)} .row[data-s="arr"] .st-dot{background:var(--arr)}
.seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:8px}
.seg button{border:1px solid #D6D3CC;background:#fff;border-radius:8px;min-height:34px;padding:4px 2px;font:600 11.5px Archivo,sans-serif;line-height:1.1;color:#2C2A26;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.seg button:hover{border-color:#0A0A0A}
.seg .ic{font-size:12px;line-height:1}
.seg small{flex-basis:100%;font-size:9.5px;font-weight:500;opacity:.8}
.seg button[data-v="in"].sel{background:var(--in);border-color:var(--in);color:#fff}
.seg button[data-v="no"].sel{background:#0A0A0A;border-color:#0A0A0A;color:#fff}
.seg button[data-v="arr"].sel{background:var(--arr);border-color:var(--arr);color:#fff}
.row.auto{padding:8px 0}
.row.auto .rname{font-size:12.5px}
.row.auto .rimg{width:48px;height:32px}
.autob{font-size:10.5px;font-weight:500;color:#8A8780;margin-top:2px}
.ph .stat{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px}
.ph-card{margin-bottom:16px}
.ph-by{display:flex;align-items:center;justify-content:center;gap:6px;font-size:9.5px;color:#8A8780;padding:6px 0 2px}
.ph-by svg{height:9px;width:auto;opacity:.55}
.toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,16px);opacity:0;background:#0b0b0b;color:#fff;font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:999px;transition:.2s;pointer-events:none;white-space:nowrap;border:1px solid var(--shop)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* scenario d'uso, con la tipografia canonica del sito */
.notes{max-width:470px;position:relative;z-index:2}
.notes .k{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#00AEEF;margin-bottom:14px}
.notes .k::before{content:"";width:20px;height:2px;background:#00AEEF}
.notes .intro{font-size:18px;line-height:1.65;color:#2C2A26;margin:0 0 26px}
.notes .intro b{color:#0A0A0A}
.notes ol{list-style:none;margin:0;padding:0;counter-reset:n}
.notes li{counter-increment:n;position:relative;padding:0 0 22px 50px;margin:0}
.notes li::before{content:counter(n);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#00AEEF;color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.notes li::after{content:"";position:absolute;left:15.5px;top:38px;bottom:6px;width:1px;background:#D6D3CC}
.notes li:last-child::after{display:none}
.notes h3{margin:4px 0 0;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
.notes p{margin:6px 0 0;font-size:16px;color:#2C2A26;line-height:1.6}
.notes .hint{font-size:14px;color:#524F49;border-top:1px solid #D6D3CC;padding-top:14px;margin-top:8px}

/* ============ Vetrina negozio ============ */
.vt{background:#fff;color:#1a1a1a;font-family:"Open Sans",Arial,sans-serif;min-height:100%}
.vt-promo{background:var(--shop);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:7px 12px}
.vt-head{background:#0b0b0b;color:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 28px;gap:16px}
.vt-head .l{display:flex;gap:22px;font-family:Overpass,sans-serif;font-weight:700;font-size:14px;align-items:center}
.vt-head .r{display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:13px}
.vt-search{background:#2a2a2a;border-radius:999px;padding:7px 14px;color:#bbb;font-weight:600;font-size:12px;letter-spacing:.04em}
.lockup{display:flex;align-items:center;gap:14px;cursor:pointer}
.lockup .g{width:118px;color:#fff}
.lockup .rl{height:84px;width:auto;display:block}
.lockup .sep{width:1px;height:34px;background:#555}
.lockup .shop{font-family:Overpass,sans-serif;line-height:1}
.lockup .shop b{display:block;font-size:20px;font-weight:900;letter-spacing:.02em}
.lockup .shop small{display:block;font-size:10px;letter-spacing:.14em;color:var(--shop);font-weight:800;margin-top:3px}
.vt-nav{display:flex;justify-content:center;gap:28px;background:#fff;border-bottom:1px solid #e6e6e6;padding:13px 16px;font-family:Overpass,sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;flex-wrap:wrap}
.vt-nav span{cursor:pointer}
.vt-nav span.hot{color:var(--shop)}
.uc-hero{position:relative;height:430px;background:#222 center/cover no-repeat;color:#fff;display:flex;align-items:flex-end}
.uc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,0) 100%)}
.uc-hero .in{position:relative;padding:0 48px 46px;max-width:700px}
.uc-hero .kick{font-family:Overpass,sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;color:#C9D3A6}
.uc-hero h2{font-family:Overpass,sans-serif;font-weight:900;font-size:50px;line-height:1;margin:10px 0 12px;text-transform:uppercase}
.uc-hero p{font-size:18px;line-height:1.45;margin:0 0 20px}
.uc-cta{border:0;border-radius:40px;padding:13px 24px;font-family:Overpass,sans-serif;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;background:var(--shop);color:#fff}
.uc-cta.w{background:#fff;color:#111}
.uc-cta.o{background:transparent;color:#111;border:2px solid #111}
.services{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #e6e6e6}
.services div{padding:18px 20px;border-right:1px solid #eee;font-size:14px;line-height:1.35}
.services div:last-child{border-right:0}
.services b{display:block;font-family:Overpass,sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.vt-wrap{max-width:1240px;margin:0 auto;padding:26px 28px 40px}
.vt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.vt-bar h3{font-family:Overpass,sans-serif;font-weight:900;font-size:26px;margin:0 16px 0 0;text-transform:uppercase}
.chip{border:1px solid #cfcfcf;background:#fff;border-radius:40px;padding:7px 14px;font-size:13px;font-weight:700}
.chip.on{background:#111;border-color:#111;color:#fff}
.tog{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;cursor:pointer;user-select:none}
.tog .sw.on{background:var(--in)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{border:1px solid #e8e8e8;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card .im{aspect-ratio:3/2;background:#fff;display:grid;place-items:center;padding:8px;position:relative}
.card .im img{width:100%;height:100%;object-fit:contain}
.card .yr{position:absolute;top:10px;left:10px;font-family:Overpass,sans-serif;font-weight:800;font-size:11px;background:#111;color:#fff;padding:3px 7px}
.card .bd{padding:12px 14px 16px;border-top:1px solid #f0f0f0;display:flex;flex-direction:column;gap:4px;flex:1}
.card .c{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.card .t{font-family:Overpass,sans-serif;font-weight:800;font-size:18px;line-height:1.15}
.card .p{font-size:16px;font-weight:700}
.av{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-top:8px}
.av i{width:11px;height:11px;border-radius:50%;display:block;flex:none}
.av.store{color:var(--in)} .av.store i{background:var(--in)}
.av.arr{color:var(--arr)} .av.arr i{background:var(--arr)}
.av.central{color:var(--na)} .av.central i{background:var(--na)}
.card.flash{animation:cflash 1.4s ease-out}
/* taglie della card colorate per stato di disponibilità */
.szr{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.szr span{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;padding:5px 12px;border-radius:999px;border:2px solid var(--na);color:var(--na);background:var(--na-bg)}
.szr span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--na)}
.szr .a-store{border-color:var(--in);color:var(--in);background:var(--in-bg)} .szr .a-store::before{background:var(--in)}
.szr .a-arr{border-color:var(--arr);color:var(--arr);background:var(--arr-bg)} .szr .a-arr::before{background:var(--arr)}
.vt-leg{margin:-4px 0 16px}
/* descrizione e scheda tecnica normalizzata, sotto la scheda prodotto */
.pdp-more{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;margin-top:40px;padding-top:28px;border-top:1px solid #e6e6e6}
.pdp-more h3{font-family:Overpass,sans-serif;font-weight:900;font-size:20px;text-transform:uppercase;margin:0 0 12px}
.pm-desc p{font-size:16px;line-height:1.65;color:#333;margin:0}
.pm-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pm-h .norm{font-size:12px;font-weight:700;color:var(--in);background:var(--in-bg);border-radius:999px;padding:3px 10px}
.pm-spec table{width:100%;border-collapse:collapse;font-size:15px}
.pm-spec th{text-align:left;font-weight:600;color:#777;padding:9px 12px 9px 0;width:42%;border-bottom:1px solid #eee;vertical-align:top}
.pm-spec td{padding:9px 0;border-bottom:1px solid #eee;color:#111}
@media (max-width:760px){ .pdp-more{grid-template-columns:1fr;gap:24px} }
/* nel monitor il sito del negozio è disegnato a larghezza desktop e ridotto in scala, come su uno schermo vero */
.lt-view > .vt{zoom:.74}
/* due card per riga, leggibili; la scheda prodotto usa una scala più piccola per stare tutta nello schermo */
.lt-view .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lt-view > .vt.is-pdp{zoom:.6}
/* nome prodotto nel monitor grande quanto nel telefono (circa 16-18px a schermo) */
.lt-view .card .t{font-size:22px}
/* scheda prodotto: tutto in una schermata */
.lt-view .pdp{grid-template-columns:1.1fr 1fr;gap:32px}
.lt-view .pdp .gal{padding:8px}
.lt-view .pdp h1{font-size:30px}
/* taglie della scheda prodotto nel monitor: a schermo grandi quanto quelle della griglia */
.lt-view .szs{gap:8px}
.lt-view .szs button{padding:7px 16px;font-size:19px}
.lt-view .szs button i{width:11px;height:11px}
/* nell'anteprima la scheda prodotto tiene solo l'essenziale, per stare tutta nello schermo */
.lt-view .crumb,.lt-view .pdp .sub,.lt-view .avail .d,.lt-view .avail .fr{display:none}
.lt-view .vt-wrap{padding-top:18px}
.lt-view .pdp .price{margin:8px 0 0}
.lt-view .lbl{margin:12px 0 6px}
.lt-view .avail{margin-top:12px;padding:12px 16px}
.lt-view .avail .btns{margin-top:8px;gap:4px}
.lt-view .avail .btns .uc-cta{padding:7px 14px}
.lt-view .specs{display:none}
.lt-view .specs div{padding:6px 0}
@keyframes cflash{0%{box-shadow:0 0 0 3px var(--in)}100%{box-shadow:0 0 0 0 transparent}}
.pdp{display:grid;grid-template-columns:1.25fr 1fr;gap:44px}
.pdp .gal{background:#fff;border:1px solid #eee;aspect-ratio:3/2;display:grid;place-items:center;padding:14px}
.pdp .gal img{width:100%;height:100%;object-fit:contain}
.crumb{font-size:13px;color:#777;margin-bottom:14px}
.crumb span{cursor:pointer;text-decoration:underline}
.pdp h1{font-family:Overpass,sans-serif;font-weight:900;font-size:38px;line-height:1.05;margin:0;text-transform:uppercase}
.pdp .sub{color:#666;margin-top:6px;font-size:15px}
.pdp .price{font-size:28px;font-weight:700;margin:14px 0 2px}
.pdp .price small{display:block;font-size:13px;color:#777;font-weight:400}
.lbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#555;margin:20px 0 8px}
.lbl span{text-transform:none;letter-spacing:0;color:#111}
.szs{display:flex;flex-wrap:wrap;gap:8px}
/* taglie della scheda prodotto: stesse pillole della griglia, colorate per stato */
.szs button{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--na);background:var(--na-bg);color:var(--na);border-radius:999px;padding:6px 14px;font-weight:700;font-size:15px;line-height:1.2}
.szs button i{display:block;width:9px;height:9px;border-radius:50%;margin:0;order:-1;background:var(--na)}
.szs .a-store{border-color:var(--in);background:var(--in-bg);color:var(--in)} .szs .a-store i{background:var(--in)}
.szs .a-arr{border-color:var(--arr);background:var(--arr-bg);color:var(--arr)} .szs .a-arr i{background:var(--arr)}
.szs button.sel{color:#fff;background:var(--na)} .szs button.sel.a-store{background:var(--in)} .szs button.sel.a-arr{background:var(--arr)} .szs button.sel i{background:#fff}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#666;margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:block}
.avail{margin-top:18px;border:2px solid var(--in);background:#f1f8f3;padding:16px 18px}
.avail .h{display:flex;gap:10px;font-size:19px;font-weight:700;line-height:1.3;font-family:Overpass,sans-serif}
.avail .h i{flex:none;width:13px;height:13px;border-radius:50%;background:var(--in);margin-top:6px}
.avail .d{font-size:15px;color:#444;margin:5px 0 0 23px;line-height:1.45}
.avail .btns{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0 0 23px;max-width:340px}
.avail .btns .uc-cta{width:100%;text-align:center;padding:12px 18px}
.avail .fr{font-size:12px;color:#777;margin:12px 0 0 23px}
.avail.arr{border-color:var(--arr);background:#fcf6ec} .avail.arr .h i{background:var(--arr)}
.avail.central{border-color:var(--na);background:var(--na-bg)} .avail.central .h i{background:var(--na)}
.specs{margin-top:22px;border-top:1px solid #eee}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #eee;font-size:14px}
.specs div span:first-child{color:#777}
.vt-foot{background:#0b0b0b;color:#bbb;padding:26px 28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;line-height:1.6}
.vt-foot b{color:#fff}

/* ============ Vista affiancata ============ */
#D{background:var(--eb-page);padding:18px 16px}
.split{display:flex;gap:22px;align-items:flex-start;max-width:1600px;margin:0 auto}
.split .phone{height:calc(100vh - 200px);min-height:600px}
.split .win{flex:1;min-width:0;height:calc(100vh - 160px);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 20px 50px -24px rgba(0,0,0,.4);display:flex;flex-direction:column}
.split .url{background:#e9ecef;padding:8px 12px;font-size:13px;color:#555;display:flex;gap:8px;align-items:center}
.split .url span{background:#fff;border-radius:20px;padding:4px 12px;flex:1}
.split .scroller{flex:1;overflow-y:auto}
.split .uc-hero{height:300px}
.split .uc-hero h2{font-size:38px}

/* ============ METIS · stesso shell dei backend EurekaBike ============ */
.mx{--acc:#199bd7;--acc-d:#178cd8;--ink:#252525;--ink2:#495057;--muted:#6c757d;--line:#dee2e6}
.mx .lead{font-size:15px;color:var(--ink);margin:0 0 16px}
.mx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mx-card{background:#fff;border-radius:4px;box-shadow:0 0 10px 0 rgba(0,0,0,.05);padding:18px 20px 20px;margin-bottom:20px}
.mx-card h3{margin:0 0 14px;font-size:16px;font-weight:700;color:var(--acc);text-transform:uppercase}
.mx .seg{display:inline-flex;flex-wrap:wrap;gap:6px;margin:0}
.mx .seg button{border:1px solid #ced4da;background:#fff;min-height:0;border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500;text-transform:uppercase;color:var(--muted);line-height:1.5}
.mx .seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.mx .seg button .c{margin-left:6px;opacity:.75}
.mx-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.mx-filters input{flex:1;min-width:240px;border:1px solid #ced4da;border-radius:20px;padding:6px 14px;font-size:14px;font-family:inherit;color:var(--ink2)}
.mx-filters select{border:1px solid #ced4da;border-radius:0;padding:6px 10px;font-size:14px;font-family:inherit;color:var(--ink2);background:#fff}
.mx-filters input:focus,.mx-filters select:focus{outline:0;border-color:var(--acc)}
.mx .uc-btn{border:1px solid var(--acc);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500;background:#fff;color:var(--acc);text-transform:uppercase}
.mx .uc-btn:hover{background:var(--acc);color:#fff}
.mx .uc-btn.dark{border-color:var(--muted);color:var(--muted)}
.mx .uc-btn.dark:hover{background:var(--muted);color:#fff}
.mx .uc-btn.primary{background:var(--acc);color:#fff}
.mx .uc-btn.primary:hover{background:var(--acc-d);border-color:var(--acc-d)}
.mx .uc-btn.red{border-color:#842029;color:#842029}
.mx .uc-btn.red:hover{background:#842029;color:#fff}
.mx-tbl{border:1px solid var(--line);overflow:auto;background:#fff;max-height:60vh}
.mx-tbl table{border-collapse:collapse;width:100%;font-size:14px;color:#282929;min-width:1280px}
.mx-tbl th{position:sticky;top:0;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);font-size:13px;font-weight:600;text-align:left;padding:14px 16px;white-space:nowrap;z-index:1}
.mx-tbl td{padding:12px 16px;border-bottom:1px solid #f3f2f5;white-space:nowrap;vertical-align:middle}
.mx-tbl td.num,.mx-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.mx-tbl tr.o{cursor:pointer}
.mx-tbl tr.o:hover td{background:#f6f9fc}
.mx-tbl tr.o.open td{background:#eef7fc}
.mx-tbl tr.nw td{animation:mxnew 2.4s ease-out}
@keyframes mxnew{0%{background:#cfe9f8}100%{background:transparent}}
.mx-tbl .car{color:var(--muted);width:14px}
.mx-cnt{font-size:13px;color:var(--muted);margin-top:10px}
.mst{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.p-paid,.s-att,.e-store{background:#d1f7d6;color:#0f5132}
.p-pend,.e-cent{background:#fff3cd;color:#664d03}
.p-due,.s-abo{background:#f8d7da;color:#842029}
.p-ref,.e-done,.s-sto{background:#e9ecef;color:#000}
.s-ann,.e-none,.t-b2c{background:#f8f9fa;color:#6c757d;border-color:#dee2e6}
.t-b2b,.e-prep,.l-new{background:#dbefff;color:#084298}
.mchip{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:500;background:#fff;color:#777;border:1px solid #dee2e6;margin:0 4px 4px 0}
.mchip.warn{background:#fff3cd;color:#664d03;border-color:#ffe69c}
.mx-det td{background:#fafbfc;white-space:normal;padding:16px 18px 18px 40px}
.mx-dwrap{position:sticky;left:40px;width:min(1000px,calc(100vw - 420px))}
.mx-dg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px}
.mx-dg .k{font-size:12px;color:var(--muted);font-weight:600}
.mx-dg .v{font-size:14px;margin-top:2px}
.mx-dg .wide{grid-column:span 2}
.mx-flow{display:flex;margin:16px 0 4px;flex-wrap:wrap}
.mx-flow div{flex:1;min-width:130px;font-size:12.5px;color:var(--muted);padding:8px 10px 0;border-top:3px solid var(--line)}
.mx-flow div.ok{border-top-color:#28a745;color:var(--ink)}
.mx-flow div.cur{border-top-color:var(--acc);color:var(--ink);font-weight:600}
.mx-flow b{display:block;font-size:13px;font-weight:600}
.mx-dfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap}
.mx-dfoot a{color:var(--acc);cursor:pointer}
.mx-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:.375rem;padding:18px 20px}
.kpi .lab{font-size:14px;color:var(--muted)}
.kpi .val{font-size:30px;font-weight:600;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .dl{font-size:12.5px;font-weight:500;margin-top:6px}
.dl.up{color:#0f5132} .dl.dn{color:#842029}
.mt{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.mt button{border:1px solid #ced4da;background:#fff;border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500;text-transform:uppercase;color:var(--muted)}
.mt button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.mx-sint{border-left:4px solid var(--acc)}
.mx-sint p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}
.mx-bars{display:flex;align-items:flex-end;gap:18px;height:200px;padding:10px 6px 0;border-bottom:1px solid var(--line)}
.mx-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.mx-bars i{display:block;width:100%;max-width:56px;background:#8ccdec;border-radius:3px 3px 0 0}
.mx-bars div.cur i{background:var(--acc)}
.mx-bars span{font-size:13px;font-weight:600;color:var(--ink2)}
.mx-bl{display:flex;gap:18px;padding:6px}
.mx-bl span{flex:1;text-align:center;font-size:13px;color:var(--muted)}
.mx-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.mx-home div{border:1px solid var(--line);border-radius:.375rem;padding:18px 20px;cursor:pointer;background:#fff}
.mx-home div:hover{border-color:var(--acc)}
.mx-home b{display:block;font-size:15px;font-weight:500;color:var(--acc);margin-bottom:4px}
.mx-home small{color:var(--muted);font-size:13px}
.gtoast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#252525;color:#fff;padding:12px 18px;border-radius:6px;font-size:14px;font-weight:500;z-index:300;transition:.25s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.gtoast.show{opacity:1;transform:translate(-50%,0)}
.gtoast b{color:#7cc9ef}
@media (max-width:760px){ .mx-dg{grid-template-columns:repeat(2,minmax(0,1fr))} .mx-dwrap{width:calc(100vw - 90px)} }

.mx-ch{width:100%;height:190px;display:block}
.mx-fun div{display:grid;grid-template-columns:260px 1fr 130px;gap:14px;align-items:center;padding:7px 0}
.mx-fun .fl{font-size:14px}
.fb{height:14px;background:#eef0f2;border-radius:7px;overflow:hidden;display:block}
.fb i{display:block;height:100%;background:var(--acc,#199bd7);border-radius:7px}
.mx-fun .fn{font-size:14px;font-weight:600;text-align:right}
.mx-fun .fn small{color:#6c757d;font-weight:400;margin-left:4px}
@media (max-width:760px){ .mx-fun div{grid-template-columns:1fr 90px} .mx-fun .fb{grid-column:1/-1;order:3} }

/* ============ Architettura dati (schema interattivo) ============ */
/* Brand playbook eureka!BIKE: Ink/White struttura, Cream superficie secondaria, grigi caldi,
   Azure solo per ciò che è attivo/interattivo, Archivo come unico carattere.
   I blocchi del brand usano il colore del brand. */
#F{--ink:#0A0A0A;--az:#00AEEF;--azl2:#A5E4EB;--azl3:#D5F0F2;--cream:#F5F3EC;
  --g03:#2C2A26;--g05:#524F49;--g06:#6B6860;--g07:#8A8780;--g09:#C2BFB8;--g10:#D6D3CC;--g11:#E4E2DB;
  background:#fff;padding:18px 16px 40px;font-family:Archivo,Rubik,sans-serif;color:var(--ink)}
.dx{margin:0 auto}
.dx-head{display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%}
.dx-ctrl{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.dx-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.dx-row .lb{font-size:11px;font-weight:600;color:var(--g06);text-transform:uppercase;letter-spacing:.12em;margin:0 4px 0 12px}
.dx-row button,.dx-pl button{border:1px solid var(--g10);background:#fff;border-radius:999px;padding:6px 14px;font:600 13px Archivo,sans-serif;color:var(--ink)}
.dx-row button:hover,.dx-pl button:hover{border-color:var(--ink)}
.dx-row button.on,.dx-pl button.pr{background:var(--az);border-color:var(--az);color:#fff}
/* il player resta agganciato in alto, subito sotto la barra delle schede */
.dx-cap{position:sticky;top:calc(var(--chrome-h,0px) + var(--flows-h,0px));z-index:97;display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;border-radius:6px;padding:12px 16px;margin-bottom:28px;box-shadow:0 8px 24px rgba(10,10,10,.18)}
.dx-cap[hidden]{display:none}
.dx-cap .n{font-size:34px;font-weight:900;color:var(--az);line-height:1;flex:none;letter-spacing:-.03em}
.dx-cap .n small{font-size:14px;color:#fff;opacity:.6;font-weight:600;letter-spacing:0}
.dx-cap .tx{flex:1;font-size:17px;line-height:1.45}
.dx-cap .tx b{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--az);margin-bottom:3px}
.dx-cap .dx-pl button{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.dx-cap .dx-pl button.pr{background:var(--az);border-color:var(--az);color:#fff}
.dx-canvas{background:#fff;border:1px solid var(--g11);border-radius:6px;overflow-x:auto;padding:12px}
.dx-wrap{position:relative;overflow:hidden;margin:0 auto}
.dx-stage{position:absolute;left:0;top:0;width:1620px;transform-origin:0 0}
.dx-stage > svg{position:absolute;left:0;top:0;display:block;font-family:Archivo,sans-serif}
.dx-stage > svg.dx-labs{pointer-events:none}
.dx-stage .node{position:absolute}
.dx-bot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px;margin-top:20px;align-items:start}
.dx-panel{background:var(--cream);border-radius:6px;padding:22px 24px}
.dx-panel .k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g06)}
.dx-panel h3{margin:6px 0 8px;font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.dx-panel .role{font-size:16px;color:var(--g03);margin:0 0 12px;line-height:1.5}
.dx-panel ul{margin:0 0 14px;padding-left:18px;font-size:15px;line-height:1.55;color:var(--g03)}
.dx-panel ul li{margin-bottom:4px}
.dx-panel .io{font-size:11px;font-weight:600;color:var(--g06);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px}
.dx-io span{display:inline-block;border:1px solid var(--g10);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:500;margin:0 4px 6px 0;cursor:pointer;background:#fff}
.dx-io span:hover{border-color:var(--az)}
.dx-panel .x{font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;margin-top:10px;display:inline-block;border-bottom:2px solid var(--az)}
.dx-gen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px}
.dx-steps{list-style:none;margin:10px 0 14px;padding:0;counter-reset:s}
.dx-steps li{counter-increment:s;position:relative;padding:10px 12px 10px 46px;border-radius:5px;font-size:15px;line-height:1.45;color:var(--g06);cursor:pointer}
.dx-steps li::before{content:counter(s);position:absolute;left:10px;top:9px;width:26px;height:26px;border-radius:50%;background:var(--g11);color:var(--g05);display:grid;place-items:center;font-weight:700;font-size:13px}
.dx-steps li.done{color:var(--ink)}
.dx-steps li.done::before{background:var(--ink);color:#fff}
.dx-steps li.cur{background:#fff;color:var(--ink)}
.dx-steps li.cur::before{background:var(--az);color:#fff}
.dx-pl{display:flex;gap:8px;flex:none}
.dx-leg{display:grid;gap:10px;font-size:14px;color:var(--g03);margin:12px 0 4px}
.dx-leg span{display:flex;align-items:center;gap:12px}
.dx-leg svg{flex:none;width:40px;height:10px;overflow:visible}
.dx-pr{list-style:none;margin:10px 0 0;padding:0}
.dx-pr li{padding:10px 0 10px 24px;position:relative;border-bottom:1px solid var(--g10);font-size:15px;line-height:1.45}
.dx-pr li:last-child{border-bottom:0}
.dx-pr li::before{content:"";position:absolute;left:3px;top:17px;width:8px;height:8px;background:var(--ink)}
/* nodi */
.dn{width:100%;height:100%;box-sizing:border-box;background:#fff;border:1px solid var(--g10);border-radius:6px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;overflow:hidden;transition:opacity .3s,box-shadow .3s,border-color .3s;font-family:Archivo,sans-serif;color:var(--ink)}
.dn:hover{border-color:var(--ink)}
.dn .k{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g06);line-height:1.3}
.dn .t{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.dn .s{font-size:12px;color:var(--g05);line-height:1.35}
.dn .lg svg{height:13px;width:auto;max-width:100%;display:block}
.dn .gl{color:#fff;width:92px;height:17px}
.dn .gl svg{width:100%;height:100%;display:block}
.ic{width:10px;height:12px;display:inline-block;vertical-align:-1px;margin-right:4px}
.dn.brand{background:var(--brand-c);border-color:var(--brand-c);color:#fff}
.dn.brand:hover{border-color:var(--brand-c);box-shadow:0 0 0 2px var(--brand-c)}
.dn.brand .k{color:rgba(255,255,255,.62)}.dn.brand .s{color:rgba(255,255,255,.8)}
.dn.core{border-color:var(--ink)}
.dn.priv{border:1.5px dashed var(--ink)}
.dn.pub{border-color:var(--ink)}
.dn.bi.row{flex-direction:row;align-items:center;gap:16px;padding:6px 14px}
.dn.bi.dir{flex-direction:row;align-items:center;gap:28px;padding:12px 18px;border:1.5px solid var(--ink)}
.dn.user{border-radius:48px;background:var(--cream);border-color:var(--g10);align-items:center;text-align:center;justify-content:center}
.dn.ext{justify-content:center;padding:6px 9px;gap:2px;border:1px dashed var(--brand-c)}
.dn.ext .t{font-size:13px;color:var(--brand-c)}
.dn.ext .s{font-size:10px;white-space:nowrap}
.dn .uc-tag{display:inline-flex;align-items:center;align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:3px 7px;margin-top:3px;background:var(--cream);color:var(--ink)}
.dn .uc-tag.live{background:var(--az);color:#fff}
.dn .two{display:grid;gap:6px;margin-top:6px}
.dn .two div{border:1px solid var(--g10);border-left:3px solid var(--ink);background:#fff;border-radius:3px;padding:5px 9px;font-size:12px;line-height:1.3;color:var(--g05)}
.dn .two b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.dn .two div.z{background:var(--az);border-color:var(--az);color:#fff}
.dn .two div.z b{color:#fff}
.dn .chips{display:flex;flex-wrap:wrap;gap:6px}
.dn .chips span{font-size:12.5px;font-weight:500;background:var(--cream);color:var(--ink);border-radius:999px;padding:5px 12px}
.dn .bl{flex:none;width:260px;display:flex;flex-direction:column;gap:5px}
/* scatole nere (Ink surface: bianco + azure come unico accento) */
.dn.black{background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:18px 20px;gap:8px}
.dn.black:hover{box-shadow:0 0 0 3px var(--az)}
.dn.black .k{color:var(--g06)}
.dn.black .t{font-size:26px;font-weight:900;letter-spacing:-.03em}
.dn.black .bx div{border-top:1px solid var(--g10);padding:9px 0;font-size:13px;color:var(--g05);line-height:1.35}
.dn.black .bx b{display:block;color:var(--ink);font-size:14.5px;font-weight:600}
.dn.black .nl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.dn.black .nl span{font-size:14px;font-weight:500;color:var(--ink);background:var(--cream);border:1px solid var(--g10);border-radius:4px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn.black .s3{font-size:13px;color:var(--g05);margin-top:8px;border-top:1px solid var(--g10);padding-top:10px}
.dn.black .s3 b{color:var(--ink);font-weight:600}
.dn.black .op{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:600;color:#fff;background:var(--az);border-radius:999px;padding:6px 14px}
/* scatole aperte: lo sfondo è disegnato nello SVG, sotto gli archi */
.dn.frame{background:transparent;border:1px solid var(--g10);padding:0;cursor:default}
.dn.frame:hover{border-color:var(--g10)}
.fh{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink);cursor:pointer}
.fh span,.fh b{background:var(--cream);padding:2px 6px;margin:-2px -6px}
/* rete: stesso formato del box Core (bianco, bordo Ink, occhiello + titolo) */
.dn.frame.netf{border:1.5px solid var(--ink)}
.nh{padding:18px 20px 0;background:#fff;align-self:flex-start;display:flex;flex-direction:column;gap:4px}
.nh .t{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.15}
.dn.card.open .ch{background:#fff;border-radius:6px 6px 0 0}
.dn .uc-tag,.dn .op{position:relative}
.fh b{font-size:12px;letter-spacing:0;color:var(--ink);font-weight:600;border-bottom:2px solid var(--az)}
.dn.card{padding:0}
.dn.card.open{background:transparent;cursor:default}
.dn.card.open:hover{border-color:var(--g10)}
.dn.card .ch{display:flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;height:100%}
.dn.card.open .ch{height:34px;border-bottom:1px solid var(--g10)}
.dn .ch div{flex:1;min-width:0}
.dn .ch b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn .ch small{display:block;font-size:11.5px;color:var(--g06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn.card.open .ch div{display:flex;align-items:baseline;gap:10px}
.dn .ch i{font-style:normal;font-size:10px;font-weight:700;width:19px;height:19px;border-radius:3px;display:grid;place-items:center;background:var(--cream);color:var(--ink);flex:none}
.dn .ch > span{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:var(--az);color:#fff;font-size:11px;font-weight:700;margin-left:4px}
.dn .ch:hover > span{background:#0090C6}
.node.new .dn{animation:dxin .6s .1s both cubic-bezier(.42,0,.58,1)}
@keyframes dxin{from{opacity:0}}
.node.off .dn{opacity:.35;border-style:dashed}
.dx-stage.focus .node:not(.hot) .dn:not(.frame):not(.open){opacity:.4}
.dx-stage.focus .node.off.hot .dn{opacity:.55}
.node.hot .dn:not(.frame):not(.open){box-shadow:0 0 0 3px var(--azl2)}
.node.sel .dn,.node.sel .dn.brand{box-shadow:0 0 0 3px var(--az)}
.node.sel .dn.frame,.node.sel .dn.card.open{box-shadow:0 0 0 2px var(--az)}
.cap{font-size:11px;font-weight:600;letter-spacing:.14em;fill:var(--g06)}
/* archi: il tipo si legge dallo stile della linea, l'azure indica solo ciò che è attivo */
.edge{transition:opacity .3s}
.edge .base{fill:none;stroke-width:1.6;opacity:.9}
.edge .fl{fill:none;stroke-width:2.2;stroke-dasharray:3 11;animation:dxflow 1.1s linear infinite;opacity:1}
.edge .hit{fill:none;stroke:transparent;stroke-width:16;cursor:help}
.edge.dash .base{stroke-dasharray:8 5}
.edge.dot .base{stroke-dasharray:.1 6;stroke-linecap:round;stroke-width:2.6}
.edge.dash .fl,.edge.dot .fl{display:none}
/* tratteggiate e puntinate: scorre il tratteggio stesso */
.edge.dash .base{animation:dxdash 1.3s linear infinite}
.edge.dot .base{animation:dxdot .9s linear infinite}
@keyframes dxdash{to{stroke-dashoffset:-13}}
@keyframes dxdot{to{stroke-dashoffset:-6.1}}
.edge.lead .base{stroke-width:3.2}
.edge.lead .fl{stroke-width:3.2}
.edge.off{opacity:.15}
.edge.off .fl{display:none}
.edge.off .base{animation:none}
@keyframes dxflow{to{stroke-dashoffset:-16}}
.edge.hot .base{stroke:var(--az);opacity:1;stroke-width:2.6}
.edge.hot.lead .base{stroke-width:3.6}
.edge.hot.dot .base{stroke-width:3.2}
.edge.hot .fl{stroke:var(--az)}
.dx-stage.focus .dx-edges .edge:not(.hot){opacity:.25}
.c-brand{stroke:#2C2A26} .c-sync,.c-pub,.c-bi{stroke:var(--g07)} .c-lead{stroke:var(--g07)}
.edge path.base,.edge path.fl{fill:none}
.lab rect{fill:#fff;stroke:var(--az);stroke-width:1.2}
.lab text{font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central;stroke:none;fill:var(--ink)}
.gate circle{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.gate.open circle{stroke:var(--az);stroke-width:2}
.gate path,.gate rect{fill:var(--ink)}
.gate.dim{opacity:.3}
.dxp circle{fill:var(--az);stroke:#fff;stroke-width:1.5}
@media (prefers-reduced-motion:reduce){ .edge .fl,.edge .base{animation:none} .node.new .dn{animation:none} }
@media (max-width:1100px){ .dx-bot,.dx-gen{grid-template-columns:1fr} .dx-ctrl{align-items:flex-start} .dx-row{justify-content:flex-start} .dx-cap{flex-wrap:wrap} }

/* ============ Responsive ============ */
@media (max-width:1100px){
  .stageA{grid-template-columns:1fr;justify-items:center;gap:40px}
  #A .phone{transform:none}
  .eb{grid-template-columns:1fr}
  .eb-side{display:none}
  .eb-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .split .phone{display:none}
  .decide{grid-template-columns:1fr}
}
@media (max-width:760px){
  .vt-head{grid-template-columns:1fr;justify-items:center;padding:12px 16px}
  .vt-head .l,.vt-head .r{display:none}
  .uc-hero{height:380px}.uc-hero .in{padding:0 20px 28px}.uc-hero h2{font-size:34px}
  .vt-wrap{padding:20px 16px}
  .eb-body{padding:16px}
  .private span.txt{display:none}
}
@media (max-width:520px){
  #A{padding:0}
  .phone{width:100%;height:calc(100vh - 130px);min-height:0;border-radius:0;padding:0;box-shadow:none}
  .ph{border-radius:0}.ph-status{display:none}
  .eb-grid4{grid-template-columns:1fr}
  .szs{grid-template-columns:repeat(3,1fr)}
  .services{grid-template-columns:1fr}
}

/* ============ Larghezza piena (25/10/2026) ==================================
   Anche la demo segue la regola del playbook (cap. 12, Page Width), per scelta
   di Jacopo: niente colonne centrate da 1200-1600px. Barre e schermate vanno
   da bordo a bordo col margine del sito (32px, 16px sotto gli 860px); nelle
   schermate a due colonne la larghezza viene dalle colonne, e monitor e
   testi crescono con la pagina. Il monitor tiene le sue proporzioni
   (aspect-ratio) e non supera la sua immagine (1410px).
   Sotto le soglie gia' previste (1330 / 1250 / 1100px) le schermate restano
   a una colonna come prima. */
.chrome-in, .uc-pager-in, .uc-note, .split { max-width: none; }
.chrome-in { padding-left: 32px; padding-right: 32px; }
.uc-pager-in { padding-left: 32px; padding-right: 32px; }
.uc-note { padding-left: 32px; padding-right: 32px; }
#A, #B, #C, #D, #E, #F { padding-left: 32px; padding-right: 32px; }
.stageA { grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; max-width: none; }
.stageA .notes { max-width: none; }
.stageB { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 80px; justify-content: stretch; max-width: none; }
.stageB .notes { max-width: none; }
.stageB .device, .stageD .device { max-width: 1410px; }
.stageD { grid-template-columns: 350px minmax(0, 1fr); justify-content: stretch; max-width: none; }
@media (max-width: 1330px) { .stageD { grid-template-columns: 1fr; } }
@media (max-width: 1250px) { .stageB { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 1100px) { .stageA { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .chrome-in, .uc-pager-in, .uc-note, #A, #B, #C, #D, #E, #F { padding-left: 16px; padding-right: 16px; }
}
/* Al telefono la scheda A e' il telefono stesso, a tutto schermo (vedi sopra). */
@media (max-width: 520px) { #A { padding: 0; } }

/* ============ Niente scroll laterale al telefono (25/10/2026) ===============
   Sotto i 760px la barra in fondo ha due colonne strette: i bottoni (nowrap
   nel sito) erano piu' larghi della colonna e spingevano la pagina di lato,
   da 3 a 52px secondo l'etichetta della scheda. Le colonne possono stringersi
   e l'etichetta va a capo dentro il bottone. */
@media (max-width: 760px) {
  .uc-pager-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uc-pager .btn { max-width: 100%; white-space: normal; }
}
/* Sotto i 520px il telefono della scheda A e' lo schermo stesso: i tasti
   laterali (3px fuori dal bordo) non servono e allargavano la pagina. */
@media (max-width: 520px) {
  #A .phone::before, #A .phone::after { display: none; }
}

/* Schede in preparazione (KOSMOS, EIDOS, AGORA, 25/10/2026): ci sono ma per ora sono vuote. */
.uc-empty { background: #F5F3EC; }

/* ============ Barra in fondo, rifatta (26/10/2026) =========================
   Prima: tre colonne a tutta pagina, quindi su schermi larghi i bottoni
   finivano ai bordi; e il contatto finale, anche nascosto, occupava la cella
   di destra e spingeva "successiva" su una seconda riga.
   Ora: un gruppo centrato largo al massimo 960px, allineato alle schede in
   alto; ogni elemento ha la sua cella esplicita, "successiva" e il contatto
   condividono la stessa (uno solo e' visibile); i due bottoni hanno la stessa
   larghezza e due righe, etichetta piccola e nome della scheda. */
.uc-pager-in {
  max-width: 960px; margin: 0 auto; padding: 22px 32px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: 16px 24px;   /* i due bottoni alti uguali anche se un nome va a capo */
}
.uc-pager [data-uc-prev] { grid-column: 1; grid-row: 1; justify-self: stretch; }
.uc-all { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; white-space: nowrap; }
.uc-pager [data-uc-next], .uc-pager [data-uc-end] { grid-column: 3; grid-row: 1; justify-self: stretch; }
/* La precedente nascosta tiene il suo posto, il contatto nascosto no. */
.uc-pager [data-uc-prev][hidden] { display: flex; visibility: hidden; }
.uc-pager [data-uc-next][hidden], .uc-pager [data-uc-end][hidden] { display: none; }
.uc-pager .uc-pg {
  display: flex; flex-direction: column; gap: 3px; min-height: 62px; justify-content: center;
  padding: 10px 18px; white-space: normal; text-align: left; line-height: 1.25;
  /* .btn anima "all", visibility compresa: la precedente nascosta restava visibile
     per tutta la durata della transizione. Qui si animano solo i colori. */
  transition-property: background-color, border-color, color, box-shadow;
}
.uc-pager [data-uc-next].uc-pg, .uc-pager [data-uc-end].uc-pg { text-align: right; align-items: flex-end; }
.uc-pager [data-uc-prev].uc-pg { align-items: flex-start; }
.uc-pg small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.uc-pg span { font-size: 14px; font-weight: 700; }
.uc-note { padding-bottom: 26px; }
@media (max-width: 760px) {
  .uc-pager-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 18px 16px 14px; gap: 12px; }
  .uc-pager [data-uc-prev] { grid-column: 1; grid-row: 1; }
  .uc-pager [data-uc-next], .uc-pager [data-uc-end] { grid-column: 2; grid-row: 1; }
  .uc-all { grid-column: 1 / -1; grid-row: 2; }
  .uc-pager .uc-pg { padding: 10px 12px; min-height: 58px; }
  .uc-pg span { font-size: 13px; }
}

/* ============ Chip delle schede: parola chiave + wordmark (26/10/2026) ======
   Piu' snelle: niente piu' "KOSMOS · Ingestion" su una riga, ma la parola
   chiave sopra e il wordmark della piattaforma sotto, piccolo. Sulla chip attiva
   (azzurra) tutto bianco, wordmark compreso: mai testo scuro sull'azzurro. */
/* Geometria (26/10/2026, seconda passata): chip alta 42px; il numero sta in un
   cerchio di 32px concentrico alla curva sinistra della chip (5px di distanza dal
   bordo esterno tutto intorno). Misure strette perche' le nove chip stiano su una
   riga a 1440. Parola chiave e wordmark centrati nello spazio
   a destra del cerchio, su due righe fisse: se manca il wordmark la sua riga
   resta vuota, e le parole chiave stanno tutte alla stessa altezza. */
.chrome .tabs { gap: 5px; }
.chrome .tab { box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 11px 0 4px; font-size: 13px; line-height: 1; }
.chrome .tab b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: #F2F0EA; color: #6B6860; font-size: 13px; }
/* Chip attiva: cerchio nel blu "premuto" del playbook (#007DAC), numero bianco
   (4,64:1, AA). Il bianco trasparente sull'azzurro non si leggeva (26/10/2026). */
.chrome .tab[aria-selected="true"] b { background: #007DAC; color: #fff; }
.tab-txt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tab-k { white-space: nowrap; line-height: 15px; }
.tab-wm { display: block; height: 10px; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; line-height: 10px; color: #0A0A0A; }
.tab-wm i { font-style: normal; color: #00AEEF; }
.chrome .tab[aria-selected="true"] .tab-wm, .chrome .tab[aria-selected="true"] .tab-wm i { color: #fff; }
@media (max-width: 760px) { .chrome .tab { padding: 0 11px 0 4px; font-size: 13px; } }

/* Barra dei flussi centrata, etichetta compresa (26/10/2026). Sotto i 760px resta
   una striscia che scorre da sinistra: centrata taglierebbe il primo flusso. */
@media (min-width: 761px) { .chrome-dx .dx-row { justify-content: center; justify-content: safe center; } }

/* ============ Barra in fondo: CTA agli estremi (26/10/2026, Jacopo) =========
   Precedente e successiva sono bottoni CTA del playbook (Color System, Azure):
   pieni azzurri, testo bianco, hover #0090C6, premuto #007DAC, come "Parliamone"
   nel menu. La barra prende tutta la pagina con il margine del sito (32px,
   16px al telefono): precedente al bordo sinistro, successiva al destro,
   "Tutti i casi d'uso" al centro. */
.uc-pager-in { max-width: none; padding-left: 32px; padding-right: 32px; }
.uc-pager [data-uc-prev] { justify-self: start; }
.uc-pager [data-uc-next], .uc-pager [data-uc-end] { justify-self: end; }
.uc-pager .uc-pg { min-width: 240px; }
.uc-pager .btn-primary.uc-pg:active { background: #007DAC; border-color: #007DAC; }
.uc-pager .btn-primary.uc-pg small { opacity: .9; }
@media (max-width: 860px) { .uc-pager-in { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 760px) {
  .uc-pager [data-uc-prev], .uc-pager [data-uc-next], .uc-pager [data-uc-end] { justify-self: stretch; }
  .uc-pager .uc-pg { min-width: 0; }
}

/* ============ Chip con fumetto della piattaforma (26/10/2026, Jacopo) =======
   Le chip con parola chiave e wordmark insieme erano troppo fitte. Ora la chip
   ha solo numero e parola chiave; il wordmark della piattaforma sta in un
   fumetto che si apre al passaggio del mouse (o col focus da tastiera) e resta
   aperto finche' la scheda e' selezionata. Il fumetto puo' coprire il testo
   sopra la barra. Quando la barra e' agganciata sotto il menu, sopra c'e' il
   menu: il fumetto si apre sotto la chip (.is-stuck, impostata dal JS).
   Al telefono niente fumetto: non c'e' hover e la striscia che scorre di lato
   lo taglierebbe. */
.tab-txt { display: contents; }
.tab-wm { display: none; }
.chrome .tab { position: relative; }
.tab-pop {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5;
  padding: 9px 16px 10px; border-radius: 10px; background: #fff; border: 1px solid #D6D3CC;
  box-shadow: 0 12px 28px rgba(10, 10, 10, .14); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px) scale(.9); transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .26s cubic-bezier(.2, .9, .3, 1.25);
}
/* la punta del fumetto, verso la chip */
.tab-pop::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px;
  background: #fff; border: 1px solid #D6D3CC; border-top: 0; border-left: 0;
  transform: translate(-50%, -5px) rotate(45deg);
}
.tab-pop-wm { display: block; font: 900 20px/1 Archivo, sans-serif; letter-spacing: -.01em; color: #0A0A0A; }
.tab-pop-wm i { font-style: normal; color: #00AEEF; }
.chrome .tab:hover .tab-pop, .chrome .tab:focus-visible .tab-pop, .chrome .tab[aria-selected="true"] .tab-pop {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
.chrome.is-stuck .tab-pop { bottom: auto; top: calc(100% + 12px); transform-origin: 50% 0; transform: translate(-50%, -8px) scale(.9); }
.chrome.is-stuck .tab-pop::after { top: auto; bottom: 100%; transform: translate(-50%, 5px) rotate(225deg); }
.chrome.is-stuck .tab:hover .tab-pop, .chrome.is-stuck .tab:focus-visible .tab-pop, .chrome.is-stuck .tab[aria-selected="true"] .tab-pop {
  transform: translate(-50%, 0) scale(1);
}
/* Chip selezionata: cerchio bianco e numero azzurro, al posto del #007DAC col
   numero bianco: meno colori insieme, la chip attiva si legge meglio
   (Jacopo 26/10/2026). */
.chrome .tab[aria-selected="true"] b { background: #fff; color: #00AEEF; }
@media (prefers-reduced-motion: reduce) { .tab-pop { transition: none; } }
@media (max-width: 760px) { .tab-pop { display: none; } }

/* ============ Tema scuro della demo (26/10/2026, Jacopo) ====================
   Il sito ha il tema scuro, la demo aveva colori fissi chiari. Diventa scura la
   cornice: barra delle schede, chip e fumetto, intestazione della scheda, barra
   dei flussi, fondo delle schermate, colonna "Lo scenario", barra in fondo.
   Restano chiari, apposta, telefono e monitor con le app dentro (raffigurano
   interfacce reali, chiare) e il riquadro bianco dello schema "Come funziona".
   Le variabili --uc-* in chiaro hanno i colori di prima, quindi il tema chiaro
   non cambia; in scuro prendono i token del sito (chrome.css / site.css), con i
   due interruttori del sito: preferenza del sistema e scelta esplicita. */
:root {
  --uc-page: #F5F3EC; --uc-band: #fff; --uc-line: #E0DDD6;
  --uc-chip: #fff; --uc-chip-line: #D6D3CC; --uc-chip-num: #F2F0EA; --uc-chip-num-ink: #6B6860;
  --uc-ink: #0A0A0A; --uc-ink2: #2C2A26; --uc-ink3: #524F49; --uc-rule: #D6D3CC;
  --uc-shadow: rgba(10, 10, 10, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --uc-page: var(--surface); --uc-band: var(--bg); --uc-line: var(--line);
    --uc-chip: var(--raise); --uc-chip-line: var(--line-strong); --uc-chip-num: #242422; --uc-chip-num-ink: #B5B2AA;
    --uc-ink: var(--text); --uc-ink2: rgba(245, 243, 236, .82); --uc-ink3: #B5B2AA; --uc-rule: var(--line-strong);
    --uc-shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
    --uc-page: var(--surface); --uc-band: var(--bg); --uc-line: var(--line);
    --uc-chip: var(--raise); --uc-chip-line: var(--line-strong); --uc-chip-num: #242422; --uc-chip-num-ink: #B5B2AA;
    --uc-ink: var(--text); --uc-ink2: rgba(245, 243, 236, .82); --uc-ink3: #B5B2AA; --uc-rule: var(--line-strong);
    --uc-shadow: rgba(0, 0, 0, .5);
}
.uc, #A, #B, #C, #D, #E { background: var(--uc-page); }
.chrome { background: var(--uc-page); border-bottom-color: var(--uc-line); color: var(--uc-ink); }
.chrome .tab { background: var(--uc-chip); border-color: var(--uc-chip-line); color: var(--uc-ink); }
.chrome .tab:hover { border-color: var(--uc-ink); }
.chrome .tab b { background: var(--uc-chip-num); color: var(--uc-chip-num-ink); }
.chrome .tab[aria-selected="true"] { background: #00AEEF; border-color: #00AEEF; color: #fff; }
.chrome .tab[aria-selected="true"] b { background: #fff; color: #00AEEF; }
.tab-pop, .tab-pop::after { background: var(--uc-chip); border-color: var(--uc-chip-line); }
.tab-pop { box-shadow: 0 12px 28px var(--uc-shadow); }
.tab-pop-wm { color: var(--uc-ink); }
.uc-head { --ink: var(--uc-ink); --g05: var(--uc-ink3); --g06: var(--uc-ink3); --g10: var(--uc-chip-line);
  background: var(--uc-band); color: var(--uc-ink); border-bottom-color: var(--uc-line); }
.uc-flows { background: var(--uc-page); border-bottom-color: var(--uc-line); }
.chrome-dx { --ink: var(--uc-ink); --g06: var(--uc-ink3); --g10: var(--uc-chip-line); }
.uc-head .dx-row button, .chrome-dx .dx-row button { background: var(--uc-chip); }
.uc-head .dx-row button.on, .chrome-dx .dx-row button.on { background: #00AEEF; border-color: #00AEEF; color: #fff; }
.notes h3, .notes .intro b { color: var(--uc-ink); }
.notes .intro, .notes p { color: var(--uc-ink2); }
.notes li::after { background: var(--uc-rule); }
.notes .hint { color: var(--uc-ink3); border-top-color: var(--uc-rule); }
.uc-pager { background: var(--uc-page); border-top-color: var(--uc-line); }
.uc-all { color: var(--uc-ink); }

/* ============ Barra in fondo a pillole (26/10/2026, Jacopo) =================
   Precedente e successiva hanno la forma delle chip in alto: pillola alta 42px,
   numero nel cerchio, parola chiave della scheda, freccia. "Successiva" e' piena
   azzurra (come la chip selezionata, cerchio bianco e numero azzurro); la
   precedente e' bianca con bordo, come una chip non selezionata. Niente piu'
   riga piccola "PRECEDENTE / SUCCESSIVA": la direzione la dice la freccia.
   I bottoni stanno sui bordi del gruppo di chip (ucPagerW() misura la
   larghezza), "Tutti i casi d'uso" al centro. Al telefono affiancati, meta'
   ciascuno. In scuro la precedente usa i colori delle chip (--uc-*). */
.uc-pager-in { max-width: none; margin: 0 auto; padding: 20px 16px 16px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px; }
.uc-pager [data-uc-prev] { justify-self: start; }
.uc-pager [data-uc-next], .uc-pager [data-uc-end] { justify-self: end; }
.uc-pager .uc-pg {
  box-sizing: border-box; display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  height: 42px; min-height: 0; min-width: 0; max-width: 100%; padding: 0 16px; margin: 0;
  border: 1px solid var(--uc-chip-line); border-radius: 999px; background: var(--uc-chip); color: var(--uc-ink);
  font: 600 13.5px/1 Archivo, sans-serif; white-space: nowrap; text-align: left; cursor: pointer; text-decoration: none;
  box-shadow: none; transition-property: background-color, border-color, color;
  transition-duration: .15s;
}
.uc-pager .uc-pg-prev { padding: 0 16px 0 12px; }
.uc-pager .uc-pg-next { padding: 0 12px 0 16px; }
.uc-pager .uc-pg-end { padding: 0 16px 0 20px; }
.uc-pager .uc-pg:hover { border-color: var(--uc-ink); }
.uc-pager .uc-pg b {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--uc-chip-num); color: var(--uc-chip-num-ink); font-size: 13px; font-weight: 700;
}
.uc-pager .uc-pg-k { overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; }
/* La versione a due righe allineava il contenuto in alto (precedente) o a
   destra (successiva) con selettori piu' pesanti: qui tutto in riga, al centro. */
.uc-pager [data-uc-prev].uc-pg, .uc-pager [data-uc-next].uc-pg, .uc-pager [data-uc-end].uc-pg { flex-direction: row; align-items: center; text-align: left; min-height: 0; }
.uc-pager .uc-pg-arr { flex: none; font-size: 16px; line-height: 1; }
.uc-pager .uc-pg-next, .uc-pager .uc-pg-end { background: #00AEEF; border-color: #00AEEF; color: #fff; }
.uc-pager .uc-pg-next b { background: #fff; color: #00AEEF; }
.uc-pager .uc-pg-next:hover, .uc-pager .uc-pg-end:hover { background: #0090C6; border-color: #0090C6; color: #fff; }
.uc-pager .uc-pg-next:active, .uc-pager .uc-pg-end:active { background: #007DAC; border-color: #007DAC; }
.uc-pager .uc-pg:focus-visible { outline: 2px solid #00AEEF; outline-offset: 2px; }
.uc-pager [data-uc-prev][hidden] { display: inline-flex; visibility: hidden; }
.uc-pager [data-uc-next][hidden], .uc-pager [data-uc-end][hidden] { display: none; }
@media (max-width: 760px) {
  .uc-pager-in { max-width: none !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px 16px 12px; gap: 12px; }
  .uc-pager [data-uc-prev], .uc-pager [data-uc-next], .uc-pager [data-uc-end] { justify-self: stretch; }
  .uc-pager .uc-pg { justify-content: center; font-size: 13px; }
}