/* Demo interattive: dashboard RFM, attribuzione, test A/B, vetrina delle demo.
   Caricato solo nelle pagine che contengono una demo. Stessi token del sito. */

.demo-dash .dash {
  max-width:1240px;
  margin:auto;
  background:white;
  border:1px solid #dce0d2;
  padding:30px 34px;
  border-radius:6px;
  box-shadow:0 20px 60px #35422408
}

.dash-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:24px
}

.dash-toolbar>span:first-child {
  display:flex;
  align-items:center;
  gap:10px
}

.dash-badge {
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 10px
}

.dash-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:22px
}

.dash-kpis-5 {
  grid-template-columns:repeat(5,minmax(0,1fr))
}

.kpi {
  background:white;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}

.kpi-value {
  font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.kpi-label {
  font-size:11px;
  color:var(--muted);
  line-height:1.4
}

.dash-explain {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:24px
}

.dash-explain>div {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted)
}

.dash-explain b {
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--sage);
  color:var(--ink);
  font-weight:500
}

.dash-explain strong {
  display:block;
  color:var(--ink);
  font-weight:500
}

.dash-tabs,.segmented {
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:4px;
  padding:3px;
  gap:3px;
  background:#f7f8f3
}

.dash-tabs {
  margin-bottom:18px
}

.dash-tabs button,.segmented button {
  border:0;
  background:none;
  padding:8px 14px;
  border-radius:3px;
  font-size:12.5px;
  min-height:40px
}

.dash-tabs [aria-pressed="true"],.segmented [aria-pressed="true"] {
  background:var(--ink);
  color:white
}

.dash-controls {
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px;
  align-items:flex-end;
  margin-bottom:10px
}

.control {
  display:flex;
  flex-direction:column;
  gap:6px
}

.control-label {
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted)
}

.control select {
  min-height:46px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:0 12px;
  background:white;
  font-size:13px
}

.control-actions {
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px
}

.button-ghost {
  border:1px solid var(--ink);
  background:white;
  border-radius:3px;
  padding:0 16px;
  font-size:12px;
  min-height:44px
}

.button-ghost:hover {
  background:#f4f6ef
}

.model-help {
  font-size:12.5px;
  color:var(--muted);
  margin:6px 0 14px;
  max-width:820px
}

.dash-insight {
  background:#eef2e8;
  border-left:3px solid #84986b;
  padding:14px 18px;
  font-size:14px;
  line-height:1.55;
  margin:0 0 24px;
  border-radius:0 4px 4px 0
}

.dash-insight:empty {
  display:none
}

.dash-data {
  margin-top:26px;
  border-top:1px solid var(--line);
  padding-top:14px
}

.dash-data summary {
  cursor:pointer;
  font-size:13px;
  min-height:40px;
  display:flex;
  align-items:center
}

.dash-data table caption,.dash-live table caption {
  text-align:left;
  font-size:11px;
  color:var(--muted);
  padding-bottom:8px
}

.demo-dash .demo-notice {
  font-size:10.5px;
  color:var(--muted);
  border-top:1px solid #ededeb;
  padding-top:14px;
  margin:20px 0 0
}

/* ——— Barre condivise ——— */

.bars {
  display:flex;
  flex-direction:column;
  gap:8px
}

.bar-row {
  display:grid;
  grid-template-columns:minmax(110px,38%) 1fr auto;
  gap:12px;
  align-items:center;
  font-size:12.5px;
  border-radius:3px;
  padding:2px 4px
}

.bar-row[role="button"] {
  cursor:pointer
}

.bar-row[role="button"]:hover,.bar-row.is-active {
  background:#f4f6ef
}

.bar-label {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.bar-track {
  position:relative;
  height:10px;
  background:#f0f1eb;
  border-radius:5px;
  overflow:hidden
}

.bar-fill {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:#87987a;
  border-radius:5px;
  transition:width .7s cubic-bezier(.2,.7,.2,1)
}

.bar-compare {
  top:auto;
  height:45%;
  background:var(--ink)
}

.bar-row .bar-fill:not(.bar-compare) {
  height:100%
}

.bar-value {
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  white-space:nowrap
}

.tone-minus .bar-fill { background:#d9b9a6 }
.tone-result .bar-fill { background:#5d7051 }
.tone-base .bar-fill { background:#b9c3ad }
.tone-int-0 .bar-fill, .int-0 { background:#6f8a5f }
.tone-int-1 .bar-fill, .int-1 { background:#8e82af }
.tone-int-2 .bar-fill, .int-2 { background:#c49a6c }
.tone-int-3 .bar-fill, .int-3 { background:#6d8aa8 }
.bar-row.is-active .bar-label { font-weight:550 }

/* ——— Linee ——— */

.chart-lines {
  width:100%;
  height:auto;
  overflow:visible
}

.chart-lines .grid,.bubbles .grid {
  stroke:#eceee7;
  stroke-width:1
}

.chart-lines .tick,.bubbles .tick {
  font-size:10px;
  fill:#7a7f74;
  font-variant-numeric:tabular-nums
}

.chart-lines .line {
  fill:none;
  stroke-width:2.2;
  stroke-linejoin:round;
  stroke-linecap:round
}

.chart-lines .s1 { stroke:#5d7051 }
.chart-lines .s2 { stroke:#8e82af }
.chart-lines .sa { stroke:#c49a6c }
.chart-lines .sb { stroke:#5d7051 }
.chart-lines .dot { stroke:white; stroke-width:2 }
.chart-lines .dot.s1,.chart-lines .dot.sb { fill:#5d7051 }
.chart-lines .dot.s2 { fill:#8e82af }
.chart-lines .dot.sa { fill:#c49a6c }
.chart-lines .band { stroke:none; opacity:.16 }
.chart-lines .band.sa { fill:#c49a6c }
.chart-lines .band.sb { fill:#5d7051 }

/* ——— RFM ——— */

.rfm-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:28px;
  align-items:start
}

.rfm-chart {
  margin:0
}

.bubbles {
  width:100%;
  height:auto;
  overflow:visible
}

.bubbles .axis {
  font-size:10px;
  fill:#62675f
}

.bubble {
  cursor:pointer;
  outline:none;
  transition:opacity .3s
}

.bubble-shape {
  stroke:white;
  stroke-width:2;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.2),stroke .2s;
  transform-box:fill-box;
  transform-origin:center
}

.bubbles.is-entering .bubble-shape {
  transform:scale(.01)
}

.bubble-label {
  font-size:10.5px;
  fill:var(--ink);
  pointer-events:none;
  paint-order:stroke;
  stroke:white;
  stroke-width:3px;
  stroke-linejoin:round
}

.aov-1 .bubble-shape,.aov-1 .swatch,.swatch.aov-1 { fill:#dce5d2; background:#dce5d2 }
.aov-2 .bubble-shape,.aov-2 .swatch,.swatch.aov-2 { fill:#bfcdb1; background:#bfcdb1 }
.aov-3 .bubble-shape,.aov-3 .swatch,.swatch.aov-3 { fill:#9fb18f; background:#9fb18f }
.aov-4 .bubble-shape,.aov-4 .swatch,.swatch.aov-4 { fill:#7d936d; background:#7d936d }
.aov-5 .bubble-shape,.aov-5 .swatch,.swatch.aov-5 { fill:#5a6f4c; background:#5a6f4c }

.bubbles:has(.bubble.is-active) .bubble:not(.is-active) {
  opacity:.45
}

.bubble.is-active .bubble-shape,.bubble:focus-visible .bubble-shape {
  stroke:var(--ink);
  stroke-width:2.5
}

.bubble:hover .bubble-shape {
  transform:scale(1.06)
}

.rfm-chart figcaption {
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-size:11px;
  color:var(--muted);
  margin-top:8px
}

.legend-color::before,.legend-size::before {
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:-1px;
  background:linear-gradient(90deg,#dce5d2,#5a6f4c)
}

.legend-size::before {
  background:#bfcdb1;
  width:14px;
  height:14px;
  vertical-align:-3px
}

.rfm-list {
  display:flex;
  flex-direction:column;
  gap:2px
}

.rfm-list-head {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:10px;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 10px 6px
}

.rfm-item {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:10px;
  align-items:center;
  border:1px solid transparent;
  background:none;
  text-align:left;
  padding:7px 10px;
  border-radius:4px;
  font-size:12.5px;
  min-height:40px
}

.rfm-item:hover {
  background:#f7f8f3
}

.rfm-item.is-active {
  border-color:var(--ink);
  background:#f4f6ef
}

.rfm-item-name {
  display:flex;
  align-items:center;
  gap:8px
}

.swatch {
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block
}

.rfm-item-bar {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.rfm-item-bar .share {
  display:block;
  height:6px;
  width:0;
  max-width:70%;
  border-radius:3px;
  background:#9fb18f;
  transition:width .7s cubic-bezier(.2,.7,.2,1)
}

.rfm-item-bar.is-revenue .share {
  background:#8e82af
}

.rfm-item-bar b {
  font-weight:450
}

.interest-intro {
  font-size:13px;
  color:var(--muted)
}

.interest-legend {
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:11px;
  margin-bottom:12px
}

.interest-legend span {
  background:none!important;
  display:flex;
  align-items:center;
  gap:6px
}

.interest-legend span::before {
  content:'';
  width:10px;
  height:10px;
  border-radius:2px;
  background:inherit
}

.interest-legend .int-0::before { background:#6f8a5f }
.interest-legend .int-1::before { background:#8e82af }
.interest-legend .int-2::before { background:#c49a6c }
.interest-legend .int-3::before { background:#6d8aa8 }

.interest-matrix {
  display:flex;
  flex-direction:column;
  gap:6px
}

.interest-row {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid transparent;
  border-radius:4px;
  background:none;
  padding:4px 8px;
  text-align:left;
  font-size:12px;
  min-height:36px
}

.interest-row.is-active {
  border-color:var(--ink)
}

.interest-stack {
  display:flex;
  height:14px;
  border-radius:3px;
  overflow:hidden
}

.interest-stack i {
  display:block;
  flex-basis:0
}

.rfm-detail {
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:26px
}

.detail-head {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  margin-bottom:16px
}

.detail-head h3 {
  margin:0;
  font-size:clamp(24px,2.4vw,32px)
}

.detail-head p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  flex-basis:100%
}

.detail-head .swatch {
  width:14px;
  height:14px
}

.detail-kpis {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:22px
}

.detail-kpis .kpi-value {
  font-size:clamp(17px,1.6vw,22px)
}

.detail-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}

.rfm-detail h4,.attr-detail h4 {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px
}

.detail-opportunity {
  margin-top:22px;
  background:#eef2e8;
  border-radius:4px;
  padding:16px 20px
}

.detail-opportunity p {
  margin:0;
  font-size:15px
}

.rfm-flow {
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:26px
}

.rfm-flow>h3,.attr-detail>h3,.ab-results h3,.attr-compare h3 {
  font-size:20px;
  margin-bottom:16px
}

.flow-steps {
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  counter-reset:none
}

.flow-steps li {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 16px 14px 52px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:13px
}

.flow-steps li+li::before {
  content:'→';
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%);
  background:white;
  font-size:14px
}

.flow-steps li.is-off {
  opacity:.45
}

.flow-steps b {
  font-weight:500;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted)
}

.flow-n {
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--ink);
  color:white;
  display:grid;
  place-items:center;
  font-size:12px
}

.flow-columns {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:30px;
  align-items:start
}

.flow-rule {
  font-size:12px;
  color:var(--muted);
  margin-top:12px
}

.flow-blocked {
  background:#f6ede7;
  border-left:3px solid #c08c6c;
  padding:14px 18px;
  font-size:14px;
  border-radius:0 4px 4px 0
}

.flow-templates {
  border:0;
  padding:0;
  margin:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.flow-templates legend {
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:8px;
  padding:0
}

.flow-templates label {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  font-size:12.5px;
  cursor:pointer;
  min-height:40px
}

.flow-templates label:has(input:checked) {
  border-color:var(--ink);
  background:#f4f6ef
}

.flow-templates input {
  accent-color:var(--ink);
  margin:0
}

.flow-templates small {
  font-size:10px;
  color:#5d7051
}

.email-preview {
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 10px 30px #2023200d
}

.email-head {
  margin:0;
  padding:12px 16px;
  background:#f7f8f3;
  border-bottom:1px solid var(--line);
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:4px
}

.email-head div {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px
}

.email-head dt {
  color:var(--muted)
}

.email-head dd {
  margin:0
}

.email-head b {
  font-weight:550
}

.email-body {
  padding:18px 20px 16px;
  font-size:13.5px
}

.email-products {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:12px 0 16px
}

.email-product {
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:11.5px
}

.email-product b {
  font-weight:500;
  overflow-wrap:anywhere;
  hyphens:auto
}

.email-product span:last-child {
  color:var(--muted)
}

.email-art {
  aspect-ratio:1;
  background:#f0f1eb;
  border-radius:4px;
  display:block;
  overflow:hidden
}

.email-art .object {
  padding:10%
}

.email-cta {
  display:inline-block;
  background:var(--ink);
  color:white;
  padding:10px 16px;
  border-radius:3px;
  font-size:12.5px;
  margin-bottom:14px
}

.email-body small {
  display:block;
  font-size:10.5px;
  color:var(--muted)
}

.flow-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:14px
}

.flow-status {
  font-size:12.5px;
  color:#4f5c44;
  margin:0;
  flex:1 1 240px
}

/* ——— Attribuzione ——— */

.attr-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;
  align-items:start;
  margin-bottom:26px
}

.compare-legend {
  display:flex;
  gap:16px;
  font-size:11px;
  color:var(--muted);
  margin:0 0 10px
}

.compare-legend span::before {
  content:'';
  display:inline-block;
  width:14px;
  height:6px;
  border-radius:3px;
  margin-right:6px;
  vertical-align:1px
}

.lg-visits::before { background:#c9cfbf }
.lg-revenue::before { background:var(--ink) }
.lg-orders::before { background:#8e82af }

.attr-compare .bar-fill:not(.bar-compare) {
  background:#c9cfbf
}

.attr-compare .bar-row {
  grid-template-columns:minmax(120px,42%) 1fr 74px
}

.attr-compare .bar-value {
  font-size:11px;
  text-align:right
}

.funnel {
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:8px;
  margin-bottom:20px
}

.funnel-step {
  flex:1 1 100px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.funnel-step span {
  font-size:11px;
  color:var(--muted)
}

.funnel-step b {
  font-weight:450;
  font-size:20px;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums
}

.funnel-step small {
  font-size:10.5px;
  color:#5d7051
}

.funnel-arrow {
  align-self:center;
  color:var(--muted)
}

.attr-daily {
  margin-bottom:18px
}

.order-paths {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px
}

.order-paths li {
  border:1px solid var(--line);
  border-radius:4px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.order-meta {
  display:flex;
  gap:10px;
  font-size:11.5px;
  color:var(--muted)
}

.order-meta b {
  color:var(--ink);
  font-weight:500
}

.order-value {
  margin-left:auto;
  color:var(--ink)
}

.order-path {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px
}

.touch {
  display:inline-flex;
  flex-direction:column;
  font-size:11.5px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px 9px;
  background:white;
  line-height:1.3
}

.touch small {
  font-size:9px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em
}

.touch.is-credited {
  border-color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--ink)
}

.touch-order {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
  justify-content:center
}

.touch-gap {
  color:var(--muted)
}

.attr-table table {
  width:100%;
  border-collapse:collapse;
  font-size:12.5px
}

.attr-table th,.attr-table td {
  padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line);
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.attr-table th[scope="row"],.attr-table thead th:first-child {
  text-align:left
}

.attr-table thead th {
  font-weight:500;
  font-size:10.5px;
  color:var(--muted)
}

.attr-table tr.is-active {
  background:#f4f6ef
}

.row-pick {
  border:0;
  background:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:12.5px;
  min-height:32px;
  text-align:left
}

.row-pick[aria-pressed="true"] {
  font-weight:550
}

.row-pick i,.touch[class*="dot-"]::before {
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0
}

.dot-google,.tone-google .bar-fill.bar-compare { background:#4f7cbe }
.dot-meta,.tone-meta .bar-fill.bar-compare { background:#8e82af }
.dot-email,.tone-email .bar-fill.bar-compare { background:#c49a6c }
.dot-organic,.tone-organic .bar-fill.bar-compare { background:#5d7051 }
.dot-ai,.tone-ai .bar-fill.bar-compare { background:#3f8f8a }
.dot-direct,.tone-direct .bar-fill.bar-compare { background:#7a7f74 }
.touch[class*="dot-"] { background:white }
.touch.dot-google { border-left:3px solid #4f7cbe }
.touch.dot-meta { border-left:3px solid #8e82af }
.touch.dot-email { border-left:3px solid #c49a6c }
.touch.dot-organic { border-left:3px solid #5d7051 }
.touch.dot-ai { border-left:3px solid #3f8f8a }
.touch.dot-direct { border-left:3px solid #7a7f74 }

.declared-note {
  font-size:11.5px;
  color:var(--muted);
  margin:12px 0 0;
  max-width:900px
}

.attr-limits {
  margin-top:26px;
  background:#f7f8f3;
  border-radius:4px;
  padding:20px 24px
}

.attr-limits h3 {
  font-size:17px;
  margin-bottom:10px
}

.attr-limits ul {
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:var(--muted);
  columns:2;
  column-gap:34px
}

.attr-limits li {
  break-inside:avoid;
  margin-bottom:8px;
  line-height:1.55
}

.muted {
  color:var(--muted);
  font-size:13px
}

/* ——— A/B ——— */

.ab-stage {
  display:grid;
  grid-template-columns:minmax(160px,.5fr) minmax(0,2fr);
  gap:24px;
  align-items:stretch;
  margin-bottom:22px
}

.ab-product {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px
}

.ab-product b {
  font-weight:500;
  font-size:15px
}

.ab-product-art,.ab-mini-art {
  aspect-ratio:1;
  border-radius:4px;
  display:block;
  overflow:hidden;
  background:#f0f1eb
}

.ab-product-art .object,.ab-mini-art .object {
  padding:9%
}

.ab-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.ab-strategy {
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px;
  transition:border-color .3s,box-shadow .3s
}

.ab-strategy.is-winner {
  border-color:#5d7051;
  box-shadow:0 0 0 2px #5d705133
}

.ab-strategy.is-even {
  border-style:dashed
}

.ab-strategy-head {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px
}

.ab-strategy-head b {
  font-weight:500;
  font-size:13.5px
}

.ab-strategy-head p {
  font-size:12px;
  color:var(--muted);
  margin:2px 0 0;
  line-height:1.45
}

.ab-tag {
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:white;
  font-weight:600;
  font-size:13px
}

.ab-a .ab-tag { background:#c49a6c }
.ab-b .ab-tag { background:#5d7051 }

.ab-also {
  display:block;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px
}

.ab-minis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}

.ab-mini {
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:11px
}

.ab-mini b {
  font-weight:500
}

.ab-mini span:last-child {
  color:var(--muted)
}

.ab-planned {
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px
}

.ab-progress {
  height:6px;
  background:#f0f1eb;
  border-radius:3px;
  overflow:hidden;
  margin-bottom:16px
}

.ab-progress i {
  display:block;
  height:100%;
  width:0;
  background:var(--ink);
  transition:width .2s linear
}

.ab-results {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:30px;
  align-items:start
}

.ab-revenue {
  margin-bottom:18px
}

.ab-revenue .tone-sa .bar-fill { background:#c49a6c }
.ab-revenue .tone-sb .bar-fill { background:#5d7051 }

.ab-results table {
  width:100%;
  border-collapse:collapse;
  font-size:12.5px
}

.ab-results th,.ab-results td {
  padding:8px 10px 8px 0;
  border-bottom:1px solid var(--line);
  text-align:right;
  font-variant-numeric:tabular-nums
}

.ab-results th[scope="row"] {
  text-align:left;
  font-weight:450
}

.ab-results thead th {
  font-weight:500;
  color:var(--muted);
  font-size:11px
}

.ab-how ul {
  columns:3
}

/* ——— Vetrina delle demo ——— */

.demo-index {
  padding-top:40px
}

.demo-cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}

.demo-card {
  border:1px solid var(--line);
  border-radius:6px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:white;
  transition:transform .25s,box-shadow .25s,border-color .25s
}

.demo-card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 40px #2023200f;
  border-color:#c9cfbf
}

.demo-card b {
  font-weight:500;
  font-size:19px;
  letter-spacing:-.025em;
  line-height:1.3
}

.demo-card>span:not(.number):not(.text-link) {
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  flex:1
}

.demo-card .number {
  margin:0
}

.demo-card .text-link {
  border-bottom:1px solid var(--ink);
  align-self:flex-start;
  min-height:36px
}

.demo-preview {
  width:100%;
  aspect-ratio:240/140;
  height:auto;
  background:#f4f6ef;
  border-radius:4px;
  display:block
}

.preview-rfm line,.preview-attr line {
  stroke:#c9cfbf
}

.preview-rfm circle {
  stroke:white;
  stroke-width:2;
  opacity:.92
}

.preview-rfm .tone-a { fill:#5a6f4c }
.preview-rfm .tone-b { fill:#9fb18f }
.preview-rfm .tone-c { fill:#7d936d }
.preview-rfm .tone-d { fill:#bfcdb1 }
.preview-rfm .tone-e { fill:#dce5d2 }
.preview-attr .v { fill:#c9cfbf }
.preview-attr .tone-a { fill:#4f7cbe }
.preview-attr .tone-b { fill:#8e82af }
.preview-attr .tone-c { fill:#c49a6c }
.preview-attr .tone-d { fill:#5d7051 }
.preview-ab .band-a { fill:#c49a6c; opacity:.18 }
.preview-ab .band-b { fill:#5d7051; opacity:.18 }
.preview-ab .line-a,.preview-ab .line-b { fill:none; stroke-width:3; stroke-linecap:round }
.preview-ab .line-a { stroke:#c49a6c }
.preview-ab .line-b { stroke:#5d7051 }

.preview-search {
  position:relative;
  aspect-ratio:240/140;
  background:#f4f6ef;
  border-radius:4px;
  display:block;
  overflow:hidden
}

.preview-query {
  position:absolute;
  left:12%;
  top:18%;
  width:58%;
  background:white;
  border-radius:4px;
  padding:7px 10px;
  font-size:12px;
  box-shadow:0 6px 18px #20232012;
  display:flex;
  gap:8px;
  align-items:center
}

.preview-query i {
  width:10px;
  height:10px;
  border:1.5px solid currentColor;
  border-radius:50%
}

.preview-chip {
  position:absolute;
  right:10%;
  top:24%;
  background:var(--lime);
  border-radius:20px;
  padding:4px 10px;
  font-size:11px
}

.preview-grid {
  position:absolute;
  left:12%;
  right:12%;
  bottom:12%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  height:34%
}

.preview-grid i {
  background:#dce5d2;
  border-radius:3px
}

.chip-demo {
  background:var(--lime);
  border-color:#d5dc9c
}

@media(max-width:1100px) {
  .demo-cards { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rfm-grid,.attr-grid,.ab-results { grid-template-columns:1fr }
  .dash-kpis-5 { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .detail-kpis { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

@media(max-width:900px) {
  .demo-dash .dash { padding:22px 18px }
  .dash-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dash-explain { grid-template-columns:1fr }
  .detail-columns,.flow-columns { grid-template-columns:1fr }
  .flow-steps { grid-template-columns:1fr }
  .flow-steps li+li::before { content:'↓'; left:24px; top:-14px; transform:none }
  .ab-stage { grid-template-columns:1fr }
  .ab-product { flex-direction:row; align-items:center; gap:12px }
  .ab-product-art { width:72px; flex-shrink:0 }
  .attr-limits ul,.ab-how ul { columns:1 }
}

@media(max-width:600px) {
  .demo-cards { grid-template-columns:1fr }
  .dash-kpis-5,.detail-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dash-kpis > :last-child:nth-child(odd),.detail-kpis > :last-child:nth-child(odd) { grid-column:1 / -1 }
  .order-path { flex-direction:column; align-items:flex-start; gap:2px }
  .order-path .touch-gap { transform:rotate(90deg); margin-left:12px }
  .order-path .touch-gap:nth-last-child(2),.order-path .touch-order { display:none }
  .ab-split { grid-template-columns:1fr }
  .rfm-item,.rfm-list-head { grid-template-columns:1.3fr 1fr 1fr; font-size:11.5px; padding-left:6px; padding-right:6px }
  .bar-row { grid-template-columns:minmax(90px,40%) 1fr auto; font-size:11.5px }
  .bar-label { white-space:normal; overflow:visible; line-height:1.25; overflow-wrap:anywhere; hyphens:auto }
  .attr-compare .bar-row { grid-template-columns:minmax(90px,40%) 1fr 64px }
  .email-products { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .interest-row { grid-template-columns:96px 1fr }
  .dash-controls { gap:12px }
  .segmented { flex-wrap:wrap }
}

@media(prefers-reduced-motion:reduce) {
  .bar-fill,.rfm-item-bar .share,.bubble-shape,.ab-progress i,.demo-card { transition:none }
}

.ab-placeholder {
  position:relative;
  height:230px;
  background:repeating-linear-gradient(0deg,#f4f5f0 0 1px,transparent 1px 46px);
  border-radius:4px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px
}

.ab-placeholder p {
  max-width:300px;
  font-size:13px;
  color:var(--muted);
  background:white;
  padding:10px 14px;
  border-radius:4px;
  position:relative
}

.ab-placeholder span {
  position:absolute;
  left:8%;
  right:8%;
  height:2px;
  border-radius:2px;
  opacity:.5
}

.ab-line-a { top:62%; background:#c49a6c }
.ab-line-b { top:48%; background:#5d7051 }

/* ——— Chat degli assistenti ——— */

.chat-dash {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(220px,.8fr);
  gap:28px;
  align-items:start
}

.chat-dash .demo-notice {
  grid-column:1/-1
}

.chat-window {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fbfbf8
}

.demo-chat-gestionale .chat-window {
  background:#f6f6f9
}

.chat-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:white;
  font-size:12px
}

.chat-top>span:first-child {
  display:flex;
  align-items:center;
  gap:8px
}

.chat-body {
  height:430px;
  overflow-y:auto;
  padding:18px 16px;
  scroll-behavior:smooth
}

.chat-log {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px
}

.msg {
  max-width:88%;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:14px;
  line-height:1.55;
  animation:msg-in .35s ease-out
}

.msg>span:not(.msg-who):not(.chat-link):not(.chat-handoff) {
  padding:10px 14px;
  border-radius:14px
}

.msg-who {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.04em
}

.msg-user {
  align-self:flex-end;
  align-items:flex-end
}

.msg-user>span:last-child {
  background:var(--ink);
  color:white;
  border-bottom-right-radius:4px
}

.msg-bot>span:nth-child(2) {
  background:white;
  border:1px solid var(--line);
  border-bottom-left-radius:4px
}

.msg-typing i {
  display:inline-block;
  width:6px;
  height:6px;
  margin:0 2px;
  border-radius:50%;
  background:#9aa08f;
  animation:typing 1s infinite ease-in-out
}

.msg-typing i:nth-child(2) { animation-delay:.15s }
.msg-typing i:nth-child(3) { animation-delay:.3s }

@keyframes typing {
  0%, 80%, 100% { transform:translateY(0); opacity:.5 }
  40% { transform:translateY(-4px); opacity:1 }
}

@keyframes msg-in {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:none }
}

.chat-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:8px;
  margin-top:4px
}

.chat-card {
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12px
}

.chat-card b {
  font-weight:500
}

.chat-card-art {
  aspect-ratio:4/3;
  border-radius:5px;
  overflow:hidden;
  display:block;
  background:#f0f1eb
}

.chat-card-art .object {
  padding:6%
}

.chat-add {
  margin-top:4px;
  border:1px solid var(--ink);
  background:white;
  border-radius:3px;
  min-height:32px;
  font-size:11.5px
}

.chat-add:disabled {
  border-color:#5d7051;
  color:#4f5c44
}

.chat-table {
  margin-top:4px;
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  border-top:1px solid var(--line)
}

.chat-table table {
  width:100%;
  border-collapse:collapse;
  font-size:12.5px
}

.chat-table th,.chat-table td {
  padding:8px 10px;
  border-bottom:1px solid #eef0ea;
  text-align:left
}

.chat-table thead th {
  font-size:10.5px;
  color:var(--muted);
  font-weight:500
}

.chat-table th[scope="row"] {
  font-weight:450
}

.chat-link {
  font-size:12px;
  color:#4f5c44
}

.chat-handoff {
  align-self:flex-start;
  background:var(--lime);
  border-radius:20px;
  padding:6px 12px;
  font-size:12px
}

.chat-confirm {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:4px
}

.chat-done {
  margin:0;
  font-size:13px;
  color:#4f5c44;
  flex-basis:100%
}

.chat-status {
  margin:0;
  font-size:12.5px;
  color:var(--muted)
}

.chat-prompts {
  border-top:1px solid var(--line);
  background:white;
  padding:12px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center
}

.chat-prompts>span {
  font-size:11px;
  color:var(--muted);
  width:100%
}

.chat-chip {
  border:1px solid var(--line);
  border-radius:16px;
  background:white;
  padding:7px 12px;
  font-size:12.5px;
  min-height:36px;
  text-align:left
}

.chat-chip:hover:not(:disabled) {
  border-color:var(--ink)
}

.chat-chip:disabled,.chat-restart:disabled {
  opacity:.5
}

.chat-restart {
  border:0;
  background:none;
  font-size:12px;
  color:var(--muted);
  min-height:36px
}

.chat-notes {
  background:#f7f8f3;
  border-radius:6px;
  padding:22px 24px
}

.chat-notes h3 {
  font-size:18px
}

.chat-notes ul {
  margin:0;
  padding:0;
  list-style:none
}

.chat-notes li {
  position:relative;
  padding:8px 0 8px 24px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  line-height:1.5
}

.chat-notes li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:#5d7051
}

.preview-chat .u { fill:var(--ink) }
.preview-chat .b { fill:white; stroke:#d9ddd2 }
.preview-chat .card { fill:#dce5d2 }
.preview-chat .row { stroke:#e3e6dd }
.preview-chat .ok { fill:var(--ink) }
.preview-chat .no { fill:white; stroke:var(--ink) }

@media(max-width:900px) {
  .chat-dash { grid-template-columns:1fr }
  .chat-body { height:380px }
}

@media(prefers-reduced-motion:reduce) {
  .msg { animation:none }
  .msg-typing i { animation:none }
}

/* ——— Arricchimento e FAQ ——— */

.enrich-grid {
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);
  gap:30px;
  align-items:start
}

.enrich-card {
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  position:sticky;
  top:110px
}

.enrich-art {
  display:block;
  aspect-ratio:4/3;
  border-radius:6px;
  background:#e4e5e1;
  overflow:hidden;
  margin-bottom:12px
}

.enrich-art .object {
  padding:8%
}

.enrich-fields {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px
}

.enrich-fields div {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  font-size:12.5px;
  padding:6px 8px;
  border-radius:3px;
  transition:background .4s
}

.enrich-fields dt {
  color:var(--muted)
}

.enrich-fields dd {
  margin:0;
  word-break:break-word
}

.enrich-fields .is-filled {
  background:#eef2e8
}

.enrich-fields .is-filled dd {
  font-weight:500
}

.enrich-meter {
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px;
  font-size:12px
}

.enrich-track {
  grid-column:1/-1;
  height:8px;
  background:#f0f1eb;
  border-radius:4px;
  overflow:hidden
}

.enrich-track i {
  display:block;
  height:100%;
  width:25%;
  background:#5d7051;
  transition:width .6s cubic-bezier(.2,.7,.2,1)
}

.enrich-side h3 {
  font-size:20px
}

.enrich-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px
}

.enrich-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px 14px;
  transition:background .3s,opacity .3s
}

.enrich-list li>div {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0
}

.enrich-list b {
  font-weight:500;
  font-size:12px;
  color:var(--muted)
}

.enrich-value {
  font-size:15px
}

.enrich-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:10.5px
}

.src,.conf {
  border-radius:12px;
  padding:2px 8px;
  background:#f0f1eb
}

.src-photo { background:#ded9f2 }
.src-rule { background:var(--lime) }
.src-reviews,.src-questions { background:#f2e5d6 }
.conf-high { background:#dce5d2 }
.conf-check { background:#f6ede7 }

.enrich-note {
  font-size:11px;
  color:var(--muted)
}

.enrich-actions {
  display:flex;
  gap:6px;
  flex-shrink:0
}

.enrich-list li.is-accepted {
  background:#f4f6ef
}

.enrich-list li.is-discarded {
  opacity:.5
}

.enrich-state {
  font-size:12px;
  color:#4f5c44;
  white-space:nowrap
}

.enrich-bulk {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px
}

.enrich-outcome {
  font-size:12.5px;
  color:var(--muted);
  margin-top:12px
}

.faq-sources {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px
}

.faq-sources>div {
  background:#f7f8f3;
  border-radius:6px;
  padding:16px 18px;
  font-size:13px
}

.faq-sources h3 {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px
}

.faq-sources ul {
  margin:0;
  padding-left:16px
}

.faq-sources li {
  margin-bottom:6px;
  line-height:1.5
}

.faq-reviews {
  list-style:none;
  padding:0!important
}

.faq-work {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:30px;
  align-items:start
}

.faq-drafts {
  display:flex;
  flex-direction:column;
  gap:10px
}

.faq-drafts>.button {
  align-self:flex-start
}

.faq-draft {
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 16px;
  animation:msg-in .35s ease-out
}

.faq-draft h4 {
  font-size:15px;
  font-weight:500;
  margin:0 0 6px
}

.faq-draft p {
  font-size:13.5px;
  margin:0 0 8px
}

.faq-draft.is-approved,.faq-draft.is-edited {
  background:#f4f6ef;
  border-color:#c9d4bd
}

.faq-draft.is-discarded {
  opacity:.5
}

.faq-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  align-items:center
}

.faq-summary {
  background:#f7f8f3;
  border-radius:6px;
  padding:14px 16px;
  font-size:13.5px
}

.faq-summary h4 {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px
}

.faq-summary p {
  margin:0
}

.faq-drafts>.button-ghost {
  align-self:flex-start
}

.faq-preview {
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px 20px;
  position:sticky;
  top:110px
}

.faq-preview h3 {
  font-size:18px
}

.faq-mini summary {
  font-size:14px;
  padding:14px 30px 14px 0;
  min-height:0
}

.faq-mini summary::after {
  top:11px
}

.faq-mini details p {
  font-size:13px
}

.faq-note {
  font-size:11.5px;
  color:var(--muted);
  margin:12px 0 0
}

.preview-enrich .card { fill:white; stroke:#d9ddd2 }
.preview-enrich .photo { fill:#dce5d2 }
.preview-enrich .line { fill:#e3e6dd }
.preview-enrich .meter { fill:#5d7051 }
.preview-enrich .sugg { fill:white; stroke:#d9ddd2 }
.preview-enrich .sugg.ok { fill:#eef2e8; stroke:#b9c5ac }
.preview-enrich .arrow { stroke:#7a7f74; stroke-width:2 }

@media(max-width:900px) {
  .enrich-grid,.faq-work { grid-template-columns:1fr }
  .enrich-card,.faq-preview { position:static }
  .faq-sources { grid-template-columns:1fr }
  .enrich-list li { flex-direction:column; align-items:flex-start }
}

/* ——— Scene: agentic, dispositivi, protezione ——— */

.agent-static {
  margin:0;
  padding-left:20px;
  font-size:14px;
  line-height:1.6
}

.agent-static li {
  margin-bottom:6px
}

.agent-panes {
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  gap:0;
  align-items:stretch
}

.agent-pane {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#fbfbf8;
  display:flex;
  flex-direction:column
}

.agent-pane-shop {
  background:#f4f6ef
}

.agent-pane-body {
  padding:16px;
  height:340px;
  overflow-y:auto
}

.agent-flow {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px
}

.agent-flow i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c9cfbf
}

.is-flowing .agent-flow i {
  background:#5d7051;
  animation:flow 1s infinite ease-in-out
}

.is-flowing .agent-flow i:nth-child(2) { animation-delay:.15s }
.is-flowing .agent-flow i:nth-child(3) { animation-delay:.3s }

@keyframes flow {
  0%, 100% { transform:translateX(-6px); opacity:.4 }
  50% { transform:translateX(6px); opacity:1 }
}

.agent-shop-log {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px
}

.agent-event {
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  gap:6px;
  animation:msg-in .35s ease-out
}

.agent-event.is-new {
  border-color:#5d7051;
  box-shadow:0 0 0 2px #5d705122
}

.agent-event.is-done {
  background:#eef2e8
}

.agent-card {
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 10px;
  border-top:1px solid var(--line);
  padding-top:8px
}

.agent-card small {
  grid-column:1/-1;
  color:#4f5c44
}

.who-badge {
  align-self:flex-start;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:12px;
  padding:3px 9px;
  background:#f0f1eb
}

.who-badge.who-shop,.agent-dots .who-shop.is-on,.agent-legend .who-shop dt::before { background:#5d7051; color:white }
.who-badge.who-agent,.agent-dots .who-agent.is-on,.agent-legend .who-agent dt::before { background:#8e82af; color:white }
.who-badge.who-customer,.agent-dots .who-customer.is-on,.agent-legend .who-customer dt::before { background:#c49a6c; color:white }

.agent-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  margin-top:18px
}

.agent-caption {
  margin:0;
  font-size:15px;
  flex:1 1 320px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px
}

.agent-dots {
  list-style:none;
  display:flex;
  gap:6px;
  margin:0;
  padding:0
}

.agent-dots li {
  width:22px;
  height:6px;
  border-radius:3px;
  background:#e3e6dd;
  transition:background .3s
}

.agent-buttons {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}

.agent-counter {
  font-size:12px;
  color:var(--muted);
  margin-right:6px
}

.agent-legend {
  margin-top:26px;
  border-top:1px solid var(--line);
  padding-top:20px
}

.agent-legend h3 {
  font-size:18px
}

.agent-legend dl {
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.agent-legend dt {
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px
}

.agent-legend dt::before {
  content:'';
  width:10px;
  height:10px;
  border-radius:50%
}

.agent-legend dd {
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.55
}

.devices {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(200px,.75fr);
  gap:40px;
  align-items:end;
  padding:10px 4%
}

.device {
  transition:transform .4s,opacity .4s
}

.device:not(.is-active) {
  opacity:.9;
  filter:grayscale(.8);
  transform:scale(.97)
}

.device-desktop .dev-screen {
  border:10px solid #2b2e2a;
  border-radius:10px;
  aspect-ratio:16/10;
  background:white;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px
}

.dev-stand {
  display:block;
  width:24%;
  height:16px;
  margin:0 auto;
  background:#c9cec2;
  border-radius:0 0 8px 8px
}

.device-phone {
  position:relative;
  border:10px solid #2b2e2a;
  border-radius:30px;
  background:white;
  aspect-ratio:9/18
}

.dev-notch {
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:36%;
  height:14px;
  border-radius:8px;
  background:#2b2e2a
}

.device-phone .dev-screen {
  padding:34px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
  font-size:12px;
  overflow:hidden
}

.dev-art {
  display:block;
  aspect-ratio:1;
  background:#e4e5e1;
  border-radius:8px;
  overflow:hidden
}

.dev-art .object {
  padding:8%
}

.device-phone .dev-art {
  max-height:45%
}

.dev-title {
  font-size:14px;
  font-weight:500
}

.dev-btn {
  margin-top:auto;
  background:var(--ink);
  color:white;
  text-align:center;
  border-radius:4px;
  padding:9px
}

.dev-btn.is-done {
  background:#5d7051
}

.dev-passkey {
  margin:auto 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center
}

.dev-face {
  width:58px;
  height:58px;
  border:3px solid #5d7051;
  border-radius:16px;
  position:relative;
  animation:passkey 1.6s infinite ease-in-out
}

.dev-face::before,.dev-face::after {
  content:'';
  position:absolute;
  top:18px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5d7051;
  left:16px
}

.dev-face::after {
  left:auto;
  right:16px
}

@keyframes passkey {
  50% { box-shadow:0 0 0 8px #5d705122 }
}

.dev-signed {
  color:#4f5c44;
  font-size:11px
}

.dev-field {
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 8px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px
}

.dev-field legend {
  font-size:10px;
  color:var(--muted);
  padding:0 4px
}

.dev-option {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  font-size:11.5px;
  cursor:pointer
}

.dev-option input {
  accent-color:var(--ink)
}

.dev-total {
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:11.5px;
  margin-top:auto
}

.dev-done {
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center
}

.dev-bar {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:8px
}

.brand-mini {
  font-weight:600
}

.dev-muted {
  color:var(--muted);
  font-size:13px
}

.dev-cart {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:13px
}

.dev-cart-line {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:center
}

.dev-cart-line span:last-child {
  display:flex;
  flex-direction:column
}

.dev-sync {
  color:#4f5c44;
  font-size:12px;
  animation:msg-in .4s ease-out
}

.layers-grid {
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
  gap:34px;
  align-items:start
}

.layers-stack {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px
}

.layer {
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  padding:12px 16px;
  font-size:14px;
  min-height:48px;
  position:relative;
  transition:transform .25s,background .25s
}

.layer::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:6px 0 0 6px;
  background:#9fb18f
}

.layer[aria-pressed="true"] {
  background:#eef2e8;
  border-color:#5d7051;
  transform:translateX(6px);
  width:calc(100% - 6px)
}

.layer-0::before { background:#dce5d2 }
.layer-1::before { background:#bfcdb1 }
.layer-2::before { background:#9fb18f }
.layer-3::before { background:#8e82af }
.layer-4::before { background:#7d936d }
.layer-5::before { background:#5a6f4c }
.layer-6::before { background:#20231f }

.layers-detail article h3 {
  font-size:24px
}

.layers-detail h4 {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin:14px 0 6px
}

.layer-example {
  background:#f7f8f3;
  border-left:3px solid #84986b;
  padding:12px 16px;
  border-radius:0 4px 4px 0
}

.layers-note {
  font-size:12px;
  color:var(--muted);
  margin:22px 0 0
}

.preview-chat .row-b { fill:white; stroke:#d9ddd2 }
.preview-chat .arrow { stroke:#7a7f74; stroke-width:2 }

@media(max-width:900px) {
  .agent-panes { grid-template-columns:1fr }
  .agent-flow { flex-direction:row; padding:10px 0 }
  .agent-pane-body { height:auto; max-height:320px }
  .agent-legend dl { grid-template-columns:1fr }
  .devices { grid-template-columns:1fr; gap:24px; padding:0 }
  .device-phone { max-width:240px; margin:0 auto }
  .layers-grid { grid-template-columns:1fr }
}

@media(prefers-reduced-motion:reduce) {
  .is-flowing .agent-flow i,.dev-face { animation:none }
  .device,.layer { transition:none }
}

/* Le griglie delle demo non devono mai allargare la pagina. */
.ab-results>*,.attr-grid>*,.rfm-grid>*,.flow-columns>*,.detail-columns>*,.enrich-grid>*,.faq-work>*,.chat-dash>*,.layers-grid>*,.agent-panes>*,.devices>* {
  min-width:0
}

@media(max-width:1100px) {
  .rfm-grid,.attr-grid,.ab-results { grid-template-columns:minmax(0,1fr) }
}