/* ============================================================
   starter-pack-01-intro — deck di slide
   stile: editorial press / warm cream (da cityplanner-biz-home)
   slide 16:9 che scalano con container query units (cqw/cqh)
   ============================================================ */

:root {
  /* palette — cream (default) */
  --bg:        #ebe4d2;
  --bg-soft:   #e0d8c1;
  --bg-code:   #f1ead7;
  --ink:       #16140f;
  --ink-2:     #5f574a;
  --ink-3:     #968d78;
  --rule:      rgba(22, 20, 15, 0.18);
  --rule-soft: rgba(22, 20, 15, 0.10);

  --live:      #2f7a4b;   /* pulse dot */
  --mark:      #c2643f;   /* accent — terracotta/coral */

  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 220ms ease, color 220ms ease;
}

::selection { background: var(--mark); color: var(--bg); }

/* ----------------------------- DECK / STAGE ---------------------------- */

.deck { min-height: 100%; }

.stage-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.stage {
  position: relative;
  width: min(95vw, calc((100vh - 96px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 28px 70px rgba(22, 20, 15, 0.12);
}

.track {
  display: flex;
  height: 100%;
  transition: transform 480ms cubic-bezier(0.4, 0, 0.1, 1);
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  container-type: size;
  padding: 6cqh 6cqw;
  display: flex;
  flex-direction: column;
}

/* ----------------------------- HEAD ---------------------------- */

.slide-head { flex: 0 0 auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 1.45cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
}
.eyebrow b { color: var(--mark); font-weight: 500; }
.eyebrow .sep { color: var(--ink-3); }
.eyebrow .dot {
  width: 1cqw; height: 1cqw;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--live) 50%, transparent); }
  70%  { box-shadow: 0 0 0 1.2cqw color-mix(in oklab, var(--live) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--live) 0%, transparent); }
}

.title {
  margin-top: 2.2cqh;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.6cqw;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.title i { font-style: italic; color: var(--mark); }

/* ----------------------------- COMPARE ---------------------------- */

.compare {
  margin-top: 5.4cqh;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.4cqw;
  align-items: stretch;
  min-height: 0;
}

.panel {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 1.2cqw;
  padding: 3cqw 2.6cqw 2.4cqw;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--bg-soft) 45%, var(--bg));
}
.panel.now  { opacity: 0.92; }
.panel.next {
  border-color: color-mix(in oklab, var(--mark) 55%, var(--rule));
  background: color-mix(in oklab, var(--bg-soft) 70%, var(--bg));
}

.badge {
  position: absolute;
  top: -2.6cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 5.2cqw; height: 5.2cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 2.4cqw;
  font-weight: 500;
  background: var(--bg);
  color: var(--ink-3);
  border: 1.5px solid var(--ink-3);
}
.badge.filled {
  background: var(--mark);
  color: var(--bg);
  border-color: var(--mark);
}

.panel-kick {
  margin-top: 1.6cqw;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.2cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-kick.accent { color: var(--mark); }

.panel-title {
  margin-top: 0.6cqw;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4cqw;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.panel-title em { font-style: italic; color: var(--mark); }
.panel.now .panel-title { color: var(--ink-2); }
.panel.now .panel-title em { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--rule); }

/* left apps grid */
.apps-grid {
  margin-top: 2.6cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4cqw;
}
.appcard {
  border: 1px solid var(--rule-soft);
  border-radius: 0.9cqw;
  background: var(--bg-code);
  padding: 1.6cqw 1cqw;
  text-align: center;
}
.appcard .nm {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7cqw;
  color: var(--ink);
}
.appcard .tag {
  display: inline-block;
  margin-top: 0.9cqw;
  font-family: var(--font-mono);
  font-size: 1.15cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 0.3cqw 1cqw;
}

/* right agent + uses */
.agentrow {
  margin-top: 2.6cqw;
  flex: 1 1 auto;
  display: flex;
  gap: 2cqw;
  align-items: center;
  min-height: 0;
}
.agent {
  flex: 0 0 46%;
  border: 1.5px solid var(--mark);
  border-radius: 1cqw;
  background: var(--bg-code);
  padding: 2cqw 1.8cqw;
}
.agent .kick {
  font-family: var(--font-mono);
  font-size: 1.2cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mark);
}
.agent .nm {
  margin-top: 0.5cqw;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.2cqw;
  line-height: 1.1;
  color: var(--ink);
}
.agent .meta {
  margin-top: 1cqw;
  font-size: 1.4cqw;
  line-height: 1.4;
  color: var(--ink-2);
}
.uses {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
}
.use {
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.use .ar {
  font-family: var(--font-mono);
  font-size: 2cqw;
  color: var(--mark);
  line-height: 1;
}
.use .chip {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.7cqw 1.4cqw;
  background: var(--bg);
}

.panel-cap {
  margin-top: auto;
  padding-top: 1.8cqw;
  text-align: center;
  font-size: 1.35cqw;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.panel-cap b { color: var(--ink-2); font-weight: 500; }
.panel.next .panel-cap b { color: var(--ink); }

/* middle jump */
.salto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
}
.salto-lbl {
  font-family: var(--font-mono);
  font-size: 1.1cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.salto-ar {
  font-family: var(--font-mono);
  font-size: 3.4cqw;
  color: var(--mark);
  line-height: 1;
}

/* ----------------------------- TIMELINE (slide scala 10 livelli) ---------------------------- */

.timeline {
  margin-top: 4.4cqh;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.4cqw;
  min-height: 0;
}

/* fasi: tre bracket che raggruppano i gradini */
.phases {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.6cqw;
  align-items: end;
}
.phase {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 0.85cqw;
  border-bottom: 1.5px solid var(--pc);
  color: var(--pc);
}
.phase span {
  font-family: var(--font-mono);
  font-size: 1.1cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}
.phase::before,
.phase::after {
  content: "";
  position: absolute;
  bottom: -0.8cqw;
  width: 1.5px;
  height: 0.8cqw;
  background: var(--pc);
}
.phase::before { left: 0; }
.phase::after  { right: 0; }
.phase--a { --pc: var(--ink-3); grid-column: 1 / 5; }
.phase--b { --pc: var(--mark);  grid-column: 5 / 7; }
.phase--c { --pc: var(--ink-2); grid-column: 7 / 11; }
.phase--b span { font-weight: 600; }

/* la scala: 10 gradini numerati su un binario orizzontale */
.levels {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.6cqw;
  align-items: start;
}
/* binario che passa dietro i nodi (centro nodo = name 4.4 + margin 1 + raggio 2) */
.levels::before {
  content: "";
  position: absolute;
  top: 7.4cqw;
  left: 4%;
  right: 4%;
  height: 1.5px;
  background: var(--rule);
  z-index: 0;
}

.lvl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.2cqw;
}
.lvl-name {
  height: 4.4cqw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.15cqw;
  line-height: 1.2;
  color: var(--ink);
}
.lvl-node {
  margin: 1cqw 0;
  width: 4cqw;
  height: 4cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1.85cqw;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--bg);
  border: 1.5px solid var(--ink-3);
  position: relative;
  z-index: 1;
}
.lvl-desc {
  font-size: 0.95cqw;
  line-height: 1.3;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* gradino 5 — stato attuale (oggi) */
.lvl.is-now .lvl-name { color: var(--ink); font-weight: 600; }
.lvl.is-now .lvl-node { border-color: var(--ink); color: var(--ink); border-width: 2px; }
.lvl.is-now .lvl-desc { color: var(--ink-2); }
.now-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -135%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.95cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  padding: 0.25cqw 1cqw;
}

/* gradino 6 — il salto (target, coral come la slide 3) */
.lvl.is-next .lvl-name { color: var(--mark); font-weight: 600; }
.lvl.is-next .lvl-node { background: var(--mark); color: var(--bg); border-color: var(--mark); }
.lvl.is-next .lvl-desc { color: var(--ink-2); }
.turn {
  position: absolute;
  top: 4cqw;
  left: 64%;
  font-family: var(--font-mono);
  font-size: 2cqw;
  line-height: 1;
  color: var(--mark);
  z-index: 2;
}

/* gradino 9 — neoDesktop (l'hub nominato nella scala) */
.lvl.is-hub .lvl-name { color: var(--mark); font-weight: 600; }
.lvl.is-hub .lvl-node { border-color: var(--mark); color: var(--mark); }

/* ----------------------------- COME SI COMINCIA (slide 5 — stile compare/slide 3) ---------------------------- */

/* variante senza badge: meno margine in alto (non c'è lo sbalzo del cerchio) */
.compare.lean { margin-top: 3.2cqh; }
.compare.lean .panel { padding-top: 2.6cqw; }

/* tag "gratis" inline nel kicker del pannello INIT */
.kick-tag {
  display: inline-block;
  margin-left: 0.5cqw;
  font-family: var(--font-mono);
  font-size: 1cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--mark);
  border-radius: 999px;
  padding: 0.2cqw 0.9cqw;
  vertical-align: 0.15em;
}

/* checklist dei dettagli dentro ai pannelli */
.plist {
  margin-top: 2.4cqw;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
}
.plist li {
  display: grid;
  grid-template-columns: 1.8cqw 1fr;
  gap: 0.9cqw;
  align-items: baseline;
  font-size: 1.5cqw;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}
.plist .mk {
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  color: var(--mark);
  line-height: 1;
}
.panel.next .plist li { color: var(--ink); }

/* strip degli strumenti base installati nella INIT */
.tools {
  margin-top: 2cqw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7cqw;
}
.tools-lbl {
  flex: 0 0 100%;
  margin-bottom: 0.5cqw;
  font-family: var(--font-mono);
  font-size: 1.05cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tool {
  font-family: var(--font-mono);
  font-size: 1.2cqw;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4cqw 1cqw;
  white-space: nowrap;
}
.tool.opt {
  border-style: dashed;
  color: var(--ink-3);
}

/* box dei servizi inclusi nello starter pack (pannello destro) */
.spgrid {
  margin-top: 2.4cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2cqw;
}
.spbox {
  border: 1px solid var(--rule);
  border-radius: 1cqw;
  background: var(--bg);
  padding: 1.5cqw 1.4cqw;
  display: flex;
  flex-direction: column;
  gap: 0.55cqw;
}
.spi {
  width: 2.6cqw;
  height: 2.6cqw;
  color: var(--mark);
  display: block;
  margin-bottom: 0.4cqw;
}
.spbox-k {
  font-family: var(--font-mono);
  font-size: 1.4cqw;
  color: var(--ink);
  line-height: 1.1;
}
.spbox-s {
  font-size: 1.15cqw;
  line-height: 1.35;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ----------------------------- TRIO (slide tre memorie) ---------------------------- */

.trio {
  margin-top: 6cqh;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqw;
  align-items: stretch;
  min-height: 0;
}
.mem {
  border: 1px solid var(--rule);
  border-radius: 1.2cqw;
  background: color-mix(in oklab, var(--bg-soft) 55%, var(--bg));
  padding: 3cqw 2.6cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4cqw;
}
.mem-n {
  font-family: var(--font-mono);
  font-size: 1.3cqw;
  letter-spacing: 0.12em;
  color: var(--mark);
}
.mem-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.7cqw;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  padding-bottom: 1.4cqw;
  border-bottom: 1px solid var(--rule);
}
.mem-d {
  font-size: 1.55cqw;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ----------------------------- TRUST (slide i tuoi dati restano tuoi) ---------------------------- */

.trust {
  margin-top: 5cqh;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.2cqw;
  width: min(82cqw, 100%);
  margin-left: auto;
  margin-right: auto;
  min-height: 0;
}
.tpoint {
  display: grid;
  grid-template-columns: 4cqw 1fr;
  gap: 2cqw;
  align-items: start;
  padding-bottom: 2.2cqw;
  border-bottom: 1px solid var(--rule-soft);
}
.tpoint:last-child { border-bottom: 0; padding-bottom: 0; }
.tpoint-mark {
  font-size: 2.4cqw;
  line-height: 1;
  color: var(--mark);
  justify-self: center;
}
.tpoint-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2cqw;
  line-height: 1.1;
  color: var(--ink);
}
.tpoint-d {
  margin-top: 0.8cqw;
  font-size: 1.55cqw;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ----------------------------- CTA / EARLY LIST (slide finale) ---------------------------- */

.cta {
  margin-top: 4cqh;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
}
.cta-card {
  width: min(64cqw, 100%);
  border: 1.5px solid color-mix(in oklab, var(--mark) 50%, var(--rule));
  border-radius: 1.4cqw;
  background: color-mix(in oklab, var(--bg-soft) 70%, var(--bg));
  padding: 3.2cqw 3.4cqw 2.8cqw;
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
}
.cta-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 1.15cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--mark);
  border-radius: 999px;
  padding: 0.35cqw 1.2cqw;
}
.cta-lead {
  font-size: 1.7cqw;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cta-lead b { color: var(--mark); font-weight: 600; }

.cta-form { display: flex; flex-direction: column; gap: 1.4cqw; }
.cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1cqw 1.2cqw;
  align-items: center;
}
.cta-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 1.1cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cta-input {
  font-family: var(--font-body);
  font-size: 1.55cqw;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0.7cqw;
  padding: 1cqw 1.3cqw;
  width: 100%;
}
.cta-input::placeholder { color: var(--ink-3); }
.cta-input:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
  border-color: var(--mark);
}
.cta-input[aria-invalid="true"] { border-color: var(--mark); }

.cta-btn {
  font-family: var(--font-mono);
  font-size: 1.4cqw;
  letter-spacing: 0.02em;
  color: var(--bg);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0.7cqw;
  padding: 1cqw 1.8cqw;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cta-btn:hover { background: var(--mark); border-color: var(--mark); }
.cta-btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.cta-btn:disabled { opacity: 0.5; cursor: default; }

.cta-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9cqw;
  align-items: start;
  font-size: 1.3cqw;
  line-height: 1.4;
  color: var(--ink-2);
  cursor: pointer;
}
.cta-consent input {
  width: 1.7cqw;
  height: 1.7cqw;
  margin-top: 0.1cqw;
  accent-color: var(--mark);
}
.cta-consent input:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

.cta-status {
  min-height: 1.7cqw;
  font-family: var(--font-mono);
  font-size: 1.25cqw;
  line-height: 1.4;
  color: var(--ink-2);
}
.cta-status.is-ok { color: var(--live); }
.cta-status.is-err { color: var(--mark); }

.cta-note {
  font-size: 1.1cqw;
  line-height: 1.4;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* honeypot: fuori schermo, invisibile e non focusabile via tastiera */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------- FOOT ---------------------------- */

.slide-foot {
  flex: 0 0 auto;
  margin-top: 1.8cqh;
  padding-top: 1.2cqw;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.25cqw;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}

/* ----------------------------- CHAT (slide intro) ---------------------------- */

.chat-grid {
  margin-top: 2.4cqh;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5cqw;
  min-height: 0;
}
.chat {
  border: 1px solid var(--rule);
  border-radius: 1.2cqw;
  background: color-mix(in oklab, var(--bg-soft) 45%, var(--bg));
  padding: 1.5cqw 1.8cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  justify-content: center;
}
.msg {
  display: grid;
  grid-template-columns: 6.5cqw 1fr;
  gap: 1.2cqw;
  align-items: start;
}
.msg.bot {
  padding-top: 1.3cqw;
  border-top: 1px solid var(--rule-soft);
}
.msg .who {
  font-family: var(--font-mono);
  font-size: 1.1cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.4cqw;
}
.msg.you .who { color: var(--ink-3); }
.msg.bot .who { color: var(--mark); }
.msg .txt { line-height: 1.4; text-wrap: pretty; }
.msg.you .txt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.85cqw;
  color: var(--ink);
}
.msg.bot .txt {
  font-size: 1.5cqw;
  color: var(--ink-2);
}

/* corpo risposta con file-chip prodotti */
.bot-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}
.files {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5cqw;
  min-width: 0;
}
.file {
  display: inline-flex;
  align-items: center;
  gap: 0.4cqw;
  font-family: var(--font-mono);
  font-size: 1cqw;
  line-height: 1;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0.5cqw;
  padding: 0.45cqw 0.7cqw;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.file .fi { font-size: 1.1cqw; line-height: 1; flex: 0 0 auto; }
.file .fi-img {
  width: 1.4cqw;
  height: 1.4cqw;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 2px;
  display: block;
}
.file .fi-svg {
  width: 1.3cqw;
  height: 1.3cqw;
  flex: 0 0 auto;
  display: block;
}
.file.web .fi-svg { color: var(--live); }
.file .fn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file.sheet { flex: 0 0 auto; color: var(--ink-2); }
.file.sheet .fi { color: var(--mark); font-weight: 600; }
.file.xlsx .fi { color: var(--live); }
.file.pdf .fi { color: var(--mark); }
.file.web .fi { color: var(--live); font-weight: 500; }
.file.qgis .fi { color: var(--ink-2); font-weight: 500; }

/* ----------------------------- CHAT SOLO (slide reveal) ---------------------------- */

.chat-solo {
  margin-top: 3cqh;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
}
.chat.big {
  width: min(78cqw, 100%);
  gap: 1.8cqw;
  padding: 3cqw 3.4cqw;
  justify-content: flex-start;
}
.chat.big .msg { grid-template-columns: 8cqw 1fr; gap: 1.6cqw; }
.chat.big .msg.bot { padding-top: 1.8cqw; }
.chat.big .msg.you .txt { font-size: 2.15cqw; }
.chat.big .msg.bot .txt { font-size: 1.6cqw; }
.chat.big .bot-body { gap: 1.1cqw; }

/* riga-reveal: la frase chiave della risposta */
.reveal {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.3cqw;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.reveal i { font-style: italic; color: var(--mark); }

/* concept-chip (analoghi ai file-chip ma testuali) */
.keys {
  margin-top: 0.4cqw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
}
.key {
  font-family: var(--font-mono);
  font-size: 1.2cqw;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5cqw 1.2cqw;
  white-space: nowrap;
}

/* ----------------------------- LANGUAGE SWITCH (i18n) ---------------------------- */

.langsw {
  position: absolute;
  left: 26px;
  bottom: 20px;
  display: flex;
  gap: 4px;
  z-index: 10;
}
.lang-opt {
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.lang-opt:hover { color: var(--ink); border-color: var(--ink); }
.lang-opt[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.lang-opt:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

/* ----------------------------- PAGER (quadratini, dentro la slide) ---------------------------- */

.pager {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: flex;
  gap: 9px;
  z-index: 10;
}
.pg-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.pg-dot:hover { border-color: var(--ink); }
.pg-dot[aria-current="true"] {
  background: var(--mark);
  border-color: var(--mark);
}
.pg-dot:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
  .eyebrow .dot { animation: none; }
}