/* Verneer demo: the animated walk-through (assets/demo.js). The picture is a
   1280 × 720 canvas scaled to the player; colours are the app's own. */

.demo-sec { padding: 8px 0 56px; background: var(--night, #0A111D); }
.dv { position: relative; max-width: 1180px; margin: 0 auto; outline: none; }
.dv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #070C16;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.dv-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #13203A;
  font-variant-numeric: tabular-nums;
}
.dv-canvas > * { position: absolute; }
.dv-bg {
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(224, 160, 122, 0.16), transparent 70%),
    radial-gradient(120% 100% at 50% 40%, #15233B 0%, #0A111D 55%, #060A12 100%);
}
.dv-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 128px 72px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 45%, #000 25%, transparent 100%);
  mask-image: radial-gradient(70% 65% at 50% 45%, #000 25%, transparent 100%);
}

/* intro */
.dv-intro { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.dv-intro-logo { width: 560px; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); }
.dv-intro-tag { margin: 0; font-size: 26px; color: #D5DCE6; letter-spacing: 0.01em; }

/* the app window */
.dv-app {
  left: 40px;
  top: 24px;
  width: 1200px;
  height: 576px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-origin: 60% 50%;
  font-size: 14px;
}
.dv-titlebar { height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #0A111D; color: #C8D2DF; font-size: 13px; }
.dv-dots { width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #E0A07A 5px, transparent 6px), radial-gradient(circle at 26px 6px, #7590AE 5px, transparent 6px), radial-gradient(circle at 46px 6px, #4E6888 5px, transparent 6px); }
.dv-tools { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #D9E0EA; }
.dv-select, .dv-chip { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #C9D3E0; border-radius: 8px; background: #fff; font-weight: 500; transition: box-shadow 0.2s, border-color 0.2s; }
.dv-select.hi, .dv-chip.hi { border-color: #B8673F; box-shadow: 0 0 0 4px rgba(184, 103, 63, 0.22); }
.dv-ico-layers { width: 16px; height: 12px; border: 2px solid #56647A; border-radius: 3px; box-shadow: 0 -4px 0 -2px #56647A; }
.dv-caret { width: 8px; height: 8px; border-right: 2px solid #56647A; border-bottom: 2px solid #56647A; transform: rotate(45deg) translate(-2px, -2px); }
.dv-grow { flex: 1; }
.dv-primary { position: relative; overflow: hidden; height: 38px; display: flex; align-items: center; padding: 0 20px; border-radius: 9px; background: #2C5A8C; color: #fff; font-weight: 600; box-shadow: 0 3px 0 #1D3F64; transition: transform 0.12s; }
.dv-primary.press { transform: scale(0.95); }
.dv-ripple { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); opacity: 0; }
.dv-body { position: absolute; top: 88px; left: 0; right: 0; bottom: 0; display: flex; }
.dv-left { position: relative; width: 500px; border-right: 1px solid #D9E0EA; overflow: hidden; }
.dv-table { position: absolute; inset: 0; }
.dv-tr { display: grid; grid-template-columns: 40px 1fr 72px 72px 48px 56px; align-items: center; height: 38px; border-bottom: 1px solid #E6EBF2; padding: 0 10px 0 0; }
.dv-th { height: 36px; background: #EEF2F7; font-size: 12px; font-weight: 600; color: #56647A; }
.dv-th span:first-child { text-align: center; }
.dv-tr.cur { background: #F2F7FD; box-shadow: inset 3px 0 0 #2C5A8C; }
.dv-n { text-align: center; font-weight: 600; color: #56647A; position: relative; }
.dv-n::before { content: ''; position: absolute; left: 6px; top: -9px; bottom: -9px; width: 4px; border-radius: 2px; background: var(--c); }
.dv-tr.empty .dv-n::before { background: #E6EBF2; }
.dv-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.dv-num { text-align: right; font-weight: 600; }
.dv-band { display: flex; justify-content: center; }
.dv-band-g { width: 30px; height: 16px; border: 1.5px solid #C9D3E0; border-radius: 3px; opacity: 0; transition: opacity 0.3s; }
.dv-band-g.show { opacity: 1; }
.dv-band-g.on-t { border-top: 3px solid #B8673F; }
.dv-band-g.on-b { border-bottom: 3px solid #B8673F; }
.dv-band-g.on-l { border-left: 3px solid #B8673F; }
.dv-band-g.on-r { border-right: 3px solid #B8673F; }
.dv-type-caret { position: absolute; left: 0; top: 0; width: 2px; height: 20px; background: #2C5A8C; }
.dv-cutlist { position: absolute; inset: 0; overflow: hidden; padding: 10px 14px 20px; background: #fff; opacity: 0; visibility: hidden; }
.dv-cut-title { font-weight: 600; font-size: 15px; margin: 4px 0 10px; }
.dv-cut-row { display: grid; grid-template-columns: 36px 30px 1fr 26px; align-items: center; height: 36px; border-bottom: 1px solid #E6EBF2; font-size: 18px; transition: background 0.2s; }
.dv-cut-row b { color: #56647A; font-size: 14px; }
.dv-cut-row.cur { background: #FBEFE6; box-shadow: inset 3px 0 0 #B8673F; }
.dv-cut-ico { width: 22px; height: 14px; border: 2px solid #56647A; border-radius: 2px; position: relative; }
.dv-cut-ico.h::after { content: ''; position: absolute; left: -4px; right: -4px; top: 4px; height: 2px; background: #B8673F; }
.dv-cut-ico.v::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: 8px; width: 2px; background: #B8673F; }
.dv-cut-v { font-weight: 700; text-align: right; padding-right: 12px; }
.dv-check { width: 18px; height: 18px; border: 2px solid #B7C3D3; border-radius: 4px; }
.dv-cut-row.done .dv-check { background: #2F6F62; border-color: #2F6F62; box-shadow: inset 0 0 0 3px #fff; }

.dv-right { position: relative; flex: 1; background: #E9EEF4; }
.dv-sheet-head { position: absolute; left: 18px; right: 18px; top: 10px; display: flex; justify-content: space-between; font-size: 13px; color: #56647A; }
.dv-sheet-head b { color: #13203A; font-size: 15px; }
.dv-board { position: absolute; left: 18px; right: 18px; top: 36px; height: 360px; }
.dv-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dv-pt { fill: #13203A; font-weight: 700; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.dv-pn { fill: rgba(19, 32, 58, 0.62); font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.dv-oc-t { fill: #8A4A2A; font-size: 70px; font-weight: 700; font-family: 'IBM Plex Sans', system-ui, sans-serif; paint-order: stroke; stroke: #FBF1E6; stroke-width: 14px; }
.dv-svg.print .dv-pt, .dv-svg.print .dv-pn { fill: #111; }
.dv-svg.print .dv-oc-t { fill: #111; stroke: #fff; }
.dv-optbar { left: 120px; right: 120px; top: 200px; height: 10px; border-radius: 6px; background: rgba(44, 90, 140, 0.18); overflow: hidden; position: absolute; opacity: 0; }
.dv-optfill { height: 100%; background: linear-gradient(90deg, #2C5A8C, #B8673F); transform-origin: 0 50%; transform: scaleX(0); }
.dv-opttxt { position: absolute; left: 0; right: 0; top: 222px; text-align: center; font-weight: 600; color: #2C5A8C; opacity: 0; }
.dv-savings {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #13203A;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(10, 17, 29, 0.25), 0 0 0 2px #E0A07A;
  opacity: 0;
}
.dv-star { color: #B8673F; font-size: 18px; }
.dv-callout {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 10px;
  background: #0A111D;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
}
.dv-callout::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #0A111D; transform: rotate(45deg); }
.dv-thumbs { position: absolute; left: 18px; top: 408px; display: flex; gap: 10px; opacity: 0; }
.dv-thumb { width: 104px; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid #D9E0EA; font-size: 11px; color: #56647A; text-align: center; }
.dv-thumb.on { border-color: #2C5A8C; box-shadow: 0 0 0 2px rgba(44, 90, 140, 0.25); }
.dv-thumb .dv-svg { height: 62px; }
.dv-stats { position: absolute; right: 18px; top: 408px; display: grid; grid-template-columns: repeat(4, 104px); gap: 8px; }
.dv-stat { padding: 10px 10px 8px; border-radius: 10px; background: #fff; border: 1px solid #D9E0EA; display: flex; flex-direction: column; gap: 2px; }
.dv-stat b { font-size: 24px; line-height: 1.1; }
.dv-stat span { font-size: 12px; color: #56647A; }
.dv-stats.done .dv-stat:nth-child(2) b { color: #2F6F62; }

/* the phone */
.dv-phone {
  left: 900px;
  top: 30px;
  width: 310px;
  height: 640px;
  padding: 12px;
  border-radius: 46px;
  background: linear-gradient(160deg, #22344F, #0A111D);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  opacity: 0;
}
.dv-notch { position: absolute; left: 50%; top: 20px; width: 90px; height: 20px; margin-left: -45px; border-radius: 12px; background: #050910; z-index: 2; }
.dv-ph { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #F4F6F9; display: flex; flex-direction: column; align-items: center; }
.dv-ph-head { width: 100%; padding: 50px 18px 12px; display: flex; justify-content: space-between; align-items: baseline; background: #fff; border-bottom: 1px solid #D9E0EA; font-size: 13px; color: #56647A; }
.dv-ph-head b { color: #13203A; font-size: 15px; }
.dv-ph-measure { margin-top: 26px; font-size: 104px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #13203A; }
.dv-ph-fence { margin-top: 6px; font-size: 14px; font-weight: 600; color: #B8673F; text-transform: uppercase; letter-spacing: 0.08em; }
.dv-ph-board { width: 262px; height: 190px; margin-top: 22px; padding: 6px; border-radius: 12px; background: #E9EEF4; }
.dv-ph-next { margin-top: 22px; padding: 14px 26px; border-radius: 14px; background: #2C5A8C; color: #fff; font-weight: 600; font-size: 17px; box-shadow: 0 4px 0 #1D3F64; transition: transform 0.12s; }
.dv-ph-next.press { transform: scale(0.94); }
.dv-ph-offline { margin-top: 18px; padding: 6px 12px; border-radius: 999px; background: #E1F0EC; color: #2F6F62; font-size: 12px; font-weight: 600; opacity: 0; }
.dv-finger { left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); opacity: 0; }
.dv-voice {
  left: 470px;
  top: 470px;
  width: 400px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 18px;
  background: #fff;
  color: #13203A;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
}
.dv-waves { display: flex; gap: 3px; align-items: center; height: 30px; flex: none; }
.dv-waves i { width: 4px; height: 28px; border-radius: 2px; background: #B8673F; transform-origin: 50% 50%; }

/* printing */
.dv-printer { left: 50%; top: 0; width: 480px; height: 112px; margin-left: -240px; z-index: 3; opacity: 0; }
.dv-printer-top { position: absolute; inset: 0 0 16px; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #3A4A63, #1F2B3E); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }
.dv-printer-slot { position: absolute; left: 50px; right: 50px; bottom: 6px; height: 14px; border-radius: 0 0 10px 10px; background: #0A111D; }
.dv-paper {
  left: 50%;
  top: 104px;
  width: 400px;
  height: 566px;
  z-index: 2;
  padding: 22px 24px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.dv-paper-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 12px; font-size: 13px; color: #333; }
.dv-paper-head b { font-size: 20px; color: #111; }
.dv-paper-body { display: grid; grid-template-columns: 1fr 86px; gap: 14px; height: calc(100% - 50px); }
/* the board stands upright on the page, as in the printed plan */
.dv-paper-board { position: relative; width: 252px; height: 374px; }
.dv-paper-board .dv-svg { position: absolute; left: 0; top: 0; width: 374px; height: 252px; transform: translateX(252px) rotate(90deg); transform-origin: 0 0; }
.dv-paper-list { font-size: 12px; color: #111; }
.dv-paper-list div { display: flex; justify-content: space-between; border-bottom: 1px solid #111; padding: 3px 0; }
.dv-labels { left: 790px; top: 180px; width: 330px; padding: 16px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); opacity: 0; z-index: 1; }
.dv-labels-t { display: block; margin-bottom: 10px; font-size: 15px; }
.dv-lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dv-label { border: 1px dashed #999; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dv-qr { width: 58px; height: 58px; }
.dv-label-t { text-align: center; font-size: 10px; line-height: 1.2; color: #111; }
.dv-label-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 86px; }

/* quote and WhatsApp */
.dv-quote { left: 170px; top: 90px; width: 430px; padding: 26px; border-radius: 14px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); opacity: 0; }
.dv-quote-head { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 3px solid #B8673F; }
.dv-quote-mark { width: 54px; height: auto; }
.dv-quote-head b { display: block; font-size: 24px; }
.dv-quote-head span { color: #56647A; font-size: 14px; }
.dv-quote-client { margin: 16px 0 10px; color: #56647A; }
.dv-quote-row, .dv-quote-total { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #E6EBF2; font-size: 16px; }
.dv-quote-total { border-bottom: 0; margin-top: 6px; font-size: 20px; font-weight: 700; color: #2C5A8C; }
.dv-wa { left: 700px; top: 110px; width: 420px; height: 460px; border-radius: 18px; overflow: hidden; background: #ECE5DD; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); opacity: 0; }
.dv-wa-head { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: #075E54; color: #fff; font-size: 17px; }
.dv-wa-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #C98E6B, #7590AE); }
.dv-wa-body { padding: 26px 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dv-wa-file { display: flex; gap: 12px; align-items: center; width: 300px; padding: 12px; border-radius: 12px; background: #DCF8C6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); transform-origin: 100% 50%; opacity: 0; }
.dv-wa-pdf { flex: none; width: 44px; height: 54px; display: grid; place-items: center; border-radius: 6px; background: #E5484D; color: #fff; font-weight: 700; font-size: 12px; }
.dv-wa-file b { display: block; font-size: 14px; line-height: 1.3; }
.dv-wa-file span { font-size: 12px; color: #667781; }
.dv-wa-msg { max-width: 300px; padding: 10px 12px; border-radius: 12px; background: #DCF8C6; font-size: 15px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); opacity: 0; }
.dv-wa-ticks { margin-left: 8px; font-size: 12px; color: #8696A0; letter-spacing: -3px; }
.dv-wa-ticks.read { color: #34B7F1; }

/* outro */
.dv-outro { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; color: #fff; opacity: 0; }
.dv-outro-logo { width: 440px; height: auto; }
.dv-outro h3 { margin: 0; max-width: 820px; font-size: 40px; line-height: 1.15; }
.dv-outro p { margin: 0; color: #9AA8BB; font-size: 18px; }
.dv-cta {
  display: inline-flex;
  align-items: center;
  padding: 16px 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, #E0A07A, #B56A44);
  color: #0A111D;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(184, 103, 63, 0.45);
  animation: dv-pulse 1.8s ease-in-out infinite;
}
.dv:not(.dv-ready) .dv-cta { display: none; }
@keyframes dv-pulse { 50% { transform: scale(1.04); box-shadow: 0 16px 40px rgba(184, 103, 63, 0.6); } }

/* pointer and caption */
.dv-cursor {
  left: 0;
  top: 0;
  width: 26px;
  height: 30px;
  z-index: 5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M2 2l20 13-9 2 5 10-4 2-5-10-7 6z' fill='%23fff' stroke='%230A111D' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  opacity: 0;
}
.dv-cursor-ring { position: absolute; left: -16px; top: -16px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #E0A07A; opacity: 0; }
.dv-cap {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: 1180px;
  width: max-content;
  padding: 12px 22px;
  border-radius: 16px;
  background: rgba(7, 12, 22, 0.86);
  color: #F3F5F8;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 6;
  opacity: 0;
}
.dv-cap b { color: #E0A07A; margin-right: 10px; }

/* player controls */
.dv-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 0;
  border-radius: 50%;
  background: rgba(224, 160, 122, 0.95);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 8;
  transition: opacity 0.2s, transform 0.2s;
}
.dv-big::before { content: ''; position: absolute; left: 36px; top: 28px; border-style: solid; border-width: 18px 0 18px 28px; border-color: transparent transparent transparent #0A111D; }
.dv-big:hover { transform: scale(1.06); }
.dv.dv-playing .dv-big { opacity: 0; pointer-events: none; }
.dv-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: #C8D2DF; }
.dv-btn { flex: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.dv-btn:hover, .dv-btn:focus-visible { background: rgba(255, 255, 255, 0.16); }
.dv-btn svg { width: 20px; height: 20px; fill: currentColor; }
.dv-btn .i-pause { display: none; }
.dv.dv-playing .dv-btn .i-play { display: none; }
.dv.dv-playing .dv-btn .i-pause { display: block; }
.dv-track { position: relative; flex: 1; height: 26px; cursor: pointer; touch-action: none; }
.dv-track::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.dv-fill { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #E0A07A, #B8673F); transform-origin: 0 50%; transform: scaleX(0); }
.dv-ticks { position: absolute; inset: 0; pointer-events: none; }
.dv-tick { position: absolute; top: 8px; width: 2px; height: 10px; margin-left: -1px; background: rgba(10, 17, 29, 0.9); }
.dv-track:focus-visible { outline: 2px solid #E0A07A; outline-offset: 2px; border-radius: 4px; }
.dv-time { flex: none; font-variant-numeric: tabular-nums; font-size: 14px; min-width: 92px; text-align: right; }
.dv-chapters { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; counter-reset: dvch; }
.dv-chapters li { counter-increment: dvch; }
.dv-chapters button {
  width: 100%;
  text-align: left;
  padding: 10px 12px 10px 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #D5DCE6;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  position: relative;
}
.dv-chapters button::before { content: counter(dvch); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: rgba(224, 160, 122, 0.2); color: #E0A07A; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.dv-chapters button.on { border-color: #E0A07A; background: rgba(224, 160, 122, 0.12); color: #fff; }
.dv-chapters button small { display: block; color: #8D9BB0; font-size: 12px; margin-top: 2px; }

/* full screen: the picture as large as the screen allows, controls below */
.dv:fullscreen { max-width: none; width: 100vw; height: 100vh; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.dv:fullscreen .dv-screen { width: min(100%, calc((100vh - 110px) * 16 / 9)); border-radius: 8px; }
.dv:fullscreen .dv-bar { width: min(100%, calc((100vh - 110px) * 16 / 9)); }
.dv:fullscreen .dv-chapters { display: none; }

.dv-cap-out { display: none; margin: 12px 2px 0; min-height: 3.2em; color: #D5DCE6; font-size: 15px; line-height: 1.45; }
.dv-cap-out b { color: #E0A07A; margin-right: 8px; }
@media (max-width: 760px) {
  .dv-canvas .dv-cap { display: none; }
  .dv-cap-out { display: block; }
}
@media (max-width: 640px) {
  .dv-screen { border-radius: 12px; }
  .dv-bar { gap: 8px; }
  .dv-time { min-width: 0; font-size: 12px; }
  .dv-chapters { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-cta { animation: none; }
}

/* ═════════ the phone version: the app's phone screens on a 390 × 720 canvas ═════════ */
.dv-mcanvas {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 720px;
  transform-origin: 0 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #13203A;
  font-variant-numeric: tabular-nums;
}
.dv.dv-m .dv-mcanvas { display: block; }
.dv.dv-m .dv-canvas { display: none; }
.dv-mcanvas > * { position: absolute; }
.dm-i { flex: none; display: block; }
.dm-i.dim { color: #56647A; }
.dm-grow { flex: 1; min-width: 0; }

.dm-intro { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 26px; text-align: center; }
.dm-intro-logo { width: 290px; height: auto; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.5)); }
.dm-intro-tag { margin: 0; font-size: 18px; line-height: 1.4; color: #D5DCE6; }
.dm-cap {
  left: 0;
  right: 0;
  top: 0;
  height: 76px;
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: #0A111D;
  color: #E6EAF0;
  font-size: 13px;
  line-height: 1.35;
  z-index: 10;
}
.dm-cap b { color: #E0A07A; font-size: 15px; }
.dm-cap span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* the app */
.dm-app { left: 0; top: 76px; width: 390px; height: 644px; overflow: hidden; background: #fff; font-size: 15px; opacity: 0; }
.dm-app > * { position: absolute; left: 0; right: 0; }
.dm-top { top: 0; height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 14px; border-bottom: 1px solid #D9E0EA; background: #fff; z-index: 3; }
.dm-ttl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.dm-mark { width: 26px; height: auto; }
.dm-pname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dm-sync { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2F6F62; }
.dm-chips { top: 52px; height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 12px; overflow: hidden; white-space: nowrap; border-bottom: 1px solid #D9E0EA; background: #fff; z-index: 3; }
.dm-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; background: #E6EBF2; color: #33415A; font-size: 13px; font-weight: 600; }
.dm-chip b { color: #13203A; }
.dm-chip.warn { background: #FBEFD9; color: #8A5A12; }
.dm-busy { width: 8px; height: 8px; border-radius: 50%; background: #C98A1E; }
.dm-chip.big { height: 38px; padding: 0 16px; font-size: 15px; border: 1.5px solid #C9D3E0; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.dm-chip.big.hi { border-color: #B8673F; box-shadow: 0 0 0 4px rgba(184, 103, 63, 0.22); }
.dm-run { top: 95px; height: 3px; overflow: hidden; background: rgba(44, 90, 140, 0.15); z-index: 3; opacity: 0; }
.dm-run i { position: absolute; left: 0; top: 0; width: 130px; height: 100%; background: linear-gradient(90deg, transparent, #2C5A8C, transparent); }
.dm-view { top: 96px; bottom: 56px; overflow: hidden; background: #fff; }
.dm-view > * { position: absolute; }

/* Parts */
.dm-list { left: 0; right: 0; top: 0; bottom: 125px; overflow: hidden; }
.dm-row { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto 46px; align-items: center; height: 58px; border-bottom: 1px solid #E1E6EE; background: #fff; }
.dm-spk { display: grid; place-items: center; color: #56647A; }
.dm-n { position: relative; text-align: center; font-weight: 600; color: #56647A; }
.dm-n::before { content: ''; position: absolute; left: 0; top: -14px; bottom: -14px; width: 4px; border-radius: 2px; background: var(--c); }
.dm-mid { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-left: 6px; }
.dm-nm { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-band-g.dm-eg { width: 24px; height: 13px; }
.dm-dims { padding-left: 8px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.dm-q { margin-left: 6px; color: #2C5A8C; font-size: 14px; font-weight: 600; }
.dm-del { height: 100%; display: grid; place-items: center; color: #C0392B; border-left: 1px solid #E1E6EE; }
.dm-entry { left: 0; right: 0; bottom: 0; height: 125px; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px; background: #F4F6F9; border-top: 1px solid #D9E0EA; z-index: 2; }
.dm-e1 { display: flex; gap: 6px; height: 40px; }
.dm-ibtn { flex: none; width: 44px; display: grid; place-items: center; border: 1px solid #C9D3E0; border-radius: 10px; background: #fff; color: #33415A; }
.dm-in { min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid #C9D3E0; border-radius: 10px; background: #fff; font-size: 15px; white-space: nowrap; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.dm-in.grow { flex: 1; }
.dm-in.on { border-color: #2C5A8C; box-shadow: 0 0 0 3px rgba(44, 90, 140, 0.18); }
.dm-ph { color: #8D9BB0; }
.dm-sel { flex: none; width: 98px; justify-content: space-between; }
.dm-e2 { display: grid; grid-template-columns: 1fr 1fr 62px 50px; gap: 6px; align-items: end; }
.dm-f { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-fl { font-size: 11.5px; font-weight: 500; color: #56647A; white-space: nowrap; overflow: hidden; }
.dm-num { height: 44px; justify-content: center; font-size: 20px; font-weight: 600; }
.dm-add { height: 44px; display: grid; place-items: center; border-radius: 11px; background: #2C5A8C; color: #fff; box-shadow: 0 3px 0 #1D3F64; transition: transform 0.1s; }
.dm-add.press { transform: scale(0.9); }
.dm-nav { bottom: 0; height: 56px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid #D9E0EA; z-index: 4; }
.dm-nb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #56647A; font-size: 12px; font-weight: 600; }
.dm-nb.on { color: #2C5A8C; }
.dm-nb.on::before { content: ''; position: absolute; top: 0; width: 42px; height: 3px; border-radius: 0 0 3px 3px; background: #B8673F; }
.dm-kp { bottom: 0; height: 150px; padding: 6px; display: flex; flex-direction: column; gap: 6px; background: #E3E8EF; z-index: 4; }
.dm-kp-sug { display: flex; gap: 6px; height: 30px; overflow: hidden; }
.dm-kp-sug span { flex: none; display: flex; align-items: center; padding: 0 13px; border: 1px solid #C9D3E0; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.dm-kp-keys { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr 1fr; gap: 5px; }
.dm-key { display: grid; place-items: center; border-radius: 9px; background: #fff; font-size: 26px; font-weight: 600; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.dm-key.fn { background: #D2D9E3; font-size: 22px; }
.dm-key.go { background: #2C5A8C; color: #fff; }
.dm-key.down { background: #C9D8EA; transform: scale(0.93); }
.dm-key.go.down { background: #1D3F64; }

/* Plan */
.dm-v-plan { background: #E9EEF4; }
.dm-sw { left: 0; right: 0; top: 0; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border-bottom: 1px solid #E1E6EE; }
.dm-sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; line-height: 1.25; }
.dm-sw-t b { font-size: 16px; }
.dm-sw-t span { font-size: 12px; color: #56647A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-board { left: 8px; right: 8px; top: 54px; height: 236px; }
.dm-tools { right: 8px; top: 246px; display: flex; gap: 8px; }
.dm-tool { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: #33415A; box-shadow: 0 2px 8px rgba(10, 17, 29, 0.14); }
.dm-tool.on { color: #B8673F; box-shadow: 0 0 0 1.5px #B8673F, 0 2px 8px rgba(10, 17, 29, 0.14); }
.dm-combos { left: 0; right: 0; top: 160px; text-align: center; font-size: 14px; font-weight: 600; color: #2C5A8C; opacity: 0; }
.dv-callout.dm-callout { font-size: 12px; padding: 7px 10px; z-index: 2; }
.dm-tabs { left: 0; right: 0; top: 296px; height: 42px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: #fff; border-top: 1px solid #D9E0EA; border-bottom: 1px solid #E1E6EE; }
.dm-tab { position: relative; height: 100%; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: #56647A; white-space: nowrap; }
.dm-tab.on { color: #13203A; }
.dm-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #B8673F; }
.dm-drawer { left: 0; right: 0; top: 338px; bottom: 0; overflow: hidden; background: #fff; }
.dm-pane { position: absolute; inset: 0; background: #fff; line-height: 1.3; }
.dm-save { display: none; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #E1E6EE; font-size: 13px; font-weight: 600; color: #8A4A2A; transition: background 0.3s, box-shadow 0.3s; }
.dm-save.hi { background: #FBEFE6; box-shadow: inset 3px 0 0 #B8673F; }
.dm-star { color: #B8673F; }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; }
.dm-cell { display: flex; flex-direction: column; padding: 6px 14px; border-bottom: 1px solid #E1E6EE; }
.dm-cell:nth-child(odd) { border-right: 1px solid #E1E6EE; }
.dm-cell b { font-size: 22px; line-height: 1.15; }
.dm-cell span { font-size: 12px; color: #56647A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-grid.done .dm-cell:nth-child(2) b { color: #2F6F62; }
.dm-cuts > div { position: absolute; left: 0; right: 0; top: 0; }
.dm-cut { display: grid; grid-template-columns: 34px 30px 1fr 30px; align-items: center; height: 34px; padding: 0 12px; border-bottom: 1px solid #E6EBF2; font-size: 16px; transition: background 0.2s; }
.dm-cut b { font-size: 13px; color: #56647A; }
.dm-cut-v { padding-right: 12px; text-align: right; font-weight: 700; }
.dm-cut.cur { background: #FBEFE6; box-shadow: inset 3px 0 0 #B8673F; }
.dm-cut.done .dv-check { background: #2F6F62; border-color: #2F6F62; box-shadow: inset 0 0 0 3px #fff; }
.dm-off { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid #E6EBF2; font-size: 14px; }
.dm-off-sw { flex: none; width: 26px; height: 18px; border: 2px dashed #C98E6B; border-radius: 3px; background: radial-gradient(circle, rgba(184, 103, 63, 0.45) 1.5px, transparent 2px) 0 0 / 6px 6px, #FBF1E6; }

/* Cut: the operator */
.dm-v-cut { background: #fff; }
.dm-vol { color: #56647A; }
.dm-vol.on { color: #B8673F; }
.dm-prog { left: 14px; right: 14px; top: 58px; height: 6px; overflow: hidden; border-radius: 3px; background: #E1E6EE; }
.dm-prog i { display: block; height: 100%; background: #2C5A8C; transform-origin: 0 50%; }
.dm-dir { left: 14px; right: 14px; top: 70px; height: 34px; display: flex; align-items: center; gap: 10px; }
.dm-dir-g { position: relative; flex: none; width: 28px; height: 22px; border: 2.5px solid #13203A; border-radius: 3px; }
.dm-dir-g::after { content: ''; position: absolute; left: -6px; right: -6px; top: 7px; height: 3px; background: #B8673F; }
.dm-dir-g.v::after { left: 10px; right: auto; top: -6px; bottom: -6px; width: 3px; height: auto; }
.dm-dir b { flex: 1; font-size: 19px; }
.dm-step { font-size: 14px; color: #56647A; }
.dm-card { left: 14px; right: 14px; top: 110px; height: 108px; padding: 11px 16px; overflow: hidden; border-radius: 16px; background: #0B111C; color: #fff; }
.dm-card-l { font-size: 13px; font-weight: 600; color: #D9A57F; }
.dm-card-n { display: flex; align-items: baseline; gap: 8px; color: #E09A6E; }
.dm-card-n span { display: inline-block; font-size: 66px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.dm-card-n small { font-size: 22px; color: #C8D2DF; }
.dm-up { left: 14px; right: 14px; top: 226px; height: 28px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #56647A; white-space: nowrap; overflow: hidden; }
.dm-up-c { padding: 3px 10px; border-radius: 999px; background: #E6EBF2; color: #13203A; font-weight: 600; }
.dm-oboard { left: 0; right: 0; top: 262px; height: 150px; padding: 8px 34px; background: #E9EEF4; }
.dm-obtns { left: 14px; right: 14px; top: 422px; height: 56px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.dm-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 16px; font-weight: 600; white-space: nowrap; transition: transform 0.1s; }
.dm-btn.ghost { border: 1.5px solid #D9E0EA; color: #8D9BB0; }
.dm-btn.primary { background: #2C5A8C; color: #fff; box-shadow: 0 3px 0 #1D3F64; }
.dm-btn.press { transform: scale(0.94); }

/* choosing the board */
.dm-scrim { top: 0; bottom: 0; background: #0A111D; z-index: 5; opacity: 0; }
.dm-sheet { bottom: 0; height: 220px; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25); z-index: 6; opacity: 0; }
.dm-grab { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: #C9D3E0; }
.dm-sheet-t { font-size: 17px; }
.dm-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid #D9E0EA; border-radius: 12px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.dm-opt.hi { border-color: #2C5A8C; background: #F2F7FD; box-shadow: 0 0 0 3px rgba(44, 90, 140, 0.15); }
.dm-opt-sw { flex: none; width: 36px; height: 26px; border: 1px solid #C9D3E0; border-radius: 4px; background: #F3F1EC; }
.dm-opt .dm-grow { display: flex; flex-direction: column; }
.dm-opt .dm-grow span { font-size: 12.5px; color: #56647A; }
.dm-opt-ck { color: #2C5A8C; opacity: 0; transition: opacity 0.2s; }
.dm-opt.hi .dm-opt-ck { opacity: 1; }
.dm-opt-row { display: flex; gap: 8px; }

/* over the app */
.dm-voice { left: 16px; right: 16px; top: 452px; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; color: #13203A; font-size: 14px; font-weight: 500; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); z-index: 7; opacity: 0; }
.dm-offline { left: 50%; top: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #E1F0EC; color: #2F6F62; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); z-index: 8; opacity: 0; }
.dm-finger { left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(19, 32, 58, 0.28); border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(184, 103, 63, 0.25); z-index: 9; opacity: 0; }

/* printing, the quote and WhatsApp on the phone */
.dv-printer.dm-printer { top: 76px; width: 330px; height: 84px; margin-left: -165px; }
.dm-printer .dv-printer-slot { left: 30px; right: 30px; }
.dv-paper.dm-paper { top: 148px; width: 330px; height: 466px; padding: 16px 18px; }
.dm-paper .dv-paper-board { width: 190px; height: 286px; }
.dm-paper .dv-paper-board .dv-svg { width: 286px; height: 190px; transform: translateX(190px) rotate(90deg); }
.dv-labels.dm-labels { left: 36px; top: 440px; width: 318px; padding: 12px; z-index: 3; }
.dm-labels .dv-qr { width: 48px; height: 48px; }
.dv-quote.dm-quote { left: 20px; top: 130px; width: 350px; padding: 20px; }
.dm-wa { left: 0; top: 76px; width: 390px; height: 644px; overflow: hidden; background: #ECE5DD; z-index: 6; opacity: 0; }
.dm-wa-head { position: absolute; left: 0; right: 0; top: 0; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #075E54; color: #fff; font-size: 17px; }
.dm-wa-body { position: absolute; left: 0; right: 0; top: 58px; bottom: 56px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 22px 14px; }
.dm-wa .dv-wa-file { width: 280px; }
.dm-wa-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.dm-wa-in { flex: 1; height: 42px; border-radius: 21px; background: #fff; }
.dm-wa-mic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #00A884; color: #fff; }

.dm-outro { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 26px; text-align: center; color: #fff; opacity: 0; }
.dm-outro-logo { width: 280px; height: auto; }
.dm-outro h3 { margin: 0; font-size: 27px; line-height: 1.2; }
.dm-outro p { margin: 0; color: #9AA8BB; font-size: 15px; }
.dm-outro .dv-cta { font-size: 20px; padding: 15px 30px; }
.dm-cta-slot { display: flex; justify-content: center; }

/* the player in phone mode: as tall as the screen allows, controls under it */
.dv.dv-m .dv-screen {
  aspect-ratio: 390 / 720;
  width: min(100%, max(280px, calc((100vh - 150px) * 0.5417)));
  width: min(100%, max(280px, calc((100svh - 150px) * 0.5417)));
  margin: 0 auto;
  border-radius: 22px;
}
.dv.dv-m .dv-bar { width: min(100%, max(280px, calc((100svh - 150px) * 0.5417))); margin-left: auto; margin-right: auto; }
.dv.dv-m .dv-cap-out { display: none; }
.dv.dv-m .dv-big { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.dv.dv-m .dv-big::before { left: 30px; top: 23px; border-width: 15px 0 15px 23px; }
.dv.dv-m:fullscreen .dv-screen,
.dv.dv-m:fullscreen .dv-bar { width: min(100%, calc((100vh - 110px) * 0.5417)); }
@media (max-width: 480px) {
  .demo-sec { padding-bottom: 40px; }
  .dv-chapters { gap: 6px; }
  .dv-chapters button { padding: 9px 10px 9px 36px; font-size: 13px; }
  .dv-chapters button::before { left: 10px; top: 9px; }
  .dv-chapters button small { display: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* wide but short screens (a phone on its side): the picture and its controls fit the height */
.dv:not(.dv-m) .dv-screen,
.dv:not(.dv-m) .dv-bar,
.dv:not(.dv-m) .dv-cap-out {
  width: min(100%, max(420px, calc((100vh - 110px) * 16 / 9)));
  width: min(100%, max(420px, calc((100svh - 110px) * 16 / 9)));
  margin-left: auto;
  margin-right: auto;
}
.dv:not(.dv-m):fullscreen .dv-screen,
.dv:not(.dv-m):fullscreen .dv-bar { width: min(100%, calc((100vh - 110px) * 16 / 9)); }
.dm-save.in { display: flex; }