/* 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 portatile ============ */
#B,#C,#D,#E{background:#F5F3EC;padding:44px 16px 64px;font-family:Archivo,sans-serif;color:#0A0A0A}
/* scheda 4: telefono e portatile 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} .stageD .laptop{width:100%;max-width:860px} #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 portatile */
#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}
.laptop{position:relative;transform-style:preserve-3d;transform:perspective(3200px) rotateX(9deg) rotateY(10deg);transition:transform .8s cubic-bezier(.42,0,.58,1);margin-bottom:-185px}
.laptop:hover{transform:perspective(3200px) rotateX(4deg) rotateY(3deg)}
/* piano tastiera in alluminio, ribaltato in avanti: in prospettiva si vede dall'alto sotto lo schermo */
.lt-deck{position:relative;height:350px;margin:0 -40px;transform-origin:top center;transform:rotateX(63deg);border-radius:6px 6px 34px 34px;
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),linear-gradient(180deg,#e6e5e1 0%,#d5d3ce 55%,#c4c2bc 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -14px 0 #a8a59e,inset 0 -16px 0 #d9d7d2,0 46px 70px -30px rgba(10,10,10,.6)}
.lt-deck::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:170px;height:14px;border-radius:14px 14px 0 0;background:linear-gradient(#bdbab3,#a19e97)}
.lt-hinge{position:absolute;left:11%;right:11%;top:0;height:16px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#121214,#3d3d41 70%,#55555a)}
.lt-keys{position:absolute;top:10%;left:12.5%;right:12.5%;height:47%;padding:8px;border-radius:12px;display:flex;flex-direction:column;gap:6px;
  background:#aeaca6;box-shadow:inset 0 3px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.55)}
.lt-keys .kr{display:flex;gap:6px;flex:1}
.lt-keys .kr.fn{flex:.55}
.lt-keys i{flex:1;border-radius:6px;background:linear-gradient(180deg,#3b3b3f 0%,#26262a 55%,#1b1b1e 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.35),0 2px 2px rgba(0,0,0,.5)}
.lt-spk{position:absolute;top:10%;width:8.5%;height:47%;border-radius:8px;background-image:radial-gradient(circle,#7f7c76 1.4px,transparent 1.9px);background-size:8px 8px}
.lt-spk.l{left:2.5%} .lt-spk.r{right:2.5%}
.lt-pad{position:absolute;bottom:10%;left:30%;width:40%;height:28%;border-radius:16px;
  background:linear-gradient(180deg,#e2e0dc,#d0cdc7);box-shadow:inset 0 0 0 1.5px #b3b0a9,inset 0 3px 5px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.7)}
/* fotocamera sulla cornice dello schermo */
.lt-screen{position:relative}
.lt-screen::before{content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5566,#0b0d10 60%);box-shadow:0 0 0 1.5px #1b1b1d}
.lt-screen{background:linear-gradient(150deg,#3a3a3d,#0c0c0d 35%,#0c0c0d 75%,#26262a);border-radius:18px 18px 8px 8px;padding:14px 14px 18px;
  box-shadow:inset 0 0 0 1.5px #5c5c60,0 50px 90px -45px rgba(10,10,10,.55),0 20px 40px -26px rgba(10,10,10,.4)}
.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} .laptop,.laptop:hover{transform:none;width:100%;max-width:860px;margin-bottom:0} .lt-deck{display:none} }
#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}
}