/* No backdrop-filter on .modal itself. .modal is Bootstrap's full-viewport container that HOLDS the dialog, not the scrim - blurring it blurred the whole page a second time on top of .modal-backdrop's own blur (8px + 10px), which is why an open modal hid the page instead of layering over it. The scrim is .modal-backdrop; that is the only element that should filter anything. */.modal.fade .modal-dialog{transform:translateY(-24px);transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .28s ease;opacity:0}.modal.show .modal-dialog{transform:translateY(0);opacity:1}/* The entrance animation used to scale from .8 to 1. On mobile Chrome the dialog is rasterized once at the start of a composited transform animation and upscaled by the compositor, so text inside the modal stayed visibly soft after the animation finished. Translate-only keeps the raster at 1:1. */.modal-content,.modal-header{border:0!important;position:relative;overflow:hidden}.modal-content{border-radius:20px!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.1)!important}.modal-content::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#007bff,#6610f2,#6f42c1,#e83e8c);z-index:1}.modal-body{padding:0!important;position:relative}/* Scrim: dim enough to push the page back, light enough that the page is still readable behind the dialog. Was rgba(0,0,0,.8) + a 10px backdrop blur held at opacity:1, which read as a solid wall - on a phone, where the dialog does not fill the viewport, that meant an open modal blanked the whole page. No backdrop-filter at all now: a full-viewport blur is the single most expensive thing the compositor can be asked for on mobile, and at any radius strong enough to be visible it takes the page with it. Flat alpha does the job. */.modal-backdrop{background:rgba(2,6,23,.5)}.modal-backdrop.show{opacity:1}@media (max-width:768px){.modal-dialog{margin:1rem}.modal-content{border-radius:15px!important}}.brand-item,.brands-grid{display:flex;align-items:center;justify-content:center}.brand-item{flex-shrink:0;height:60px;padding:.5rem 1rem}.brand-item img{max-width:100%;max-height:35px;width:auto;height:auto;object-fit:contain;opacity:1;transition:transform .3s ease}.brand-item:hover img{transform:translateY(-2px)}.brand-item img[alt*=Illinois],.brand-item img[alt*=UIUC],.brand-item img[src*=uni-logo-5]{max-height:25px}.brand-item:last-child{margin-right:2rem}@media (max-width:768px){.brand-item{height:50px}.brand-item img{max-height:28px}.brand-item img[alt*=Illinois],.brand-item img[alt*=UIUC],.brand-item img[src*=uni-logo-5]{max-height:20px}.brand-item:last-child{margin-right:1rem}}.bar{background:#f3f4f6;border-radius:999px;padding:.3rem;position:relative;overflow:hidden}@media (max-width:768px){@media (max-width:768px){.enhanced-features-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}@media (max-width:576px){.enhanced-features-grid{grid-template-columns:1fr;gap:.5rem}.enhanced-feature-card{padding:.75rem}.video-section .video-thumbnail,.video-thumbnail{height:250px}.stats-grid{gap:.5rem;flex-direction:column;align-items:center}.stat-item{padding:.4rem .6rem;min-width:120px;justify-content:center}.stat-icon{width:22px;height:22px;font-size:.65rem}.stat-number{font-size:.85rem}.stat-label{font-size:.6rem}.video-section .video-info h5{font-size:1rem}.video-section .video-info p{font-size:.75rem}.enhanced-service-card{padding:1.25rem}.service-icon-wrapper{width:40px;height:40px;font-size:1rem}.service-title{font-size:1.1rem}.service-description{font-size:.85rem}.service-cta-btn{padding:.8rem 1.2rem;font-size:.9rem}}}.brand-logo,.comparison-cell{display:flex;align-items:center;justify-content:center}.brand-logo{gap:.6rem;font-size:1.15rem;font-weight:700;color:#fff}.brand-name{font-weight:600;font-size:1rem;color:#fff}
/* Interactive demo modal - light rebuild. The dialog used to be a dark navy
   panel capped at 1080x680, which left the 16:9 demo video smaller than the
   chrome around it. It is white now, and sized off the viewport so the video
   is the largest thing in the dialog on any screen. */
.cq-video-modal .modal-dialog{transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s ease;transform:translateY(14px) scale(.99)}
.cq-video-modal.show .modal-dialog{transform:none}
.cq-video-modal .modal-content{background:#fff;border:1px solid #e6eaf1;border-radius:20px!important;overflow:hidden;box-shadow:0 40px 90px -26px rgba(15,23,42,.3),0 10px 28px -14px rgba(15,23,42,.14)!important}
/* the global .modal-content::before rainbow bar has no place on a white sheet */
.cq-video-modal .modal-content::before{display:none}
.cq-video-modal .modal-body{padding:0}
.cq-video-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;padding:16px 22px;border-bottom:1px solid #eef1f6;background:#fff}
.cq-video-modal__header-left{display:flex;align-items:center;gap:12px;min-width:0}
.cq-video-modal__header-icon{width:36px;height:36px;border-radius:10px;background:#eff5ff;border:1px solid #dce8fc;color:#2563eb;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cq-video-modal__header-icon svg{margin-left:2px}
.cq-video-modal__header-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.cq-video-modal__eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2563eb;line-height:1}
.cq-video-modal__title{font-size:18px;font-weight:700;color:#0f172a;line-height:1.25;margin:0;letter-spacing:-.015em}
.cq-video-modal .video-modal-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;position:static;width:34px;height:34px;background:#fff;border:1px solid #e4e9f1;border-radius:9px;color:#64748b;cursor:pointer;padding:0;transition:background .18s ease,color .18s ease,border-color .18s ease}
.cq-video-modal .video-modal-close:hover,.cq-video-modal .video-modal-close:focus-visible{background:#f1f5f9;border-color:#cbd5e1;color:#0f172a;transform:none;outline:0}
.cq-video-modal--split .modal-dialog{max-width:min(1520px,95vw);width:95vw;margin:0 auto;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:20px 0;pointer-events:none}
.cq-video-modal--split .modal-content{max-height:min(920px,calc(100vh - 40px));display:flex;flex-direction:column;width:100%;pointer-events:auto}
.cq-video-modal--split .modal-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.cq-video-modal__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:0;flex:1 1 auto;min-height:0}
.cq-video-modal__video,.cq-video-modal__side{display:flex;flex-direction:column;min-width:0}
.cq-video-modal__video{background:#f7f9fc;border-right:1px solid #eef1f6;padding:16px 18px 18px;gap:12px;justify-content:center;overflow-y:auto}
.cq-video-modal .responsive-video-wrapper{position:relative;width:100%;padding-top:0;aspect-ratio:16/9;background:#0b1220;border-radius:12px;overflow:hidden}
.cq-video-modal .responsive-video-wrapper iframe,.cq-video-modal .responsive-video-wrapper video{position:absolute;inset:0;width:100%;height:100%;border:0}
.cq-video-modal .responsive-video-wrapper video{display:block;object-fit:contain;background:#0b1220}
/* Width is capped by the height the viewport can actually give a 16:9 box, so a
   short window shrinks the video instead of clipping it or scrolling the column. */
.cq-video-modal__video .responsive-video-wrapper{flex:0 0 auto;align-self:center;width:min(100%,calc((100vh - 235px)*16/9));max-width:100%;border:1px solid #e2e8f0;box-shadow:0 16px 36px -20px rgba(15,23,42,.45)}
.cq-video-modal__side{background:#fff;padding:20px 18px 18px;color:#0f172a;overflow:hidden}
.cq-video-modal__side-title{margin:0 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2563eb}
.cq-video-modal__side-sub{margin:0 0 14px;font-size:13px;line-height:1.5;color:#64748b}
.cq-video-modal__list{list-style:none;margin:0 0 12px;padding:0 2px 2px 0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1 1 auto;min-height:0}
.cq-video-modal__link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:10px;background:#fff;border:1px solid #e8ecf3;color:#0f172a;text-decoration:none;font-size:13px;line-height:1.35;transition:background .16s ease,border-color .16s ease}
.cq-video-modal__link:hover,.cq-video-modal__link:focus-visible{background:#f6f9ff;border-color:#c7dbfb;color:#0f172a;text-decoration:none}
.cq-video-modal__link svg{color:#2563eb;opacity:.5;flex-shrink:0;transition:opacity .16s ease,transform .16s ease}
.cq-video-modal__link:hover svg,.cq-video-modal__link:focus-visible svg{opacity:1;transform:translateX(2px)}
.cq-video-modal__link-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cq-video-modal__link-title{font-weight:600;color:#0f172a;font-size:13.5px;line-height:1.3}
.cq-video-modal__link-sub{font-size:11.5px;color:#64748b;line-height:1.3}
.cq-video-modal__all-link{margin-top:auto;padding-top:12px;border-top:1px solid #eef1f6;display:inline-flex;align-items:center;gap:6px;color:#2563eb;font-size:12.5px;font-weight:600;text-decoration:none;align-self:flex-start}
.cq-video-modal__all-link:hover,.cq-video-modal__all-link:focus-visible{color:#1d4ed8;text-decoration:none}
.cq-video-modal__buy{margin-top:12px;padding-top:12px;border-top:1px solid #eef1f6;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cq-video-modal__buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:10px;background:#16a34a;color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;text-decoration:none;transition:background .16s ease}
.cq-video-modal__buy-btn:hover,.cq-video-modal__buy-btn:focus-visible{background:#15803d;color:#fff;text-decoration:none;transform:none}
.cq-video-modal__buy-price{text-align:center;font-size:12px;color:#64748b;letter-spacing:.02em}
.cq-video-modal__buy-price strong{color:#0f172a;font-weight:700}
@media (max-width:1199px){
.cq-video-modal__grid{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:991px){
.cq-video-modal--split .modal-dialog{width:100vw;max-width:100vw;margin:0;padding:0;min-height:100vh;min-height:100svh}
.cq-video-modal--split .modal-content{max-height:none;min-height:100vh;min-height:100svh;border-radius:0!important;border:0}
.cq-video-modal--split .modal-body{display:block;overflow:visible}
.cq-video-modal__grid{grid-template-columns:1fr;grid-template-rows:none}
.cq-video-modal__list{flex:none;overflow-y:visible}
.cq-video-modal__video{padding:14px;border-right:0;border-bottom:1px solid #eef1f6}
.cq-video-modal__video .responsive-video-wrapper{width:100%;max-width:100%}
.cq-video-modal__side{padding:18px 16px}
}