/* The same Material Symbols family and settings used by the application. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.icon { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.button .material-symbols-outlined.icon, .demo-tabs .material-symbols-outlined.icon { font-size: 19px; }
.resource-icon .material-symbols-outlined.icon { font-size: 25px; }
.hero-assurance .material-symbols-outlined.icon, .benefit-list .material-symbols-outlined.icon { font-size: 16px; }
.play-circle .material-symbols-outlined.icon { font-size: 17px; }
.closing-signature > .material-symbols-outlined.icon { font-size: 42px; }
/* Static previews: original mobile on the left, desktop on the right. */
.product-hero-visual { padding-bottom: 0; min-width: 0; scroll-margin-top: 110px; }
.product-previews { display: grid; grid-template-columns: minmax(0, .235fr) minmax(0, .765fr); gap: clamp(12px, 1.7vw, 24px); align-items: end; }
.product-previews figure { min-width: 0; margin: 0; }
.product-previews iframe { position: absolute; inset: 0 auto auto 0; display: block; max-width: none; border: 0; transform-origin: 0 0; pointer-events: none; }
#product-mobile-preview { width: 390px; height: 844px; }
#product-desktop-preview { width: 1440px; height: 960px; }
.product-phone { padding: 4px; overflow: hidden; border: 1px solid #294467; border-radius: 20px; background: #001a41; box-shadow: 0 10px 26px rgba(0,26,65,.14); }
.product-mobile-screen { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 15px; }
.product-desktop { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--surface-line); border-radius: 12px; background: #f5f7fa; box-shadow: var(--shadow-panel); }
.product-previews figcaption { margin-top: 13px; font-size: .75rem; color: var(--navy-700); text-align: center; }
.product-preview-note { display: block; margin-top: 18px; color: #667085; font-size: .75rem; text-align: right; }
@media (min-width: 961px) { .hero-grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); } }
@media (max-width: 680px) {
  .product-previews { gap: 10px; }
  .product-phone { padding: 2px; border-radius: 10px; }
  .product-mobile-screen { border-radius: 7px; }
  .product-desktop { border-radius: 6px; }
  .product-previews figcaption { margin-top: 9px; font-size: .625rem; }
  .product-preview-note { text-align: center; font-size: .6875rem; }
}

/* Each preview opens independently by clicking or tapping the preview itself. */
.product-previews figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.product-mobile-screen[data-expand-preview],
.product-desktop[data-expand-preview] { cursor: zoom-in; transition: filter .2s; }
.product-mobile-screen[data-expand-preview]:hover,
.product-desktop[data-expand-preview]:hover { filter: brightness(.985); }
.preview-expand-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; min-width: 34px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--surface-line); border-radius: 8px; background: #fff; color: var(--navy-950); font: 600 .75rem/1.2 Inter,sans-serif; cursor: pointer; }
.preview-expand-button .material-symbols-outlined { font-size: 16px; }
.preview-expand-button:hover { background: var(--surface-soft); border-color: var(--navy-700); }
.preview-expand-button:focus-visible, .preview-lightbox-close:focus-visible { outline: 3px solid var(--success); outline-offset: 3px; }
#preview-dialog { width: min(1520px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 1px solid var(--surface-line); border-radius: 16px; background: #fff; }
#preview-dialog[data-device="mobile"] { width: min(470px, calc(100vw - 32px)); }
#preview-dialog::backdrop { background: rgba(0,26,65,.72); }
.preview-lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--surface-line); }
#preview-dialog-title { margin: 0; font: 700 1rem/1.4 Inter,sans-serif; letter-spacing: 0; color: var(--navy-950); }
#preview-dialog-description { margin: 3px 0 0; font: 400 .75rem/1.4 Inter,sans-serif; color: var(--text-soft); }
.preview-lightbox-close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface-soft); color: var(--navy-950); cursor: pointer; }
.preview-lightbox-stage { display: grid; place-items: center; height: min(992px, calc(100vh - 140px)); height: min(992px, calc(100dvh - 140px)); min-height: 0; padding: 16px; overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; contain: layout paint; background: var(--canvas); }
.preview-lightbox-viewport { position: relative; overflow: hidden; max-width: 100%; transform-origin: center; will-change: transform; background: var(--canvas); border-radius: 10px; box-shadow: var(--shadow-panel); }
#expanded-preview { position: absolute; top: 0; left: 0; display: block; max-width: none; border: 0; transform-origin: 0 0; pointer-events: none; }
@media (max-width: 680px) { .preview-expand-label { display: none; } .preview-lightbox-header { gap: 10px; padding: 12px; } .preview-lightbox-stage { padding: 12px; } }