/* Layout: lo stile Future di KeyPlan (quello di KeyMind, senza animazioni) — pagina bianca, fogli azzurri sfumati con gli
   angoli tondi, titoli azzurri, tasti a pillola. Un foglio per sezione; il prezzo è il foglio più grande */
:root {
  --bg: #ffffff; --panel: #ffffff; --panel-2: #f3f7fc;
  --card-1: #edf3fb; --card-2: #e0eaf6; --sep: #e8f0f9; --linea: #d3d8f3;
  --ink: #3d4d7c; --ink-2: #56679a; --muted: #8592bd; --title: #5379c9; --blu: #6a92dc; --blu-s: #e3ebfa; --navy: #5079cf; --navy-2: #6a92dc; --on-navy: #ffffff;
  --ass: #5f88d8; --ass-bg: #e8effc; --ass-tx: #3f63b0; --car: #e0a92e; --car-bg: #fbf3dc; --car-tx: #8a6100;
  --ese: #6a5fc4; --ese-bg: #ecebfb; --ese-tx: #5246a8; --com: #2f8a64; --com-bg: #e2f3ec; --com-tx: #236b4d; --rif: #b4465f; --rif-bg: #fbe7ec;
  --warn-bg: #fbf0db; --warn-tx: #8a5f10;
  --ombra: 0 5px 7px rgba(0, 0, 0, .07); --ombra-2: 0 14px 34px rgba(30, 50, 90, .12);
  --alone-1: #d9e6fb; --alone-2: #e9e4fb; --alone-3: #d9f1ea; --griglia: rgba(83, 121, 201, .09);
  --banda-1: #1e3b6b; --banda-2: #2c4f8e; --banda-3: #4669b4; --banda-tx: #ffffff; --banda-tx2: rgba(255, 255, 255, .78);
  --invito-1: #5f88d8; --invito-2: #8b7fe0; --fascia: #f3f7fc;
  --f: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d1420; --panel: #121c2b; --panel-2: #162133;
  --card-1: #1b2739; --card-2: #142031; --sep: #1b2739; --linea: #2b3a55;
  --ink: #c9d6f5; --ink-2: #a3b2d8; --muted: #7f8db8; --title: #86a9ee; --blu: #86a9ee; --blu-s: rgba(134, 169, 238, .16); --navy: #5d7fc4; --navy-2: #6c8ed3; --on-navy: #ffffff;
  --ass: #86a9ee; --ass-bg: rgba(134, 169, 238, .14); --ass-tx: #a9c1f2; --car: #e2b45a; --car-bg: rgba(226, 180, 90, .13); --car-tx: #ecc77c;
  --ese: #a79df0; --ese-bg: rgba(167, 157, 240, .14); --ese-tx: #c4bcf6; --com: #5cc59a; --com-bg: rgba(92, 197, 154, .13); --com-tx: #85d8b4; --rif: #ec8aa0; --rif-bg: rgba(236, 138, 160, .13);
  --warn-bg: rgba(226, 180, 90, .12); --warn-tx: #e2b45a;
  --ombra: 0 5px 10px rgba(0, 0, 0, .4); --ombra-2: 0 14px 34px rgba(0, 0, 0, .45); color-scheme: dark;
  --alone-1: rgba(93, 127, 196, .24); --alone-2: rgba(167, 157, 240, .16); --alone-3: rgba(92, 197, 154, .10); --griglia: rgba(134, 169, 238, .07);
  --banda-1: #0f1d36; --banda-2: #172b4f; --banda-3: #22407a; --banda-tx: #e6eeff; --banda-tx2: rgba(230, 238, 255, .72);
  --invito-1: #3f5f9f; --invito-2: #5d4fae; --fascia: #111a29;
} }
:root[data-theme="dark"] {
  --bg: #0d1420; --panel: #121c2b; --panel-2: #162133;
  --card-1: #1b2739; --card-2: #142031; --sep: #1b2739; --linea: #2b3a55;
  --ink: #c9d6f5; --ink-2: #a3b2d8; --muted: #7f8db8; --title: #86a9ee; --blu: #86a9ee; --blu-s: rgba(134, 169, 238, .16); --navy: #5d7fc4; --navy-2: #6c8ed3; --on-navy: #ffffff;
  --ass: #86a9ee; --ass-bg: rgba(134, 169, 238, .14); --ass-tx: #a9c1f2; --car: #e2b45a; --car-bg: rgba(226, 180, 90, .13); --car-tx: #ecc77c;
  --ese: #a79df0; --ese-bg: rgba(167, 157, 240, .14); --ese-tx: #c4bcf6; --com: #5cc59a; --com-bg: rgba(92, 197, 154, .13); --com-tx: #85d8b4; --rif: #ec8aa0; --rif-bg: rgba(236, 138, 160, .13);
  --warn-bg: rgba(226, 180, 90, .12); --warn-tx: #e2b45a;
  --ombra: 0 5px 10px rgba(0, 0, 0, .4); --ombra-2: 0 14px 34px rgba(0, 0, 0, .45); color-scheme: dark;
  --alone-1: rgba(93, 127, 196, .24); --alone-2: rgba(167, 157, 240, .16); --alone-3: rgba(92, 197, 154, .10); --griglia: rgba(134, 169, 238, .07);
  --banda-1: #0f1d36; --banda-2: #172b4f; --banda-3: #22407a; --banda-tx: #e6eeff; --banda-tx2: rgba(230, 238, 255, .72);
  --invito-1: #3f5f9f; --invito-2: #5d4fae; --fascia: #111a29;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--f); letter-spacing: -.011em; }
a { color: var(--title); }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.in { max-width: 1160px; margin: 0 auto; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -.045em; color: var(--blu); font-weight: 700; }
.sopra { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 1.125rem; color: var(--ink-2); max-width: 60ch; margin: 14px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font: 600 15px var(--f); letter-spacing: -.011em; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.btn-p { background: var(--navy); color: var(--on-navy); }
.btn-p:hover { background: var(--navy-2); }
.btn-s { background: var(--panel); color: var(--blu); border-color: var(--linea); }
.btn-s:hover { border-color: var(--blu); background: var(--blu-s); }
.btn:focus-visible, .seg button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.foglio { background: linear-gradient(180deg, var(--card-1), var(--card-2)); border-radius: 24px; box-shadow: var(--ombra); }


/* testata */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.testata { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 3px 0 var(--sep); }
.testata .in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.logo { display: block; height: 28px; width: auto; }
.logo.scuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo.chiaro { display: none; } :root:not([data-theme="light"]) .logo.scuro { display: block; } }
:root[data-theme="dark"] .logo.chiaro { display: none; } :root[data-theme="dark"] .logo.scuro { display: block; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.menu a:hover { color: var(--blu); background: var(--blu-s); }
.testata .btn { padding: 9px 18px; font-size: 14px; }

/* movimento: card che fluttuano, macchie di colore che si spostano, striscia che scorre */
@keyframes galleggia { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(var(--gx, 0px), var(--gy, -10px), 0); } }
@keyframes deriva { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(var(--dx, 60px), var(--dy, 40px), 0) scale(1.15); } }
@keyframes scorre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes appare { from { opacity: .0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gal { animation: galleggia var(--gt, 7s) ease-in-out infinite; animation-delay: var(--gd, 0s); will-change: transform; }
.macchia { position: absolute; z-index: -2; border-radius: 50%; filter: blur(60px); opacity: .9; pointer-events: none; animation: deriva var(--mt, 18s) ease-in-out infinite alternate; }

/* apertura */
.apertura { padding-block: 72px 64px; position: relative; isolation: isolate; overflow: hidden; }
.apertura::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 25%, transparent 78%); }
.apertura .in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.apertura h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.03; letter-spacing: -.05em; color: var(--blu); font-weight: 800; margin-top: 12px; }
.apertura h1 em { font-style: normal; color: var(--title); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.da { margin-top: 18px; font-size: 14px; color: var(--muted); }
.da b { color: var(--ink); }

/* la card del topic d'esempio e le sue mini card */
.prova-wrap { position: relative; }
.esempio { padding: 18px; padding-top: 34px; }
.es-et { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.es-comm { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.es-tag { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px dashed var(--linea); border-radius: 999px; padding: 1px 9px; }
.es-stato { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.barra { display: flex; height: 7px; border-radius: 99px; overflow: hidden; gap: 2px; }
.barra i { display: block; }
.es-stato .barra { flex: 0 0 34%; }
.es-stato b { color: var(--rif); font-weight: 600; }
.cod { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--blu-s); color: var(--title); font: 700 12px var(--mono); white-space: nowrap; }
.es-tit { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.es-tit b { font-size: 19px; letter-spacing: -.03em; color: var(--title); flex: 1; min-width: 0; }
.prog { font: 700 12px var(--mono); padding: 2px 9px; border-radius: 999px; background: var(--car-bg); color: var(--car-tx); }
.az { display: grid; gap: 8px; }
.a { background: var(--panel); border-radius: 14px; padding: 11px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; box-shadow: 0 0 0 1px var(--sep); }
.a .t { font-weight: 600; font-size: 14px; color: var(--ink); min-width: 0; }
.a .m { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.tardi { color: var(--rif); font-weight: 600; }
.st { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.a .st { grid-column: 3; grid-row: 1 / span 2; }
.st::before { content: "●"; margin-right: 5px; }
.st.ass { background: var(--ass-bg); color: var(--ass-tx); } .st.ass::before { color: var(--ass); }
.st.car { background: var(--car-bg); color: var(--car-tx); } .st.car::before { color: var(--car); }
.st.ese { background: var(--ese-bg); color: var(--ese-tx); } .st.ese::before { color: var(--ese); }
.st.com { background: var(--com-bg); color: var(--com-tx); } .st.com::before { color: var(--com); }
.st.rif { background: var(--rif-bg); color: var(--rif); } .st.rif::before { color: var(--rif); }
.es-agg { margin-top: 12px; font-size: 13px; color: var(--ink-2); background: var(--panel-2); border-radius: 12px; padding: 10px 12px; }
.es-agg b { color: var(--ink); }
.mini { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--panel); box-shadow: var(--ombra-2), 0 0 0 1px var(--sep); font-size: 13px; color: var(--ink-2); }
.mini b { display: block; color: var(--ink); font-size: 13.5px; }
.mini .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--ese-bg); color: var(--ese); flex: none; }
.mini .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f); color: #fff; background: linear-gradient(135deg, var(--ese), var(--ass)); }
.chip-v { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--ese-bg); color: var(--ese-tx); }
.mini.riu { right: 22px; top: -28px; }
.mini.ese { left: -30px; top: -30px; max-width: 250px; }
.dafare { position: absolute; right: -14px; bottom: -22px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #5f88d8, #86a9ee); box-shadow: 0 10px 24px rgba(80, 121, 207, .28); }
.dafare .n { font-size: 26px; font-weight: 800; line-height: 1; }
.dafare small { display: block; opacity: .85; font-size: 12px; }

/* striscia delle funzioni che scorre */
.striscia { border-block: 1px solid var(--sep); background: var(--fascia); overflow: hidden; padding-block: 14px; }
.striscia-in { display: flex; width: max-content; gap: 10px; animation: scorre 48s linear infinite; }
.striscia:hover .striscia-in { animation-play-state: paused; }
.striscia span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--ink-2); background: var(--panel); border-radius: 999px; padding: 7px 14px; box-shadow: 0 0 0 1px var(--sep); }
.striscia span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--blu)); }

/* indirizzo */
.indirizzo { padding-block: 48px 24px; }
.ind { padding: 22px 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.ind h3 { font-size: 20px; letter-spacing: -.03em; color: var(--title); }
.ind p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.url { display: flex; align-items: center; background: var(--panel); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 0 0 1px var(--linea); font: 600 17px var(--mono); color: var(--ink); min-width: 0; }
.url span { color: var(--muted); }
.url input { width: 4ch; min-width: 3ch; border: 0; background: transparent; font: inherit; color: var(--title); padding: 6px 0; text-align: right; }
.url input:focus { outline: none; }
.url-n { margin: 8px 0 0 18px; font-size: 13px; color: var(--muted); min-height: 1.4em; }
.url-n.no { color: var(--rif); }

/* sezioni */
.sez { padding-block: 80px 24px; }
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; counter-reset: p; }
.passo { padding: 20px; counter-increment: p; background: var(--panel); border-radius: 20px; box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
.passo::before { content: counter(p); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blu); color: #fff; font-weight: 700; margin-bottom: 14px; }
.passo h3 { font-size: 17px; letter-spacing: -.02em; color: var(--title); }
.passo p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.fascia-sez { background: linear-gradient(180deg, var(--bg), var(--fascia) 14%, var(--fascia) 86%, var(--bg)); padding-bottom: 80px; }

/* giro del prodotto: una finestra con le schermate di KeyPlan */
.giro { margin-top: 34px; position: relative; }
.giro-tab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.giro-tab button { position: relative; overflow: hidden; border: 0; cursor: pointer; font: 600 14px var(--f); color: var(--ink-2); background: var(--panel); padding: 9px 16px; border-radius: 999px; box-shadow: 0 0 0 1px var(--sep); }
.giro-tab button[aria-selected="true"] { color: var(--blu); background: var(--blu-s); box-shadow: none; }
.giro-tab button .bar { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--blu); transform: scaleX(0); transform-origin: left; }
.giro-tab button[aria-selected="true"] .bar.va { animation: avanza 6s linear forwards; }
.giro-tab button:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.fin { border-radius: 20px; background: var(--panel); box-shadow: 0 30px 70px rgba(30, 50, 90, .18), 0 0 0 1px var(--sep); overflow: hidden; }
.fin-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--sep); }
.fin-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--linea); }
.fin-bar .indir { margin: 0 auto; font: 600 12.5px var(--mono); color: var(--muted); background: var(--panel); border-radius: 999px; padding: 4px 14px; box-shadow: 0 0 0 1px var(--sep); }
.app-top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 3px solid var(--sep); font-size: 13px; }
.app-top .bc { color: var(--title); font-weight: 700; }
.app-top .bc span { color: var(--muted); font-weight: 400; }
.schermi { position: relative; min-height: 430px; }
.schermo { padding: 18px; }
.schermo[hidden] { display: none; }
.schermo.entra { animation: appare .35s ease-out; }
.sc-tit { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sc-tit b { font-size: 22px; letter-spacing: -.04em; color: var(--blu); }
.sc-tit span { font-size: 12.5px; color: var(--muted); }
.sc-tit .btn-fin { margin-left: auto; font: 600 12.5px var(--f); color: #fff; background: var(--navy); border-radius: 999px; padding: 6px 13px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pills span { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--panel-2); border-radius: 999px; padding: 4px 11px; }
.pills span.on { background: var(--navy); color: #fff; }
.pills span em { font-style: normal; margin-left: 5px; font-size: 11px; opacity: .8; }
/* home */
.h-gr { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 14px; }
.h-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pc { background: linear-gradient(180deg, var(--card-1), var(--card-2)); border-radius: 16px; padding: 12px; font-size: 12px; display: grid; gap: 6px; }
.pc .r { display: flex; align-items: center; gap: 6px; }
.pc .code { font-weight: 700; color: var(--title); font-size: 13px; }
.pc .stc { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.stc.seg { background: var(--rif-bg); color: var(--rif); } .stc.ok { background: var(--com-bg); color: var(--com-tx); } .stc.qr { background: var(--car-bg); color: var(--car-tx); }
.pc .tt { font-weight: 700; color: var(--ink); font-size: 13px; letter-spacing: -.02em; }
.pc .lu { color: var(--muted); font-size: 11px; }
.pc .nn { color: var(--ink-2); font-size: 11px; }
.pc .nn b { color: var(--rif); }
.pc .lk { display: flex; gap: 5px; }
.pc .lk span { font-size: 10.5px; font-weight: 600; color: var(--blu); background: var(--panel); border-radius: 999px; padding: 2px 8px; }
.rail { display: grid; gap: 10px; align-content: start; }
.rc { background: linear-gradient(180deg, var(--card-1), var(--card-2)); border-radius: 16px; padding: 12px; font-size: 12px; }
.rc h4 { margin: 0 0 8px; font-size: 13px; color: var(--title); letter-spacing: -.02em; }
.rc .rr { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 10px; margin-top: 5px; }
.rr.ross { background: var(--rif-bg); color: var(--rif); font-weight: 600; }
.rr.blu { background: var(--ass-bg); color: var(--ass-tx); }
.rc .sc { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 6px; padding: 4px 0; color: var(--ink-2); }
.rc .sc span:first-child { color: var(--muted); }
.df { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #5f88d8, #86a9ee); font-size: 12px; }
.df b { font-size: 22px; }
/* issue log */
.il-l { background: var(--panel); border-radius: 14px; box-shadow: 0 0 0 1px var(--sep); }
.il-r { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 7rem 2.4rem; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--sep); font-size: 12.5px; }
.il-r:first-child { border-top: 0; }
.il-r .c { font: 700 12px var(--mono); color: var(--title); }
.il-r .t b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.il-r .t small { color: var(--muted); font-size: 11.5px; }
.chip-r { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--rif-bg); color: var(--rif); white-space: nowrap; }
.il-r .fx { font: 700 11.5px var(--mono); color: var(--ink-2); }
/* action plan */
.ap { background: var(--panel); border-radius: 14px; box-shadow: 0 0 0 1px var(--sep); overflow: hidden; font-size: 12.5px; }
.ap-r { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 5.5rem 5rem 7.4rem 3.2rem; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--sep); }
.ap-r:first-child { border-top: 0; background: var(--panel-2); color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ap-r.late { box-shadow: inset 3px 0 0 var(--rif); }
.ap-r .azn { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-r .azn code { font: 700 11.5px var(--mono); color: var(--title); margin-right: 6px; }
.ap-r .tp { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-r .g { display: flex; gap: 3px; }
.ap-r .g span { font-size: 10.5px; font-weight: 700; color: var(--ink-2); background: var(--panel-2); border-radius: 6px; padding: 1px 5px; }
.ap-r .d { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ap-r .st { font-size: 11px; padding: 2px 8px; justify-self: start; }
.ap-r .rit { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rit.r { color: var(--rif); } .rit.o { color: var(--car-tx); } .rit.v { color: var(--com-tx); }
/* riunione */
.ri-gr { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 14px; }
.ri-passi { display: grid; gap: 6px; align-content: start; }
.ri-passi span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-radius: 12px; }
.ri-passi span i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--panel-2); color: var(--muted); }
.ri-passi span.fatto i { background: var(--com); color: #fff; }
.ri-passi span.ora { background: var(--blu-s); color: var(--blu); } .ri-passi span.ora i { background: var(--blu); color: #fff; }
.odg { background: var(--panel); border-radius: 14px; box-shadow: 0 0 0 1px var(--sep); padding: 12px; }
.odg-h { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.odg-h b { color: var(--title); font-size: 15px; letter-spacing: -.02em; }
.odg-h span { font-size: 12px; color: var(--muted); }
.odg-r { display: grid; grid-template-columns: 1.6rem 3rem minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--sep); font-size: 13px; }
.odg-r .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blu); color: #fff; font-size: 11px; font-weight: 700; }
.odg-r .c { font: 700 12px var(--mono); color: var(--title); }
.odg-r .t { color: var(--ink); font-weight: 600; }
.odg-r small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.odg-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.odg-f span { font: 600 12.5px var(--f); border-radius: 999px; padding: 6px 13px; }
.odg-f .s { color: var(--blu); box-shadow: 0 0 0 1.5px var(--linea); } .odg-f .p { background: var(--navy); color: #fff; }

/* funzioni con le loro schermate */
.righe { display: grid; gap: 72px; margin-top: 40px; }
.riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.riga.inv > .r-testo { order: 2; }
.r-testo h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.035em; line-height: 1.15; color: var(--title); }
.r-testo p { margin: 10px 0 0; color: var(--ink-2); max-width: 46ch; }
.r-testo ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.r-testo li { display: flex; gap: 10px; color: var(--ink-2); font-size: 15px; }
.r-testo li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--blu); box-shadow: 0 0 0 4px var(--blu-s); }
.r-vis { position: relative; display: grid; place-items: center; padding-block: 18px; overflow-x: clip; } /* la pagina dietro, ruotata, non fa scorrere di lato */
.alone { position: absolute; inset: 8% 6%; z-index: 0; border-radius: 40px; background: radial-gradient(circle at 30% 30%, var(--alone-1), transparent 60%), radial-gradient(circle at 75% 70%, var(--alone-2), transparent 60%); filter: blur(10px); }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--panel); box-shadow: var(--ombra-2), 0 0 0 1px var(--sep); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--blu)); flex: none; }
/* telefono con l'email */
.tel { position: relative; z-index: 1; width: 300px; max-width: 100%; border-radius: 42px; padding: 11px; background: #1b2232; box-shadow: 0 30px 60px rgba(20, 30, 60, .3), inset 0 0 0 2px #2c3548; }
.tel-sch { border-radius: 32px; overflow: hidden; background: #ffffff; color: #3d4d7c; font-size: 11px; }
.tel-top { display: flex; justify-content: space-between; padding: 10px 20px 6px; font: 600 11px var(--f); color: #1b2232; }
.mail-h { padding: 6px 14px 10px; border-bottom: 1px solid #e8f0f9; }
.mail-h .da { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8592bd; }
.mail-h .da b { color: #3d4d7c; }
.mail-h .og { margin-top: 6px; font-weight: 700; font-size: 12.5px; color: #3d4d7c; letter-spacing: -.01em; }
.mail-c { padding: 10px; background: #ffffff; }
.mail-ban { background: #1e3b6b; border-radius: 14px 14px 0 0; padding: 10px; display: grid; place-items: center; }
.mail-ban img { height: 16px; width: auto; display: block; }
.mail-f { background: linear-gradient(180deg, #edf3fb, #e0eaf6); border-radius: 0 0 14px 14px; padding: 12px; display: grid; gap: 7px; }
.mail-f .lab { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8592bd; }
.mail-f .tt { font-size: 14px; font-weight: 700; color: #5379c9; letter-spacing: -.03em; }
.mail-f .pill { display: inline-flex; gap: 6px; align-items: center; background: #fff; border-radius: 999px; padding: 3px 8px; font-size: 10px; width: max-content; }
.mail-f .pill code { font: 700 9.5px var(--mono); color: #5379c9; }
.mail-f .pill em { font-style: normal; font: 700 9.5px var(--mono); background: #fbf3dc; color: #8a6100; border-radius: 999px; padding: 0 6px; }
.mail-card { background: #fff; border-radius: 12px; padding: 10px; display: grid; gap: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, .05); }
.mail-card .r { display: flex; justify-content: space-between; align-items: center; }
.mail-card .r code { font: 700 9.5px var(--mono); background: #e3ebfa; color: #5379c9; border-radius: 999px; padding: 1px 6px; }
.mail-card .r span { font-size: 9px; font-weight: 600; background: #fbf3dc; color: #8a6100; border-radius: 999px; padding: 1px 7px; }
.mail-card b { font-size: 12px; color: #3d4d7c; }
.mail-card .kv { display: grid; grid-template-columns: 4.6rem 1fr; font-size: 10px; color: #3d4d7c; }
.mail-card .kv span:nth-child(odd) { color: #8592bd; }
.mail-card .pro { background: #fbf3dc; color: #8a6100; border-radius: 8px; padding: 6px 8px; font-size: 9.5px; }
.mail-btn { justify-self: center; background: #5079cf; color: #fff; font-weight: 600; font-size: 11px; border-radius: 999px; padding: 6px 14px; }
/* rapporto in Word */
.docs { position: relative; z-index: 1; width: min(380px, 100%); aspect-ratio: 0.74; }
.doc { position: absolute; inset: 0; background: #ffffff; color: #2b3445; border-radius: 6px; box-shadow: 0 24px 50px rgba(20, 30, 60, .22), 0 0 0 1px rgba(20, 30, 60, .06); padding: 26px 24px; font: 9px/1.45 Calibri, "Segoe UI", sans-serif; overflow: hidden; }
.doc.dietro { transform: rotate(5deg) translate(18px, 6px); opacity: .9; }
.doc.davanti { transform: rotate(-2deg); }
.doc-h { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1e3b6b; padding-bottom: 8px; margin-bottom: 10px; }
.doc-logo { font: 800 13px var(--f); color: #1e3b6b; letter-spacing: -.02em; }
.doc-logo span { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: #5079cf; vertical-align: -2px; margin-right: 5px; }
.doc-h small { color: #7a8599; font-size: 8px; text-align: right; }
.doc h5 { margin: 0 0 4px; font-size: 13px; color: #1e3b6b; }
.doc p { margin: 0 0 8px; color: #556; }
.doc table { width: 100%; border-collapse: collapse; font-size: 8px; }
.doc th { text-align: left; background: #1e3b6b; color: #fff; padding: 4px 5px; font-weight: 600; }
.doc td { padding: 4px 5px; border-bottom: 1px solid #e3e7ef; vertical-align: top; }
.doc td b { color: #1e3b6b; }
.doc .s { display: inline-block; font-size: 7px; font-weight: 700; padding: 0 5px; border-radius: 999px; }
.s.car { background: #fbf3dc; color: #8a6100; } .s.com { background: #e2f3ec; color: #236b4d; } .s.ass { background: #e8effc; color: #3f63b0; }
.doc .riga-v { height: 6px; border-radius: 3px; background: #edf0f5; margin: 5px 0; }
/* le altre funzioni */
.funz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.f { background: var(--panel); border-radius: 20px; padding: 22px; box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
.f .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.f .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.c-ass { background: var(--ass-bg); color: var(--ass); } .ico.c-ese { background: var(--ese-bg); color: var(--ese); }
.ico.c-car { background: var(--car-bg); color: var(--car); } .ico.c-com { background: var(--com-bg); color: var(--com); }
.ico.c-km { background: linear-gradient(135deg, var(--ass), var(--ese)); color: #fff; }
.f h3 { font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.f p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* prezzi: fascia blu */
.sez.prezzi { margin-top: 80px; padding-block: 80px 88px; background: linear-gradient(160deg, var(--banda-1), var(--banda-2) 55%, var(--banda-3)); position: relative; overflow: hidden; isolation: isolate; }
.prezzi .sopra { color: var(--banda-tx2); } .prezzi h2 { color: var(--banda-tx); } .prezzi .lead { color: var(--banda-tx2); }
.prezzi .foglio { padding: 34px; margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; box-shadow: 0 24px 60px rgba(5, 15, 40, .35); }
.offerta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--warn-tx); background: var(--warn-bg); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; }
.cur-et { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cur-et label { font-weight: 600; color: var(--ink); }
.cur-et label small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.n-int { font: 800 34px var(--f); letter-spacing: -.04em; color: var(--title); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 14px 0 4px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blu) var(--pc, 0%), var(--linea) var(--pc, 0%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--linea); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--blu); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--panel); border: 3px solid var(--blu); box-shadow: var(--ombra); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 3px solid var(--blu); }
.scala { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cifre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.cifra { background: var(--panel); border-radius: 16px; padding: 14px 16px; box-shadow: 0 0 0 1px var(--sep); min-width: 0; }
.cifra.grande { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cifra .v { font-weight: 800; font-size: 26px; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cifra.grande .v { font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--title); line-height: 1; }
.cifra .e { font-size: 13px; color: var(--muted); }
.cifra s { color: var(--muted); font-weight: 600; font-size: 15px; }
.iva { margin-top: 10px; font-size: 13px; color: var(--muted); }
.incluso h3 { font-size: 18px; letter-spacing: -.02em; color: var(--title); margin-bottom: 10px; }
.incluso ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.incluso li { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--sep); }
.incluso li svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--com); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.incluso li b { display: block; color: var(--ink); }
.incluso li span { font-size: 13.5px; color: var(--muted); }
.incluso .btn { width: 100%; margin-top: 16px; }

/* domande: due colonne, tutta la larghezza */
details { background: var(--panel); border-radius: 18px; box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
summary { cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 600; font-size: 16px; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; border-radius: 18px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blu-s); color: var(--blu); font-weight: 700; font-size: 17px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 0; padding: 0 20px 18px; color: var(--ink-2); font-size: 15px; }

/* invito finale, grande */
.invito { position: relative; overflow: hidden; isolation: isolate; margin-top: 96px; padding-block: 96px; background: linear-gradient(125deg, var(--banda-1), var(--invito-1) 55%, var(--invito-2)); color: #fff; }
.invito::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 80% at 70% 50%, #000 20%, transparent 75%); }
.invito .in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.invito .sopra { color: rgba(255, 255, 255, .75); }
.invito h2 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 800; margin-top: 10px; }
.invito .lead { color: rgba(255, 255, 255, .85); font-size: 1.2rem; }
.btn-xl { padding: 17px 30px; font-size: 17px; }
.btn-bianco { background: #fff; color: #2c4f8e; box-shadow: 0 14px 30px rgba(5, 15, 40, .3); }
.btn-bianco:hover { background: #eef3ff; }
.btn-vetro { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-vetro:hover { background: rgba(255, 255, 255, .2); }
.rassicura { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: rgba(255, 255, 255, .9); font-weight: 600; font-size: 15px; }
.rassicura li { display: flex; align-items: center; gap: 8px; }
.rassicura svg { width: 18px; height: 18px; fill: none; stroke: #9fe3c4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.contatto { margin: 22px 0 0; color: rgba(255, 255, 255, .8); }
.mail { font: 600 15px var(--mono); color: #fff; }
.da-dec { display: inline-block; font: 600 12px var(--f); color: var(--warn-tx); background: var(--warn-bg); border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: 2px; }
.inv-deco { position: relative; min-height: 320px; }
.inv-deco .mini { color: var(--ink-2); }
.inv-deco .m1 { left: 4%; top: 6%; } .inv-deco .m2 { right: 0; top: 38%; } .inv-deco .m3 { left: 14%; bottom: 4%; }
.inv-deco .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--com-bg); color: var(--com); flex: none; }
.inv-deco .ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.punto-v { width: 10px; height: 10px; border-radius: 50%; background: var(--com); box-shadow: 0 0 0 4px var(--com-bg); flex: none; }

.piede { padding-block: 26px 40px; color: var(--muted); font-size: 14px; }
.piede .in { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.piede a { color: var(--ink-2); text-decoration: none; }
.piede a:hover { color: var(--blu); }
.piede .logo { height: 22px; }


/* ---- barra dell'app nella finestra: logo dell'azienda e di KeyPlan, come nel portale ---- */
.app-top { min-height: 50px; }
.app-top .az-logo { height: 22px; width: auto; display: block; }
.app-top .sep-v { width: 1px; height: 22px; background: var(--linea); flex: none; }
.app-top .logo { height: 17px; }
.viste { display: flex; gap: 4px; margin: 0 auto; }
.viste span { width: 30px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: var(--linea); }
.viste span.on { color: var(--blu); background: var(--blu-s); }
.viste svg, .app-dx svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-dx { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); }
.viste + .app-dx { margin-left: 0; }
.app-dx .torna { font: 600 12px var(--f); color: var(--blu); border: 1.5px solid var(--blu); border-radius: 999px; padding: 3px 11px 3px 8px; }
.app-tabs { display: flex; gap: 4px; padding: 10px 18px 0; font-size: 13px; }
.app-tabs span { padding: 6px 12px; border-radius: 999px; font-weight: 700; color: var(--linea); letter-spacing: -.02em; }
.app-tabs span.on { color: var(--blu); background: var(--blu-s); }
.app-tabs .imp { margin-left: auto; }
.app-bc { color: var(--title); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-bc span { color: var(--muted); font-weight: 400; }
.schermi { min-height: 540px; }
/* home fedele al portale */
.h-saluto { font-size: 26px; font-weight: 800; letter-spacing: -.045em; color: var(--blu); line-height: 1.1; }
.h-sub { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.h-sub b { color: var(--rif); font-weight: 600; }
.h-cerca { display: flex; gap: 8px; margin-bottom: 10px; }
.h-cerca span { flex: 1; font-size: 12px; color: var(--placeholder, var(--muted)); background: var(--panel); border-radius: 999px; padding: 7px 14px; box-shadow: 0 0 0 1px var(--linea); }
.h-cerca b { font: 600 12px var(--f); color: #fff; background: var(--navy); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
.h-pill { display: flex; gap: 6px; margin-bottom: 10px; font-size: 11.5px; font-weight: 600; }
.h-pill span { padding: 4px 10px; border-radius: 999px; background: var(--sep); color: var(--ink-2); }
.h-pill span.on { background: var(--panel); color: var(--blu); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.h-pill em { font-style: normal; opacity: .7; margin-left: 4px; }
.pc .tue { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ass-bg); color: var(--ass-tx); }
.pc .cl { margin-left: auto; color: var(--muted); font-size: 10.5px; }
.pc .ln { display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 11px; }
.pc .ln svg { width: 11px; height: 11px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.pc .ln.riu { color: var(--title); font-weight: 600; }
.rc h4 .ic2 { float: right; color: var(--muted); font-weight: 400; letter-spacing: 2px; }
.att { display: flex; gap: 8px; align-items: center; padding: 4px 0; color: var(--ink-2); font-size: 11.5px; }
.att .av { width: 20px; height: 20px; font-size: 8.5px; }
.att b { color: var(--title); font-weight: 600; }
.df { justify-content: flex-start; }
.df .fr { margin-left: auto; font-size: 16px; opacity: .8; }

/* telefono: proporzioni da telefono */
.tel { width: 286px; border-radius: 46px; padding: 10px; }
.tel-sch { position: relative; height: 600px; border-radius: 37px; display: flex; flex-direction: column; }
.tel-isola { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; border-radius: 999px; background: #1b2232; }
.tel-top { padding: 13px 26px 8px; }
.mail-c { flex: 1; overflow: hidden; }
.mail-altre { background: #fff; border-radius: 12px; padding: 9px 10px; display: grid; gap: 5px; font-size: 10px; color: #3d4d7c; box-shadow: 0 4px 8px rgba(0, 0, 0, .05); }
.mail-altre .lab { margin-bottom: 1px; }
.mail-altre div { display: flex; gap: 6px; align-items: center; }
.mail-altre code { font: 700 9px var(--mono); background: #e3ebfa; color: #5379c9; border-radius: 999px; padding: 0 6px; }
.mail-altre em { font-style: normal; margin-left: auto; color: #b4465f; font-weight: 600; font-size: 9px; }
.mail-piede { text-align: center; font-size: 8.5px; color: #8592bd; padding: 8px 6px 2px; }
.tel-casa { height: 5px; width: 110px; border-radius: 99px; background: #1b2232; margin: 6px auto 8px; flex: none; }

/* rapporto: logo dell'azienda */
.doc-logo { display: flex; align-items: center; gap: 6px; }
.doc-logo img { height: 20px; width: auto; display: block; }

/* chat interna */
.chat { position: relative; z-index: 1; width: min(440px, 100%); background: var(--panel); border-radius: 22px; box-shadow: 0 30px 60px rgba(30, 50, 90, .18), 0 0 0 1px var(--sep); overflow: hidden; font-size: 13px; }
.chat-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sep); }
.chat-h b { color: var(--title); letter-spacing: -.02em; }
.chat-h small { color: var(--muted); }
.chat-h .tabs { margin-left: auto; display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--sep); font-size: 11px; font-weight: 600; }
.chat-h .tabs span { padding: 3px 9px; border-radius: 999px; color: var(--ink-2); }
.chat-h .tabs span.on { background: var(--panel); color: var(--blu); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.chat-c { padding: 14px; display: grid; gap: 12px; background: var(--panel-2); }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.msg .av { width: 26px; height: 26px; font-size: 9.5px; }
.msg .nuv { background: var(--panel); border-radius: 16px 16px 16px 4px; padding: 8px 11px; box-shadow: 0 0 0 1px var(--sep); color: var(--ink); }
.msg .nuv small { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; font-weight: 600; }
.msg.mio { margin-left: auto; flex-direction: row-reverse; }
.msg.mio .nuv { background: var(--navy); color: #fff; border-radius: 16px 16px 4px 16px; box-shadow: none; }
.msg.mio .nuv small { color: rgba(255, 255, 255, .7); }
.cita { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 8px; border-radius: 10px; background: var(--blu-s); color: var(--title); font-size: 11.5px; font-weight: 600; }
.cita code { font: 700 10.5px var(--mono); }
.msg.mio .cita { background: rgba(255, 255, 255, .18); color: #fff; }
.file { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: var(--panel-2); font-size: 11.5px; color: var(--ink-2); }
.file i { width: 26px; height: 30px; border-radius: 5px; display: grid; place-items: center; font: 800 8px var(--f); font-style: normal; color: #fff; background: var(--rif); }
.file i.img { background: var(--com); }
.file b { display: block; color: var(--ink); font-size: 11.5px; }
.chat-in { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sep); color: var(--muted); font-size: 12px; }
.chat-in span { flex: 1; background: var(--panel-2); border-radius: 999px; padding: 7px 12px; }
.chat-in svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chat-in .inv { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--navy); }
.chat-in .inv svg { stroke: #fff; width: 15px; height: 15px; }

/* AI interna: KeyMind */
.km { position: relative; z-index: 1; width: min(460px, 100%); background: #fbfcff; border-radius: 22px; box-shadow: 0 30px 60px rgba(30, 50, 90, .18), 0 0 0 1px var(--sep); padding: 14px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 12px; color: #3d4d7c; font-size: 12px; }
.km-t { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.03em; font-size: 15px; color: #5379c9; }
.km-t .stella { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, #5f88d8, #8b7fe0); color: #fff; font-size: 12px; }
.km-t small { margin-left: auto; font-size: 11px; font-weight: 600; color: #8592bd; letter-spacing: 0; }
.postit { background: #fff6d6; border-radius: 4px 14px 14px 14px; padding: 10px; box-shadow: 0 6px 14px rgba(120, 90, 0, .12); font-size: 11.5px; line-height: 1.45; color: #5b4a17; transform: rotate(-1.2deg); }
.postit small { display: block; font-weight: 700; color: #8a6100; margin-bottom: 4px; font-size: 10.5px; }
.postit .all { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 10.5px; font-weight: 600; color: #8a6100; }
.postit .all i { width: 18px; height: 22px; border-radius: 3px; background: #b4465f; color: #fff; display: grid; place-items: center; font: 800 6.5px var(--f); font-style: normal; }
.km-prop { display: grid; gap: 7px; align-content: start; }
.kp { background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 0 0 1px #e8f0f9; }
.kp .k { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5246a8; }
.kp .k.n { color: #3f63b0; } .kp .k.c { color: #236b4d; }
.kp p { margin: 2px 0 6px; font-size: 11.5px; color: #3d4d7c; }
.kp .bt { display: flex; gap: 5px; }
.kp .bt span { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: #5079cf; box-shadow: 0 0 0 1px #d3d8f3; }
.kp .bt span.p { background: #5079cf; color: #fff; box-shadow: none; }
.kp.ok { box-shadow: 0 0 0 1.5px #2f8a64; }
.kp.ok .bt span { display: none; }
.kp.ok .bt::after { content: "✓ Accettata"; font-size: 10.5px; font-weight: 700; color: #236b4d; }

/* su misura */
.misura { position: relative; }
.misura .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.prezzo-mis { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 22px; padding: 12px 18px; border-radius: 18px; background: var(--panel); box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
.prezzo-mis small { color: var(--muted); font-size: 13px; }
.prezzo-mis b { font-size: 30px; letter-spacing: -.04em; color: var(--title); }
.prezzo-mis span { font-size: 13px; color: var(--muted); }
.mis-passi { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; counter-reset: m; }
.mis-passi li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; counter-increment: m; }
.mis-passi li::before { content: counter(m); grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blu); color: #fff; font-weight: 700; }
.mis-passi b { color: var(--ink); font-size: 15.5px; letter-spacing: -.02em; }
.mis-passi span { font-size: 13.5px; color: var(--ink-2); }
.moduli { position: relative; z-index: 1; width: min(500px, 100%); background: var(--panel); border-radius: 24px; padding: 16px; box-shadow: 0 30px 60px rgba(30, 50, 90, .16), 0 0 0 1px var(--sep); }
.moduli-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.moduli-h .az-logo { height: 26px; width: auto; }
.moduli-h b { display: block; color: var(--title); letter-spacing: -.02em; }
.moduli-h small { color: var(--muted); font-size: 12px; }
.moduli-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* una luce passa sui moduli uno alla volta: si personalizza tutto */
@keyframes accende { 0%, 11% { background: var(--blu-s); box-shadow: 0 0 0 1.5px var(--blu); } 14%, 100% { background: var(--panel-2); box-shadow: 0 0 0 1px transparent; } }
@keyframes etichetta { 0%, 11% { background: var(--blu); color: #fff; } 14%, 100% { background: var(--panel); color: var(--muted); } }
.mod { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--panel-2); animation: accende 16s infinite; animation-delay: calc(var(--i) * 2s); min-width: 0; }
.mod-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); color: var(--c); flex: none; box-shadow: 0 0 0 1px var(--sep); }
.mod-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mod-t { min-width: 0; flex: 1; }
.mod-t b { display: block; font-size: 13.5px; color: var(--ink); letter-spacing: -.02em; }
.mod-t small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.mod-tag { flex: none; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--panel); color: var(--muted); animation: etichetta 16s infinite; animation-delay: calc(var(--i) * 2s); }
@media (prefers-reduced-motion: reduce) { .mod, .mod-tag { animation: none; } }
@media (max-width: 640px) { .moduli-g { grid-template-columns: minmax(0, 1fr); } }

/* prezzi: lo spazio di archiviazione */
.spazio { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
.spazio .cur-et label small { display: block; }
.n-gb { font: 800 22px var(--f); letter-spacing: -.03em; color: var(--title); font-variant-numeric: tabular-nums; }
.cifra .det { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.scala-gb { position: relative; height: 1.4em; }
.scala-gb span { position: absolute; left: calc(13px + (100% - 26px) * var(--k) / 7); transform: translateX(-50%); white-space: nowrap; }
.scala-gb span:first-child { transform: none; left: 0; } .scala-gb span:last-child { transform: none; left: auto; right: 0; }
.spazio-piu { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--blu-s); box-shadow: 0 0 0 1.5px var(--blu); animation: appare .3s ease-out; }
.spazio-piu b { display: block; color: var(--title); font-size: 15.5px; letter-spacing: -.02em; }
.spazio-piu span { color: var(--ink-2); font-size: 13.5px; }
.spazio-piu .btn { padding: 10px 18px; font-size: 14px; }

/* domande: due colonne indipendenti (aprendo una domanda non resta un buco accanto) */
.domande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; align-items: start; }
.dom-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (max-width: 960px) {
  .misura .in { grid-template-columns: minmax(0, 1fr); }
  .km { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .domande, .mis-l { grid-template-columns: minmax(0, 1fr); }
  .viste { display: none; }
  .app-tabs span:not(.on) { display: none; }
  .app-tabs .imp { display: none; }
  .h-cerca b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gal, .macchia, .striscia-in, .schermo.entra { animation: none !important; }
  .striscia-in { flex-wrap: wrap; width: auto; justify-content: center; }
  .giro-tab button .bar { display: none; }
}
@media (max-width: 1100px) {
  .h-gr { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .apertura .in, .prezzi .foglio, .ind, .riga, .invito .in { grid-template-columns: minmax(0, 1fr); }
  .riga.inv > .r-testo { order: 0; }
  .passi, .funz, .domande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini.ese { left: 10px; } .mini.riu { right: 10px; } .dafare { right: 10px; }
  .inv-deco { min-height: 240px; }
  .ap-r { grid-template-columns: minmax(0, 1.6fr) 5rem 7rem 3rem; }
  .ap-r > :nth-child(2), .ap-r > :nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .menu { display: none; }
  .testata .btn { margin-left: auto; }
  .apertura { padding-block: 40px 48px; }
  .passi, .funz, .domande, .rail, .h-cards { grid-template-columns: minmax(0, 1fr); }
  .prezzi .foglio { padding: 22px 18px; }
  .a { grid-template-columns: auto minmax(0, 1fr); }
  .a .st { grid-column: 2; grid-row: auto; justify-self: start; }
  .mini, .dafare { position: static; margin: 12px 0 0; width: max-content; max-width: 100%; }
  .mini.riu, .mini.ese { margin: 0 0 12px; }
  .esempio { padding-top: 18px; }
  .chip { display: none; }
  .il-r { grid-template-columns: 2.6rem minmax(0, 1fr) 2.4rem; }
  .il-r > :nth-child(3), .il-r > :nth-child(4) { display: none; }
  .ap-r { grid-template-columns: minmax(0, 1fr) 6.6rem; }
  .ap-r > :nth-child(4), .ap-r > :nth-child(6) { display: none; }
  .ri-gr { grid-template-columns: minmax(0, 1fr); }
  .ri-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odg-r { grid-template-columns: 1.6rem 2.6rem minmax(0, 1fr); }
  .odg-r small { display: none; }
  .inv-deco { display: none; }
  .invito { padding-block: 64px; }
}


/* ================= sito a più pagine: testata con menu, modalità chiara/scura, testa delle pagine, piede ================= */
body { margin: 0; }
main { overflow-x: clip; } /* le card che entrano di lato scorrendo non fanno scorrere la pagina in orizzontale (su main: su body passerebbe alla finestra) */
.testata .in { gap: 10px; }
.marchio { display: block; margin-right: 14px; }
.menu { margin-left: auto; }
.menu a[aria-current="page"] { color: var(--blu); background: var(--blu-s); }
.menu-cta { display: none; }
.testata .btn.testata-cta { margin-left: 4px; }
.testata-cta[aria-current="page"] { background: var(--navy-2); }

/* tasto della modalità: la luna in chiaro, il sole in scuro */
.tema, .menu-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--panel-2); color: var(--ink-2); box-shadow: 0 0 0 1px var(--sep); }
.tema { display: grid; place-items: center; }
.tema:hover, .menu-btn:hover { color: var(--blu); background: var(--blu-s); }
.tema:focus-visible, .menu-btn:focus-visible, .esp:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.tema svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.tema .sole { opacity: 0; transform: rotate(-90deg) scale(.4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema .luna { opacity: 0; transform: rotate(90deg) scale(.4); } :root:not([data-theme="light"]) .tema .sole { opacity: 1; transform: none; } }
:root[data-theme="dark"] .tema .luna { opacity: 0; transform: rotate(90deg) scale(.4); } :root[data-theme="dark"] .tema .sole { opacity: 1; transform: none; }

/* menu sul telefono: tre righe che diventano una X, il menu scende sotto la testata */
.menu-btn { display: none; place-content: center; gap: 4px; }
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.testata.aperto .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.testata.aperto .menu-btn span:nth-child(2) { opacity: 0; }
.testata.aperto .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 980px) {
  .menu-btn { display: grid; }
  .tema { margin-left: auto; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; margin: 0; padding: 10px max(16px, env(safe-area-inset-left, 0px)) 18px; background: var(--bg); box-shadow: 0 3px 0 var(--sep), 0 26px 40px rgba(20, 35, 70, .14); }
  .testata.aperto .menu { display: flex; animation: appare .2s ease-out; }
  .menu a { padding: 12px 14px; font-size: 16px; }
  .menu a.menu-cta { display: flex; margin: 10px 0 0; padding: 13px 18px; color: var(--on-navy); background: var(--navy); }
}
@media (max-width: 640px) { .testata .btn.testata-cta { margin-left: 4px; } }
@media (max-width: 480px) { .testata-cta .lungo { display: none; } }
@media (max-width: 370px) { .testata .btn.testata-cta { display: none; } }

/* testa delle pagine interne: titolo grande, griglia leggera, due macchie di colore e una mini card che fluttua */
.testa-pag { position: relative; isolation: isolate; overflow-x: clip; padding-block: 76px 36px; } /* in verticale le macchie sfumano nella sezione dopo, senza un bordo netto */
.testa-pag::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 50% 20%, #000 20%, transparent 75%); }
.testa-pag h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -.05em; color: var(--blu); font-weight: 800; margin-top: 12px; max-width: 16ch; }
.testa-pag .lead { font-size: 1.2rem; max-width: 56ch; }
@keyframes sale-carica { from { opacity: 0; transform: translateY(22px); } }
.testa-pag .in > * { animation: sale-carica .8s cubic-bezier(.2, .7, .2, 1) both; }
.testa-pag .in > :nth-child(2) { animation-delay: .07s; } .testa-pag .in > :nth-child(3) { animation-delay: .14s; }
.tp-mini { z-index: 1; right: max(16px, calc((100% - 1160px) / 2 + 24px)); top: 40%; }
.mini .ic.blu { background: var(--ass-bg); color: var(--ass); }
.tp-mini .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--com-bg); color: var(--com); flex: none; }
.tp-mini .ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.testa-pag + .sez, .testa-pag + .indirizzo { padding-top: 24px; }
.testa-pag + .sez.prezzi { margin-top: 36px; }
.sez-ind + .sez-giro { padding-top: 36px; } .sez-giro .giro { margin-top: 0; }
@media (max-width: 1100px) { .tp-mini { display: none; } }
@media (max-width: 640px) { .testa-pag { padding-block: 44px 20px; } }

/* il giro del prodotto: schermate vere di KeyPlan (stile Future, dati Acme), una sopra l'altra, che si danno il cambio sfumando.
   Le schede restano attaccate sotto la testata mentre guardi la finestra */
.sez-giro .giro-tab { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 74px); z-index: 4; width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 5px; margin-bottom: 14px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
.sez-giro .giro-tab::-webkit-scrollbar { display: none; }
.sez-giro .giro-tab button { flex: none; box-shadow: none; background: transparent; }
.sez-giro .giro-tab button[aria-selected="true"] { background: var(--blu-s); }
.sez-giro .schermi { display: grid; min-height: 0; background: var(--bg); }
.sez-giro .schermo { padding: 0; }
.sez-giro .schermo, .sez-giro .vista { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.sez-giro .schermo.on, .sez-giro .vista.on { opacity: 1; }
.sez-giro .schermo { display: grid; }
.sc-img, .sc-img img { display: block; width: 100%; height: auto; }
.sc-img.scuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-img.chiaro { display: none; } :root:not([data-theme="light"]) .sc-img.scuro { display: block; } }
:root[data-theme="dark"] .sc-img.chiaro { display: none; } :root[data-theme="dark"] .sc-img.scuro { display: block; }
@media (prefers-reduced-motion: reduce) { .sez-giro .schermo, .sez-giro .vista { transition: none; } }
@media (max-width: 640px) { .sez-giro .giro-tab { top: calc(env(safe-area-inset-top, 0px) + 70px); } .sez-giro .fin { max-width: 400px; margin-inline: auto; } }

/* il giro del prodotto: un alone morbido dietro la finestra */
.sez-giro .giro::before { content: ""; position: absolute; z-index: -1; inset: 12% -4% -6%; border-radius: 60px; pointer-events: none;
  background: radial-gradient(circle at 20% 30%, var(--alone-1), transparent 55%), radial-gradient(circle at 85% 75%, var(--alone-2), transparent 55%); filter: blur(30px); }
.sez-giro .giro { isolation: isolate; }

/* home: le quattro pagine da scoprire */
.esplora { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.esp { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 22px; background: var(--panel); box-shadow: var(--ombra), 0 0 0 1px var(--sep); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.esp::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 24%, transparent), transparent 70%); transition: transform .45s ease; }
.esp:hover { transform: translateY(-4px); box-shadow: var(--ombra-2), 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.esp:hover::before { transform: scale(1.4); }
.esp .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; }
.esp .ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.esp h3 { font-size: 19px; letter-spacing: -.025em; color: var(--title); }
.esp p { margin: 8px 0 18px; font-size: 14.5px; color: var(--ink-2); flex: 1; }
.esp .vai { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--blu); }
.esp .vai svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.esp:hover .vai svg { transform: translateX(4px); }
@media (max-width: 960px) { .esplora { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .esplora { grid-template-columns: minmax(0, 1fr); } }

/* contatti: l'invito è la pagina intera, con i tre passi di quello che succede dopo */
.invito-pag { margin-top: 0; padding-block: 88px 104px; }
.invito h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 800; margin-top: 10px; }
.poi { list-style: none; counter-reset: poi; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.poi li { counter-increment: poi; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.poi li::before { content: counter(poi); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #2c4f8e; font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.poi b { display: block; color: #fff; font-size: 15.5px; letter-spacing: -.015em; }
.poi span { color: rgba(255, 255, 255, .8); font-size: 13.5px; }
@media (max-width: 640px) { .poi { grid-template-columns: minmax(0, 1fr); } .invito-pag { padding-block: 56px 64px; } }

/* piede: logo e motto, le pagine, le note */
.piede { padding-block: 40px 44px; }
.piede .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; }
.piede-a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ink-2); }
.piede-l { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; }
.piede-l a { font-weight: 600; }
.piede-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 16px; border-top: 1px solid var(--sep); font-size: 13.5px; }
@media (max-width: 760px) { .piede .in { grid-template-columns: minmax(0, 1fr); } .piede-l { justify-content: flex-start; } }

/* ================= movimento legato allo scorrimento (scroll-driven) =================
   Solo dove il browser lo sa fare e solo senza «movimento ridotto»; altrove tutto resta fermo e visibile. Le animazioni usano le
   proprietà translate/scale/rotate, così non si scontrano con il fluttuare delle card (che usa transform). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .testata { animation: testata-giu linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    @keyframes testata-giu { from { box-shadow: 0 3px 0 transparent; } to { box-shadow: 0 3px 0 var(--sep), 0 12px 30px rgba(20, 35, 70, .08); } }

    /* titoli, card e domande salgono e si accendono mentre entrano; in una fila partono da più in basso, così arrivano a cascata */
    @keyframes sale { from { opacity: 0; translate: 0 calc(34px + var(--n, 0) * 26px); } }
    .sez .in > .sopra, .sez .in > h2, .sez .in > .lead, .passo, .f, .esp, details, .ind, .mis-passi li, .prezzo-mis, .incluso li, .riga .r-testo, .cifra, .giro-tab,
    .invito h2, .invito .lead, .invito .cta, .invito .rassicura, .invito .contatto {
      animation: sale linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .passo:nth-child(2), .f:nth-child(2), .esp:nth-child(2), .cifra:nth-child(2), .dom-col + .dom-col details { --n: 1; }
    .passo:nth-child(3), .f:nth-child(3), .esp:nth-child(3), .cifra:nth-child(3) { --n: 2; }
    .passo:nth-child(4), .f:nth-child(4), .esp:nth-child(4) { --n: 3; }
    @media (max-width: 640px) { .passo, .f, .esp, .cifra, .dom-col + .dom-col details { --n: 0; } } /* in colonna sola niente cascata */

    /* come funziona: i numeri dei passi si accendono uno dopo l'altro */
    .passi { view-timeline: --passi block; }
    @keyframes numero { from { background: var(--linea); color: var(--muted); scale: .75; } }
    .passo::before { animation: numero linear both; animation-timeline: --passi; }
    .passo:nth-child(1)::before { animation-range: cover 20% cover 27%; } .passo:nth-child(2)::before { animation-range: cover 27% cover 34%; }
    .passo:nth-child(3)::before { animation-range: cover 34% cover 41%; } .passo:nth-child(4)::before { animation-range: cover 41% cover 48%; }

    /* funzioni e su misura: le schermate arrivano di lato, un po' girate, e si raddrizzano */
    @keyframes da-destra { from { opacity: 0; translate: min(90px, 12vw) 30px; rotate: 4deg; scale: .92; } }
    @keyframes da-sinistra { from { opacity: 0; translate: max(-90px, -12vw) 30px; rotate: -4deg; scale: .92; } }
    .riga .r-vis, .misura .r-vis { animation: da-destra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .riga.inv .r-vis { animation-name: da-sinistra; }

    /* il prodotto: la finestra arriva inclinata e si raddrizza */
    .giro { perspective: 1800px; }
    @keyframes raddrizza { from { opacity: .3; transform: rotateX(22deg) scale(.88); } }
    .fin { transform-origin: 50% 0; animation: raddrizza linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }

    /* prezzi: il foglio del calcolo sale */
    @keyframes sale-grande { from { opacity: 0; translate: 0 70px; scale: .95; } }
    .prezzi .foglio { animation: sale-grande linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }

    /* profondità: uscendo, il testo d'apertura sale più in fretta della card; le macchie di colore scendono più lente della pagina */
    .apertura, .testa-pag, .invito, .sez.prezzi { view-timeline: --blocco block; }
    @keyframes via-su { to { opacity: .1; translate: 0 -90px; } }
    @keyframes via-giu { to { translate: 0 50px; } }
    .apertura .in > :first-child, .testa-pag .in { animation: via-su linear both; animation-timeline: --blocco; animation-range: exit 0% exit 90%; }
    .apertura .prova-wrap { animation: via-giu linear both; animation-timeline: --blocco; animation-range: exit 0% exit 100%; }
    .tp-mini { animation: galleggia var(--gt, 7s) ease-in-out infinite, via-giu linear both; animation-delay: var(--gd, 0s), 0s; animation-timeline: auto, --blocco; animation-range: normal, exit 0% exit 100%; }
    @keyframes macchia-scorre { from { translate: 0 -70px; } to { translate: 0 150px; } }
    .macchia { animation: deriva var(--mt, 18s) ease-in-out infinite alternate, macchia-scorre linear both; animation-timeline: auto, --blocco; animation-range: normal, cover; }
    @keyframes sale-deco { from { translate: 0 90px; } to { translate: 0 -90px; } }
    .inv-deco { animation: sale-deco linear both; animation-timeline: --blocco; animation-range: cover; }
  }

  /* da una pagina all'altra: la testata resta ferma, il contenuto sfuma e sale appena */
  @view-transition { navigation: auto; }
  .testata { view-transition-name: testata; }
  ::view-transition-old(root) { animation: .16s ease-in both pagina-esce; }
  ::view-transition-new(root) { animation: .32s cubic-bezier(.2, .7, .2, 1) both pagina-entra; }
  @keyframes pagina-esce { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes pagina-entra { from { opacity: 0; transform: translateY(16px); } }
  /* cambio di modalità: la nuova si apre a cerchio dal tasto (il cerchio lo disegna sito.js) */
  .vt-tema .testata { view-transition-name: none; }
  .vt-tema::view-transition-old(root), .vt-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}

/* email sul telefono: le altre azioni su una riga sola (il codice e la scadenza non vanno a capo, il titolo si accorcia) */
.mail-altre { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.mail-altre div { min-width: 0; }
.mail-altre div > code, .mail-altre em { white-space: nowrap; flex: none; }
.mail-altre div > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-altre em.ok { color: #8592bd; }

/* su misura: il titolo che cambia. «adatto» si sgretola in polvere (sito.js la disegna su un canvas) e al suo posto
   compare «si adatta», lettera per lettera. Il testo vero per i lettori di schermo è già quello finale */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h-muta { max-width: 18ch; }
.muta { position: relative; display: inline-grid; justify-items: start; transition: width .7s cubic-bezier(.3, .7, .2, 1); }
/* le due parole stanno nella stessa casella: nessuna si sposta mai. «si adatta» all'inizio non occupa spazio (larghezza 0,
   ma si vede lo stesso); la casella si allarga mentre compare. Ogni parola resta una parola intera, mai lettere separate */
.muta > .muta-v, .muta > .muta-n { grid-area: 1 / 1; white-space: nowrap; }
.muta-n { width: 0; visibility: hidden; }
.muta.nuovo .muta-n { visibility: visible; }
.muta.fatto .muta-v { visibility: hidden; } .muta.fatto .muta-n { width: auto; }
.muta canvas { position: absolute; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .muta-v { display: none; } .muta-n { width: auto; visibility: visible; } }

/* su misura: il portale pronto all'uso più le sezioni su misura */
.sez-livelli { padding-top: 28px; }
.livelli { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.liv { padding: 26px; border-radius: 24px; background: var(--panel); box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
.liv.su { background: linear-gradient(160deg, var(--card-1), var(--card-2)); box-shadow: var(--ombra), 0 0 0 1.5px color-mix(in srgb, var(--blu) 45%, transparent); }
.liv-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--com-tx); background: var(--com-bg); border-radius: 999px; padding: 3px 10px; }
.liv.su .liv-tag { color: var(--ass-tx); background: var(--ass-bg); }
.liv h3 { margin-top: 14px; font-size: 22px; letter-spacing: -.03em; color: var(--title); }
.liv p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.liv ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.liv li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.liv li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--com); transform: translateY(-1px); }
.liv.su li::before { background: var(--blu); }
.liv-piu { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blu); color: #fff; box-shadow: var(--ombra-2); }
.liv-piu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.sez-livelli + .misura { padding-top: 64px; }
.misura h2 { margin-top: 6px; }
.misura .mis-passi { margin-top: 22px; }
@media (max-width: 860px) { .livelli { grid-template-columns: minmax(0, 1fr); } .liv-piu { justify-self: center; margin-block: -6px; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .liv, .liv-piu { animation: sale linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .liv.su { --n: 1; } .liv-piu { --n: .5; }
  @media (max-width: 860px) { .liv.su, .liv-piu { --n: 0; } }
} }
.muta-v i { font-style: normal; }
.muta .bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }


/* ================= ramo «Qover»: l'impostazione di qover.com con i colori, il carattere e i contenuti di KeyPlan =================
   Titoli grandi e leggeri con una parola sfumata, sfondi pastello sfumati, collage del prodotto, card colorate su fondo
   scuro con la griglia, tasti a pillola con la freccia, piè di pagina scuro a colonne. */
:root { --q-ink: #14264d; --q-scuro: #0f1c36; --q-grad: linear-gradient(90deg, #5f88d8, #8b7fe0); --q-grad-chiaro: linear-gradient(90deg, #9dbbf3, #c4bcf6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --q-ink: #e6eeff; --q-scuro: #0a1325; --q-grad: linear-gradient(90deg, #86a9ee, #b3a9f3); } }
:root[data-theme="dark"] { --q-ink: #e6eeff; --q-scuro: #0a1325; --q-grad: linear-gradient(90deg, #86a9ee, #b3a9f3); }

h2 { font-weight: 400; color: var(--q-ink); letter-spacing: -.03em; }
.sez h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.q-grad { background: var(--q-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* tasti e collegamenti */
.q-btn, .q-btn-bordo { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 17px 30px; font: 600 17px var(--f); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: background .2s, gap .2s; }
.q-btn { background: var(--navy); color: #fff; border: 0; }
.q-btn:hover { background: var(--navy-2); }
.q-btn-bordo { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
.q-btn-bordo:hover { background: rgba(255, 255, 255, .1); }
.q-btn svg, .q-btn-bordo svg, .q-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.q-btn:hover svg, .q-btn-bordo:hover svg, .q-link:hover svg { transform: translateX(4px); }
.q-link { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--f); color: var(--q-ink); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.q-link.chiaro { color: #fff; }
.q-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.q-btn:focus-visible, .q-btn-bordo:focus-visible, .q-link:focus-visible, .q-seg button:focus-visible, .q-acc-v button:focus-visible, .q-sc:focus-visible, .menu-su:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

/* fascia in alto e testata */
.q-top { background: var(--q-scuro); color: rgba(220, 230, 255, .72); font-size: 13.5px; }
.q-top .in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.q-top a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.q-top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.testata { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 var(--sep); }
.testata .in { min-height: 84px; gap: 8px; }
.testata .logo { height: 32px; }
.menu { align-items: center; gap: 2px; }
.menu a, .menu-su { display: inline-flex; align-items: center; gap: 6px; font: 400 17px var(--f); color: var(--q-ink); padding: 10px 14px; border-radius: 999px; background: none; border: 0; cursor: pointer; text-decoration: none; }
.menu a:hover, .menu-su:hover { color: var(--blu); background: var(--blu-s); }
.menu a[aria-current="page"], .menu-su.dentro { color: var(--blu); background: none; font-weight: 600; }
.menu-su .giu { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.menu-gr { position: relative; }
@media (min-width: 981px) { .menu a.menu-cta { display: none; } }
.menu-gr.aperto .giu { transform: rotate(180deg); }
.menu-pop { position: absolute; z-index: 20; top: calc(100% + 14px); left: -10px; min-width: 330px; display: grid; gap: 2px; padding: 10px; border-radius: 20px; background: var(--panel); box-shadow: var(--ombra-2), 0 0 0 1px var(--sep);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.menu-gr.aperto .menu-pop { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 981px) { .menu-gr:hover .menu-pop { opacity: 1; visibility: visible; transform: none; } .menu-gr:hover .giu { transform: rotate(180deg); } }
.menu-pop a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; font-size: 15.5px; }
.menu-pop a b { font-weight: 600; color: var(--q-ink); }
.menu-pop a small { font-size: 13px; color: var(--muted); }
.menu-pop a:hover { background: var(--blu-s); }
.menu-pop a[aria-current="page"] b { color: var(--blu); }
.testata .btn.q-btn.testata-cta { padding: 14px 24px; font-size: 16px; margin-left: 6px; }
.testata .btn.q-btn.testata-cta svg { width: 16px; height: 16px; }
@media (max-width: 980px) {
  .menu-su { display: none; }
  .menu-pop { position: static; min-width: 0; padding: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; }
  .menu-pop small { display: none; }
  .menu-pop a { padding: 12px 14px; font-size: 16px; }
  .menu a { font-size: 16px; }
  .q-top span { display: none; } .q-top .in { justify-content: center; }
}
@media (max-width: 480px) { .testata .btn.q-btn.testata-cta { padding: 11px 16px; font-size: 14.5px; } .testata .btn.q-btn.testata-cta svg { display: none; } }

/* apertura: sfondo pastello sfumato, titolo leggero, collage del prodotto */
.q-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 64px 84px;
  background: radial-gradient(55% 65% at 0% 0%, var(--alone-1), transparent 62%), radial-gradient(50% 60% at 100% 6%, var(--alone-2), transparent 60%),
    radial-gradient(45% 55% at 8% 100%, var(--rif-bg), transparent 62%), radial-gradient(45% 55% at 96% 96%, var(--car-bg), transparent 62%), radial-gradient(40% 40% at 55% 45%, var(--alone-3), transparent 70%), var(--bg); }
.q-hero .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.q-hero h1 { font: 400 clamp(2.8rem, 5.6vw, 4.6rem)/1.06 var(--f); letter-spacing: -.04em; color: var(--q-ink); margin: 0; max-width: 12ch; }
.q-lead { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 50ch; margin: 24px 0 0; }
.q-lead + .q-lead { margin-top: 14px; }
.q-collage { position: relative; height: 600px; }
.q-fili { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--q-ink); stroke-opacity: .32; stroke-width: 1.3; stroke-dasharray: 3 6; }
.q-fili circle { fill: var(--q-ink); fill-opacity: .55; stroke: none; }
.q-c { position: absolute; background: var(--panel); border-radius: 18px; box-shadow: 0 20px 50px rgba(20, 38, 77, .14), 0 0 0 1px var(--sep); }
.q-stat { z-index: 3; right: 0; top: 7%; width: 172px; padding: 14px 16px; }
.q-stat b { display: flex; align-items: center; gap: 8px; color: var(--q-ink); font-size: 14px; }
.q-stat b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.q-stat div { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.q-stat .n { font: 300 28px var(--f); letter-spacing: -.03em; color: var(--q-ink); }
.q-stat small { font-size: 12px; color: var(--muted); }
.q-win { z-index: 1; left: 0; top: 57%; width: 320px; overflow: hidden; }
.q-win-bar { display: flex; gap: 5px; padding: 8px 10px; background: var(--panel-2); border-bottom: 1px solid var(--sep); }
.q-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.q-win img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .q-hero .in { grid-template-columns: minmax(0, 1fr); } .q-collage { width: min(620px, 100%); margin: 10px auto 0; } }

/* le funzioni che scorrono, come la fila di loghi */
.q-loghi { padding-block: 52px 64px; }
.q-striscia { border: 0; background: none; padding-block: 6px; }
.q-striscia .striscia-in span { background: none; box-shadow: none; border: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--muted); padding: 0 26px; }
.q-striscia .striscia-in span i { display: none; }
.q-nota { text-align: center; margin: 28px 0 0; color: var(--ink-2); font-size: 16px; }
.q-nota .q-link { margin-left: 8px; }

/* fondo scuro con la griglia e le card colorate */
.q-scuro, .q-fine { position: relative; isolation: isolate; background: var(--q-scuro); color: rgba(220, 230, 255, .82); }
.q-scuro::before, .q-fine::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 96px 96px; }
.q-scuro { padding-block: 110px 120px; }
.q-centro { text-align: center; max-width: 780px; margin: 0 auto; }
.q-centro h2 { font: 400 clamp(2rem, 4vw, 3.2rem)/1.12 var(--f); letter-spacing: -.03em; color: var(--q-ink); }
.q-scuro .q-centro h2 { color: #fff; }
.q-centro p { margin: 18px auto 0; max-width: 62ch; font-size: 17px; color: var(--ink-2); }
.q-scuro .q-centro p { color: rgba(220, 230, 255, .8); }
.q-centro .q-link, .q-centro .q-btn { margin-top: 28px; }
.q-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.q-b { position: relative; overflow: hidden; display: flex; gap: 24px; min-height: 380px; padding: 30px; border-radius: 22px; }
.b1, .b3 { --q-ink: #14264d; --ink-2: #3d4d7c; color: #14264d; }
.b1 { grid-column: span 2; background: linear-gradient(120deg, #f7c9d5, #c9dafb 55%, #b8e6ef); }
.b2 { flex-direction: column; background: linear-gradient(160deg, #2f8a7a, #1b4b5c); color: #fff; }
.b3 { flex-direction: column; background: linear-gradient(150deg, #f6eaa2, #f6c3cf); }
.b4 { grid-column: span 2; background: linear-gradient(140deg, #22508f, #183a6b 60%, #132e57); color: #fff; }
.q-b-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.q-et { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--f); }
.q-et svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-b h3 { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.2 var(--f); letter-spacing: -.02em; margin: 26px 0 0; color: inherit; }
.q-b p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: inherit; opacity: .9; }
.q-b .q-link { margin-top: 26px; color: inherit; }
/* card 1: il topic, con il cursore di Laura */
.q-topic { --car-bg: #fbf3dc; --car-tx: #8a6100; --ass-bg: #e8effc; --ass-tx: #3f63b0; --ese-bg: #ecebfb; --ese-tx: #5246a8; --com-bg: #e2f3ec; --com-tx: #236b4d; --ink: #3d4d7c; --muted: #8592bd; --panel: #fff; --title: #5379c9; --blu: #6a92dc; --blu-s: #e3ebfa;
  position: relative; flex: 0 0 47%; align-self: center; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .62); box-shadow: 0 20px 40px rgba(20, 38, 77, .14); backdrop-filter: blur(6px); color: #3d4d7c; font-size: 12.5px; }
.q-tp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.q-tp-h b { color: #5379c9; font-size: 15px; }
.q-tp-h .prog { margin-left: auto; font: 700 11px var(--mono); background: #fbf3dc; color: #8a6100; border-radius: 6px; padding: 1px 6px; }
.q-topic .cod { font: 700 11px var(--mono); color: #5379c9; background: #e3ebfa; border-radius: 6px; padding: 1px 6px; }
.q-topic .a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: 0 2px 4px rgba(20, 38, 77, .05); }
.q-topic .t { font-size: 12.5px; line-height: 1.35; color: #3d4d7c; }
.q-topic .st { font-size: 11px; white-space: nowrap; }
.q-cursore { position: absolute; right: 12%; bottom: -14px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 7px; border-radius: 99px; background: #14264d; color: #fff; font: 600 12px var(--f); box-shadow: 0 8px 16px rgba(20, 38, 77, .25); }
.q-cursore svg { width: 14px; height: 14px; fill: #f7c9d5; }
/* card 2: l'email che spunta dal basso */
.q-mail { margin: auto -30px -30px 0; align-self: flex-end; width: 86%; border-radius: 16px 0 0 0; overflow: hidden; background: #fff; color: #3d4d7c; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); }
.q-mail-ban { padding: 10px; text-align: center; background: #1e3b6b; }
.q-mail-ban img { height: 18px; width: auto; }
.q-mail-c { display: grid; gap: 4px; padding: 14px 16px 18px; background: #edf3fb; }
.q-mail-c small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8592bd; }
.q-mail-c > b { font-size: 14.5px; color: #14264d; }
.q-mail-c span { font-size: 12.5px; } .q-mail-c span b { color: #14264d; }
.q-mail-c i { justify-self: start; margin-top: 6px; padding: 6px 12px; border-radius: 99px; background: #5079cf; color: #fff; font: 600 12px var(--f); font-style: normal; }
/* card 4: i numeri della riunione */
.q-b-stat { position: relative; flex: 0 0 44%; min-height: 300px; }
.q-s { position: absolute; padding: 12px 14px; border-radius: 14px; background: rgba(8, 18, 42, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px rgba(0, 0, 0, .25); backdrop-filter: blur(8px); color: #fff; }
.q-s small { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); }
.q-s b { display: block; font: 300 26px var(--f); letter-spacing: -.02em; }
.q-s span { font-size: 12.5px; color: #9fe3c4; }
.q-s .rosso { color: #f3a3b5; }
.s1 { right: 0; top: 0; } .s2 { left: 0; top: 36%; display: flex; align-items: center; gap: 12px; } .s3 { right: 6%; bottom: 0; }
.ciambella { flex: none; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(#f3a3b5 0 14%, #ecc77c 0 40%, #86a9ee 0 100%); -webkit-mask: radial-gradient(circle, transparent 44%, #000 45%); mask: radial-gradient(circle, transparent 44%, #000 45%); }
@media (max-width: 1100px) { .q-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b2, .b3 { grid-column: span 1; } }
@media (max-width: 860px) { .b1, .b4 { flex-direction: column; } .q-topic, .q-b-stat { flex-basis: auto; width: 100%; } .q-b-stat { min-height: 260px; } }
@media (max-width: 640px) { .q-bento { grid-template-columns: minmax(0, 1fr); } .b1, .b4 { grid-column: span 1; } .q-b { padding: 24px; } .q-mail { margin: 22px -24px -24px 0; } .q-scuro { padding-block: 72px 80px; } }

/* sezioni chiare: interruttore grande ed elenco che si apre */
.q-chiaro { position: relative; isolation: isolate; padding-block: 110px; background: var(--bg); }
.q-chiaro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 100% 25%, var(--alone-1), transparent 62%), radial-gradient(45% 50% at 0% 65%, var(--rif-bg), transparent 62%);
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.q-seg { display: grid; grid-template-columns: 1fr 1fr; max-width: 940px; margin: 40px auto 0; padding: 8px; border-radius: 999px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep), var(--ombra); }
.q-seg button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 0; border-radius: 999px; background: none; font: 600 16px var(--f); color: var(--q-ink); cursor: pointer; transition: background .25s, color .25s; }
.q-seg button[aria-selected="true"] { background: var(--navy); color: #fff; }
.q-seg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-pan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 64px; }
.q-pan:not([hidden]) { animation: appare .4s ease-out; }
.q-pan-vis { position: relative; min-height: 380px; display: grid; align-items: center; }
.q-shot { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(20, 38, 77, .18), 0 0 0 1px var(--sep); }
.q-shot img { display: block; width: 100%; height: auto; }
.q-tel-p { position: relative; width: 236px; margin: 0 auto; }
.q-pan .mini { z-index: 2; }
.q-mini1 { left: -20px; bottom: 24px; } .q-mini2 { right: -14px; top: 18px; }
.q-pan .mini .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--com-bg); color: var(--com); flex: none; }
.q-pan .mini .ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.q-acc { display: grid; gap: 14px; }
.q-acc-v { position: relative; padding: 22px 26px 22px 38px; border-radius: 18px; background: var(--panel); box-shadow: var(--ombra), 0 0 0 1px var(--sep); }
.q-acc-v::before { content: ""; position: absolute; left: 20px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--linea); transition: background .25s; }
.q-acc-v.aperto::before { background: var(--navy); }
.q-acc-v button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: 400 22px/1.25 var(--f); letter-spacing: -.02em; color: var(--ink-2); cursor: pointer; }
.q-acc-v.aperto button { color: var(--q-ink); }
.q-acc-v p { display: none; margin: 12px 0 0; font-size: 15.5px; color: var(--ink-2); }
.q-acc-v.aperto p { display: block; animation: appare .3s ease-out; }
@media (max-width: 960px) { .q-pan { grid-template-columns: minmax(0, 1fr); gap: 40px; } .q-chiaro { padding-block: 80px; } }
@media (max-width: 640px) { .q-seg button { font-size: 14.5px; padding: 13px 8px; } .q-seg svg { display: none; } .q-mini1 { left: 0; } .q-mini2 { right: 0; } .q-acc-v button { font-size: 19px; } }

/* il confronto in tre colonne */
.q-conf-sez { padding-top: 40px; }
.q-conf-sez::before { background: radial-gradient(50% 55% at 0% 35%, var(--alone-3), transparent 62%), radial-gradient(45% 50% at 100% 75%, var(--car-bg), transparent 62%); }
.q-conf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; align-items: stretch; }
.q-cf { position: relative; padding: 30px; border-radius: 22px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--blu) 32%, transparent); }
.q-cf.medio { background: color-mix(in srgb, var(--alone-1) 55%, var(--panel)); border-style: dashed; }
.q-cf.top { --q-ink: #14264d; --ink-2: #3d4d7c; border: 0; background: linear-gradient(160deg, #d9f1ea, #d9e6fb 60%, #e9e4fb); box-shadow: 10px 10px 0 #14264d; }
.q-cf h3 { font: 400 clamp(1.5rem, 2.3vw, 2rem)/1.15 var(--f); letter-spacing: -.02em; color: var(--q-ink); max-width: 13ch; }
.q-cf p { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.q-cf ul, .q-pc ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.q-cf li, .q-pc li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.q-cf li::before, .q-pc li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--q-ink); color: var(--bg); font: 700 10.5px var(--f); }
.q-cf.top li { color: #14264d; font-weight: 600; } .q-cf.top li::before { background: #14264d; color: #fff; }
.q-medaglia { position: absolute; top: 24px; right: 24px; width: 34px; height: 34px; color: #14264d; }
.q-medaglia svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-cf.top { box-shadow: 10px 10px 0 #86a9ee; } }
:root[data-theme="dark"] .q-cf.top { box-shadow: 10px 10px 0 #86a9ee; }
@media (max-width: 960px) { .q-conf { grid-template-columns: minmax(0, 1fr); } .q-cf h3 { max-width: none; } }

/* perché KeyPlan */
.q-perche { padding-block: 110px 40px; }
.q-perche .in { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.q-perche-t h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.q-perche-t p { margin: 18px 0 0; font-size: 16.5px; color: var(--ink-2); }
.q-perche-t .q-btn { margin-top: 28px; }
.q-pc { padding: 28px 24px 30px; border-radius: 22px; background: var(--panel-2); }
.q-ico3 { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; transform: rotate(-8deg); background: linear-gradient(145deg, #eef3fd, #b9cdf3); color: #5079cf;
  box-shadow: inset -6px -8px 14px rgba(80, 121, 207, .25), inset 6px 6px 12px rgba(255, 255, 255, .85), 0 14px 24px rgba(80, 121, 207, .22); }
.q-ico3.b { background: linear-gradient(145deg, #f3f1fd, #cfc8f5); color: #6a5fc4; box-shadow: inset -6px -8px 14px rgba(106, 95, 196, .22), inset 6px 6px 12px rgba(255, 255, 255, .85), 0 14px 24px rgba(106, 95, 196, .2); }
.q-ico3.c { background: linear-gradient(145deg, #eef8f3, #b8e3cf); color: #2f8a64; box-shadow: inset -6px -8px 14px rgba(47, 138, 100, .2), inset 6px 6px 12px rgba(255, 255, 255, .85), 0 14px 24px rgba(47, 138, 100, .18); }
.q-ico3 svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(8deg); }
.q-pc h3 { margin: 28px 0 0; font: 400 25px/1.2 var(--f); letter-spacing: -.02em; color: var(--q-ink); }
@media (max-width: 1100px) { .q-perche .in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .q-perche-t { grid-column: 1 / -1; max-width: 640px; } }
@media (max-width: 760px) { .q-perche .in { grid-template-columns: minmax(0, 1fr); } .q-perche { padding-block: 72px 24px; } }

/* sicurezza: fascia pastello e orbita */
.q-sic { margin-top: 80px; padding-block: 100px; background: linear-gradient(120deg, var(--alone-3), var(--alone-1) 50%, var(--alone-2)); }
.q-sic .in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.q-sic h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.q-sic-c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.q-sic-i svg { width: 28px; height: 28px; fill: none; stroke: var(--q-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.q-sic-c h3 { margin: 12px 0 0; font-size: 17px; letter-spacing: -.015em; color: var(--q-ink); }
.q-sic-c p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); }
.q-sic .q-btn { margin-top: 36px; }
.q-orbita { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin-left: auto; }
.q-orb-cerchio { position: absolute; inset: 7%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--q-ink) 20%, transparent); }
.q-orb-cerchio.due { inset: 24%; border-style: dashed; }
.q-scudo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 36%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 32%; background: linear-gradient(145deg, #f4f7ff, #c3d3f6); color: #5079cf;
  box-shadow: inset -10px -12px 20px rgba(80, 121, 207, .3), inset 8px 8px 16px rgba(255, 255, 255, .9), 0 30px 50px rgba(80, 121, 207, .3); }
.q-scudo svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.q-giro { position: absolute; inset: 7%; animation: q-orbita 48s linear infinite; }
.q-giro span { position: absolute; left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); translate: -50% -50%; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--panel); color: var(--q-ink); font: 600 13px var(--f); box-shadow: var(--ombra-2), 0 0 0 1px var(--sep); animation: q-contro 48s linear infinite; }
@keyframes q-orbita { to { rotate: 1turn; } }
@keyframes q-contro { to { rotate: -1turn; } }
@media (prefers-reduced-motion: reduce) { .q-giro, .q-giro span { animation: none; } }
@media (max-width: 960px) { .q-sic .in { grid-template-columns: minmax(0, 1fr); } .q-orbita { max-width: 360px; margin: 10px auto 0; } }
@media (max-width: 640px) { .q-sic-c { grid-template-columns: minmax(0, 1fr); gap: 22px; } .q-sic { padding-block: 72px; margin-top: 56px; } }

/* le pagine da scoprire */
.q-scopri { padding-block: 110px 0; }
.q-scopri h2 { text-align: center; }
.q-scopri-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.q-sc { display: flex; flex-direction: column; min-height: 300px; padding: 26px; border-radius: 20px; background: var(--panel-2); color: var(--q-ink); text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.q-sc:hover { transform: translateY(-4px); background: var(--panel); box-shadow: var(--ombra-2), 0 0 0 1px var(--sep); }
.q-sc .q-et { color: var(--blu); }
.q-sc h3 { margin: 34px 0 0; font: 400 26px/1.2 var(--f); letter-spacing: -.02em; }
.q-sc p { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.q-freccia { margin-top: auto; align-self: flex-end; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--q-ink); transition: background .2s, color .2s; }
.q-freccia svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.q-sc:hover .q-freccia { background: var(--q-ink); color: var(--bg); }
@media (max-width: 1100px) { .q-scopri-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .q-scopri-g { grid-template-columns: minmax(0, 1fr); } .q-sc { min-height: 0; } .q-scopri { padding-top: 72px; } }

/* invito finale: frase enorme e leggera sul fondo scuro */

/* piè di pagina scuro a colonne */
.q-piede { background: var(--q-scuro); color: rgba(220, 230, 255, .7); padding-block: 64px 40px; border-top: 1px solid rgba(255, 255, 255, .08); }
.q-piede .in { display: block; }
.q-piede-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.q-piede h4 { margin: 0 0 14px; font: 600 14px var(--f); color: rgba(220, 230, 255, .55); }
.q-piede-col a { display: block; padding: 4px 0; font-size: 15px; color: #e6eeff; text-decoration: none; }
.q-piede-col a:hover { color: #fff; text-decoration: underline; }
.q-piede-b { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; }
.q-piede-b .logo { height: 24px; }
.q-piede-l { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.q-piede-l a { color: rgba(220, 230, 255, .75); text-decoration: none; } .q-piede-l a:hover { color: #fff; }
@media (max-width: 640px) { .q-piede-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-piede-l { margin-left: 0; } }

/* pagine interne: stessa aria (sfondo pastello, titoli leggeri, fasce scure) */
.testa-pag { background: radial-gradient(55% 70% at 0% 0%, var(--alone-1), transparent 62%), radial-gradient(50% 60% at 100% 0%, var(--alone-2), transparent 60%), radial-gradient(40% 50% at 70% 100%, var(--alone-3), transparent 62%), var(--bg); padding-block: 84px 56px; }
.testa-pag .macchia { display: none; }
.testa-pag h1 { font-weight: 400; color: var(--q-ink); letter-spacing: -.04em; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.06; }
.testa-pag .sopra { color: var(--blu); }
.testa-pag + .sez, .testa-pag + .indirizzo { padding-top: 40px; }
.sez.prezzi { background: var(--q-scuro); }
.sez.prezzi::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 96px 96px; }
.btn-p { background: var(--navy); }
.r-testo h3, .liv h3 { font-weight: 500; }

/* movimento legato allo scorrimento, per le sezioni nuove */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .q-centro, .q-b, .q-cf, .q-pc, .q-perche-t, .q-sc, .q-sic-c > div, .q-acc-v, .q-seg, .q-fine h2, .q-fine p, .q-fine .q-cta, .q-scopri h2 {
    animation: sale linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .q-b.b2, .q-cf:nth-child(2), .q-pc:nth-of-type(2), .q-sc:nth-child(2), .q-sic-c > div:nth-child(2), .q-acc-v:nth-child(2) { --n: 1; }
  .q-b.b3, .q-cf:nth-child(3), .q-pc:nth-of-type(3), .q-sc:nth-child(3), .q-sic-c > div:nth-child(3), .q-acc-v:nth-child(3) { --n: 2; }
  .q-sc:nth-child(4) { --n: 3; }
  @media (max-width: 960px) { .q-b, .q-cf, .q-pc, .q-sc, .q-sic-c > div, .q-acc-v { --n: 0; } }
  .q-hero { view-timeline: --qh block; }
  .q-hero-t { animation: via-su linear both; animation-timeline: --qh; animation-range: exit 0% exit 90%; }
  .q-collage { animation: via-giu linear both; animation-timeline: --qh; animation-range: exit 0% exit 100%; }
  .q-shot, .q-tel-p { animation: da-destra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
} }

/* la testata sul telefono: il tasto resta su una riga */
.testata .btn.q-btn.testata-cta { white-space: nowrap; flex: none; }

/* ============ revisione 2: testata larga, apertura con griglia e macchie, collage nuovo, AI animata, demo del topic,
   confronto con le X, icone in rilievo anche in scuro, sicurezza con parole vere, testa delle pagine interne ============ */

/* fascia in alto e testata a tutta larghezza, come su Qover */
@media (min-width: 981px) { .q-top .in, .testata .in { max-width: none; } .q-top.gut, .testata.gut { padding-inline: 32px; } }
.q-top a .ai-stellina { margin-right: 2px; }

/* apertura: la griglia e le macchie di colore dell'altro sito, sopra lo sfondo pastello */
.q-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 25%, transparent 78%); }
.q-hero .macchia { z-index: -2; }

/* collage: riunione, ospiti, Action Plan al centro, home, KeyMind */
.q-collage { height: 620px; }
.q-riu { z-index: 2; left: 0; top: 0; width: 262px; padding: 16px; display: grid; gap: 12px; }
.q-riu-h { display: flex; gap: 12px; align-items: center; }
.q-riu-h b { display: block; color: var(--q-ink); font-size: 15px; }
.q-riu-h small { color: var(--muted); font-size: 12.5px; }
.q-data { flex: none; display: grid; place-items: center; width: 44px; height: 46px; border-radius: 12px; background: var(--blu-s); color: var(--blu); line-height: 1; }
.q-data small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blu); }
.q-data b { font-size: 19px; color: var(--blu); }
.q-odg { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink); }
.q-odg small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.q-odg span { display: flex; gap: 8px; align-items: center; }
.q-odg i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 10px var(--f); font-style: normal; }
.q-riu-f { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sep); font-size: 12.5px; font-weight: 600; color: var(--title); }
.q-riu-f svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-stat { top: 2%; right: 0; }
.q-stat div { align-items: center; }
.q-stat .n { line-height: 1; }
.q-stat .inf { display: inline-grid; place-items: center; height: 28px; }
.q-stat .inf svg { width: 40px; height: 20px; fill: none; stroke: var(--q-ink); stroke-width: 2.6; stroke-linecap: round; }
.q-ap { z-index: 3; left: 22%; top: 27%; width: 392px; padding: 14px 16px 10px; }
.q-ap-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.q-ap-h b { color: var(--q-ink); font-size: 15.5px; }
.q-ap-h span { color: var(--muted); font-size: 12px; }
.q-ap-r { display: grid; grid-template-columns: minmax(0, 1fr) 46px 42px 46px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--sep); font-size: 12px; color: var(--ink); }
.q-ap-th { border-top: 0; padding-top: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.q-ap-r .az { min-width: 0; }
.q-ap-r .az code { display: inline-block; margin-right: 6px; font: 700 10.5px var(--mono); color: var(--title); }
.q-ap-r .chi { justify-self: start; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--ass-bg); color: var(--ass-tx); }
.q-ap-r .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.q-ap-r .rit { justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-ap-r .rit.r { color: var(--rif); } .q-ap-r .rit.v { color: var(--com); }
.q-ap-r:not(.q-ap-th):nth-child(-n+5) { box-shadow: inset 3px 0 0 var(--rif); padding-left: 8px; }
.q-win { left: 0; top: 64%; width: 300px; }
.q-ai { position: absolute; z-index: 4; right: 0; top: 55%; width: 286px; }
@media (max-width: 640px) {
  .q-hero { padding-block: 40px 56px; }
  .q-collage { height: auto; display: grid; gap: 14px; }
  .q-collage > * { position: relative !important; inset: auto !important; width: 100% !important; }
  .q-fili, .q-win, .q-riu { display: none; }
  .q-stat { display: none; }
}

/* ---- l'AI: KeyMind al lavoro. Bordo di luce che gira, nome che brilla, stellina che pulsa; la nota viene scandita,
   le parole importanti si accendono, poi le proposte si compongono e una viene accettata (sito.js fa girare il ciclo) ---- */
@property --ai-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ai-gira { to { --ai-ang: 360deg; } }
@keyframes ai-luce { to { background-position: -200% 0; } }
@keyframes ai-stella { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(45deg) scale(1.18); } }
@keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(159, 227, 196, .7); } 100% { box-shadow: 0 0 0 8px rgba(159, 227, 196, 0); } }
@keyframes ai-scan { 0% { top: -30%; } 100% { top: 105%; } }
@keyframes ai-pelle { to { background-position: -200% 0; } }
.ai-nome { background: linear-gradient(90deg, currentColor 0%, #a79df0 30%, #86a9ee 45%, currentColor 60%, currentColor 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-luce 3.2s linear infinite; }
.ai-stellina { display: inline-grid; place-items: center; }
.ai-stellina svg { width: 1em; height: 1em; fill: #a79df0; stroke: none; filter: drop-shadow(0 0 4px rgba(167, 157, 240, .9)); animation: ai-stella 2.4s ease-in-out infinite; }
.mini .ai-stellina svg, .ai-mini .ic svg { width: 16px; height: 16px; }
.ai-grad { background: linear-gradient(90deg, #5f88d8, #8b7fe0, #5cc59a, #5f88d8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-luce 6s linear infinite; }
/* mini card che parlano di AI: bordo di luce che gira */
.ai-mini { isolation: isolate; }
@media (max-width: 640px) { .ai-mini { position: relative; } }
.ai-mini::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ai-ang), transparent 0 50%, #86a9ee 65%, #c4bcf6 78%, #85d8b4 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ai-gira 3.5s linear infinite; }
.mini .ic.ai-stellina { background: linear-gradient(135deg, var(--ese-bg), var(--ass-bg)); }
.ai-voce .ai-nome { font-weight: inherit; color: var(--muted); }
/* il componente */
.ai-km { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: 18px; color: #dfe8ff; font-size: 13px; text-align: left;
  background: radial-gradient(120% 70% at 100% 0%, rgba(139, 127, 224, .28), transparent 55%), radial-gradient(100% 70% at 0% 100%, rgba(95, 136, 216, .25), transparent 60%), #0b1630;
  box-shadow: 0 30px 60px rgba(10, 20, 45, .35); }
.ai-km::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ai-ang), rgba(134, 169, 238, .15) 0 45%, #86a9ee 62%, #c4bcf6 75%, #85d8b4 86%, rgba(134, 169, 238, .15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ai-gira 4s linear infinite; }
.ai-km::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
.ai-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ai-top .ai-stella { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(167, 157, 240, .16); box-shadow: inset 0 0 0 1px rgba(196, 188, 246, .3), 0 0 18px rgba(167, 157, 240, .35); }
.ai-top .ai-stella svg { width: 17px; height: 17px; fill: #c4bcf6; filter: drop-shadow(0 0 5px rgba(196, 188, 246, .9)); animation: ai-stella 2.4s ease-in-out infinite; }
.ai-top .ai-nome { color: #fff; font-size: 15px; }
.ai-stato { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(223, 232, 255, .72); white-space: nowrap; }
.ai-stato i { width: 7px; height: 7px; border-radius: 50%; background: #9fe3c4; animation: ai-pulse 1.3s infinite; }
.ai-nota { position: relative; overflow: hidden; padding: 11px 12px; border-radius: 13px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ai-nota small { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(223, 232, 255, .55); }
.ai-nota p { margin: 0; line-height: 1.5; color: rgba(223, 232, 255, .86); }
.ai-nota mark { background: none; color: inherit; border-radius: 4px; padding: 0 1px; transition: background .5s, color .5s, box-shadow .5s; }
.ai-nota mark.on { color: #fff; background: linear-gradient(90deg, rgba(134, 169, 238, .38), rgba(196, 188, 246, .32)); box-shadow: 0 0 14px rgba(134, 169, 238, .45); }
.ai-scan { position: absolute; left: 0; right: 0; top: -30%; height: 34px; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, rgba(134, 169, 238, .28)); border-bottom: 1.5px solid rgba(196, 188, 246, .95); box-shadow: 0 6px 16px rgba(196, 188, 246, .5); }
.ai-km.leggi .ai-scan { opacity: 1; animation: ai-scan 1.1s ease-in-out 2; }
.ai-props { display: grid; gap: 8px; margin-top: 10px; }
.ai-p { position: relative; display: grid; gap: 3px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(8px); filter: blur(5px); transition: opacity .5s, transform .5s, filter .5s, box-shadow .4s, background .4s; }
.ai-p.su { opacity: 1; transform: none; filter: none; }
.ai-p em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-p .k-agg { color: #a9c1f2; } .ai-p .k-com { color: #85d8b4; } .ai-p .k-new { color: #ecc77c; }
.ai-p .ai-t { min-height: 1.4em; color: #fff; line-height: 1.4; }
.ai-p.pensa .ai-t { color: transparent; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .07) 0%, rgba(196, 188, 246, .3) 50%, rgba(255, 255, 255, .07) 100%); background-size: 200% 100%; animation: ai-pelle 1s linear infinite; }
.ai-p.scrive .ai-t::after { content: ""; display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #c4bcf6; box-shadow: 0 0 8px #c4bcf6; }
.ai-ok { position: absolute; top: 8px; right: 9px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: #0b1630; background: #85d8b4; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ai-p.ok { background: rgba(133, 216, 180, .13); box-shadow: inset 0 0 0 1px rgba(133, 216, 180, .55), 0 0 18px rgba(133, 216, 180, .2); }
.ai-p.ok .ai-ok { opacity: 1; transform: none; }
.ai-km.fine .ai-vis { opacity: 0; transition: opacity .6s; }
.ai-vis { transition: opacity .4s; }
.ai-km.piccolo { padding: 14px; font-size: 12px; }
.ai-km.piccolo .ai-nota p { font-size: 11.5px; }
.ai-km.piccolo .ai-p { padding: 7px 10px; }
@media (prefers-reduced-motion: reduce) {
  .ai-p { opacity: 1; transform: none; filter: none; }
  .ai-km::before, .ai-mini::before, .ai-nome, .ai-grad, .ai-stellina svg, .ai-top .ai-stella svg, .ai-stato i { animation: none; }
}

/* KeyMind nel riquadro giallo e nella pagina Funzioni */
.b3 { gap: 22px; }
.q-b-ai { margin: 4px -6px -6px; }
.f-ai { position: relative; z-index: 1; width: min(420px, 100%); }

/* la card del topic: le azioni si aprono e cambiano stato con il cursore di Laura */
.q-topic .a { display: block; padding: 0; overflow: hidden; }
.q-topic .a-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; }
.q-topic .st { transition: background .3s, color .3s; }
.q-topic .st.cambia { animation: q-cambia .5s ease; }
@keyframes q-cambia { 40% { transform: scale(1.12); } }
.a-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.a-det > div { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 0 10px; font-size: 11.5px; color: #56679a; }
.a.aperta .a-det { grid-template-rows: 1fr; }
.a.aperta .a-det > div { padding: 2px 10px 10px; }
.a.aperta { box-shadow: 0 0 0 1.5px #6a92dc, 0 8px 20px rgba(20, 38, 77, .12); }
.a-det b { color: #14264d; } .a-det .rosso { color: #b4465f; font-weight: 600; }
.a-btn { display: inline-flex; gap: 6px; }
.a-btn i { font-style: normal; font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 99px; background: #f3f7fc; color: #56679a; box-shadow: inset 0 0 0 1px #d3d8f3; transition: transform .15s, box-shadow .2s; }
.a-btn i.car { background: #fbf3dc; color: #8a6100; box-shadow: inset 0 0 0 1px #ecd9a2; }
.a-btn i.com { background: #e2f3ec; color: #236b4d; box-shadow: inset 0 0 0 1px #b7e1cd; }
.a-btn i.premuto { transform: scale(.92); box-shadow: inset 0 0 0 2px #6a92dc; }
.q-tp-h .prog.cambia { animation: q-cambia .5s ease; background: #e2f3ec; color: #236b4d; }
.q-cursore { left: 0; top: 0; right: auto; bottom: auto; z-index: 5; transform: translate(var(--cx, 300px), var(--cy, 260px)); transition: transform .9s cubic-bezier(.45, .05, .2, 1); pointer-events: none; }
.q-cursore.clic { animation: q-clic .3s ease; }
@keyframes q-clic { 50% { scale: .86; } }
.q-onda { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #6a92dc; opacity: 0; }
.q-cursore.clic .q-onda { animation: q-onda .55s ease-out; }
@keyframes q-onda { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }

/* confronto: le altre soluzioni spente, con le X; KeyPlan in evidenza */
.q-cf:not(.top) { background: var(--panel-2); border: 0; box-shadow: none; }
.q-cf.medio { border-style: none; }
.q-cf:not(.top) h3 { color: var(--muted); font-weight: 400; }
.q-cf:not(.top) p, .q-cf:not(.top) li { color: var(--muted); }
.q-cf:not(.top) li::before { content: ""; background: var(--rif-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23b4465f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-cf:not(.top) li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23ec8aa0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .q-cf:not(.top) li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23ec8aa0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* icone in rilievo e scudo: in scuro diventano vetro scuro con il bordo di luce e un alone colorato */
:root { --i3-1: #eef3fd; --i3-2: #b9cdf3; --i3-ic: #5079cf; --i3-sh: rgba(80, 121, 207, .25); --i3-gl: rgba(80, 121, 207, .22);
  --i3b-1: #f3f1fd; --i3b-2: #cfc8f5; --i3b-ic: #6a5fc4; --i3b-sh: rgba(106, 95, 196, .22); --i3b-gl: rgba(106, 95, 196, .2);
  --i3c-1: #eef8f3; --i3c-2: #b8e3cf; --i3c-ic: #2f8a64; --i3c-sh: rgba(47, 138, 100, .2); --i3c-gl: rgba(47, 138, 100, .18);
  --i3-luce: rgba(255, 255, 255, .85); --i3-bordo: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --i3-1: #34508c; --i3-2: #15213d; --i3-ic: #b9cff8; --i3-sh: rgba(0, 0, 0, .5); --i3-gl: rgba(134, 169, 238, .35);
  --i3b-1: #463c8c; --i3b-2: #1b1840; --i3b-ic: #d3ccfa; --i3b-sh: rgba(0, 0, 0, .5); --i3b-gl: rgba(167, 157, 240, .32);
  --i3c-1: #22654f; --i3c-2: #0e2a20; --i3c-ic: #a6e6c9; --i3c-sh: rgba(0, 0, 0, .5); --i3c-gl: rgba(92, 197, 154, .3);
  --i3-luce: rgba(255, 255, 255, .16); --i3-bordo: rgba(255, 255, 255, .14); } }
:root[data-theme="dark"] { --i3-1: #34508c; --i3-2: #15213d; --i3-ic: #b9cff8; --i3-sh: rgba(0, 0, 0, .5); --i3-gl: rgba(134, 169, 238, .35);
  --i3b-1: #463c8c; --i3b-2: #1b1840; --i3b-ic: #d3ccfa; --i3b-sh: rgba(0, 0, 0, .5); --i3b-gl: rgba(167, 157, 240, .32);
  --i3c-1: #22654f; --i3c-2: #0e2a20; --i3c-ic: #a6e6c9; --i3c-sh: rgba(0, 0, 0, .5); --i3c-gl: rgba(92, 197, 154, .3);
  --i3-luce: rgba(255, 255, 255, .16); --i3-bordo: rgba(255, 255, 255, .14); }
.q-ico3, .q-scudo { background: linear-gradient(145deg, var(--i3-1), var(--i3-2)); color: var(--i3-ic);
  box-shadow: inset 0 0 0 1px var(--i3-bordo), inset -6px -8px 14px var(--i3-sh), inset 6px 6px 12px var(--i3-luce), 0 14px 28px var(--i3-gl); }
.q-ico3.b { background: linear-gradient(145deg, var(--i3b-1), var(--i3b-2)); color: var(--i3b-ic); box-shadow: inset 0 0 0 1px var(--i3-bordo), inset -6px -8px 14px var(--i3b-sh), inset 6px 6px 12px var(--i3-luce), 0 14px 28px var(--i3b-gl); }
.q-ico3.c { background: linear-gradient(145deg, var(--i3c-1), var(--i3c-2)); color: var(--i3c-ic); box-shadow: inset 0 0 0 1px var(--i3-bordo), inset -6px -8px 14px var(--i3c-sh), inset 6px 6px 12px var(--i3-luce), 0 14px 28px var(--i3c-gl); }
.q-scudo { box-shadow: inset 0 0 0 1px var(--i3-bordo), inset -10px -12px 20px var(--i3-sh), inset 8px 8px 16px var(--i3-luce), 0 30px 50px var(--i3-gl); }

/* sicurezza: sette parole vere sull'orbita */
.q-giro span { font-size: 12.5px; padding: 7px 12px; }
@media (max-width: 640px) { .q-giro span { font-size: 11px; padding: 5px 9px; } }

/* testa delle pagine interne: testo a sinistra, a destra una schermata vera con due mini card */
.tp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tp-in h1 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); max-width: 14ch; }
.tp-vis { position: relative; padding: 28px 0 40px; }
.tp-shot { border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 60px rgba(20, 38, 77, .18), 0 0 0 1px var(--sep); transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); }
.tp-shot img { display: block; width: 100%; height: auto; }
.tp-vis .mini { z-index: 2; }
.tp-m1 { left: -28px; bottom: 6px; } .tp-m2 { right: -12px; top: 0; }
.tp-vis .mini .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--com-bg); color: var(--com); flex: none; }
.tp-vis .mini .ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.km-vis { padding: 0; }
@media (max-width: 960px) { .tp-in { grid-template-columns: minmax(0, 1fr); gap: 20px; } .tp-vis { max-width: 560px; } .tp-m1 { left: 0; } .tp-m2 { right: 0; } }
@media (max-width: 640px) { .tp-vis:not(.km-vis) { display: none; } }

/* pagina KeyMind */
.km-testa .sopra { display: inline-flex; align-items: center; gap: 8px; }
.km-passi-sez { padding-block: 100px 90px; }
.km-passi { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.km-passi::before { content: ""; position: absolute; left: 12%; right: 12%; top: 30px; height: 2px; background: linear-gradient(90deg, #86a9ee, #c4bcf6, #85d8b4); opacity: .55; }
.km-passi li { position: relative; text-align: center; padding: 0 6px; }
.km-n { position: relative; display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #0b1630; color: #c4bcf6; isolation: isolate; box-shadow: 0 14px 30px rgba(10, 20, 45, .3), 0 0 22px rgba(167, 157, 240, .3); }
.km-n::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ai-ang), transparent 0 45%, #86a9ee 62%, #c4bcf6 75%, #85d8b4 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ai-gira 3.5s linear infinite; }
.km-passi li:nth-child(2) .km-n::before { animation-delay: -.9s; } .km-passi li:nth-child(3) .km-n::before { animation-delay: -1.8s; } .km-passi li:nth-child(4) .km-n::before { animation-delay: -2.7s; }
.km-n svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(196, 188, 246, .7)); }
.km-passi li:nth-child(3) .km-n svg { fill: currentColor; stroke: none; }
.km-passi h3 { margin: 18px 0 0; font: 500 20px/1.25 var(--f); letter-spacing: -.02em; color: var(--q-ink); }
.km-passi p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); }
.km-tipi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.km-tipo { position: relative; isolation: isolate; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .3s; }
.km-tipo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity .4s; background: conic-gradient(from var(--ai-ang), transparent 0 50%, var(--k) 75%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ai-gira 3s linear infinite; }
.km-tipo.acceso::before, .km-tipo:hover::before { opacity: 1; }
.km-tipo.acceso { background: rgba(255, 255, 255, .08); }
.km-tipo em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--k); }
.km-tipo p { margin: 10px 0 0; color: #fff; font-size: 16px; line-height: 1.45; }
.km-tipo small { display: block; margin-top: 10px; color: rgba(223, 232, 255, .62); font-size: 13px; }
.km-chat-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.km-chat-in h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.km-chat { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: 20px; color: #dfe8ff; background: radial-gradient(120% 70% at 100% 0%, rgba(139, 127, 224, .28), transparent 55%), #0b1630; box-shadow: 0 30px 60px rgba(10, 20, 45, .3); }
.km-chat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ai-ang), rgba(134, 169, 238, .15) 0 45%, #86a9ee 62%, #c4bcf6 75%, #85d8b4 86%, rgba(134, 169, 238, .15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ai-gira 4s linear infinite; }
.km-chat-h { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.km-chat-h .ai-stellina svg { width: 18px; height: 18px; }
.km-chat-h b { color: #fff; } .km-chat-h small { margin-left: auto; color: rgba(223, 232, 255, .55); font-size: 12px; }
.km-msg { display: flex; margin-top: 10px; min-height: 42px; }
.km-msg span[data-testo], .km-pensa { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.km-msg.tu { justify-content: flex-end; }
.km-msg.tu span { background: #5079cf; color: #fff; border-bottom-right-radius: 5px; }
.km-msg.ai span[data-testo], .km-pensa { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(196, 188, 246, .25); border-bottom-left-radius: 5px; }
.km-msg span[data-testo]:empty { display: none; }
.km-pensa { display: none; gap: 5px; align-items: center; }
.km-chat.pensa .km-pensa { display: inline-flex; }
.km-pensa i { width: 7px; height: 7px; border-radius: 50%; background: #c4bcf6; animation: km-salta 1s infinite; }
.km-pensa i:nth-child(2) { animation-delay: .15s; } .km-pensa i:nth-child(3) { animation-delay: .3s; }
@keyframes km-salta { 30% { transform: translateY(-5px); opacity: .6; } }
.km-ctrl { padding-block: 100px 20px; }
.km-ctrl-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.km-ctrl-g > div { padding: 28px 24px; border-radius: 22px; background: var(--panel-2); }
.km-ctrl-g .q-ico3 svg { width: 34px; height: 34px; }
.km-ctrl-g h3 { margin: 26px 0 0; font: 400 23px/1.2 var(--f); letter-spacing: -.02em; color: var(--q-ink); }
.km-ctrl-g p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) { .km-passi, .km-tipi, .km-ctrl-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .km-passi::before { display: none; } .km-chat-in { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 640px) { .km-passi, .km-tipi, .km-ctrl-g { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .km-n::before, .km-tipo::before, .km-chat::before, .km-pensa i { animation: none; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .km-passi li, .km-tipo, .km-ctrl-g > div { animation: sale linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .km-passi li:nth-child(2), .km-tipo:nth-child(3n+2), .km-ctrl-g > div:nth-child(2) { --n: 1; }
  .km-passi li:nth-child(3), .km-tipo:nth-child(3n), .km-ctrl-g > div:nth-child(3) { --n: 2; }
  .km-passi li:nth-child(4) { --n: 3; }
  @media (max-width: 960px) { .km-passi li, .km-tipo, .km-ctrl-g > div { --n: 0; } }
} }

/* revisione 2b: collage a due colonne (riunione e Action Plan a sinistra, ospiti e KeyMind a destra);
   KeyMind e le riunioni su tutta la larghezza della griglia scura */
.q-collage { height: 600px; }
.q-riu { left: 0; top: 0; width: 250px; }
.q-ap { left: 0; top: 262px; width: 324px; }
.q-ap-r { grid-template-columns: minmax(0, 1fr) 44px 48px; }
.q-ap-th span { white-space: nowrap; }
.q-ap-r .az code { display: block; margin: 0 0 1px; }
.q-stat { left: auto; right: 0; top: 0; }
.q-ai { right: 0; top: 150px; width: 288px; }
.q-orbita { max-width: 480px; }
.b3 { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 40px; min-height: 0; }
.b3 .q-b-t { flex: 0 0 36%; }
.q-b-ai { flex: 1 1 0; min-width: 0; margin: 0; max-width: 560px; margin-left: auto; }
.b4 { grid-column: 1 / -1; }
.b4 .q-b-stat { flex: 0 0 50%; min-height: 280px; }
@media (max-width: 860px) { .b3 { flex-direction: column; align-items: stretch; } .b3 .q-b-t { flex: none; } .q-b-ai { max-width: none; } }

/* revisione 2c: collage in proporzione alla colonna; Action Plan con codice e gruppo sulla prima riga; KeyMind mai vuoto */
.q-riu { width: 45%; }
.q-ap { width: 52%; top: 270px; }
.q-ap-r { grid-template-columns: minmax(0, 1fr) 52px; }
.q-ap-1 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.q-ap-r .az code { display: inline; margin: 0; }
.q-stat { width: 31%; }
.q-ai { width: 46%; top: 140px; }
.ai-p.attesa { opacity: .4; transform: none; filter: none; }
.ai-p.attesa .ai-t { color: transparent; border-radius: 6px; background: rgba(255, 255, 255, .07); }
/* il cursore come quelli di Figma: la freccia punta il tasto, il nome sta sotto a destra e non copre niente */
.q-topic .q-cursore { display: block; padding: 0; background: none; box-shadow: none; width: 0; height: 0; overflow: visible; }
.q-topic .q-cursore svg { position: absolute; left: -2px; top: -2px; width: 20px; height: 20px; fill: #14264d; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(20, 38, 77, .3)); }
.q-topic .q-cursore::after { content: "Laura"; position: absolute; left: 14px; top: 18px; padding: 3px 9px; border-radius: 99px; background: #14264d; color: #fff; font: 600 11.5px var(--f); white-space: nowrap; box-shadow: 0 6px 12px rgba(20, 38, 77, .25); }
.q-topic .q-cursore { font-size: 0; }

/* chat di KeyMind: sotto la risposta, le pill che aprono le azioni citate nell'Issue Log */
.km-msg.ai { flex-direction: column; align-items: flex-start; gap: 8px; }
.km-cite { display: flex; flex-wrap: wrap; gap: 6px; max-width: 92%; }
.km-cita { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 99px; font-size: 12.5px; color: #dfe8ff; cursor: pointer;
  background: rgba(134, 169, 238, .14); box-shadow: inset 0 0 0 1px rgba(134, 169, 238, .4); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s, background .2s; }
.km-cita code { font: 700 11px var(--mono); padding: 1px 7px; border-radius: 99px; background: rgba(134, 169, 238, .3); color: #fff; }
.km-cita svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.km-cita:hover { background: rgba(134, 169, 238, .26); }
.km-chat.cita .km-cita { opacity: 1; transform: none; }
.km-chat.cita .km-cita:nth-child(2) { transition-delay: .15s; } .km-chat.cita .km-cita:nth-child(3) { transition-delay: .3s; }

/* revisione 2d: il clic di Laura (si rimpicciolisce in fretta e torna normale, fermo sulla punta della freccia), il nome
   più vicino alla freccia; la card del topic non si ricentra quando un'azione si apre (così il cursore non «salta»);
   gli allegati di A.3: card con il quadrato blu e le due montagne bianche */
.q-topic { align-self: flex-start; margin-top: 34px; }
.q-topic .q-cursore { transform-origin: 0 0; }
.q-topic .q-cursore.clic { animation: q-clic2 .32s cubic-bezier(.3, 0, .3, 1); }
@keyframes q-clic2 { 0% { scale: 1; } 35% { scale: .72; } 100% { scale: 1; } }
.q-topic .q-cursore::after { left: 11px; top: 14px; }
/* foto allegate: tessere quadrate, chiare nel tema chiaro e scure nel tema scuro, con l'immagine stilizzata e il nome */
.a-foto { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.a-img { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; width: 64px; aspect-ratio: 1; padding: 8px 6px 6px; border-radius: 14px;
  background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 3px 8px rgba(20, 38, 77, .06); }
.a-img svg { width: 30px; height: 30px; }
.a-img .monti { fill: var(--blu); }
.a-img .sole { fill: var(--car); }
.a-img small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 9.5px var(--f); color: var(--muted); }
.a-img.piu { background: var(--blu-s); box-shadow: 0 0 0 1px var(--linea); }
.a-img.piu b { font: 700 18px/1 var(--f); letter-spacing: -.02em; color: var(--title); }
.a-img.piu small { color: var(--title); }

/* revisione 2e: il logo vero di KeyMind (foglietto azzurro bucato dalla scintilla) al posto delle stelline; pulsa e
   brilla piano. Il riquadro di KeyMind diventa viola. Il clic di Laura: si rimpicciolisce solo la freccia (con il nome),
   attorno alla sua punta, così il cursore non si sposta */
:root { --km-1: #0a9bde; --km-2: #008bcb; --km-glow: rgba(10, 155, 222, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --km-1: #1aa6e6; --km-2: #0a8fcf; } }
:root[data-theme="dark"] { --km-1: #1aa6e6; --km-2: #0a8fcf; }
@keyframes km-pulsa { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--km-glow)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 7px var(--km-glow)); } }
.km-logo { width: 1em; height: 1em; fill: url(#km-grad); stroke: none; animation: km-pulsa 2.6s ease-in-out infinite; }
.ai-stellina svg.km-logo { fill: url(#km-grad); filter: none; animation: km-pulsa 2.6s ease-in-out infinite; }
.mini .ai-stellina svg.km-logo, .ai-mini .ic svg.km-logo { width: 17px; height: 17px; }
.ai-top .ai-stella { width: auto; height: auto; background: none; box-shadow: none; }
.ai-top .ai-stella svg.km-logo { width: 22px; height: 22px; fill: url(#km-grad); animation: km-pulsa 2.6s ease-in-out infinite; }
.km-chat-h .ai-stellina svg.km-logo { width: 20px; height: 20px; }
.km-passi li:nth-child(3) .km-n svg.km-logo { width: 28px; height: 28px; fill: url(#km-grad); }
.mini .ic.ai-stellina { background: rgba(10, 155, 222, .1); }
@media (prefers-reduced-motion: reduce) { .km-logo, .ai-stellina svg.km-logo, .ai-top .ai-stella svg.km-logo { animation: none; } }
.b3 { background: linear-gradient(140deg, #8b7fe0, #6a5fc4 50%, #4b3f9e); --q-ink: #fff; --ink-2: rgba(255, 255, 255, .86); color: #fff; }
.b3 .q-et .km-logo { width: 18px; height: 18px; }
.q-topic .q-cursore.clic { animation: none; }
.q-topic .q-cursore svg { transform-origin: 20.8% 12.5%; }
.q-topic .q-cursore::after { transform-origin: 0 0; }
.q-topic .q-cursore.clic svg, .q-topic .q-cursore.clic::after { animation: q-clic3 .32s cubic-bezier(.3, 0, .3, 1); }
@keyframes q-clic3 { 35% { transform: scale(.72); } }
/* la striscia: la parola che si illumina prende il suo colore e un alone morbido */
.q-striscia .striscia-in span { transition: color .7s ease, text-shadow .7s ease; }
.q-striscia .striscia-in span.luce { color: var(--c, var(--blu)); text-shadow: 0 0 18px color-mix(in srgb, var(--c, var(--blu)) 55%, transparent); }
/* sul viola del riquadro di KeyMind il logo è bianco, con l'alone chiaro (l'azzurro non si leggeva) */
.b3 { --km-glow: rgba(255, 255, 255, .55); }
.b3 .q-et .km-logo { fill: #fff; }

/* riunioni e rapporti: i quattro passi avanzano, il rapporto in Word si compone riga per riga e parte l'invio */
.q-riu-demo { position: relative; flex: 0 0 54%; display: grid; gap: 16px; padding: 4px 0 26px; }
.q-passi4 { display: flex; flex-wrap: wrap; gap: 6px; }
.q-passi4 span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .4s, color .4s, box-shadow .4s; }
.q-passi4 i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px var(--f); font-style: normal; background: rgba(255, 255, 255, .14); transition: background .4s, color .4s; }
.q-passi4 span.fatto { color: rgba(255, 255, 255, .9); }
.q-passi4 span.fatto i { background: #85d8b4; color: #0f2a20; }
.q-passi4 span.ora { color: #fff; background: rgba(134, 169, 238, .3); box-shadow: inset 0 0 0 1.5px #a9c1f2, 0 0 18px rgba(134, 169, 238, .35); }
.q-passi4 span.ora i { background: #fff; color: #183a6b; }
.q-doc { position: relative; padding: 18px 18px 16px; border-radius: 8px; background: #fff; color: #2b3445; font: 11px/1.4 Calibri, "Segoe UI", var(--f); box-shadow: 0 30px 60px rgba(5, 12, 30, .45); transform: rotate(-1.2deg); }
.q-doc-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px solid #1e3b6b; }
.q-doc-h img { height: 22px; width: auto; }
.q-doc-h b { display: block; font-size: 13px; color: #1e3b6b; }
.q-doc-h small { color: #6b7590; }
.q-docx { margin-left: auto; display: grid; place-items: center; width: 26px; height: 30px; border-radius: 4px; background: #2b579a; color: #fff; font: 800 13px var(--f); box-shadow: 0 4px 10px rgba(43, 87, 154, .35); }
.q-doc-th, .q-doc-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px 72px; gap: 8px; align-items: center; padding: 5px 0; }
.q-doc-th { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8592bd; border-bottom: 1px solid #e3e8f2; }
.q-doc-r { border-bottom: 1px solid #eef1f7; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s, background .6s; }
.q-doc-r.su { opacity: 1; transform: none; }
.q-doc-r.nuova { background: #eef4ff; }
.q-doc-r b { color: #1e3b6b; } .q-doc-r em { font-style: normal; font-weight: 700; font-size: 10px; color: #3f63b0; }
.q-doc-r i { justify-self: start; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.q-doc-r i.car { background: #fbf3dc; color: #8a6100; } .q-doc-r i.ass { background: #e8effc; color: #3f63b0; } .q-doc-r i.com { background: #e2f3ec; color: #236b4d; }
.q-doc-righe { display: grid; gap: 5px; margin-top: 10px; }
.q-doc-righe i { display: block; height: 5px; border-radius: 3px; background: #e6eaf2; }
.q-prossima { right: -6px; top: 34px; z-index: 2; }
.q-prossima b { font-size: 20px; }
.q-inviato { position: absolute; z-index: 3; left: -18px; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--panel); color: var(--ink-2); font-size: 12.5px; box-shadow: var(--ombra-2), 0 0 0 1px var(--sep);
  opacity: 0; transform: translateY(10px) scale(.92); transition: opacity .45s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.q-inviato b { display: block; color: var(--q-ink); font-size: 13.5px; }
.q-inviato .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--com-bg); color: var(--com); flex: none; }
.q-inviato .ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.q-riu-demo.inviato .q-inviato { opacity: 1; transform: none; }
.b4 .q-b-t { flex: 0 0 40%; }
@media (max-width: 860px) { .q-riu-demo { flex-basis: auto; width: 100%; } .q-prossima { display: none; } .q-inviato { left: 0; } }
@media (prefers-reduced-motion: reduce) { .q-doc-r { opacity: 1; transform: none; } .q-inviato { opacity: 1; transform: none; } }
.q-inviato { left: auto; right: 14px; bottom: 6px; }
.q-doc-th span { white-space: nowrap; }

/* confronto per punti: le tre card condividono le righe (subgrid), così ogni punto sta alla stessa altezza in tutte.
   Ogni punto ha la sua etichetta; X = manca, segno arancio = in parte, spunta = sì */
.q-conf { grid-template-rows: repeat(8, auto); row-gap: 0; align-items: stretch; }
.q-cf { grid-row: span 8; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.q-cf h3 { max-width: none; align-self: end; }
.q-cf > p { margin: 10px 0 18px; }
.q-cf ul { grid-row: span 6; display: grid; grid-template-rows: subgrid; gap: 0; margin: 0; }
.q-cf li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-content: start; padding: 12px 0; border-top: 1px solid var(--sep); font-size: 14.5px; line-height: 1.4; }
.q-cf.top li { border-top-color: rgba(20, 38, 77, .1); }
.q-cf li::before { grid-row: 1 / span 2; margin-top: 2px; }
.q-cf li small { grid-column: 2; display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.q-cf.top li small { color: #5379c9; }
.q-cf:not(.top) li.parte::before { content: ""; background: var(--car-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' stroke='%23c08a1e' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.q-cf:not(.top) li.parte { color: var(--ink-2); }
@media (max-width: 960px) {
  .q-conf { grid-template-rows: none; row-gap: 24px; }
  .q-cf { grid-row: auto; grid-template-rows: none; }
  .q-cf ul { grid-row: auto; grid-template-rows: none; }
}
.q-cf li::before { grid-row: 2; grid-column: 1; margin-top: 1px; }
.q-cf li small { grid-row: 1; }
.q-conf .q-cf:not(.top) li.parte::before { background: var(--car-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' stroke='%23d9a441' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat !important; }

/* ============ apertura, revisione 3: una storia sola. KeyMind (a sinistra) propone un'azione; il filo la porta
   nell'Action Plan del topic (a destra in alto), il secondo filo nell'email a Paolo Neri (a destra in basso).
   Tutto il gruppo fluttua insieme, così i fili restano attaccati alle card ============ */
.q-collage { height: auto; min-height: 0; }
.q-flusso { position: relative; height: 560px; }
.q-flusso .q-fili { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.q-fili path { fill: none; stroke: var(--q-ink); stroke-opacity: .3; stroke-width: 1.6; stroke-dasharray: 4 6; transition: stroke .4s, stroke-opacity .4s, opacity .4s; }
.q-fili path.f2 { opacity: 0; }
.q-fili path.f2.su { opacity: 1; }
.q-fili path.attivo { stroke: #6a92dc; stroke-opacity: .95; animation: q-formiche .6s linear infinite; }
@keyframes q-formiche { to { stroke-dashoffset: -10; } }
.q-pallino { fill: #6a92dc; opacity: 0; filter: drop-shadow(0 0 6px rgba(106, 146, 220, .9)); transition: opacity .2s; }
.q-pallino.va { opacity: 1; }
.q-tappa { position: absolute; z-index: 3; translate: -50% -50%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; white-space: nowrap;
  background: var(--panel); color: var(--q-ink); font: 600 11.5px var(--f); box-shadow: var(--ombra-2), 0 0 0 1px var(--sep); opacity: 0; scale: .8; transition: opacity .35s, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.q-tappa i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 10px var(--f); font-style: normal; }
.q-tappa.su { opacity: 1; scale: 1; }
.q-flusso .q-ai { position: absolute; z-index: 2; left: 0; top: 24px; width: 50%; }
.q-ap2 { position: absolute; z-index: 2; right: 0; top: 0; width: 40%; padding: 14px 16px 8px; }
.q-ap2 .q-ap-h { flex-wrap: wrap; row-gap: 0; }
.q-nuova { position: relative; }
.q-nuova > .az, .q-nuova > .rit { opacity: 0; transition: opacity .4s; }
.q-nuova.su > .az, .q-nuova.su > .rit { opacity: 1; }
.q-nuova em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--com-bg); color: var(--com-tx); }
.q-slot { position: absolute; inset: 5px 0; display: grid; place-items: center; border-radius: 10px; border: 1.5px dashed var(--linea); color: var(--muted); font-size: 11.5px; font-weight: 600; transition: opacity .3s; }
.q-nuova.su .q-slot { opacity: 0; }
.q-nuova.lampo { animation: q-lampo 1.4s ease-out; border-radius: 10px; }
@keyframes q-lampo { 0% { background: rgba(106, 146, 220, .28); } 100% { background: transparent; } }
.q-mail2 { position: absolute; z-index: 2; right: 3%; top: 330px; width: 40%; padding: 14px 16px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2);
  opacity: 0; translate: 0 14px; scale: .94; transition: opacity .45s, translate .45s cubic-bezier(.3, 1.4, .5, 1), scale .45s cubic-bezier(.3, 1.4, .5, 1); }
.q-mail2.su { opacity: 1; translate: 0 0; scale: 1; }
.q-mail2-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.q-mail2-h b { color: var(--q-ink); font-size: 12.5px; }
.q-mail2-h small { margin-left: auto; color: var(--muted); font-size: 11px; }
.q-mail2-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #1e3b6b; color: #fff; flex: none; }
.q-mail2-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.q-mail2-t { color: var(--q-ink); font-size: 14px; letter-spacing: -.01em; }
.q-osp { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--sep); color: var(--com-tx); font-weight: 600; font-size: 12px; }
.q-osp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) { .q-flusso { max-width: 620px; margin: 0 auto; } }
@media (max-width: 640px) {
  .q-flusso { height: auto; display: grid; gap: 14px; }
  .q-flusso > .q-ai, .q-ap2, .q-mail2 { position: relative; inset: auto; width: 100%; top: auto; right: auto; left: auto; }
  .q-flusso .q-fili, .q-tappa { display: none; }
  .q-mail2 { opacity: 1; translate: none; scale: 1; }
}
/* revisione 3b: la barra rossa solo sulle azioni in ritardo; più aria tra le card; il gruppo centrato nell'apertura */
.q-ap2 .q-ap-r { box-shadow: none; padding-left: 0; }
.q-ap2 .q-ap-r:has(.rit.r) { box-shadow: inset 3px 0 0 var(--rif); padding-left: 8px; }
.q-flusso { height: 500px; }
.q-flusso .q-ai { top: 56px; width: 47%; }
.q-ap2 { width: 39%; }
.q-mail2 { top: 300px; right: 0; width: 41%; }
.q-ap2 .q-ap-r:not(.q-ap-th):nth-child(n) { box-shadow: none; padding-left: 0; }
.q-ap2 .q-ap-r:not(.q-ap-th):nth-child(n):has(.rit.r) { box-shadow: inset 3px 0 0 var(--rif); padding-left: 8px; }
.q-ap2 .q-ap-1 code { white-space: nowrap; }
.q-mail2 { top: 330px; }

/* pagina «Il prodotto»: uno strumento per riga, anteprima e spiegazione che si alternano (come nelle Funzioni).
   La testa ha tre schermate a ventaglio */
.tp-fan { min-height: 360px; }
.fan { position: absolute; width: 74%; border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: 0 24px 50px rgba(20, 38, 77, .18), 0 0 0 1px var(--sep); }
.fan img { display: block; width: 100%; height: auto; }
.fan.f1 { right: 0; top: 0; rotate: 5deg; }
.fan.f2 { right: 12%; top: 48px; rotate: -3deg; }
.fan.f3 { left: 0; top: 110px; rotate: -8deg; z-index: 1; }
.tp-fan .tp-m1 { left: auto; right: 4%; bottom: 0; }
.sez-strumenti { padding-top: 90px; }
.sez-strumenti .righe { margin-top: 64px; }
.pr-riga .r-testo { position: relative; }
.pr-n { display: block; font: 300 56px/1 var(--f); letter-spacing: -.04em; background: var(--q-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.pr-riga .sopra { color: var(--blu); }
.pr-riga h3 { font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1.15 var(--f); letter-spacing: -.03em; color: var(--q-ink); margin-top: 8px; }
.pr-shot { position: relative; z-index: 1; width: 100%; border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 60px rgba(20, 38, 77, .18), 0 0 0 1px var(--sep); }
.pr-shot img { display: block; width: 100%; height: auto; }
.pr-riga .r-vis { padding-block: 36px; }
.pr-riga .r-vis .mini { z-index: 3; }
.pr-m1 { right: 4%; bottom: 0; }
.pr-riga.inv .pr-m1 { right: auto; left: 4%; }
.mini .ic.rosso { background: var(--rif-bg); color: var(--rif); }
.q-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--navy); color: #fff; font: 800 17px var(--f); }
.sez-ind { padding-block: 40px 20px; }
@media (max-width: 960px) { .tp-fan { min-height: 300px; } }
@media (max-width: 640px) { .pr-n { font-size: 44px; } .pr-riga .r-vis .mini { position: relative; inset: auto; margin-top: 12px; } }
.pr-shot picture, .pr-shot picture img { display: block; width: 100%; height: auto; }
.pr-shot picture.scuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pr-shot picture.chiaro { display: none; } :root:not([data-theme="light"]) .pr-shot picture.scuro { display: block; } }
:root[data-theme="dark"] .pr-shot picture.chiaro { display: none; } :root[data-theme="dark"] .pr-shot picture.scuro { display: block; }
@media (max-width: 640px) { .pr-shot { width: min(300px, 100%); margin: 0 auto; border-radius: 26px; } }

/* il pannello inclinato delle teste di pagina: la prospettiva è già nell'immagine (sfondo trasparente), l'ombra la fa il CSS.
   Così non c'è niente che il browser possa raddrizzare quando ridisegna la pagina */
.tp-cotto { position: relative; }
.tp-cotto img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(20, 38, 77, .16)); }
.tp-cotto .sc-img.scuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tp-cotto .sc-img.chiaro { display: none; } :root:not([data-theme="light"]) .tp-cotto .sc-img.scuro { display: block; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); } }
:root[data-theme="dark"] .tp-cotto .sc-img.chiaro { display: none; } :root[data-theme="dark"] .tp-cotto .sc-img.scuro { display: block; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }

/* il nome «KeyMind» che brilla: la base è il colore del testo di dove sta (prima era trasparente, e la parola spariva);
   passa solo una fascia di luce stretta, nell'azzurro e nel viola di KeyMind */
.ai-nome { --n-base: var(--q-ink); background-image: linear-gradient(100deg, var(--n-base) 0 40%, #5fb8f0 47%, #c4bcf6 50%, var(--n-base) 56% 100%); background-size: 260% 100%; background-position: 130% 0; animation: ai-luce2 4s ease-in-out infinite; }
@keyframes ai-luce2 { 0%, 35% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.mini .ai-nome { --n-base: var(--ink); }
.ai-top .ai-nome, .km-chat-h .ai-nome { --n-base: #fff; }
.ai-voce .ai-nome { --n-base: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ai-nome { animation: none; background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; } }

/* l'email sul telefono, essenziale: chi scrive, il progetto, l'azione con la scadenza, il tasto */
.mail-semplice { display: grid; gap: 14px; padding: 20px 16px 22px; }
.mail-semplice .lab { font-size: 9.5px; }
.mail-ciao { margin: 0; font-size: 14px; line-height: 1.45; color: #3d4d7c; }
.mail-semplice .mail-card { display: grid; gap: 6px; padding: 14px; }
.mail-semplice .mail-card code { justify-self: start; font: 700 10.5px var(--mono); background: #e3ebfa; color: #5379c9; border-radius: 999px; padding: 1px 8px; }
.mail-semplice .mail-card b { font-size: 15px; line-height: 1.3; color: #14264d; }
.mail-scad { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #56679a; }
.mail-scad svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mail-semplice .mail-btn { justify-self: center; padding: 10px 22px; font-size: 13px; }

/* ============ apertura, revisione 4: al centro il topic (come nell'altro sito, più piccolo); a destra, più piccoli,
   KeyMind (solo la proposta che viene accettata) e l'email automatica. I fili passano dalla riga nuova del topic ============ */
.q-flusso { height: 520px; }
.q-tp2 { position: absolute; z-index: 2; left: 0; top: 34px; width: 57%; padding: 16px 16px 12px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.q-tp2-et { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.q-tp2-stato { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 11.5px; color: var(--muted); }
.q-tp2-stato .barra { flex: 0 0 34%; height: 6px; }
.q-tp2-stato b { color: var(--rif); }
.q-tp2-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.q-tp2-tit b { color: var(--title); font-size: 16px; letter-spacing: -.02em; }
.q-tp2 .cod { flex: none; font: 700 10.5px var(--mono); color: var(--title); background: var(--blu-s); border-radius: 6px; padding: 1px 6px; }
.q-tp2 .prog { margin-left: auto; font: 700 11px var(--mono); background: var(--car-bg); color: var(--car-tx); border-radius: 6px; padding: 1px 6px; transition: background .3s; }
.q-a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; padding: 8px 10px; border-radius: 11px; background: var(--panel); box-shadow: 0 1px 3px rgba(20, 38, 77, .05); }
.q-a .t { min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.q-a .t small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.q-a .t small em { font-style: normal; color: var(--rif); font-weight: 600; }
.q-a .st { font-size: 10.5px; padding: 2px 8px; white-space: nowrap; }
.q-a .nv { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 0 6px; border-radius: 99px; background: var(--com-bg); color: var(--com-tx); }
.q-a.q-nuova > .cod, .q-a.q-nuova > .t, .q-a.q-nuova > .st { opacity: 0; transition: opacity .4s; }
.q-a.q-nuova.su > .cod, .q-a.q-nuova.su > .t, .q-a.q-nuova.su > .st { opacity: 1; }
.q-a.q-nuova { background: transparent; box-shadow: none; }
.q-a.q-nuova.su { background: var(--panel); box-shadow: 0 1px 3px rgba(20, 38, 77, .05); }
.q-a.q-nuova .q-slot { inset: 0; }
.q-a.q-nuova.lampo { animation: q-lampo2 1.4s ease-out; }
@keyframes q-lampo2 { 0% { box-shadow: 0 0 0 2px #6a92dc, 0 0 20px rgba(106, 146, 220, .5); } 100% { box-shadow: 0 1px 3px rgba(20, 38, 77, .05); } }
.q-flusso .q-ai { left: auto; right: 0; top: 0; width: 38%; }
.ai-km.compatto .ai-props .ai-p:not(:has(.ai-ok)) { display: none; }
.ai-km.compatto { padding: 13px; }
.ai-km.compatto .ai-nota p { font-size: 11px; }
.ai-km.compatto .ai-top { margin-bottom: 9px; }
.q-mail2 { right: 0; top: 318px; width: 38%; }
.q-tappa { padding: 3px; }
.q-tappa i { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .q-flusso { height: auto; }
  .q-tp2, .q-flusso .q-ai, .q-mail2 { position: relative; inset: auto; width: 100%; top: auto; left: auto; right: auto; }
}
/* confronto: etichetta in alto, segno e testo sulla riga sotto (posti fissi, niente scivolamenti) */
.q-cf li small { grid-column: 2; grid-row: 1; }
.q-cf li::before { grid-column: 1; grid-row: 2; }
.q-cf li .tx { grid-column: 2; grid-row: 2; }

/* riunioni e rapporti, revisione 2: una scena per passo. Le scene hanno l'aspetto del portale (chiaro anche in scuro,
   come un documento); il passo in corso ha la sua barra che si riempie */
.q-passi4 span { position: relative; overflow: hidden; }
.q-passi4 span.ora::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #a9c1f2; transform-origin: 0 50%; animation: rd-barra var(--dur, 4s) linear both; }
@keyframes rd-barra { from { transform: scaleX(0); } }
.rd-scena { position: relative; height: 262px; }
.rd-p { position: absolute; inset: 0; padding: 16px 18px; border-radius: 14px; background: #fff; color: #3d4d7c; box-shadow: 0 30px 60px rgba(5, 12, 30, .45);
  opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .45s, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.rd-p.on { opacity: 1; transform: none; }
.rd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid #e8f0f9; }
.rd-h b { color: #14264d; font-size: 14px; }
.rd-h > span { color: #8592bd; font-size: 11.5px; }
.rd-p .cod { flex: none; font: 700 10.5px var(--mono); color: #5379c9; background: #e3ebfa; border-radius: 6px; padding: 1px 6px; }
.rd-tp { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; transition: background .3s; }
.rd-cb { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #c3cbe6; transition: background .25s, box-shadow .25s; }
.rd-cb svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.rd-tp.si { background: #eef4ff; color: #14264d; font-weight: 600; }
.rd-tp.si .rd-cb { background: #5079cf; box-shadow: none; }
.rd-tp.si .rd-cb svg { opacity: 1; transform: none; }
.rd-f { margin-top: auto; font-size: 11.5px; font-weight: 700; color: #5079cf; }
.rd-odg { display: grid; gap: 8px; }
.rd-odg span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #f3f7fc; font-weight: 600; color: #14264d; opacity: 0; transform: translateX(-12px); transition: opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.rd-odg span.su { opacity: 1; transform: none; }
.rd-odg i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #5079cf; color: #fff; font: 700 11px var(--f); font-style: normal; }
.rd-invia { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-av { display: flex; }
.rd-av i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; border: 2px solid #fff; background: #6a5fc4; color: #fff; font: 700 9.5px var(--f); font-style: normal; }
.rd-av i:first-child { margin-left: 0; } .rd-av i:nth-child(2) { background: #5079cf; } .rd-av i:nth-child(3) { background: #2f8a64; } .rd-av i:nth-child(4) { background: #c08a1e; } .rd-av i:last-child { background: #e3ebfa; color: #5379c9; }
.rd-btn { padding: 7px 14px; border-radius: 99px; background: #5079cf; color: #fff; font-weight: 700; font-size: 12px; transition: transform .15s, background .3s; }
.rd-btn.premuto { transform: scale(.92); }
.rd-btn.fatto { background: #2f8a64; }
.rd-live { display: inline-flex; align-items: center; gap: 6px; color: #b4465f !important; font-weight: 700; }
.rd-live i { width: 7px; height: 7px; border-radius: 50%; background: #b4465f; animation: ai-pulse2 1.2s infinite; }
@keyframes ai-pulse2 { 0% { box-shadow: 0 0 0 0 rgba(180, 70, 95, .6); } 100% { box-shadow: 0 0 0 7px rgba(180, 70, 95, 0); } }
.rd-nota { padding: 10px 12px; border-radius: 10px; background: #fbf8ec; box-shadow: inset 3px 0 0 #e0a92e; min-height: 70px; line-height: 1.5; color: #3d4d7c; }
.rd-nota small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6100; margin-bottom: 2px; }
.rd-nota span::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #3d4d7c; animation: rd-cursore .9s steps(1) infinite; }
@keyframes rd-cursore { 50% { opacity: 0; } }
.rd-az { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: #f3f7fc; font-weight: 600; color: #14264d; }
.rd-az .st { margin-left: auto; font-size: 10.5px; padding: 2px 8px; }
.rd-az .nv { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; background: #e2f3ec; color: #236b4d; }
.rd-nuova { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 0 1.5px #85d8b4; }
.rd-nuova.su { opacity: 1; transform: none; }
.rd-doc { padding: 16px 18px; font: 11px/1.4 Calibri, "Segoe UI", var(--f); color: #2b3445; gap: 0; }
.rd-doc .q-doc-h { margin-bottom: 4px; }
.q-riu-demo .st.ass { background: #e8effc; color: #3f63b0; } .q-riu-demo .st.com { background: #e2f3ec; color: #236b4d; }
.q-riu-demo { flex: 0 0 52%; gap: 14px; padding-bottom: 0; }
.q-inviato { right: 12px; bottom: -14px; }
@media (max-width: 640px) { .rd-scena { height: 280px; } .q-passi4 span { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .rd-p, .rd-odg span, .rd-nuova { transition: none; } }

/* ============ pagina «Il prodotto»: i pezzi del portale ingranditi e da provare ============ */
.pw-vis { display: block; padding-block: 24px; }
.pw-prova { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 12px 5px 9px; border-radius: 99px; background: var(--blu-s); color: var(--blu); font-size: 13px; font-weight: 700; position: relative; z-index: 1; }
.pw-prova svg { width: 14px; height: 14px; fill: currentColor; }
.pw { position: relative; z-index: 1; padding: 20px; border-radius: 20px; background: var(--panel); box-shadow: 0 30px 60px rgba(20, 38, 77, .14), 0 0 0 1px var(--sep); font-size: 14.5px; color: var(--ink); }
.pw button { font: inherit; color: inherit; cursor: pointer; }
.pw .cod { flex: none; font: 700 11.5px var(--mono); color: var(--title); background: var(--blu-s); border-radius: 7px; padding: 2px 7px; white-space: nowrap; }
.pw .st { font-size: 12px; padding: 3px 10px; white-space: nowrap; }
.pw .st.cambia { animation: q-cambia .5s ease; }
.pw .rosso, .pw em { color: var(--rif); font-style: normal; font-weight: 600; }
.pw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pw-h b { font-size: 18px; letter-spacing: -.02em; color: var(--q-ink); }
.pw-h span { font-size: 13px; color: var(--muted); }
.pw-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pw-pills button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 0; border-radius: 99px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--sep); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.pw-pills button em { font-style: normal; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--bg); color: var(--muted); }
.pw-pills button[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.pw-pills button[aria-pressed="true"] em { background: rgba(255, 255, 255, .22); color: #fff; }
.pw-pills button:hover:not([aria-pressed="true"]) { background: var(--blu-s); color: var(--blu); }
.pw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pw-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 13px; background: var(--panel-2); transition: opacity .25s, transform .25s; }
.pw-list li.via { display: none; }
.pw-list .t { min-width: 0; font-weight: 600; line-height: 1.3; }
.pw-list .t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pw-list .t small.rosso { color: var(--rif); }
.pw-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.pw-kpi div { padding: 10px 12px; border-radius: 13px; background: var(--panel-2); }
.pw-kpi b { display: block; font: 300 28px/1.1 var(--f); letter-spacing: -.03em; color: var(--q-ink); }
.pw-kpi .r b { color: var(--rif); }
.pw-kpi span { font-size: 12px; color: var(--muted); }
/* Issue Log */
.pw-cerca { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--sep); }
.pw-cerca:focus-within { box-shadow: inset 0 0 0 2px var(--blu); }
.pw-cerca svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.pw-cerca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink); }
.pw-cerca input::placeholder { color: var(--muted); }
.pw-topic li { grid-template-columns: auto minmax(0, 1fr) auto 64px 34px; }
.pw-topic .chip-r { font-size: 11px; }
.pw-bar { height: 6px; border-radius: 99px; background: var(--sep); overflow: hidden; }
.pw-bar i { display: block; height: 100%; border-radius: inherit; background: var(--com); }
.pw-topic .fx { font: 700 12px var(--mono); color: var(--muted); text-align: right; }
.pw-vuoto { margin: 14px 0 4px; text-align: center; color: var(--muted); }
/* Topic */
.pw-tp-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pw-tp-h b { font-size: 19px; letter-spacing: -.02em; color: var(--title); }
.pw-tp-h .prog { margin-left: auto; font: 700 13px var(--mono); background: var(--car-bg); color: var(--car-tx); border-radius: 7px; padding: 2px 8px; }
.pw-tp-h .prog.cambia { animation: q-cambia .5s ease; }
.pw-seg { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: 99px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--sep); }
.pw-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pw-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pw-vista { display: grid; gap: 7px; }
.pw-vista[hidden] { display: none; }
.pw-az { border-radius: 13px; background: var(--panel-2); transition: box-shadow .25s; }
.pw-az.aperta { box-shadow: 0 0 0 1.5px var(--blu), 0 10px 24px rgba(20, 38, 77, .1); background: var(--panel); }
.pw-az-r { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border: 0; background: none; text-align: left; border-radius: inherit; }
.pw-az-r .t { min-width: 0; font-weight: 600; line-height: 1.3; }
.pw-az-r .t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pw-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.pw-det > div { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 13px; font-size: 13px; color: var(--ink-2); }
.pw-az.aperta .pw-det { grid-template-rows: 1fr; }
.pw-az.aperta .pw-det > div { padding: 0 13px 13px; }
.pw-btn { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pw-btn button { padding: 7px 14px; border: 0; border-radius: 99px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; transition: transform .12s; }
.pw-btn button:active { transform: scale(.94); }
.pw-btn button.neu { background: var(--panel-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--sep); }
.pw-det .a-foto { flex-basis: 100%; }
.pw-agg { display: flex; gap: 10px; padding: 11px 13px; border-radius: 13px; background: var(--panel-2); }
.pw-agg .av { flex: none; }
.pw-agg b { font-size: 13.5px; color: var(--q-ink); } .pw-agg small { margin-left: 6px; color: var(--muted); font-size: 12px; }
.pw-agg p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.av.pn { background: #2f8a64; } .av.ag { background: #c08a1e; }
.pw-reset { margin-top: 12px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
/* Action Plan */
.pw-ap { padding: 14px 16px 12px; }
.pw-ap-h, .pw-ap-r { display: grid; grid-template-columns: minmax(0, 1fr) 72px 76px 62px; gap: 10px; align-items: center; }
.pw-ap-h { padding: 4px 4px 10px; border-bottom: 1px solid var(--sep); }
.pw-ap-h button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; margin-left: -6px; border: 0; border-radius: 7px; background: none; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; justify-self: start; }
.pw-ap-h button:hover { background: var(--blu-s); color: var(--blu); }
.pw-ap-h button.on { color: var(--blu); }
.pw-ap-h button.on::after { content: "↑"; font-size: 12px; }
.pw-ap-h button.on.giu::after { content: "↓"; }
.pw-ap-h button:last-child { justify-self: end; }
.pw-ap-r { padding: 10px 4px; border-bottom: 1px solid var(--sep); font-size: 13.5px; background: var(--panel); position: relative; }
.pw-ap-r:last-child { border-bottom: 0; }
.pw-ap-r .az { min-width: 0; font-weight: 600; }
.pw-ap-r .az code { display: block; font: 700 11px var(--mono); color: var(--title); margin-bottom: 1px; }
.pw-ap-r .chi { justify-self: start; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--ass-bg); color: var(--ass-tx); }
.pw-ap-r .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.pw-ap-r .rit { justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.pw-ap-r .rit.r { color: var(--rif); } .pw-ap-r .rit.v { color: var(--com); }
.pw-nota { margin: 10px 4px 0; font-size: 12px; color: var(--muted); }
.pw-nota .rosso { color: var(--rif); } .pw-nota .verde { color: var(--com); }
/* Riunione */
.pw-ri-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pw-ri-g small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pw-ri-s { display: grid; gap: 6px; align-content: start; }
.pw-tpb { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 11px; background: var(--panel-2); font-size: 13px; font-weight: 600; text-align: left; transition: background .2s; }
.pw-tpb:hover { background: var(--blu-s); }
.pw-tpb[aria-pressed="true"] { background: var(--blu-s); color: var(--q-ink); }
.pw-tpb .rd-cb { box-shadow: inset 0 0 0 1.5px var(--linea); }
.pw-tpb[aria-pressed="true"] .rd-cb { background: var(--navy); box-shadow: none; }
.pw-tpb[aria-pressed="true"] .rd-cb svg { opacity: 1; transform: none; }
.pw-ri-o { padding: 12px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--sep); }
.pw-ri-o ol { list-style: none; counter-reset: o; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-ri-o li { counter-increment: o; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel); font-size: 13px; font-weight: 600; }
.pw-ri-o li::before { content: counter(o); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; }
.pw-ri-v { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pw-ri-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--muted); }
.pw-manda { padding: 9px 18px; border: 0; border-radius: 99px; background: var(--navy); color: #fff !important; font-size: 13px; font-weight: 700; transition: background .3s, opacity .3s; }
.pw-manda:disabled { opacity: .45; cursor: not-allowed; }
.pw-manda.fatto { background: var(--com); }
.pw button:focus-visible, .pw-cerca input:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
@media (max-width: 640px) {
  .pw { padding: 14px; font-size: 14px; }
  .pw-topic li { grid-template-columns: auto minmax(0, 1fr) 34px; } .pw-topic .chip-r, .pw-topic .pw-bar { display: none; }
  .pw-ap-h, .pw-ap-r { grid-template-columns: minmax(0, 1fr) 58px 52px; } .pw-ap-h button[data-s="scad"], .pw-ap-r .d { display: none; }
  .pw-ri-g { grid-template-columns: minmax(0, 1fr); }
  .pw-kpi b { font-size: 22px; }
}
@media (max-width: 640px) {
  .pw-topic li > :nth-child(3), .pw-topic .pw-bar { display: none; }
  .pw-ap-h, .pw-ap-r { grid-template-columns: minmax(0, 1fr) 74px 62px; }
  .pw-ap-h button { font-size: 10px; letter-spacing: .02em; }
}

/* ============ niente screenshot: card fatte apposta, con pochi elementi e leggibili ============ */
.hv { position: relative; min-height: 360px; padding: 0; }
.hv-c { position: absolute; z-index: 1; padding: 14px 16px; border-radius: 18px; background: var(--panel); box-shadow: 0 24px 50px rgba(20, 38, 77, .16), 0 0 0 1px var(--sep); font-size: 13.5px; color: var(--ink); }
.hv-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hv-h b { color: var(--q-ink); font-size: 14.5px; letter-spacing: -.01em; }
.hv-h small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.hv-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--blu-s); color: var(--blu); }
.hv-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv .cod, .hv-chat .cod, .hv-osp .cod { flex: none; font: 700 11px var(--mono); color: var(--title); background: var(--blu-s); border-radius: 6px; padding: 1px 6px; }
.hv-r { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sep); }
.hv-r .t { flex: 1; min-width: 0; font-weight: 600; }
.hv-bar { flex: 0 0 52px; height: 6px; border-radius: 99px; background: var(--sep); overflow: hidden; }
.hv-bar i { display: block; height: 100%; background: var(--com); }
.hv-r .fx { font: 700 11.5px var(--mono); color: var(--muted); }
.hv-rit { font-weight: 700; font-variant-numeric: tabular-nums; }
.hv-rit.r { color: var(--rif); } .hv-rit.v { color: var(--com); }
.hv-mini { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.hv-mini b { display: block; color: var(--q-ink); font-size: 13.5px; }
.hv-mini .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--com-bg); color: var(--com); flex: none; }
.hv-mini .ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hv-mini .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--ass-bg); color: var(--ass); }
.hv-mini .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hv-mini .ic.ai-stellina svg.km-logo { width: 18px; height: 18px; }
/* disposizione: una card grande dietro, una davanti, una piccola */
.hv .c1 { left: 0; top: 0; width: 66%; rotate: -2deg; }
.hv .c2 { right: 0; top: 128px; width: 64%; z-index: 2; rotate: 1.5deg; }
.hv .c3 { left: 6%; bottom: 0; z-index: 3; }
.hv-prodotto .c3 { left: 2%; bottom: 6px; }
/* funzioni: email, chat, KeyMind */
.hv-mail { padding: 0; overflow: hidden; width: 56% !important; }
.hv-ban { padding: 10px; text-align: center; background: #1e3b6b; } .hv-ban img { height: 17px; width: auto; }
.hv-mail-c { display: grid; gap: 5px; padding: 14px 16px 16px; background: #edf3fb; color: #3d4d7c; }
.hv-mail-c small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8592bd; }
.hv-mail-c b { font-size: 15px; color: #14264d; line-height: 1.3; }
.hv-mail-c span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #56679a; }
.hv-mail-c span svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.hv-mail-c i { justify-self: start; margin-top: 6px; padding: 6px 13px; border-radius: 99px; background: #5079cf; color: #fff; font: 600 12px var(--f); font-style: normal; }
.hv-funzioni .c2 { top: 112px; width: 62%; }
.hv-msg { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.hv-msg p { margin: 0; max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel-2); font-size: 13px; line-height: 1.4; }
.hv-msg p b { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 1px; }
.hv-msg.mio { justify-content: flex-end; }
.hv-msg.mio p { border-radius: 14px 14px 4px 14px; background: var(--navy); color: #fff; }
.hv-file { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 6px 9px; border-radius: 9px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep); font-size: 12px; font-weight: 600; }
.hv-file svg { width: 14px; height: 14px; fill: none; stroke: var(--blu); stroke-width: 2; stroke-linecap: round; }
.hv-cita { font: 700 11.5px var(--mono); padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
/* su misura: campi e stati */
.hv-campi { display: flex; flex-wrap: wrap; gap: 7px; }
.hv-campo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: var(--panel-2); font-weight: 600; color: var(--ink-2); }
.hv-campo.su { background: var(--com-bg); color: var(--com-tx); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--com) 50%, transparent); }
.hv-campo em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--com); color: #fff; }
.hv-stati { display: flex; flex-wrap: wrap; gap: 7px; }
.hv-stati .st { font-size: 12px; padding: 4px 11px; }
.hv-nuovo { box-shadow: 0 0 0 2px var(--com), 0 0 16px color-mix(in srgb, var(--com) 40%, transparent); }
/* prezzi */
.hv-prezzo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hv-prezzo b { font: 300 40px/1 var(--f); letter-spacing: -.04em; color: var(--q-ink); }
.hv-prezzo span { color: var(--muted); font-size: 12.5px; }
.hv-kv { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--sep); }
.hv-kv span { color: var(--muted); } .hv-kv b { color: var(--q-ink); }
.hv-prezzi .c2 { top: 70px; width: auto; }
.hv-prezzi .c3 { left: auto; right: 4%; bottom: 20px; }
.hv-prezzi .c1 { width: 60%; top: 30px; }
.hv .rd-av i { border-color: var(--panel); }
/* domande */
.hv-qa { width: 72% !important; }
.hv-domande .c2 { top: 120px; }
.hv-q { justify-self: end; margin-left: auto; width: fit-content; max-width: 90%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--navy); color: #fff; font-weight: 600; }
.hv-a { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel-2); line-height: 1.4; }
.hv-qa { display: grid; }
/* home: la chat e la vista dell'ospite, al posto delle schermate */
.q-pan-vis .hv-c { position: relative; width: min(470px, 100%); margin: 0 auto; padding: 18px; font-size: 14px; }
.hv-chat .hv-msg p { font-size: 14px; }
.hv-osp-p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.hv-osp-p b { color: var(--q-ink); }
.hv-oa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; margin-top: 8px; padding: 11px 13px; border-radius: 13px; background: var(--panel-2); }
.hv-oa .t { font-weight: 600; } .hv-oa .t small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.hv-oa .st { font-size: 11.5px; padding: 2px 9px; }
.hv-btn { grid-column: 2 / -1; justify-self: end; padding: 6px 13px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }
.hv-btn.neu { background: var(--panel); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--sep); }
.hv-c .av.pn, .hv-h .av.pn { background: #2f8a64; }
.hv-h .av { width: 30px; height: 30px; }
@media (max-width: 960px) { .hv { min-height: 340px; max-width: 520px; } }
@media (max-width: 640px) { .hv { display: none; } }
.q-pan-vis { padding-block: 52px; }
.q-pan-vis .q-mini1 { bottom: 0; } .q-pan-vis .q-mini2 { top: 0; }

/* ============ Contatti: la richiesta di demo, sul modello di Qover ============ */
.rq { position: relative; isolation: isolate; overflow: hidden; padding-block: 72px 96px; }
.rq::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 40% 30%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 80% 75% at 40% 30%, #000 25%, transparent 78%); }
.rq .macchia { z-index: -2; }
.rq-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.rq-t { position: sticky; top: 120px; }
.rq-t h1 { font: 400 clamp(2.4rem, 4.4vw, 3.7rem)/1.07 var(--f); letter-spacing: -.04em; color: var(--q-ink); margin-top: 12px; }
.rq-t .sopra { color: var(--blu); }
.rq-passi { list-style: none; counter-reset: r; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; }
.rq-passi li { counter-increment: r; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.rq-passi li::before { content: counter(r); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; }
.rq-passi b { color: var(--q-ink); font-size: 16px; } .rq-passi span { color: var(--ink-2); font-size: 14.5px; }
.rq-card { position: relative; padding: 30px; border-radius: 22px; background: var(--panel); box-shadow: 0 30px 70px rgba(20, 38, 77, .14), 0 0 0 1px var(--sep); scroll-margin-top: 110px; }
.rq-form { display: grid; gap: 16px; }
.rq-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rq-campo { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rq-campo label, .rq-campo legend { font-size: 14px; font-weight: 600; color: var(--q-ink); padding: 0; }
.rq-campo label i, .rq-campo legend i, .rq-ok i { font-style: normal; color: var(--rif); margin-left: 2px; }
.rq-campo small { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.rq-campo input, .rq-campo textarea, .rq-url { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--linea); font: 15px/1.4 var(--f); color: var(--ink); transition: box-shadow .2s, background .2s; }
.rq-campo textarea { resize: vertical; min-height: 104px; }
.rq-campo input::placeholder, .rq-campo textarea::placeholder { color: var(--muted); opacity: .8; }
.rq-campo input:focus, .rq-campo textarea:focus, .rq-url:focus-within { outline: 0; background: var(--panel); box-shadow: inset 0 0 0 2px var(--blu), 0 0 0 4px var(--blu-s); }
.rq-url { display: flex; align-items: center; padding: 0 14px 0 0; }
.rq-url input { flex: 1; min-width: 0; box-shadow: none !important; background: none !important; font-family: var(--mono); }
.rq-url span { font: 600 14px var(--mono); color: var(--muted); }
.rq-campo.sbagliato input, .rq-campo.sbagliato .rq-url { box-shadow: inset 0 0 0 2px var(--rif); }
.rq-err { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--rif); }
.rq-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--rif); color: #fff; font-size: 11px; font-weight: 800; }
.rq-err-gen { padding: 12px 14px; border-radius: 12px; background: var(--rif-bg); }
.rq-pill { display: flex; flex-wrap: wrap; gap: 7px; }
.rq-pill label { position: relative; cursor: pointer; }
.rq-pill input { position: absolute; opacity: 0; pointer-events: none; }
.rq-pill span { display: inline-block; padding: 9px 15px; border-radius: 99px; background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--linea); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s, box-shadow .2s; }
.rq-pill label:hover span { box-shadow: inset 0 0 0 1.5px var(--blu); color: var(--blu); }
.rq-pill input:checked + span { background: var(--navy); color: #fff; box-shadow: none; }
.rq-pill input:focus-visible + span { outline: 2px solid var(--blu); outline-offset: 2px; }
.rq-scelta.sbagliato .rq-pill span { box-shadow: inset 0 0 0 1.5px var(--rif); }
.rq-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rq-ok { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.rq-ok input { position: absolute; opacity: 0; pointer-events: none; }
.rq-box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--linea); background: var(--panel-2); transition: background .2s, box-shadow .2s; }
.rq-box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.rq-ok input:checked + .rq-box { background: var(--navy); box-shadow: none; }
.rq-ok input:checked + .rq-box svg { opacity: 1; transform: none; }
.rq-ok input:focus-visible + .rq-box { outline: 2px solid var(--blu); outline-offset: 2px; }
#rq-consenso-e { margin-top: -8px; }
.rq-privacy { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.rq-invia { justify-self: start; margin-top: 4px; }
.rq-invia:disabled { opacity: .7; cursor: progress; }
.rq-invia.va svg { animation: rq-va .8s ease-in-out infinite; }
@keyframes rq-va { 50% { transform: translateX(5px); } }
.rq-fatto { display: grid; gap: 12px; outline: 0; }
.rq-fatto-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--com-bg); color: var(--com); animation: appare .5s ease-out; }
.rq-fatto-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rq-fatto h2 { font-size: 30px; color: var(--q-ink); }
.rq-fatto p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.rq-fatto b { color: var(--q-ink); }
.rq-anteprima { margin-top: 8px; padding: 14px; border-radius: 16px; background: var(--warn-bg); }
.rq-ant-t { font-size: 13.5px !important; color: var(--warn-tx) !important; margin-bottom: 10px !important; }
.rq-ant-t b { color: var(--warn-tx); }
.rq-anteprima iframe { display: block; width: 100%; height: 520px; border: 0; border-radius: 12px; background: #f3f7fc; }
.rq-anteprima details { margin-top: 10px; }
.rq-anteprima summary { font-size: 13.5px; padding: 8px 4px; color: var(--warn-tx); background: none; box-shadow: none; }
.rq-anteprima summary::after { background: rgba(0, 0, 0, .06); color: var(--warn-tx); }
.rq-altra { justify-self: start; margin-top: 6px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.rq-demo { padding-top: 90px; }
.rq-demo h2 { text-align: center; }
.rq-demo-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.rq-demo-g > div { padding: 28px 24px; border-radius: 22px; background: var(--panel-2); }
.rq-demo-g h3 { margin: 26px 0 0; font: 400 23px/1.2 var(--f); letter-spacing: -.02em; color: var(--q-ink); }
.rq-demo-g p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) { .rq-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } .rq-t { position: static; } .rq-demo-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rq { padding-block: 40px 64px; } .rq-card { padding: 20px; } .rq-due { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .rq-demo-g > div { animation: sale linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; } .rq-demo-g > div:nth-child(2) { --n: 1; } .rq-demo-g > div:nth-child(3) { --n: 2; } } }

/* Contatti, ritocchi: il testo parte alla stessa altezza della card; nessuna linguetta sui campi di testo (crescono da
   soli); più aria sotto la domanda dei dipendenti; numeri al centro dei pallini e testo centrato sul pallino */
.rq-t { position: static; top: auto; }
.rq-t .sopra { margin-top: 0; }
textarea { resize: none; }
.rq-campo textarea { overflow: hidden; min-height: 104px; field-sizing: content; }
.rq-scelta .rq-pill { margin-top: 10px; }
.rq-passi li { grid-template-rows: auto auto; row-gap: 2px; align-items: center; }
.rq-passi li::before { grid-row: 1 / span 2; align-self: center; line-height: 1; font-variant-numeric: tabular-nums; }
.rq-passi li b { align-self: end; line-height: 1.3; }
.rq-passi li span { align-self: start; line-height: 1.4; }
.rq-campo textarea { resize: none; }
/* KeyMind piccolo (apertura): lo stato va su una riga sua sotto il nome, così non viene tagliato */
.ai-km.piccolo .ai-top { flex-wrap: wrap; row-gap: 4px; }
.ai-km.piccolo .ai-stato { flex-basis: 100%; margin-left: 30px; }

/* ---- apertura: un pannello solo, la panoramica del progetto (numeri, topic con l'avanzamento, persone).
   Ogni tanto qualcuno aggiorna un topic: la riga si illumina, la barra avanza e in basso compare l'avviso ---- */
.q-pv { position: relative; width: min(580px, 100%); margin-left: auto; padding: 22px 22px 18px; background: var(--panel); border-radius: 22px;
  box-shadow: 0 30px 70px rgba(20, 38, 77, .16), 0 0 0 1px var(--sep); }
.q-pv-h { display: flex; align-items: center; gap: 12px; }
.q-pv-logo { flex: none; width: 42px; height: 42px; border-radius: 11px; object-fit: contain; padding: 5px; background: #fff; box-shadow: 0 0 0 1px var(--sep); }
.q-pv-tit { display: grid; gap: 1px; min-width: 0; }
.q-pv-tit small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.q-pv-tit b { font-size: 17px; letter-spacing: -.02em; color: var(--q-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pv-url { flex: none; margin-left: auto; font: 600 11.5px var(--mono); color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 5px 11px; }
.q-pv-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 10px; }
.q-pv-num div { display: grid; gap: 2px; padding: 12px 14px; background: var(--panel-2); border-radius: 14px; }
.q-pv-num b { font: 600 26px/1.1 var(--f); letter-spacing: -.03em; color: var(--q-ink); font-variant-numeric: tabular-nums; }
.q-pv-num span { font-size: 12.5px; color: var(--muted); }
.q-pv-num .rit b { color: var(--rif); }
.q-pv-l { display: grid; }
.q-pv-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) 84px 38px 56px; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; }
.q-pv-r { position: relative; }
.q-pv-r + .q-pv-r::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--sep); }
.q-pv-r .cod { font: 700 11px var(--mono); text-align: center; color: var(--title); background: var(--blu-s); border-radius: 6px; padding: 3px 0; }
.q-pv-r .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.q-pv-r .t span { min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--q-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pv-r .t em { flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: var(--rif); background: var(--rif-bg); border-radius: 999px; padding: 2px 8px; }
.q-pv-r .t em[hidden] { display: none; }
.q-pv-r .bar { height: 6px; border-radius: 99px; background: var(--card-1); overflow: hidden; }
.q-pv-r .bar i { display: block; height: 100%; border-radius: inherit; background: var(--com); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.q-pv-r .n { font: 600 12.5px var(--mono); text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-pv-r .n b { color: var(--q-ink); }
.q-pv-r .chi { display: flex; justify-content: flex-end; gap: 4px; }
.q-pv i.lb, .q-pv i.mr, .q-pv i.pn, .q-pv i.lf, .q-pv i.sc { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 10px/1 var(--f); font-style: normal; color: #fff; box-shadow: 0 0 0 2px var(--panel); }
.q-pv .lb { background: #5f88d8; } .q-pv .mr { background: #2f8a64; } .q-pv .pn { background: #6a5fc4; } .q-pv .lf { background: #a86d0f; } .q-pv .sc { background: #b4465f; }
.q-pv-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 12px 8px 0; box-shadow: inset 0 1px 0 var(--sep); font-size: 13px; color: var(--muted); }
.q-pv-f b { font-weight: 600; color: var(--title); }
.q-pv-avviso { position: absolute; left: 28px; bottom: -38px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 56px); padding: 8px 16px 8px 8px;
  background: var(--panel); border-radius: 999px; box-shadow: 0 14px 34px rgba(20, 38, 77, .18), 0 0 0 1px var(--sep); font-size: 13px; font-weight: 600; color: var(--q-ink);
  opacity: 0; translate: 0 10px; transition: opacity .35s, translate .35s; pointer-events: none; }
.q-pv-avviso.su { opacity: 1; translate: 0 0; }
.q-pv-avviso span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pv-r.lampo { animation: q-pv-lampo 1.6s ease-out; }
@keyframes q-pv-lampo { 0% { background: rgba(106, 146, 220, .2); } 100% { background: transparent; } }
.q-pv .tic { display: inline-block; animation: q-pv-tic .5s ease-out; }
@keyframes q-pv-tic { 0% { opacity: .2; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; } }
.q-pv .q-pv-num, .q-pv .q-pv-l { transition: opacity .4s; }
.q-pv.da-capo .q-pv-num, .q-pv.da-capo .q-pv-l { opacity: .3; }
.q-pv.da-capo .bar i { transition: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-pv, :root:not([data-theme="light"]) .q-pv-avviso { box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px var(--linea); } }
:root[data-theme="dark"] .q-pv, :root[data-theme="dark"] .q-pv-avviso { box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px var(--linea); }
@media (max-width: 1240px) and (min-width: 961px) { .q-pv-r { grid-template-columns: 40px minmax(0, 1fr) 60px 36px 56px; gap: 10px; } }
@media (max-width: 960px) { .q-pv { margin-inline: auto; } }
@media (max-width: 560px) {
  .q-pv { padding: 16px 14px 14px; border-radius: 18px; }
  .q-pv-url { display: none; }
  .q-pv-num { gap: 8px; margin-top: 14px; }
  .q-pv-num div { padding: 10px; }
  .q-pv-num b { font-size: 21px; }
  .q-pv-num span { font-size: 11.5px; }
  .q-pv-r { grid-template-columns: 34px minmax(0, 1fr) 36px; column-gap: 10px; row-gap: 8px; padding: 10px 4px; }
  .q-pv-r .cod { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .q-pv-r .t { grid-column: 2; grid-row: 1; }
  .q-pv-r .bar { grid-column: 2; grid-row: 2; }
  .q-pv-r .n { grid-column: 3; grid-row: 1 / span 2; }
  .q-pv-r .chi { display: none; }
  .q-pv-r .t span { font-size: 14px; }
  .q-pv-avviso { left: 12px; max-width: calc(100% - 24px); font-size: 12px; }
}
/* misura delle anteprime del «Prodotto»: per un istante niente transizioni, così si legge l'altezza finale */
.pw-misura, .pw-misura * { transition: none !important; animation: none !important; }

/* Action Plan: colonne più larghe, e la freccia dell'ordinamento ha sempre il suo posto (quando compare non spinge niente) */
.pw-ap-h, .pw-ap-r { grid-template-columns: minmax(0, 1fr) 104px 98px 86px; gap: 12px; }
.pw-ap-h button { margin-left: -8px; padding: 5px 8px; gap: 5px; }
.pw-ap-h button::after { content: "↓"; display: inline-block; width: 10px; font-size: 12px; text-align: center; visibility: hidden; }
.pw-ap-h button.on::after { content: "↑"; visibility: visible; }
.pw-ap-h button.on.giu::after { content: "↓"; }
.pw-ap-h button:last-child { margin-left: 0; margin-right: -8px; }
@media (max-width: 1100px) and (min-width: 641px) {
  .pw-ap-h, .pw-ap-r { grid-template-columns: minmax(0, 1fr) 96px 92px 80px; gap: 10px; }
  .pw-ap-h button { font-size: 10.5px; letter-spacing: .03em; }
}
@media (max-width: 640px) {
  .pw-ap-h, .pw-ap-r { grid-template-columns: minmax(0, 1fr) 92px 78px; gap: 10px; }
  .pw-ap-h button { font-size: 10px; letter-spacing: .02em; }
}

/* rapporto in Word (pagina Funzioni): il foglio è ruotato, e i fondi blu delle singole celle dell'intestazione lasciavano
   tra una colonna e l'altra una riga chiara seghettata. Il blu ora è uno solo, su tutta la riga */
.doc table tr:first-child { background: #1e3b6b; }
.doc table tr:first-child th { background: transparent; }
.doc.davanti, .doc.dietro { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* il contatore «+32» in fondo alle teste: una pillola larga quanto il numero, centrata */
.rd-av i:last-child { width: auto; min-width: 26px; padding: 0 6px; border-radius: 999px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* intestazione della pagina Prezzi: niente prezzo, solo chi paga */
.hv-prezzo span { line-height: 1.35; }

/* ---- Condizioni d'uso e Privacy: testo lungo, leggibile ---- */
.legale-testa { padding-bottom: 8px; }
.legale-testa h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.legale-data { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.legale { padding-top: 24px; }
.legale-in { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.legale-breve { position: sticky; top: 96px; padding: 20px 22px; border-radius: 18px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--sep); font-size: 14px; color: var(--ink-2); }
.legale-breve b { display: block; margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--title); }
.legale-breve ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.legale-testo { max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--ink); }
.legale-testo h2 { margin: 40px 0 10px; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--q-ink); scroll-margin-top: 100px; }
.legale-testo h2:first-child { margin-top: 0; }
.legale-testo p { margin: 0 0 12px; }
.legale-testo ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.legale-testo b, .legale-testo strong { color: var(--q-ink); }
.legale-testo a, .legale-breve a { color: var(--title); }
/* i dati ancora da scrivere: in evidenza finché non ci sono */
mark.da-fare { padding: 0 4px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-tx); font-weight: 600; }
@media (max-width: 960px) { .legale-in { grid-template-columns: minmax(0, 1fr); gap: 24px; } .legale-breve { position: static; } }

/* ---- acquisto subito (pagina Prezzi) e link «Acquista» nella testata ---- */
.acq { display: grid; gap: 10px; margin-top: 18px; }
.acq-per { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--sep); }
.acq-per button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 14px var(--f); cursor: pointer; line-height: 1.15; }
.acq-per button small { font-size: 11px; font-weight: 600; color: var(--com); }
.acq-per button[aria-checked="true"] { background: var(--panel); color: var(--title); box-shadow: 0 1px 3px rgba(20, 38, 77, .12); }
.acq .btn { width: 100%; }
.acq-btn[disabled] { opacity: .55; cursor: not-allowed; }
.acq-err { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--rif-bg); color: var(--rif); font-size: 13.5px; }
.acq-nota { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.testata-acq { flex: none; padding: 10px 12px; border-radius: 999px; font: 600 15px var(--f); color: var(--q-ink); text-decoration: none; white-space: nowrap; }
.testata-acq:hover { background: var(--blu-s); color: var(--title); }
@media (max-width: 980px) { .testata-acq { display: none; } .menu a.menu-acq { margin-top: 6px; color: var(--blu); background: var(--panel); } }
.fatto-testa { padding-bottom: 80px; }
.fatto-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--com-bg); color: var(--com); }
.fatto-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fatto-passi { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: f; display: grid; gap: 14px; max-width: 620px; }
.fatto-passi li { counter-increment: f; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.fatto-passi li::before { content: counter(f); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; }
.fatto-passi b { color: var(--q-ink); }
.fatto-passi span { color: var(--ink-2); font-size: 15px; }
.fatto-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.legale-testo h3.legale-h3 { margin: 22px 0 8px; font-size: 1.05rem; font-weight: 600; color: var(--q-ink); }

/* le card nelle righe (Prodotto, Funzioni, Su misura) erano larghe quanto il contenitore, che tagliava ciò che sporge di
   lato: bordo sottile, ombra e alone finivano con un taglio dritto. Il taglio orizzontale lo fa già <main> per la pagina */
.r-vis { overflow: visible; }

/* cursori dei prezzi: il pallino è largo 26 px in tutti i browser, e i numeri sotto stanno esattamente dove il pallino
   assume quel valore (centro del pallino = 13 px + (larghezza − 26 px) × frazione) */
input[type="range"]::-webkit-slider-thumb { box-sizing: border-box; width: 26px; height: 26px; }
input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; }
.scala-n { position: relative; display: block; height: 1.4em; }
.scala-n span { position: absolute; left: calc(13px + (100% - 26px) * (var(--v) - 5) / 95); transform: translateX(-50%); white-space: nowrap; }
.scala-gb span:first-child, .scala-gb span:last-child { left: calc(13px + (100% - 26px) * var(--k) / 7); right: auto; transform: translateX(-50%); }
.cifre[hidden] { display: none; }
.spazio-piu.al-posto { margin-top: 26px; padding: 22px 24px; }
.spazio-piu.al-posto[hidden] { display: none; }

/* «Acquista» nascosto finché il pagamento online non è attivo (la classe la mette sito.js chiedendo a /api/acquista) */
html:not(.acq-attivo) .testata-acq, html:not(.acq-attivo) .menu a.menu-acq, html:not(.acq-attivo) .acq-per, html:not(.acq-attivo) .acq-btn, html:not(.acq-attivo) .acq-nota, html:not(.acq-attivo) .acq-err { display: none !important; }
/* con la chiave di prova di Stripe (sk_test_) il pagamento è finto: si dice chiaramente */
.acq-test { display: none; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-tx); font-size: 13px; line-height: 1.45; text-align: center; }
html.acq-attivo.acq-prova .acq-test { display: block; }
/* «Acquista» porta all'inizio della sezione prezzi: lo spazio della testata fissa non copre il calcolo */
#prezzi { scroll-margin-top: 90px; }
/* testata Prezzi: il «20» e le due righe accanto centrati tra loro (con baseline le righe scendevano sotto il numero) */
.hv-prezzo { align-items: center; gap: 12px; }
.hv-prezzo b { line-height: .9; }
.hv-prezzo span { line-height: 1.35; }