/* ============================================================
   DentalFlow — bespoke in-section mockups
   Each feature section has a hand-crafted animated mockup.
   When a /videos/{name}.mp4 exists, mockups.js swaps it in.
   ============================================================ */

/* ---------- Shared section framework ---------- */
.sec { position: relative; padding: 96px 0; overflow: hidden; }
@media (min-width: 768px) { .sec { padding: 128px 0; } }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; gap: 56px; align-items: center;
}
@media (min-width: 960px) {
  .sec-inner { grid-template-columns: 1fr 1.15fr; gap: 72px; }
  .sec.flip .sec-inner { grid-template-columns: 1.15fr 1fr; direction: rtl; }
  .sec.flip .sec-inner > * { direction: ltr; }
}

.sec-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.24em;
  color: var(--brand); opacity: 0.7;
  display: inline-flex; align-items: center; gap: 10px;
}
.sec-num::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.5; }
.sec-title {
  margin-top: 14px;
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.04;
  letter-spacing: -0.03em; font-weight: 600; color: var(--ink);
  text-wrap: balance;
}
.sec-title em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-weight: 400;
  background-image: var(--grad-horiz);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.01em;
}
.sec-sub { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 520px; text-wrap: pretty; }
.sec-bullets { margin-top: 26px; display: grid; gap: 12px; max-width: 520px; }
.sec-bullet {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.sec-bullet svg { flex: none; width: 18px; height: 18px; color: var(--brand); margin-top: 2px; }
.sec-bullet b { color: var(--ink); font-weight: 600; }
.sec-meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.sec-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; padding: 5px 10px;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid var(--line); border-radius: 999px;
}

/* ---------- Mockup frame (shared) ---------- */
.mock {
  position: relative;
  border-radius: 20px; overflow: hidden;
  background: #fff; border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 40px 120px -30px rgba(67,33,119,.32), 0 2px 4px rgba(67,33,119,.05);
  transform: perspective(1400px);
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.sec:not(.flip) .mock { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.sec.flip .mock       { transform: perspective(1400px) rotateY(2deg)  rotateX(1deg); }
.sec .mock:hover      { transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px); }

.mock-video {
  display: block; width: 100%; height: auto;
  border-radius: inherit;
}

.mock-bar {
  height: 36px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: linear-gradient(180deg, #f8f6fc 0%, #eeeaf5 100%);
  border-bottom: 1px solid var(--line);
}
.mock-bar .tl { width: 10px; height: 10px; border-radius: 50%; }
.mock-url {
  flex: 1; height: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--ink-3);
  padding: 0 10px; display: flex; align-items: center; gap: 6px;
  max-width: 320px;
}
.mock-body { position: relative; background: #fff; }
.mock-ghost {
  position: absolute; width: 20px; height: 20px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(67,33,119,.35));
  z-index: 20;
  transition: left 1.2s cubic-bezier(.3,.8,.3,1), top 1.2s cubic-bezier(.3,.8,.3,1);
}
.over {
  position: absolute;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 18px 42px -14px rgba(67,33,119,.35);
  backdrop-filter: blur(8px);
  font-size: 12px; z-index: 10;
}

/* ============================================================
   1. AGENDA
   ============================================================ */
.mk-agenda { padding: 0; min-height: 440px; }
.mk-agenda-body { display: grid; grid-template-columns: 1fr 180px; min-height: 440px; }
.mk-agenda-waitroom {
  background: linear-gradient(180deg, #faf7ff 0%, #fafafa 100%);
  border-left: 1px solid var(--line); padding: 14px 12px;
  order: 2;
}
.mk-agenda-waitroom h4 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3); font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.mk-agenda-waitroom h4 .wait-count {
  display: inline-grid; place-items: center;
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 700; letter-spacing: 0;
}
.mk-wait-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 9px; margin-bottom: 5px;
  background: #fff; border: 1px solid var(--line);
  font-size: 11px;
  opacity: 0; transform: translateX(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.mk-agenda.in .mk-wait-item { opacity: 1; transform: none; }
.mk-agenda.in .mk-wait-item:nth-child(2) { transition-delay: .1s; }
.mk-agenda.in .mk-wait-item:nth-child(3) { transition-delay: .2s; }
.mk-agenda.in .mk-wait-item:nth-child(4) { transition-delay: .3s; }
.mk-agenda.in .mk-wait-item:nth-child(5) { transition-delay: .4s; }
.mk-agenda.in .mk-wait-item:nth-child(6) { transition-delay: .5s; }
.mk-agenda.in .mk-wait-item:nth-child(7) { transition-delay: .6s; }
.mk-wait-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; flex: none;
}
.mk-wait-item > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-wait-item > span:nth-child(2) b { font-size: 10.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.mk-wait-item > span:nth-child(2) small { font-size: 9px; color: var(--ink-3); }
.mk-wait-badge {
  font-size: 8.5px; font-weight: 600; padding: 2px 6px; border-radius: 999px;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.mk-wait-badge.attesa { background: #fef3c7; color: #92400e; }
.mk-wait-badge.corso { background: #dcfce7; color: #166534; }
.mk-wait-badge.program { background: #e0f2fe; color: #075985; }
@keyframes blink { 50% { opacity: 0.3; } }

.mk-agenda-cal { position: relative; padding: 14px 0 14px 14px; overflow: hidden; order: 1; }
.mk-agenda-header {
  display: grid; grid-template-columns: 38px repeat(4, 1fr);
  gap: 5px; padding-right: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mk-agenda-header .h { font-size: 9.5px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mk-agenda-header .h b { display: block; font-size: 10px; color: var(--ink); font-weight: 600; }
.chair-chip {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px;
  font-size: 9px; font-weight: 700; color: #fff;
}
.chair-chip.c1 { background: #16a34a; }
.chair-chip.c2 { background: #ea580c; }
.chair-chip.c3 { background: #2563eb; }
.chair-chip.c4 { background: #dc2626; }

.mk-agenda-grid {
  position: relative;
  display: grid; grid-template-columns: 38px repeat(4, 1fr);
  gap: 5px; padding-right: 14px; padding-top: 8px;
  min-height: 336px;
}
.mk-agenda-grid .time { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--ink-3); padding-top: 2px; }
.mk-agenda-col { position: relative; border-left: 1px solid var(--line); min-height: 320px; }
.mk-agenda-col::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% 40px; opacity: .7;
}
.mk-appt {
  position: absolute; left: 4px; right: 4px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 10.5px; line-height: 1.3;
  border-left: 3px solid;
  background: rgba(255,255,255,.9); color: var(--ink);
  opacity: 0; transform: translateY(6px);
  transition: opacity .55s ease, transform .55s ease;
  box-shadow: 0 2px 6px rgba(67,33,119,.08);
}
.mk-agenda.in .mk-appt { opacity: 1; transform: none; }
.mk-appt b { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.mk-appt span { display: block; color: var(--ink-2); font-size: 9.5px; margin-top: 1px; }
.mk-appt small { display: block; color: var(--ink-3); font-size: 8.5px; margin-top: 2px; font-family: "JetBrains Mono", monospace; }
.mk-appt.a1 { background: #dcfce7; border-left-color: #16a34a; color: #065f46; }
.mk-appt.a1 b, .mk-appt.a1 span { color: #065f46; }
.mk-appt.a2 { background: #fef3c7; border-left-color: #ca8a04; color: #713f12; }
.mk-appt.a2 b, .mk-appt.a2 span { color: #713f12; }
.mk-appt.a3 { background: #fee2e2; border-left-color: #dc2626; color: #7f1d1d; }
.mk-appt.a3 b, .mk-appt.a3 span { color: #7f1d1d; }
.mk-appt.a4 { background: #ddd6fe; border-left-color: #7c3aed; color: #4c1d95; }
.mk-appt.a4 b, .mk-appt.a4 span { color: #4c1d95; }
.mk-appt.a5 { background: #e0e7ff; border-left-color: #6366f1; color: #312e81; }
.mk-appt.a5 b, .mk-appt.a5 span { color: #312e81; }
.mk-appt.a6 { background: #cffafe; border-left-color: #0891b2; color: #155e75; }
.mk-appt.a6 b, .mk-appt.a6 span { color: #155e75; }
.mk-appt.ghost {
  background: rgba(98,54,179,.1);
  border: 1.5px dashed var(--brand); border-left-width: 3px;
  animation: ghostpulse 1.6s ease-in-out infinite;
}
@keyframes ghostpulse { 50% { background: rgba(98,54,179,.22); } }

/* ============================================================
   2. PARODONTALE — REAL UI (match DentalFlow Parodontale page)
   Structure: arcata sup + inf, row labels Vit/IH/Rec/Mob/Forc/Son,
   SVG teeth with crown+root, red/blue probe lines across teeth,
   stats bar at bottom.
   ============================================================ */
.mk-paro {
  padding: 22px 24px;
  min-height: 520px;
  background: #fff;
  display: flex; flex-direction: column;
  gap: 10px;
}
.mk-paro h4 {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--ink-3);
  font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.mk-paro h4::after { content: "●"; color: #dc2626; font-size: 10px; animation: blink 1.2s infinite; }
.mk-paro h4 span { margin-left: auto; color: var(--brand); font-family: "JetBrains Mono", monospace; font-size: 10px; }

.paro-arch-header {
  font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-3); font-weight: 600;
  margin-top: 4px;
}

.paro-arch {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
}
.paro-row-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; color: var(--ink-3);
  text-align: right; padding-right: 4px;
}
.paro-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 1px;
  height: 20px;
}
.paro-row-triple {
  display: grid;
  grid-template-columns: repeat(48, 1fr);
  gap: 0;
  height: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  text-align: center;
}
.paro-cell {
  display: grid; place-items: center;
  border-radius: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: var(--ink-2);
}
.paro-cell.vit-on   { background: #dcfce7; color: #166534; font-weight: 700; }
.paro-cell.vit-off  { background: #fee2e2; color: #991b1b; font-weight: 700; }
.paro-cell.plaque {
  background: transparent; position: relative; padding: 2px;
}
.paro-cell.plaque::before {
  content: ""; position: absolute; inset: 3px;
  background:
    radial-gradient(circle at 25% 25%, #ec4899 45%, transparent 46%) 0 0/5px 5px,
    radial-gradient(circle at 75% 75%, #ec4899 45%, transparent 46%) 2px 2px/5px 5px;
  opacity: .55;
}
.paro-cell.mob { background: #fef3c7; color: #854d0e; font-weight: 600; }
.paro-cell.forc { background: #fed7aa; color: #9a3412; font-weight: 600; }

.paro-digit {
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: var(--ink-2);
  position: relative;
}
.paro-digit.hi  { background: #fecaca; color: #991b1b; font-weight: 700; border-radius: 2px; }
.paro-digit.mid { background: #fef3c7; color: #854d0e; border-radius: 2px; }
.paro-digit.bop::after {
  content: ""; position: absolute; top: 1px; right: 1px;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #ef4444 40%, #7f1d1d 100%);
  box-shadow: 0 0 3px #ef4444;
}

/* ---------- SVG tooth row with gum lines overlay ---------- */
.paro-teeth-wrap {
  position: relative;
  margin: 6px 0 2px;
}
.paro-teeth {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  align-items: end;
  position: relative;
  z-index: 1;
}
.paro-tooth-svg {
  width: 100%; height: 68px;
  display: block;
}
.paro-tooth-svg.lower { transform: scaleY(-1); }
.paro-tooth-svg .crown { stroke: #9a8fb5; stroke-width: 1; fill: #fff; }
.paro-tooth-svg .root  { stroke: #9a8fb5; stroke-width: 0.8; fill: #fafaff; }

.paro-tooth-svg.caries .crown   { fill: #dc2626; stroke: #7f1d1d; }
.paro-tooth-svg.restauro .crown { fill: #93c5fd; stroke: #1e40af; }
.paro-tooth-svg.corona .crown   { fill: #fde68a; stroke: #92400e; }
.paro-tooth-svg.elem .crown     { fill: #ddd6fe; stroke: #6d28d9; }
.paro-tooth-svg.attacco .crown  { fill: #ccfbf1; stroke: #0f766e; }
.paro-tooth-svg.devital .root   { fill: #fdba74; stroke: #9a3412; }
.paro-tooth-svg.impianto .root  { fill: #374151; stroke: #111827; }
.paro-tooth-svg.impianto .root-implant { stroke: #111827; stroke-width: 1.2; }
.paro-tooth-svg.missing { opacity: 0.2; }
.paro-tooth-svg.missing .crown, .paro-tooth-svg.missing .root { stroke-dasharray: 2 2; }

/* gum lines overlay (red = recessione, blue = sondaggio) */
.paro-lines {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.paro-lines path {
  fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
}
.paro-lines .rec-line { stroke: #ef4444; }
.paro-lines .probe-line { stroke: #3b82f6; }
.mk-paro.in .paro-lines path {
  animation: lineDraw 1.8s ease-out forwards;
  animation-delay: .5s;
}
.mk-paro.in .paro-lines .probe-line { animation-delay: .8s; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }

/* Stats bar */
.paro-stats {
  margin-top: 12px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.paro-stats .stat {
  text-align: center;
}
.paro-stats .stat b {
  display: block; font-size: 18px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; letter-spacing: -0.02em;
}
.paro-stats .stat small {
  display: block; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3); margin-top: 2px;
}
.paro-stats .stat.pct-red b { color: #dc2626; }
.paro-stats .stat.pct-orange b { color: #ea580c; }
.paro-stats .stat.num b { color: #ca8a04; }
.paro-stats .stat.num-brand b { color: var(--brand); }

/* ============================================================
   3. FATTURE / JUMBO
   ============================================================ */
.mk-fatt { min-height: 640px; display: grid; grid-template-columns: 220px 1fr; }
.mk-fatt-jumbo {
  background: linear-gradient(180deg, #faf7ff, #fff);
  border-right: 1px solid var(--line); padding: 14px 10px;
  overflow-y: auto; max-height: 640px;
}
.mk-fatt-jumbo h4 {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-3);
  font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.mk-fatt-jumbo h4 small { font-family: "JetBrains Mono", monospace; color: var(--brand); letter-spacing: 0; font-size: 10px; font-weight: 500; }
.mk-fatt-search {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--ink); padding: 7px 10px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.mk-fatt-search svg { color: var(--ink-3); }
.mk-fatt-search .cur { display: inline-block; width: 1px; height: 10px; background: var(--brand); animation: blink 1s infinite; }
.mk-fatt-jumbo-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line);
  margin-bottom: 6px; font-size: 11px;
  cursor: grab;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}
.mk-fatt-jumbo-item:hover { border-color: var(--brand-300); box-shadow: 0 6px 18px -4px rgba(67,33,119,.22); }
.mk-fatt-jumbo-item .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mk-fatt-jumbo-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-fatt-jumbo-item .code { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--ink-3); }
.mk-fatt-jumbo-item.dragging { animation: fattDrag 3.4s ease-in-out 1.1s infinite; z-index: 30; }
@keyframes fattDrag {
  0%   { transform: translate(0,0) scale(1); box-shadow: 0 6px 18px -4px rgba(67,33,119,.22); }
  15%  { transform: translate(4px,-2px) scale(1.03); box-shadow: 0 12px 26px -6px rgba(67,33,119,.38); }
  45%  { transform: translate(160px,90px) scale(1.06) rotate(-2deg); box-shadow: 0 18px 40px -10px rgba(67,33,119,.45); }
  60%  { transform: translate(160px,90px) scale(0); opacity: 0; }
  61%  { opacity: 0; }
  100% { transform: translate(0,0) scale(1); opacity: 1; }
}
.mk-fatt-sheet { padding: 18px 16px; position: relative; background: #fff; overflow: visible; font-size: 11px; }
.mk-fatt-head { display: flex; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-fatt-head h5 { font-size: 14px; font-weight: 600; color: var(--ink); }
.mk-fatt-head small { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.mk-fatt-head .total { text-align: right; }
.mk-fatt-head .total b { font-size: 18px; color: var(--brand); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.mk-fatt-row {
  display: grid; grid-template-columns: minmax(0,1fr) 34px 56px 42px 58px;
  gap: 6px; align-items: center; padding: 6px 0;
  font-size: 10.5px; color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
}
.mk-fatt-row > span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-fatt-row.head { color: var(--ink-3); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.mk-fatt-row .code { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--brand); font-weight: 500; }
.mk-fatt-row .amt { text-align: right; font-family: "JetBrains Mono", monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-fatt-row.new {
  background: linear-gradient(90deg, rgba(67,33,119,.08), transparent 80%);
  border-radius: 6px; padding-left: 8px; border-bottom-color: transparent;
  opacity: 0; transform: translateY(-6px);
  animation: rowIn .5s ease 3.4s forwards, rowHighlight 3s ease 3.5s forwards;
}
@keyframes rowIn { to { opacity: 1; transform: none; } }
@keyframes rowHighlight { 0% { background: linear-gradient(90deg, rgba(67,33,119,.22), transparent 80%); } 100% { background: transparent; } }

/* Procedure rapide sidebar */
.proc-cat {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700; color: var(--ink-3);
  margin: 10px 0 5px; padding: 0 2px;
  text-align: center;
}
.proc-cat:first-child { margin-top: 0; }
.proc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  margin-bottom: 4px; font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: transform .15s ease;
}
.proc-item:hover { transform: translateX(2px); }
.proc-item .proc-dot { font-size: 10px; line-height: 1; opacity: .8; }
.proc-item.c-blue   { background: #dbeafe; color: #1e3a8a; }
.proc-item.c-green  { background: #dcfce7; color: #14532d; }
.proc-item.c-gray   { background: #f3f4f6; color: #1f2937; }
.proc-item.c-orange { background: #ffedd5; color: #7c2d12; }
.proc-item.c-red    { background: #fee2e2; color: #7f1d1d; }
.proc-item.c-yellow { background: #fef9c3; color: #713f12; }
.proc-item.c-purple { background: #ede9fe; color: #4c1d95; }
.proc-item.c-cyan   { background: #cffafe; color: #155e75; }
.proc-item.c-teal   { background: #ccfbf1; color: #115e59; }

.mk-fatt-group {
  text-align: center; font-weight: 700; font-size: 12px;
  color: var(--ink); padding: 10px 0 6px;
  text-decoration: underline;
  text-decoration-color: var(--brand-300);
  text-underline-offset: 3px;
}
.mk-fatt-row .mut { color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 9.5px; text-align: center; }
.mk-fatt-row .code { display: inline-block; }

/* ============================================================
   4. OCCLUSOGRAMMA — REAL UI
   Each tooth = crown + root (colored independently by state),
   condition badges underneath (Car, Res, Cor, El, Dev, Imp, Man).
   ============================================================ */
.mk-occ {
  padding: 22px 26px;
  min-height: 500px;
  background: #fff;
  position: relative;
}
.mk-occ-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mk-occ-head h4 { font-size: 13px; font-weight: 700; color: var(--ink); }
.mk-occ-head h4 small { display: block; font-size: 10px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }

.occ-legends {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 10.5px; color: var(--ink-2);
  margin-bottom: 18px;
  padding: 10px 12px; background: var(--brand-50); border-radius: 10px;
}
.occ-legends b {
  font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--ink-3); text-transform: uppercase;
  margin-right: 4px;
}
.occ-legends .chip {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.occ-legends .sw {
  width: 10px; height: 10px; border-radius: 2px;
}

/* arches */
.occ-arch-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  align-items: end;
}
.occ-nums {
  display: grid; grid-template-columns: repeat(16, 1fr);
  gap: 3px; margin-bottom: 4px;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  color: var(--ink-3); text-align: center;
}
.occ-badges {
  display: grid; grid-template-columns: repeat(16, 1fr);
  gap: 3px; margin-top: 4px;
}
.occ-badge {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
  min-height: 11px;
}
.occ-badge.empty { background: transparent; visibility: hidden; }
.occ-badge.car { background: #fecaca; color: #991b1b; }
.occ-badge.res { background: #dbeafe; color: #1e40af; }
.occ-badge.cor { background: #fef3c7; color: #92400e; }
.occ-badge.el  { background: #ede9fe; color: #6d28d9; }
.occ-badge.att { background: #ccfbf1; color: #134e4a; }
.occ-badge.dev { background: #ffedd5; color: #9a3412; }
.occ-badge.imp { background: #e5e7eb; color: #111827; }
.occ-badge.man { background: #f3f4f6; color: #6b7280; }

.occ-tooth {
  width: 100%; height: 82px;
  position: relative;
}
.occ-tooth svg { width: 100%; height: 100%; display: block; }
.occ-tooth .crown-shape { fill: #fff; stroke: #cbd5e1; stroke-width: 1; stroke-linejoin: round; }
.occ-tooth .root-shape  { fill: #fff; stroke: #cbd5e1; stroke-width: 1; stroke-linejoin: round; }
.occ-tooth.upper { transform: scaleY(1); }
.occ-tooth.lower { transform: scaleY(-1); }

/* crown states — light pastel fill + soft stroke */
.occ-tooth.car .crown-shape { fill: #fecaca; stroke: #ef4444; }
.occ-tooth.car::before {
  content: "•  •"; position: absolute;
  top: 30%; left: 50%; transform: translate(-50%, -50%);
  color: #dc2626; font-size: 9px; letter-spacing: -1px;
  pointer-events: none;
}
.occ-tooth.lower.car::before { top: 70%; transform: translate(-50%, -50%) scaleY(-1); }
.occ-tooth.res .crown-shape { fill: #bfdbfe; stroke: #60a5fa; }
.occ-tooth.cor .crown-shape { fill: #fde68a; stroke: #f59e0b; }
.occ-tooth.el  .crown-shape { fill: transparent; stroke: #a78bfa; stroke-dasharray: 3 2; stroke-width: 1.2; }
.occ-tooth.el  .root-shape  { fill: transparent; stroke: #a78bfa; stroke-dasharray: 3 2; stroke-width: 1.2; }
.occ-tooth.att .crown-shape { fill: #99f6e4; stroke: #14b8a6; }

/* root states */
.occ-tooth.dev .root-shape { fill: transparent; stroke: #ea580c; stroke-width: 1.4; }
.occ-tooth.dev .crown-shape { fill: #fde68a; stroke: #f59e0b; }

/* implant: sostituisce la radice con un cilindro striato verticale scuro */
.occ-tooth.imp .root-shape { display: none; }
.occ-tooth.imp .crown-shape { fill: #fde68a; stroke: #f59e0b; }
.occ-tooth.imp::after {
  content: ""; position: absolute;
  left: 38%; right: 38%;
  top: 44%; bottom: 2%;
  background: repeating-linear-gradient(
    0deg,
    #1e293b 0 2px,
    #334155 2px 4px
  );
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 0 0 1px #0f172a;
}
.occ-tooth.lower.imp::after { transform: scaleY(-1); }

/* missing tooth */
.occ-tooth.missing svg { opacity: 0.25; }
.occ-tooth.missing::after {
  content: "×";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #cbd5e1; font-size: 36px; font-weight: 300;
  line-height: 1;
}
.occ-tooth.missing::before {
  content: "";
  position: absolute; inset: 12px 20%;
  border: 1.5px dashed #e2e8f0;
  border-radius: 50%;
}
.occ-tooth.lower.missing::after { transform: scaleY(-1); }

.occ-arch-label {
  font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--ink-3); text-transform: uppercase;
  font-weight: 600; margin: 16px 0 2px;
}

/* ============================================================
   5. DASHBOARD
   ============================================================ */
.mk-dash {
  padding: 22px; min-height: 360px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr; gap: 14px;
  background: linear-gradient(160deg, #fff, #f8f5ff);
}
.mk-dash-kpi { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.mk-dash-kpi h5 { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-3); font-weight: 600; }
.mk-dash-kpi .val { margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mk-dash-chart { grid-column: span 2; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.mk-dash-chart h5 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.mk-dash-chart h5 b { color: var(--brand); font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 10px; }
.mk-dash-bars {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px;
  align-items: flex-end; height: 120px;
}
.mk-dash-bar {
  background: linear-gradient(180deg, #8b5cf6, #432177);
  border-radius: 3px 3px 0 0; height: 0%;
  transition: height 1.2s cubic-bezier(.2,.7,.2,1); position: relative;
}
.mk-dash-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 50%);
  border-radius: 3px 3px 0 0;
}
.mk-dash.in .mk-dash-bar { transition-delay: calc(var(--i) * 60ms); }
.mk-dash-labels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--ink-3); text-align: center; margin-top: 6px; }

/* ============================================================
   6. CEFALOMETRIA — REAL UI (match DentalFlow cefalo page)
   Dark canvas + yellow connector triangles + landmark labels +
   left sidebar with point categories.
   ============================================================ */
.mk-cef {
  min-height: 520px;
  padding: 0;
  display: grid;
  grid-template-columns: 170px 1fr;
  overflow: hidden;
}
.cef-side {
  background: linear-gradient(180deg, #faf7ff, #f5f1fb);
  border-right: 1px solid var(--line);
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.cef-side input {
  width: 100%;
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--ink); font-family: inherit;
}
.cef-counter {
  display: flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: var(--ink-2);
  margin-top: 4px;
}
.cef-counter b { color: var(--brand); font-weight: 700; }
.cef-counter .reset {
  margin-left: auto; color: var(--ink-3);
  font-size: 9.5px; display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer;
}
.cef-progress-bar {
  height: 4px; background: #ede7f6; border-radius: 999px; overflow: hidden;
}
.cef-progress-bar i {
  display: block; height: 100%;
  background: var(--grad-horiz);
  width: 0%;
  animation: cefFill 1.6s ease-out forwards;
  animation-delay: .4s;
}
@keyframes cefFill { to { width: 100%; } }
.cef-side button {
  padding: 8px 10px;
  font-size: 11px; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all .2s ease;
}
.cef-side button.primary { background: var(--grad); color: #fff; border-color: transparent; }
.cef-side .cef-tabs {
  display: flex; gap: 2px;
  background: var(--brand-50); border-radius: 8px;
  padding: 2px; margin: 4px 0;
}
.cef-side .cef-tabs span {
  flex: 1; text-align: center;
  padding: 5px; font-size: 10.5px;
  color: var(--ink-3); border-radius: 6px;
  cursor: pointer;
}
.cef-side .cef-tabs .on { background: #fff; color: var(--brand); font-weight: 600; }
.cef-category {
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--ink-3); text-transform: uppercase;
  margin: 6px 0 2px;
}
.cef-point {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
}
.cef-point .dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid transparent;
  flex: none;
}
.cef-point.cranici .dot { background: #fb923c; border-color: #9a3412; }
.cef-point.mascell .dot { background: #22c55e; border-color: #14532d; }
.cef-point.dentsup .dot { background: #a855f7; border-color: #581c87; }
.cef-point.dentinf .dot { background: #0ea5e9; border-color: #075985; }
.cef-point.mandib  .dot { background: #f59e0b; border-color: #78350f; }
.cef-point .info {
  margin-left: auto; width: 14px; height: 14px;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; color: var(--ink-3);
}
.cef-point.done { position: relative; padding-left: 18px; }
.cef-point.done::before {
  content: "✓"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #16a34a; color: #fff;
  display: grid; place-items: center;
  font-size: 8.5px; font-weight: 900;
}

/* Main cef canvas */
.cef-main {
  position: relative;
  background: #0c0620;
  overflow: hidden;
  min-height: 520px;
}
.cef-topbar {
  position: absolute; top: 10px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: #e2d4ff;
  z-index: 10;
}
.cef-topbar b { color: #fbbf24; }
.cef-topbar .controls { margin-left: auto; display: flex; gap: 6px; color: #c4b5fd; font-size: 11px; }
.cef-topbar .controls span {
  width: 22px; height: 22px; background: rgba(255,255,255,.05);
  border-radius: 4px; display: grid; place-items: center;
}

/* X-ray stylized background */
.cef-xray {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 60% 55%, rgba(255,245,220,0.18) 0%, transparent 75%),
    radial-gradient(ellipse 30% 40% at 62% 62%, rgba(200,190,170,0.10) 0%, transparent 70%),
    #0c0620;
}
.cef-xray svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }

/* Head profile silhouette for mockup (when no real X-ray) */
.cef-profile { stroke: rgba(255,255,255,.15); stroke-width: 1; fill: rgba(255,245,220,.04); }
.cef-jaw     { stroke: rgba(255,255,255,.12); stroke-width: 0.8; fill: transparent; }

/* yellow connectors */
.cef-conn { stroke: #fde047; stroke-width: 0.7; fill: none; opacity: 0.85; }

/* landmark points */
.cef-lm { fill: #3b82f6; stroke: #fff; stroke-width: 0.8; }
.cef-lm.draw {
  opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box;
  transition: opacity .4s ease, transform .4s ease;
}
.mk-cef.in .cef-lm.draw { opacity: 1; transform: scale(1); transition-delay: calc(var(--i) * 90ms + 800ms); }
.cef-lbl {
  fill: #fbbf24;
  font-family: "JetBrains Mono", monospace;
  font-size: 7px; font-weight: 600;
  opacity: 0;
  transition: opacity .4s ease;
}
.mk-cef.in .cef-lbl { opacity: 1; transition-delay: calc(var(--i) * 90ms + 1100ms); }
.cef-conn.draw {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  transition: stroke-dashoffset 1s ease;
}
.mk-cef.in .cef-conn.draw { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 90ms + 1400ms); }

/* ============================================================
   Cefalometria — screenshot
   ============================================================ */
.mk-cef-img {
  background: #0f0a2e;
  min-height: 520px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mk-cef-img .mock-bar {
  background: linear-gradient(180deg, #1c1446, #15102f);
  border-bottom-color: rgba(255,255,255,.08);
}
.mk-cef-img .mock-url { background: rgba(255,255,255,.06); color: rgba(255,255,255,.65); border-color: transparent; }
.mk-cef-img .mock-screenshot {
  display: block; width: 100%; height: auto;
  object-fit: cover; object-position: center top;
  flex: 1; min-height: 0;
}

/* ============================================================
   Occlusogramma / Stato orale — screenshot
   ============================================================ */
.mk-occ-img {
  background: #fff;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0;
  min-height: 0;
}
.mk-occ-img .mock-bar { border-bottom: 1px solid var(--line); }
.mk-occ-img .mock-screenshot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* Sez. 04 (Occlusogramma): immagine molto larga → layout stacked full-width */
@media (min-width: 900px) {
  #sec-04 .sec-inner {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 48px;
  }
  #sec-04 .sec-body { max-width: 860px; }
  #sec-04 .mock.mk-occ-img { transform: none !important; width: 100%; }
}

/* ============================================================
   Imaging — due screenshot affiancati
   ============================================================ */
.mk-img-double {
  padding: 0;
  background: #fff;
  min-height: 520px;
  display: flex; align-items: stretch;
}
.img-screenshot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  background: var(--line);
}
.img-screenshot {
  background: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.img-screenshot .mock-bar { border-bottom: 1px solid var(--line); }
.img-screenshot .mock-screenshot {
  display: block; width: 100%; height: auto;
  object-fit: cover; object-position: center top;
  flex: 1; min-height: 0;
}

/* Fallback se il PNG non è ancora stato caricato: linea tratteggiata + messaggio */
.mock-screenshot:not([src]), .mock-screenshot[src=""] {
  display: grid; place-items: center;
  min-height: 320px;
  background: repeating-linear-gradient(45deg, #faf7ff, #faf7ff 10px, #f0ebfa 10px, #f0ebfa 20px);
  color: var(--ink-3); font-size: 12px;
}

/* ============================================================
   7. IMAGING — legacy (non più usato ma tenuto per fallback/video)
   ============================================================ */
.mk-img {
  padding: 14px;
  min-height: 540px;
  background: #fff;
}
.img-triptych {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.img-panel {
  background: #faf7ff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 520px;
}
.img-panel.editor { background: #18123e; border-color: #0f0a2e; color: #e9e4ff; }
.img-panel.presentation { background: #fefefe; border-color: var(--line-strong); padding: 0; overflow: hidden; }

.img-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.img-grid-6 .img-photo { aspect-ratio: 1/1; border-radius: 7px; }
.img-grid-6 .img-photo .label {
  position: absolute; left: 4px; bottom: 4px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 8.5px; font-weight: 500;
}
.img-grid-6 .img-photo.p1 { background: linear-gradient(135deg, #e8b898 0%, #965535 100%); }
.img-grid-6 .img-photo.p2 { background: radial-gradient(circle at 50% 40%, #3d1612 0%, #601f1a 60%, #1a0808 100%); }
.img-grid-6 .img-photo.p2::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 40%; bottom: 18%;
  background: repeating-linear-gradient(90deg, rgba(255,240,220,.9) 0 8%, rgba(200,160,110,.2) 8% 9%);
  border-radius: 40% 40% 30% 30% / 55% 55% 25% 25%;
  opacity: .85;
}
.img-grid-6 .img-photo.p3 { background: linear-gradient(-135deg, #e8b898 0%, #8e4836 100%); }
.img-grid-6 .img-photo.p4 { background: radial-gradient(circle at 50% 45%, #954836 0%, #3b150c 90%); }
.img-grid-6 .img-photo.p4::before {
  content: ""; position: absolute; inset: 18% 22%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,240,220,.9) 0 24deg, transparent 24deg 34deg, rgba(255,240,220,.9) 34deg 60deg, transparent 60deg 70deg, rgba(255,240,220,.9) 70deg 96deg, transparent 96deg 106deg, rgba(255,240,220,.9) 106deg 132deg, transparent 132deg 142deg, rgba(255,240,220,.9) 142deg 360deg);
  opacity: .88;
}
.img-grid-6 .img-photo.p5 { background: linear-gradient(180deg, #c88560 0%, #6d3a2c 100%); }
.img-grid-6 .img-photo.p6 { background: radial-gradient(circle at 50% 50%, #8b4332 0%, #3d1a12 80%); }
.img-grid-6 .img-photo.p6::before {
  content: ""; position: absolute; inset: 20% 24%; border-radius: 50%;
  background: conic-gradient(from 45deg, rgba(255,240,220,.9) 0 26deg, transparent 26deg 36deg, rgba(255,240,220,.9) 36deg 62deg, transparent 62deg 72deg, rgba(255,240,220,.9) 72deg 98deg, transparent 98deg 108deg, rgba(255,240,220,.9) 108deg 134deg, transparent 134deg 144deg, rgba(255,240,220,.9) 144deg 360deg);
  opacity: .88;
}

/* ---- Editor panel ---- */
.img-editor-head {
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; font-weight: 600; color: #fff;
}
.img-editor-head small { color: rgba(255,255,255,.6); font-weight: 400; margin-left: 6px; }
.img-editor-body {
  flex: 1;
  display: grid;
  grid-template-columns: 90px 1fr 84px;
  gap: 8px;
  min-height: 420px;
}
.img-editor-tags { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.img-editor-tags .tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: rgba(255,255,255,.08); border-radius: 6px; padding: 2px;
  margin-bottom: 4px;
}
.img-editor-tags .tabs span {
  text-align: center; font-size: 10px; padding: 4px 0; border-radius: 4px;
  color: rgba(255,255,255,.65);
}
.img-editor-tags .tabs span.on { background: #fff; color: var(--ink); font-weight: 600; }
.editor-label {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: .16em;
  color: rgba(255,255,255,.45); margin-top: 4px; margin-bottom: 2px;
}
.img-editor-tags .tag {
  font-size: 10px; padding: 5px 8px; border-radius: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}
.img-editor-tags .tag.active {
  background: rgba(139,92,246,.25); border-color: #8b5cf6; color: #fff; font-weight: 600;
}
.img-editor-canvas {
  position: relative;
  background: #000; border-radius: 6px; overflow: hidden;
  min-height: 300px;
}
.img-canvas-grid {
  position: absolute; inset: 18px;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 22% 22%, 22% 22%;
  pointer-events: none; z-index: 3;
}
.img-canvas-photo {
  position: absolute; inset: 18px;
  background: radial-gradient(circle at 50% 50%, #a85a3c 0%, #5a1f13 80%);
}
.img-canvas-photo::before {
  content: ""; position: absolute; inset: 18% 14%; border-radius: 50%;
  background: conic-gradient(from 15deg, #fef2dc 0 22deg, #c89a6d 22deg 32deg, #fef2dc 32deg 58deg, #c89a6d 58deg 68deg, #fef2dc 68deg 96deg, #c89a6d 96deg 106deg, #fef2dc 106deg 132deg, #c89a6d 132deg 142deg, #fef2dc 142deg 360deg);
  opacity: .9;
}
.img-editor-ruler {
  position: absolute; top: 4px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 18px;
  color: rgba(255,255,255,.5); font-size: 8px;
  font-family: "JetBrains Mono", monospace;
  z-index: 4;
}
.img-editor-ctrls { display: flex; flex-direction: column; gap: 4px; }
.ctrl-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 10px; color: rgba(255,255,255,.85);
}
.ctrl-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ---- Presentation PDF panel ---- */
.img-pres-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #f7f5fb, #efebf6);
  border-bottom: 1px solid var(--line);
}
.img-pres-dot { width: 8px; height: 8px; border-radius: 50%; }
.img-pres-dot.r { background: #ff5f57; }
.img-pres-dot.y { background: #febc2e; }
.img-pres-dot.g { background: #28c840; }
.img-pres-title {
  margin-left: 8px; font-size: 10.5px; color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
}
.img-pres-body {
  padding: 12px;
  background: linear-gradient(180deg, #e9e4f5 0%, #d4cce8 100%);
  min-height: 480px;
  display: grid; place-items: center;
}
.pres-page {
  width: 100%; max-width: 280px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 20px 40px -12px rgba(67,33,119,.3), 0 2px 4px rgba(0,0,0,.06);
  padding: 16px; font-family: "Inter", sans-serif;
  display: flex; flex-direction: column; gap: 10px;
  aspect-ratio: 210 / 297;
}
.pres-page-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 8px; border-bottom: 1.5px solid var(--brand);
}
.pres-logo { font-size: 14px; }
.pres-studio { flex: 1; font-size: 10px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pres-meta { font-size: 8.5px; color: var(--ink-3); font-family: "JetBrains Mono", monospace; }
.pres-grid {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.pres-ph {
  position: relative; aspect-ratio: 1/1; border-radius: 4px;
  background: linear-gradient(135deg, #f0c8a8 0%, #8e4836 100%);
  overflow: hidden;
}
.pres-ph:nth-child(2) { background: linear-gradient(-135deg, #e8b898 0%, #c0602e 100%); }
.pres-ph:nth-child(3) { background: linear-gradient(135deg, #d8a888 0%, #7c3e28 100%); }
.pres-ph:nth-child(4) { background: linear-gradient(-135deg, #d0a080 0%, #6d3020 100%); }
.pres-ph span {
  position: absolute; bottom: 3px; left: 3px;
  font-size: 7px; padding: 1px 4px; border-radius: 2px;
  background: rgba(0,0,0,.5); color: #fff;
}
.pres-cap {
  font-size: 9px; color: var(--ink-2); font-style: italic;
  text-align: center; padding: 3px 0;
  border-left: 2px solid var(--brand); padding-left: 6px;
  background: #faf7ff;
}
.pres-footer {
  display: flex; justify-content: space-between;
  padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 8px; color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
}
.pres-brand { color: var(--brand); font-weight: 600; letter-spacing: .05em; }
.img-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.img-toolbar .btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; font-size: 11px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink-2); cursor: pointer;
  transition: all .2s ease;
}
.img-toolbar .btn:hover { border-color: var(--brand-300); color: var(--brand); }
.img-toolbar .btn svg { width: 12px; height: 12px; }
.img-toolbar .spacer { flex: 1; }
.img-toolbar .btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.img-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.img-photo {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 10px; overflow: hidden;
  background: #f3f0fa;
  cursor: pointer;
}
.img-photo .placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #f5d8c0 0%, #d89878 40%, #8e4a3e 80%, #4d2820 100%);
}
.img-photo .placeholder::before {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: 10%;
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 80%, #1a0808 0%, transparent 60%),
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.12) 0%, transparent 70%);
}
.img-photo .placeholder::after {
  content: "";
  position: absolute; left: 15%; right: 15%; bottom: 18%;
  height: 34%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.95) 0px, rgba(255,255,255,.95) 7%,
      rgba(255,220,180,.4) 7%, rgba(255,220,180,.4) 8%);
  border-radius: 40% 40% 35% 35% / 50% 50% 25% 25%;
  opacity: .82;
  filter: blur(.3px);
}
.img-photo.frontal .placeholder { background: linear-gradient(135deg, #f0c8a8 0%, #c88560 60%, #6d3a2c 100%); }
.img-photo.left .placeholder    { background: linear-gradient(-135deg, #f5d8c0 0%, #b06a50 50%, #4d2820 100%); }
.img-photo.occlusal .placeholder {
  background: radial-gradient(circle at 50% 50%, #8b4332 0%, #3d1a12 80%);
}
.img-photo.occlusal .placeholder::after {
  top: 12%; bottom: 12%; left: 20%; right: 20%; height: auto;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255,240,220,.9) 0deg 25deg,
      transparent 25deg 35deg,
      rgba(255,240,220,.9) 35deg 60deg,
      transparent 60deg 70deg,
      rgba(255,240,220,.9) 70deg 95deg,
      transparent 95deg 105deg,
      rgba(255,240,220,.9) 105deg 130deg,
      transparent 130deg 140deg,
      rgba(255,240,220,.9) 140deg 360deg);
  border-radius: 50%;
  opacity: .88;
}

.img-photo .remove {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(220,38,38,.92);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1; font-weight: 500;
  cursor: pointer;
}
.img-photo .label {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 10px; font-weight: 500;
  backdrop-filter: blur(6px);
}

.img-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.img-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 500;
  border-radius: 999px;
  background: var(--brand-50); color: var(--ink-2);
  cursor: pointer;
}
.img-filter-chip.active { background: #dcfce7; color: #166534; }
.img-filter-chip .x {
  width: 12px; height: 12px;
  display: grid; place-items: center;
  color: #dc2626;
  font-size: 11px; line-height: 1;
}
.img-thumbs {
  display: flex; gap: 4px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.img-thumb {
  width: 52px; aspect-ratio: 4/3;
  border-radius: 4px;
  background: #f3f0fa;
  border: 1.5px solid transparent;
  position: relative; overflow: hidden;
}
.img-thumb.on { border-color: var(--brand); }
.img-thumb::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #f5d8c0 0%, #d89878 50%, #8e4a3e 100%);
}

/* ============================================================
   8. SHARING — REAL UI (PannelloCondivisione peer-to-peer)
   Two columns: IO CONDIVIDO (editable) + LORO CONDIVIDONO (read-only).
   ============================================================ */
.mk-share {
  padding: 0;
  min-height: 460px;
  background: #fff;
  overflow: hidden;
}
.share-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.share-modal-header .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid; place-items: center;
}
.share-modal-header h4 {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 0;
}
.share-modal-header small {
  display: block; font-size: 10px; color: var(--ink-3);
  margin-top: 2px; font-weight: 400;
}
.share-modal-header .close {
  margin-left: auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--ink-3); font-size: 16px; line-height: 1;
  cursor: pointer;
}

.share-studio-card {
  margin: 14px 14px 0;
  border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.share-studio-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #faf7ff, #fff);
  border-bottom: 1px solid var(--line);
}
.share-studio-head .avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.share-studio-head h5 { font-size: 12px; font-weight: 700; color: var(--ink); margin: 0; }
.share-studio-head small { display: block; font-size: 10px; color: var(--ink-3); margin-top: 1px; }
.share-studio-head .trash {
  margin-left: auto;
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-3); cursor: pointer;
}
.share-studio-head .trash:hover { color: #dc2626; background: #fee2e2; }

.share-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  divide-x: 1px;
}
.share-col {
  padding: 14px 14px;
}
.share-col.mine { border-right: 1px solid var(--line); }
.share-col.theirs { background: rgba(250,247,255,.4); }
.share-col-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.share-col.mine .share-col-title { color: var(--brand); }
.share-col.theirs .share-col-title { color: var(--ink-3); }

.share-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px;
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .4s ease, transform .4s ease;
}
.mk-share.in .share-item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms + 300ms); }
.share-item .ico { width: 16px; text-align: center; font-size: 13px; }
.share-item .name { flex: 1; }

/* Editable toggle (mine) */
.share-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid #d1c7e6;
  flex: none;
  display: grid; place-items: center;
  font-size: 10px; color: #fff;
  transition: all .25s ease;
}
.share-check.on {
  background: var(--brand); border-color: var(--brand);
}
.share-check.on::after {
  content: ""; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.share-check.locked {
  opacity: 0.6;
}

/* Read-only badge (theirs) */
.share-badge {
  width: 18px; height: 18px; border-radius: 5px;
  flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.share-badge.on {
  background: #dcfce7; color: #16a34a;
}
.share-badge.on::after {
  content: "";
  width: 5px; height: 9px;
  border: solid #16a34a; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.share-badge.off {
  background: #f3f4f6; color: #d1d5db;
}
.share-badge.off::after {
  content: "×"; font-size: 13px; line-height: 1;
  color: #9ca3af;
}

/* Sub-mockup: due studi con stesso paziente */
.share-studios {
  margin-top: 16px; padding: 14px;
  background: linear-gradient(180deg, #faf7ff, #fff);
  border: 1px solid var(--line); border-radius: 14px;
  display: grid; grid-template-columns: 1fr 36px 1fr; gap: 10px;
  align-items: stretch;
}
.share-studio-tile {
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 6px 18px -8px rgba(67,33,119,.18);
}
.share-studio-top {
  display: flex; align-items: center; gap: 8px;
}
.ss-logo {
  width: 28px; height: 28px; border-radius: 8px;
  color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; flex: none;
}
.share-studio-top > div { flex: 1; min-width: 0; }
.share-studio-top h6 {
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-studio-top small {
  display: block; font-size: 9.5px; color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
}
.share-status-badge {
  font-size: 9px; font-weight: 700; padding: 3px 7px;
  border-radius: 999px;
  background: #ede7f6; color: var(--brand);
  white-space: nowrap;
}
.ss-pano {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px; border-radius: 8px;
  background: linear-gradient(180deg, #fafafa, #f3f4f6);
  border: 1px solid var(--line);
}
.ss-pano-arch {
  display: block; height: 18px;
  background: repeating-linear-gradient(90deg,
    #e5e7eb 0 8%, #fff 8% 9%, #d1d5db 9% 17%, #fff 17% 18%);
  border-radius: 50% 50% 30% 30% / 80% 80% 30% 30%;
  opacity: .85;
}
.ss-pano-arch.lower {
  border-radius: 30% 30% 50% 50% / 30% 30% 80% 80%;
  transform: scaleY(-1);
  opacity: .75;
}
.ss-pano-foot {
  font-size: 9.5px; color: var(--ink-3);
  text-align: center; padding: 2px;
}
.share-arrow {
  display: grid; place-items: center;
  color: var(--brand); opacity: .6;
}

/* ============================================================
   9. CHAT
   ============================================================ */
.mk-chat { min-height: 380px; display: grid; grid-template-columns: 140px 1fr; }
.mk-chat-side { background: #f5f1fb; border-right: 1px solid var(--line); padding: 12px; }
.mk-chat-side h5 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); font-weight: 600; margin-bottom: 10px; }
.mk-chat-side .ch {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  font-size: 11px; color: var(--ink-2); margin-bottom: 3px;
}
.mk-chat-side .ch.on { background: #fff; color: var(--brand); font-weight: 600; }
.mk-chat-side .ch .dotc { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mk-chat-side .ch .unread { margin-left: auto; font-size: 9px; background: var(--brand); color: #fff; padding: 1px 5px; border-radius: 999px; }
.mk-chat-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.mk-msg {
  display: flex; gap: 10px; align-items: flex-end;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.mk-chat.in .mk-msg { opacity: 1; transform: none; transition-delay: calc(var(--i) * 350ms); }
.mk-msg.me { flex-direction: row-reverse; }
.mk-msg .av {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 700; flex: none;
}
.mk-msg .bb {
  padding: 8px 12px; border-radius: 14px;
  font-size: 12px; max-width: 70%;
  background: #f5f1fb; color: var(--ink);
}
.mk-msg.me .bb { background: var(--grad); color: #fff; }
.mk-msg .bb small { display: block; font-size: 9.5px; margin-top: 2px; opacity: 0.6; font-family: "JetBrains Mono", monospace; }
.mk-msg .bb.link {
  border: 1px dashed var(--brand-300);
  background: #fff; padding: 6px 8px;
  display: flex; align-items: center; gap: 6px;
}
.mk-msg .bb.link svg { color: var(--brand); }
.mk-chat-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  background: #f5f1fb; border-radius: 14px;
  width: max-content;
  opacity: 0; transition: opacity .3s ease;
}
.mk-chat.in .mk-chat-typing { opacity: 1; transition-delay: calc(var(--i,3) * 350ms); }
.mk-chat-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400); animation: typing 1.2s ease-in-out infinite; }
.mk-chat-typing span:nth-child(2) { animation-delay: .15s; }
.mk-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ============================================================
   10. MAGAZZINO
   ============================================================ */
.mk-mag { padding: 20px 22px; min-height: 400px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.mk-mag h4 { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mk-mag h4 small { font-family: "JetBrains Mono", monospace; font-weight: 400; color: var(--ink-3); font-size: 10px; }
.mk-mag h4 span { margin-left: auto; padding: 3px 8px; font-size: 10px; color: #dc2626; background: #fee2e2; border-radius: 999px; font-family: "JetBrains Mono", monospace; }
.mk-mag-row {
  display: grid; grid-template-columns: 1fr 140px 52px 64px;
  gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 8px;
  background: #fafaff; font-size: 12px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .4s ease, transform .4s ease;
}
.mk-mag.in .mk-mag-row { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms); }
.mk-mag-row b { color: var(--ink); font-weight: 500; }
.mk-mag-row small { font-family: "JetBrains Mono", monospace; color: var(--ink-3); font-size: 10px; display: block; margin-top: 1px; }
.mk-mag-bar { position: relative; height: 6px; border-radius: 999px; background: #eee; overflow: hidden; }
.mk-mag-bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--grad-horiz); border-radius: 999px;
  width: 0%;
  transition: width 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms + 300ms);
}
.mk-mag-row.low .mk-mag-bar i { background: linear-gradient(90deg, #dc2626, #ea580c); }
.mk-mag-row.low b { color: #991b1b; }
.mk-mag-row.low { background: #fff5f5; animation: lowpulse 2s ease-in-out infinite; }
@keyframes lowpulse { 50% { background: #fee2e2; } }
.mk-mag-qty { font-family: "JetBrains Mono", monospace; text-align: right; font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-mag-act { padding: 4px 9px; font-size: 10px; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 600; text-align: center; }
.mk-mag-row:not(.low) .mk-mag-act { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }

/* ---------- General reveal helpers ---------- */
.sec-body { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.sec-body.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .mk-fatt { grid-template-columns: 1fr; }
  .mk-fatt-jumbo { max-height: 180px; }
  .mk-agenda-body { grid-template-columns: 100px 1fr; }
  .mk-chat { grid-template-columns: 110px 1fr; }
  .img-grid { grid-template-columns: 1fr 1fr; }
  .mk-cef { grid-template-columns: 1fr; min-height: auto; }
  .cef-side { display: none; }
  .share-grid { grid-template-columns: 1fr; }
  .share-col.mine { border-right: 0; border-bottom: 1px solid var(--line); }
  .sec { padding: 64px 0; }
}

/* ============================================================
   Phone portrait (<=640px) — readability + horizontal scroll
   ============================================================ */
@media (max-width: 640px) {
  /* Tighter vertical rhythm */
  .sec { padding: 48px 0; }
  .sec-inner { padding: 0 16px; gap: 32px; }
  .sec-title { font-size: clamp(26px, 7vw, 34px); }
  .sec-sub, .sec-bullets { max-width: none; }
  .sec-bullet { font-size: 14px; }

  /* Flatten 3D tilts — they clip + cause horizontal overflow */
  .sec:not(.flip) .mock,
  .sec.flip .mock,
  .mock,
  .tilt,
  .tilt:hover,
  .sec .mock:hover { transform: none !important; }

  /* Wide mockups — enable horizontal scroll on an inner min-width shell */
  .mk-paro, .mk-occ, .mk-agenda, .mk-dash, .mk-mag, .mk-chat {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Paro: keep natural layout, scroll horizontally */
  .mk-paro { padding: 12px 10px 14px; }
  .mk-paro .paro-arch,
  .mk-paro .paro-arch-header,
  .mk-paro .paro-stats { min-width: 560px; }

  /* Occlusogramma: scroll horizontally */
  .mk-occ { padding: 14px 10px; }
  .mk-occ .occ-arch-label,
  .mk-occ .occ-arch-row,
  .mk-occ .occ-nums,
  .mk-occ .occ-badges,
  .mk-occ .occ-legends { min-width: 520px; }

  /* Agenda: col sidebar shrinks + calendar scrollable */
  .mk-agenda-body { grid-template-columns: 82px 1fr; min-height: 360px; }
  .mk-agenda-cal { overflow-x: auto; }
  .mk-agenda-header, .mk-agenda-grid { min-width: 380px; }

  /* Fatture: single column, table scrolls sideways */
  .mk-fatt { min-height: 0; }
  .mk-fatt-sheet { overflow-x: auto; }
  .mk-fatt-row { min-width: 420px; }

  /* Dashboard: stack KPIs + compact chart */
  .mk-dash { grid-template-columns: 1fr 1fr; padding: 14px; gap: 10px; }
  .mk-dash-chart { grid-column: 1 / -1; }
  .mk-dash-bars { height: 70px; }

  /* Cefalometria: hide sidebar, show X-ray */
  .mk-cef { padding: 0; }
  .cef-main { border-radius: 16px; }
  .cef-xray { min-height: 360px; }

  /* Imaging: stack 2x2 grid, reduced thumbs */
  .mk-img { padding: 10px; }
  .img-grid { gap: 6px; }
  .img-toolbar { flex-wrap: wrap; gap: 4px; }
  .img-toolbar .btn { font-size: 10px; padding: 4px 6px; }

  /* Share: single column, compact toggles */
  .mk-share { padding: 12px; }
  .share-modal-header h4 { font-size: 14px; }
  .share-modal-header small { font-size: 11px; }

  /* Chat: narrower sidebar */
  .mk-chat { grid-template-columns: 96px 1fr; font-size: 12px; }
  .mk-chat-side h5 { font-size: 11px; }
  .mk-msg .bb { font-size: 12px; }

  /* Magazzino: tighter row */
  .mk-mag { padding: 12px; }
  .mk-mag-row {
    grid-template-columns: minmax(130px, 1.6fr) 60px 60px 58px;
    gap: 8px; font-size: 11px; padding: 8px 10px;
  }
  .mk-mag-row small { font-size: 9.5px; }
  .mk-mag-act { padding: 3px 6px; font-size: 9.5px; }

  /* Hero browser mockup */
  .browser { border-radius: 12px; }
  .browser-body { font-size: 90%; }
  .float-card { display: none !important; }

  /* Hero typography */
  section.relative.pt-14 h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  section.relative.pt-14 p { font-size: 15px !important; }

  /* Scroll affordance: subtle fade on scrollable mockups */
  .mk-paro::after, .mk-occ::after, .mk-agenda::after, .mk-fatt-sheet::after {
    content: "";
    position: sticky; right: 0; top: 0; float: right;
    width: 24px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85));
    pointer-events: none;
  }

  /* CTA final padding */
  .cta-final { padding: 36px 20px; border-radius: 20px; }
  .cta-final h2 { font-size: clamp(28px, 7vw, 40px) !important; }

  /* ---------- Image-based mockup full width, no letterbox ---------- */
  .mk-occ-img,
  .mk-cef-img,
  .mk-img-double {
    min-height: 0 !important;
    padding: 0;
  }
  .mk-occ-img .mock-screenshot {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain;
    padding: 8px;
  }
  .mk-cef-img { min-height: 300px; }
  .mk-cef-img .mock-screenshot {
    width: 100%; height: auto;
    object-fit: contain;
    background: #0f0a2e;
  }

  /* Imaging double → stack 1 colonna */
  .mk-img-double .img-screenshot-pair {
    grid-template-columns: 1fr !important;
    gap: 1px;
  }
  .mk-img-double .img-screenshot .mock-screenshot {
    width: 100%; height: auto;
    object-fit: contain;
  }

  /* Sez. 04 full-width override anche mobile */
  #sec-04 .sec-inner {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 24px;
  }
  #sec-04 .mk-occ-img { width: 100%; }

  /* Fatture: sidebar sopra + sheet sotto, entrambi full-width */
  .mk-fatt {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .mk-fatt-jumbo {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
  }
  .mk-fatt-jumbo h4 { font-size: 13px; }
  .mk-fatt-jumbo-item { font-size: 11px; padding: 6px 8px; }
  .mk-fatt-sheet { padding: 14px 12px; overflow-x: auto; }
  .mk-fatt-row { min-width: 460px; }

  /* Sharing: 2 studio tile → impilati */
  .share-studios,
  .mk-share .share-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .share-studio-tile { padding: 10px; }
  .ss-pano-arch { max-width: 100%; height: auto; }

  /* Dashboard bars un po' più alte per leggibilità */
  .mk-dash-bars { height: 80px; }
  .mk-dash-kpi { padding: 10px 12px; }
  .mk-dash-kpi .val { font-size: 20px; }

  /* Hero quick-capture email: stack input + btn */
  .demo-quick-hero,
  .demo-quick-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 8px;
  }
  .demo-quick-hero input,
  .demo-quick-cta input {
    width: 100%;
    font-size: 15px;
  }
  .demo-quick-hero button,
  .demo-quick-cta button {
    width: 100%;
    justify-content: center;
  }

  /* Hero CTA buttons → stack */
  .hero-cta-row {
    flex-direction: column !important;
    width: 100%;
    gap: 10px;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Demo modal: margin + scroll */
  #demo-modal {
    padding: 16px;
    align-items: flex-start;
  }
  #demo-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 22px 20px !important;
    border-radius: 18px !important;
    margin-top: 24px;
  }
  #demo-modal .grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #demo-modal h3 { font-size: 18px !important; }
  #demo-modal input { font-size: 15px; padding: 12px 14px; }

  /* Navbar: restringi spazio laterale */
  .nav-sticky .max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; }
  .lang-chip { font-size: 10px; padding: 3px 5px; }

  /* Banner shimmer: testo più piccolo */
  .banner-shimmer { font-size: 11px; line-height: 1.3; }

  /* Scroll-x hint non troppo invadente */
  .mk-paro::after, .mk-occ::after, .mk-agenda::after, .mk-fatt-sheet::after {
    display: none;
  }

  /* Evita orizzontale su tutto il body */
  html, body { overflow-x: hidden; }
}

/* Portrait extra-stretto (<=390px) — iPhone SE/mini */
@media (max-width: 390px) {
  .sec-inner { padding: 0 12px; }
  .sec-title { font-size: clamp(24px, 8vw, 30px); }
  .nav-sticky a span { font-size: 15px; }
  .mk-fatt-row { min-width: 380px; }
  .mk-agenda-header, .mk-agenda-grid { min-width: 340px; }
  .mk-dash { grid-template-columns: 1fr; }
  .mk-dash-chart { grid-column: 1; }
}