/* ==========================================================================
   PRODUCT SHOTS (2.4.0)
   Real dashboard markup (shots/*.html), scaled to its box by shots.js.
   Each screen's own styles are in assets/css/shots/<page>.css, scoped to
   .tshot.s-<name>. Loaded only on pages that show screens.
   ========================================================================== */
.tsh-shot-wrap { min-width: 0; }
.tsh-shot { position: relative; border-radius: 14px; border: 1px solid var(--line); background: #f6f7fb; box-shadow: 0 30px 80px -40px rgba(15,23,42,.45), 0 2px 8px rgba(15,23,42,.05); overflow: hidden; }
.tsh-shot-x { overflow: hidden; }
.tsh-shot-sz { position: relative; overflow: hidden; }
.tsh-shot-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tshot { font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; color: #333; -webkit-font-smoothing: antialiased; text-align: left; pointer-events: none; user-select: none; letter-spacing: normal; }
.tshot [data-chain]:not(#tsh-x):not(#tsh-x) { display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-width: none !important; width: auto !important; position: static !important; border: 0 !important; box-shadow: none !important; background: transparent !important; transform: none !important; overflow: visible !important; gap: 0 !important; height: auto !important; }
.tshot .tshot-body { background: transparent !important; }
.tsh-shot.is-fade .tsh-shot-sz::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to bottom, rgba(246,247,251,0), #f6f7fb); pointer-events: none; z-index: 2; }
.tsh-shot.is-phone { border: 10px solid #0f172a; border-radius: 42px; box-shadow: 0 40px 80px -40px rgba(15,23,42,.55); }
.tsh-shot.is-phone .tsh-shot-x { border-radius: 32px; }
/* Phones: swipe sideways through the whole screen */
@media (max-width: 760px) {
  .tsh-shot.is-scroll .tsh-shot-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tsh-shot.is-scroll .tsh-shot-x::-webkit-scrollbar { display: none; }
}
.tsh-swipe { display: none; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.tsh-swipe i { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.tsh-swipe i b { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--ink-4); border-radius: 4px; }
@media (max-width: 760px) { .tsh-swipe { display: flex; } }
/* Two screens, one floating over the other */
.tsh-collage { position: relative; background: var(--bg-3); border-radius: 20px; padding: clamp(18px, 3vw, 32px) clamp(120px, 22%, 200px) clamp(18px, 3vw, 32px) clamp(18px, 3vw, 32px); }
.tsh-collage .tsh-collage-fl { position: absolute; right: clamp(14px, 2.4vw, 24px); top: clamp(18px, 3vw, 32px); width: 42%; z-index: 3; }
@media (max-width: 760px) {
  .tsh-collage { padding: 14px; }
  .tsh-collage > .tsh-shot-wrap { display: none; }
  .tsh-collage .tsh-collage-fl { position: static; width: auto; }
}
/* 2.4.2: the second screen over the bottom-right corner (a result on its form) */
.tsh-collage.is-br { padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 32px) clamp(64px, 9vw, 96px); }
.tsh-collage.is-br > .tsh-shot-wrap { width: 86%; }
.tsh-collage.is-br .tsh-collage-fl { top: auto; bottom: clamp(16px, 2.4vw, 24px); right: clamp(14px, 2.4vw, 24px); width: var(--fw, 46%); }
@media (max-width: 760px) {
  .tsh-collage.is-br { padding: 14px; }
  .tsh-collage.is-br > .tsh-shot-wrap { display: block; width: auto; }
  .tsh-collage.is-br .tsh-collage-fl { position: static; width: 82%; margin: 12px 0 0 auto; }
}

/* 2.4.4: several screens in a cascade (home step 2: carriers, keys, result) */
.tsh-stack { position: relative; background: var(--bg-3); border-radius: 20px; padding: clamp(18px, 3vw, 32px); }
.tsh-stack-i { position: relative; width: var(--w, 100%); margin-left: var(--ml, 0); margin-top: var(--mt, 0); }
.tsh-stack-i:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .tsh-stack { padding: 14px; }
  .tsh-stack-i { width: auto; margin-left: 0; margin-top: 12px; }
}

/* 2.4.5: a screen people can click (pick Twilio or Vonage) and a bare card */
.tsh-sw-st:not(.is-on) { display: none; }
.tsh-hit { position: absolute; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background-color 150ms, box-shadow 150ms; }
.tsh-hit:hover { background: rgba(11, 116, 255, .05); box-shadow: inset 0 0 0 2px rgba(11, 116, 255, .35); }
.tsh-hit[aria-pressed="true"] { cursor: default; }
.tsh-hit[aria-pressed="true"]:hover { background: transparent; box-shadow: none; }
.tsh-hit:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.tsh-sw-cap { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tsh-sw-cap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 4px rgba(11, 116, 255, .15); }
.tsh-shot.is-bare { border: 0; background: transparent; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 22px rgba(15, 23, 42, .10)) drop-shadow(0 2px 4px rgba(15, 23, 42, .06)); }
/* 2.5.7: a bare shot is one card with nothing around it (no frame, no
   padding, no second border); its shadow follows the card's own corners.
   A faded one fades the card itself, so no grey box shows through. */
.tsh-shot.is-bare.is-fade .tsh-shot-sz::after { content: none; }
/* 2.5.9: a base screen (several cards, headings between them) sits flat on
   the panel like the dashboard itself; only what floats over it or stands
   alone keeps the shadow. */
.tsh-shot.is-bare.is-flat { filter: none; }
.tsh-shot.is-bare.is-fade .tsh-shot-x { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent); }
@media (prefers-reduced-motion: reduce) { .tsh-hit { transition: none; } }