/* The sample dashboard sheet on the home page (js/demo-sheet.js): slides up over the page; full screen on a phone,
   a large window on a computer. Nothing moves for people who ask for reduced motion. */
html.ds-lock, html.ds-lock body { overflow: hidden; }
html.ds-lock .cdc-launch { display: none !important; } /* the help chat waits until the sample is closed */
.ds-root { position: fixed; inset: 0; z-index: 10000; visibility: hidden; pointer-events: none; }
.ds-root.ds-open, .ds-root.ds-closing { visibility: visible; }
.ds-root.ds-open { pointer-events: auto; }
.ds-backdrop { position: absolute; inset: 0; background: rgba(11, 31, 77, .55); opacity: 0; transition: opacity .3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ds-open .ds-backdrop { opacity: 1; }
.ds-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: env(safe-area-inset-top); display: flex; flex-direction: column; background: #f4f6fb;
  border-radius: 18px 18px 0 0; overflow: hidden; box-shadow: 0 -20px 60px -10px rgba(0, 0, 0, .35);
  transform: translateY(100%); transition: transform .36s cubic-bezier(.2, .8, .2, 1); }
.ds-open .ds-sheet { transform: none; }
@media (min-width: 900px) {
  .ds-sheet { left: 50%; top: 50%; bottom: auto; width: min(1240px, 94vw); height: min(860px, 90vh); border-radius: 20px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .5);
    transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
  .ds-open .ds-sheet { transform: translate(-50%, -50%); opacity: 1; }
}
.ds-bar { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px 16px; background: #0b1f4d; color: #e2e8f0; }
.ds-grip { position: absolute; top: 5px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: rgba(255, 255, 255, .35); }
@media (min-width: 900px) { .ds-grip { display: none; } .ds-bar { padding-top: 10px; } }
.ds-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ds-pill { flex: none; background: #fde68a; color: #78350f; border-radius: 99px; padding: 3px 10px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ds-sub { font-size: .86rem; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-cta { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; background: #22c55e; color: #052e16; font-weight: 800; font-size: .9rem; text-decoration: none; }
.ds-cta:hover { background: #16a34a; color: #fff; }
.ds-cta-short { display: none; }
.ds-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.ds-close:hover { background: rgba(255, 255, 255, .2); }
.ds-close:focus-visible, .ds-cta:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
@media (max-width: 640px) { .ds-sub { display: none; } .ds-cta-long { display: none; } .ds-cta-short { display: inline; } }
.ds-body { position: relative; flex: 1; min-height: 0; }
.ds-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #f4f6fb; opacity: 0; transition: opacity .3s ease; }
.ds-loaded .ds-frame { opacity: 1; }
.ds-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ds-loaded .ds-loading { display: none; }
.ds-loading span { width: 10px; height: 10px; border-radius: 50%; background: #1e3a8a; animation: ds-dot 1s infinite ease-in-out; }
.ds-loading span:nth-child(2) { animation-delay: .15s; }
.ds-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes ds-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-sheet, .ds-backdrop, .ds-frame { transition: none; } .ds-loading span { animation: none; opacity: .6; } }