/* DearRoll media presentation; no media or interaction changes. */
.dearroll-demo-section,
.dearroll-video-section {
  --presentation-tint: 39, 151, 149;
  background: transparent;
}
.dearroll-video-section { --presentation-tint: 116, 91, 202; }
.dearroll-demo-section .dearroll-interactive-grid,
.dearroll-video-section .dearroll-interactive-grid {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 4vw, 52px);
  gap: clamp(28px, 4vw, 54px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: radial-gradient(ellipse at 85% 40%, rgba(var(--presentation-tint), .13), transparent 62%), var(--paper);
}
.dearroll-video-section .dearroll-interactive-grid {
  background: radial-gradient(ellipse at 16% 40%, rgba(var(--presentation-tint), .14), transparent 62%), var(--paper);
}
.dearroll-demo-section .dearroll-demo-copy,
.dearroll-video-section .dearroll-demo-copy { max-width: 480px; }
.dearroll-demo-section .swipe-demo,
.dearroll-video-section .dearroll-video {
  border: 1px solid rgba(148, 178, 204, .35);
  border-radius: 24px;
  box-shadow: 0 24px 55px -24px rgba(4, 15, 30, .55), 0 0 55px -18px rgba(var(--presentation-tint), .2);
}
.dearroll-demo-section .swipe-demo { max-width: 370px; }
.dearroll-video-section .dearroll-video {
  width: min(100%, 334px);
  padding: 21px;
  background: #121c2a;
  color: #f4f6fc;
}
.dearroll-video-section .dearroll-video figcaption {
  color: #c8d4e4;
  text-align: center;
  font-size: .8rem;
  line-height: 1.65;
}
.dearroll-video-section .dearroll-video-toggle { border: 0; }
.dearroll-video-section .dearroll-video a { color: #c6c1ff; }
.dearroll-video-section .dearroll-video-steps { margin-bottom: 12px; }
.dearroll-video-section .dearroll-video-steps li { padding-left: 32px; }
.dearroll-video-section .dearroll-detail-shots figure {
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.dearroll-video-section .dearroll-detail-shots figcaption { font-size: .8rem; }
@media (max-width: 820px) {
  .dearroll-demo-section .dearroll-demo-copy,
  .dearroll-video-section .dearroll-demo-copy { max-width: none; }
}
@media (max-width: 520px) {
  .dearroll-demo-section .dearroll-interactive-grid,
  .dearroll-video-section .dearroll-interactive-grid {
    padding: 22px 14px;
    border-radius: 24px;
    gap: 28px;
  }
  .dearroll-demo-section .swipe-demo { padding: 12px; border-radius: 18px; }
  .dearroll-video-section .dearroll-video { padding: 12px; border-radius: 18px; }
  .dearroll-video-section .dearroll-detail-shots { gap: 10px; }
  .dearroll-video-section .dearroll-detail-shots figure { padding: 6px; }
}