/* Opbox: navy #0d233f, royal blue #244b94 and cool neutral surfaces. */
@font-face{font-family:Montserrat;src:url('/assets/fonts/montserrat-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
body{font-family:Roboto,Arial,sans-serif}h1,h2,h3,.eyebrow,.button,.nav nav,.plan-label,.popular{font-family:Montserrat,Arial,sans-serif}h1{font-weight:500;letter-spacing:-3px;font-size:clamp(42px,5.2vw,68px)}h2{font-weight:500;letter-spacing:-1.5px}.feature-card h3{font-size:16px;letter-spacing:-.5px}.hero-description{font-size:17px}.dashboard-title h2{font-family:Roboto,Arial,sans-serif}.photo-block .site-detail{position:absolute;right:-18px;bottom:110px;width:43%;height:265px;min-height:0;border:7px solid #f8faff;border-radius:10px;box-shadow:0 15px 35px #0d233f35;filter:none}.photo-block>img:first-child{object-position:42% center;filter:saturate(.8)}.photo-caption{z-index:1}
.brand img{width:145px;height:auto;mix-blend-mode:multiply}.brand.mini img{width:118px}.hero{padding-top:32px}.hero-copy{max-width:none;border-radius:18px;padding:76px 30px 58px;overflow:hidden;position:relative;background:linear-gradient(100deg,rgba(8,26,51,.84),rgba(17,46,86,.77),rgba(30,66,118,.60)),url('/assets/hero-team.jpg') center 48%/cover;color:#fff;box-shadow:0 18px 45px -30px #0d233f80}.hero-copy h1{position:relative}.hero-copy h1 span{color:#a8c7ff}.hero-copy .eyebrow{color:#d1e2ff}.hero-copy .live-dot{background:#8fbaff}.hero-copy .hero-description{color:#e0e9f7}.hero-copy .hero-notes{color:#cfddf2}.hero-copy .button{background:#fff;border-color:#fff;color:#1c4385}.hero-copy .button:hover{background:#e3edff}.hero-copy .text-link{color:#fff}.hero-copy .play{border-color:#9eb8dc}.hero-bottom{margin-top:34px}.connected{background:#0d233f}.connected .button.light{background:#d9e7ff;color:#153c78;border-color:#d9e7ff}.brand-symbol{width:26px;height:29px;display:block}.connected:after{content:'';width:370px;height:420px;right:-60px;top:-30px;background:url('/assets/favicon.svg') center/contain no-repeat;opacity:.1}.hero-copy .hero-actions{position:relative}.hero-copy .hero-notes{position:relative}
@media(max-width:800px){.brand img{width:125px}.brand.mini img{width:105px}.hero-copy{padding:58px 24px 42px}.hero{padding-top:24px}}
@media(max-width:540px){.brand img{width:114px}.hero-copy{padding:39px 16px 30px;border-radius:12px;background-position:center}.hero{padding-top:18px}.hero-copy h1{font-size:39px;letter-spacing:-1.8px}.hero-copy .eyebrow{font-size:6px;letter-spacing:.9px}.hero-copy .hero-description{font-size:12px}.hero-copy .hero-actions{gap:14px}.hero-copy .hero-notes{font-size:6px;gap:8px}.hero-copy .text-link{font-size:10px}.hero-copy .hero-actions .button{font-size:10px;padding:12px 14px}.hero-copy .play{width:21px;height:21px}.hero-bottom{margin-top:23px}}
@media(max-width:800px){.photo-block .site-detail{right:-10px;width:46%;height:220px}.nav nav{font-size:12px}}
@media(max-width:540px){.hero-copy h1{font-size:34px;letter-spacing:-1.4px}.hero-copy{background-position:54% center}.photo-block .site-detail{height:190px;width:40%;bottom:90px;right:-4px;border-width:5px}.feature-card h3{font-size:14px}.hero-copy .hero-description{font-size:13px}.hero-copy .hero-notes{font-size:7px;gap:6px}.contact h2{font-size:33px}.solution h2{font-size:29px}}
/* Comfortable reading and touch targets in navigation and contact. */
.nav{gap:28px}.nav nav{font-size:15px;gap:24px;font-weight:500}.login{font-size:15px}.nav-actions{gap:20px}.nav-actions .button.small{font-size:14px;padding:12px 18px;gap:12px}.form-heading h3{font-size:26px}.form-heading p{font-size:15px;line-height:1.6}.contact label{font-size:14px;font-weight:500;margin-bottom:19px}.contact input,.contact select,.contact textarea{font-size:16px;padding:12px 13px;line-height:1.5}.contact .consent{font-size:13px;font-weight:400;line-height:1.65;gap:11px}.contact .consent input{width:18px;height:18px;padding:0;margin-top:2px}.contact form .button{font-size:15px;padding:15px 20px}.contact .form-footnote{font-size:12px;line-height:1.6}.contact #form-status{font-size:15px;line-height:1.6}.contact input::placeholder,.contact textarea::placeholder{color:#687b96}.contact label>span,.contact .form-footnote,.form-heading p{color:#586d8b}
@media(max-width:1100px) and (min-width:801px){.nav{gap:17px}.nav nav{gap:16px;font-size:14px}.nav-actions{gap:15px}.nav-actions .button.small{font-size:12px;padding:11px 13px}.brand img{width:125px}}
@media(max-width:800px){.nav nav{font-size:17px;gap:18px}.nav nav a{padding:6px 0}.login{font-size:15px}.contact label{font-size:15px}}
@media(max-width:540px){.contact form{padding:22px 18px}.form-heading h3{font-size:25px}.form-heading p{font-size:14px}.contact .consent{font-size:13px}.contact .form-footnote{font-size:12px}.nav{gap:16px}.menu-toggle{font-size:26px;padding:8px}.login{font-size:15px}}
