/* Stili delle sezioni nuove della landing, tenuti fuori da index.html:
   se sbaglio qui, il foglio di stile principale resta intero. */

/* ── Gli strumenti: righe basse, icona colorata a sinistra, una riga di testo. */
.strumenti{display:grid;gap:8px;margin-top:26px}
@media(min-width:820px){.strumenti{grid-template-columns:1fr 1fr;gap:8px 14px}}
.stru{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:14px;
  background:var(--tinta,var(--paper));border:1px solid var(--bordo,var(--line))}
.stru > i{width:32px;height:32px;border-radius:9px;background:var(--forte,#141413);color:#fff;
  flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stru > i svg{width:18px;height:18px}
.stru > i img{width:32px;height:32px;object-fit:cover;display:block}
.stru .rn{font-family:"Inter",sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

.stru b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.22;margin-top:2px}
.stru p{font-family:"Inter",sans-serif;font-size:13px;line-height:1.45;color:var(--muted);margin-top:3px}

/* ── La roadmap su telefono: un nastro che scorre, non una colonna infinita. */
@media(max-width:700px){
  .rmfila{grid-template-columns:none !important;display:flex;gap:9px;margin-bottom:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:9px;-webkit-overflow-scrolling:touch}
  .rmfila::before{display:none}
  .rmfila::-webkit-scrollbar{height:5px}
  .rmfila::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .rmt{flex:0 0 148px;scroll-snap-align:start;display:block !important;text-align:left;
    padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
  .rmt i{margin:0 0 8px !important}
  .rmt b,.rmt span{margin:0 !important}
}

/* ── I visual concepts scorrono, come i nomi degli autori. */
.vcnastro{margin-top:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.vcpista{display:flex;gap:12px;width:max-content;animation:vcscorri 74s linear infinite}
.vcnastro:hover .vcpista{animation-play-state:paused}
@keyframes vcscorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.vcpista .vc{flex:0 0 128px;margin:0}

/* ── Le fonti della content curation scorrono dall'alto verso il basso,
   dentro una finestra alta due schede: cosi' non si accavallano mai. */
.cdscorri{position:relative;height:150px;overflow:hidden;margin:16px 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.cdpista{display:flex;flex-direction:column;gap:10px;animation:cdsu 26s linear infinite}
.cdscorri:hover .cdpista{animation-play-state:paused}
@keyframes cdsu{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.cdb{flex:0 0 auto;width:100%;display:flex;align-items:center;gap:13px;padding:12px 15px;height:65px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg);box-sizing:border-box}
.cdb > div{min-width:0}
.cdb b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdb em{display:block;font-family:"Inter",sans-serif;font-style:normal;font-size:12px;
  color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdb .cdplay{flex:none}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.vg u{width:14px;height:11px;border:2px solid var(--ink);border-radius:2px;display:block}
.vp{display:flex;flex-direction:column;gap:4px;align-items:center}
.vp u{width:52px;height:8px;border:2px solid var(--ink);border-radius:2px;display:block}
@media(prefers-reduced-motion:reduce){.vcpista,.cdpista{animation:none}}
/* Le tinte di queste schede sono chiare sempre, anche col tema scuro: sono
   scritte sull'elemento e non seguono il tema. Se il testo segue --ink, col
   tema scuro diventa crema su rosa e non si legge piu'. Qui si fissa scuro,
   che sulle tinte pastello va bene in tutti e due i temi. */
.stru b{color:#141413}
.stru p{color:#5f5f59}
.stru .rn{color:#8d8d86}