/* Force single dot: hide coachmark's internal dot */
.coachmark .dot { display: none !important; }

/* Pulsing target + smoother motion */
.pulse {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple, #6F54E8);
  z-index: 1000;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16,24,40,0.18);
  transition: left 520ms cubic-bezier(.16, 1, .3, 1), top 520ms cubic-bezier(.16, 1, .3, 1);
}
.pulse::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 6px solid rgba(111,84,232,0.35);
  animation: pulse-ring 1400ms ease-out infinite;
  transform-origin: center;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.85; }
  70%  { transform: scale(1.7); opacity: 0.25; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Travel + zoom rules */
.coachmark {
  position: absolute;
  transition: left 520ms cubic-bezier(.16, 1, .3, 1), top 520ms cubic-bezier(.16, 1, .3, 1);
  z-index: 1200;
  pointer-events: none; /* bubble is display-only; pulse handles clicks */
}

.coachmark .bubble{
  position: relative;
  display: inline-block;
  max-width: 520px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 12px 30px rgba(16,24,40,0.18);
}
.coachmark .content{
  font-size: 16px;
  line-height: 1.4;
  color: #0f172a;
}
.screenshot {
  display: block;
  width: 100%;
  height: 100%;            /* follow frame height */
  max-height: none;        /* prevent viewport-based shrink */
  object-fit: contain;     /* keep aspect ratio inside canvas */
  transition: opacity 350ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
  transform-origin: center center;
}
.screenshot.is-fading { opacity: 0.06; }
.screenshot.is-zoom { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .pulse, .coachmark { transition: none !important; }
  .pulse::before { animation: none !important; opacity: 0.35; }
  .screenshot { transition: none !important; }
}

/* Constrain demo width so the screenshot doesn't fill the entire page */
.stage{ 
  width: auto !important;  /* let inline-size control width */
  position: relative; width: min(1100px, 92vw); margin: 48px auto; z-index: 1; 
}

/* Dialogue box only — no tail */
.coachmark .bubble .tail { display: none !important; }

/* --- End-of-tour modal --- */
.modal-wrap[hidden]{ display:none; }
.modal-wrap{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 4000;
}
.modal{
  position: relative;
  width: min(720px, 92vw);
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(16,24,40,0.25);
  padding: 36px 40px;
  text-align: center;
}
.modal h2{
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: #121826;
}
.modal p{
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.5;
  color: #334155;
}
.modal .cta{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--purple, #0ABDC6);
  color: #012A30;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(10,189,198,0.35);
}
.modal .close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E6E8F2;
  background: #FFFFFF;
  font-size: 20px;
  line-height: 34px;
  cursor: pointer;
}

/* --- App-style window frame --- */
.mw{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    0 50px 100px rgba(16,24,40,0.18),
    0 2px 6px rgba(16,24,40,0.06);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
.mw::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
  pointer-events:none;
}
.mw-chrome{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(180deg, #F8FAFF 0%, #ECF0F7 100%);
  border-bottom: 1px solid #E7EBF3;
}
.mw-controls{ display:flex; gap:8px; align-items:center; }
.mw-dot{
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 1px rgba(0,0,0,0.06);
  background:#E2E8F0;
}
.mw-dot.red{ background:#FF5F57; }
.mw-dot.amber{ background:#FFBD2E; }
.mw-dot.green{ background:#28C840; }
.mw-title{ font-size:13px; color:#334155; opacity:.8; }
.mw-canvas{ position: relative; background: transparent; height: calc(100% - 44px); }
.mw-canvas > img.screenshot{ display:block; width:100%; height:auto; }

/* --- Background aurora / iOS-style glass backdrop --- */
html,body{ height: 100%; }
body{ background: transparent !important; }
.bg-aurora{ display: none !important; }

/* ===== Responsive fit: scale whole overlay to keep nav visible without page scroll ===== */
.stage{
  /* Design reference size (adjust if your screenshots differ) */
  --design-w: 800; /* px */
  --design-h: 500;  /* px (image + chrome) */
  --pad: 40px;      /* breathing room around overlay */
  /* Compute scale factors (unitless) */
  --scale-w: calc((100vw - var(--pad)) / 1px / var(--design-w));
  --scale-h: calc((100svh - var(--pad)) / 1px / var(--design-h));
  --overlay-scale: min(var(--scale-w), var(--scale-h), 1);
  /* Size wrapper to the scaled footprint so the page doesn’t scroll */
  inline-size: calc(var(--design-w) * 1px * var(--overlay-scale));
  block-size:  calc(var(--design-h) * 1px * var(--overlay-scale));
  margin: 24px auto; /* center horizontally */
}
.mw{
  inline-size: calc(var(--design-w) * 1px);
  block-size:  calc(var(--design-h) * 1px);
  transform: scale(var(--overlay-scale));
  transform-origin: top left; /* keep absolute positions aligned */
}