.hero-new{--hero-new-text:#eef4fa;--hero-new-text-muted:#a9b4c0;--hero-new-eyebrow-bg:rgba(56,109,220,.22);--hero-new-eyebrow-text:#386ddc;color:var(--hero-new-text);position:relative;width:100%}.hero-new--dark-text{--hero-new-text:#20272e;--hero-new-text-muted:#565f68}.hero-new__row{align-items:center;display:flex;gap:2rem}.hero-new--side_by_side .hero-new__row{flex-direction:row;flex-wrap:wrap}.hero-new--media_first .hero-new__row{flex-direction:row-reverse;flex-wrap:wrap}.hero-new--ratio-50 .hero-new__content-col,.hero-new--ratio-50 .hero-new__media-col{flex:1 1 0%;min-width:20rem}.hero-new--ratio-60 .hero-new__content-col{flex:6 1 0%;min-width:20rem}.hero-new--ratio-60 .hero-new__media-col{flex:4 1 0%;min-width:20rem}.hero-new--ratio-70 .hero-new__content-col{flex:7 1 0%;min-width:20rem}.hero-new--ratio-70 .hero-new__media-col{flex:3 1 0%;min-width:20rem}.hero-new--stacked .hero-new__row{flex-direction:column;text-align:center}.hero-new--stacked .hero-new__content-col{align-items:center;margin-inline:auto;max-width:var(--hero-new-stacked-max-width,48rem);width:100%}.hero-new--stacked .hero-new__media-col{width:100%}.hero-new--media-above .hero-new__media-col{order:-1}.hero-new--media-below .hero-new__media-col{order:1}.hero-new--no-media .hero-new__content-col{align-items:center;margin-inline:auto;max-width:var(--hero-new-stacked-max-width,48rem);text-align:center;width:100%}.hero-new--no-media .hero-new__copy,.hero-new--stacked .hero-new__copy{align-items:center}@media (max-width:1023px){.hero-new--media_first .hero-new__row,.hero-new--side_by_side .hero-new__row,.hero-new__row{flex-direction:column;text-align:center}.hero-new--ratio-50 .hero-new__content-col,.hero-new--ratio-50 .hero-new__media-col,.hero-new--ratio-60 .hero-new__content-col,.hero-new--ratio-60 .hero-new__media-col,.hero-new--ratio-70 .hero-new__content-col,.hero-new--ratio-70 .hero-new__media-col,.hero-new__content-col,.hero-new__media-col{flex:1 1 auto;min-width:0;width:100%}.hero-new--media_first .hero-new__content-col,.hero-new--side_by_side .hero-new__content-col{align-items:center;text-align:center}.hero-new--media_first .hero-new__description,.hero-new--side_by_side .hero-new__description{margin:0 auto}.hero-new__description p{margin:0 auto 1rem!important}.hero-new__media-col{margin-inline:auto;max-width:769px}.hero-new__cta-row{justify-content:center}.hero-new--mobile-content_first .hero-new__content-col{order:1}.hero-new--mobile-content_first .hero-new__media-col,.hero-new--mobile-media_first .hero-new__content-col{order:2}.hero-new--mobile-media_first .hero-new__media-col{order:1}}.hero-new__content-col{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem}.hero-new__eyebrow{align-items:center;background:var(--hero-new-eyebrow-bg);border-radius:1.375rem;color:var(--hero-new-eyebrow-text);display:inline-flex;font-size:1.125rem;font-weight:700;letter-spacing:.1875rem;padding:var(--hero-new-eyebrow-padding,.75rem 1.0625rem);text-decoration:none;text-transform:uppercase}@media (max-width:1365px){.hero-new__eyebrow{font-size:1rem}}@media (max-width:499px){.hero-new__eyebrow{font-size:.75rem}.hero-new__ratings{align-items:center;flex-direction:column}}@media (max-width:370px){.hero-new__eyebrow{font-size:.6875rem}}.hero-new__eyebrow span{line-height:1}.hero-new__copy{display:flex;flex-direction:column;gap:1rem;width:100%}.hero-new__heading{color:var(--hero-new-text);letter-spacing:.02em;margin:0}.hero-new__description{color:var(--hero-new-text);letter-spacing:.01em;line-height:1.6;margin:0;max-width:48rem}.hero-new--side_by_side .hero-new__description{max-width:41rem}

/* !important on font-size throughout: the description richtext field renders
   its own <p>, and the global p rule in css/elements/_typography.css sets
   font-size directly on that <p> at the same breakpoints — an element's own
   direct rule always wins over an inherited value regardless of specificity,
   so without !important these sizes get silently overridden (same reason
   p.xl needs !important for its own breakpoint override, see _typography.css).
   Scoped under :not(.hero-new--description-global-size) — Description: Use
   Global Paragraph Font Size, when on, simply removes this module's own
   scale from the cascade entirely (rather than fighting it with a higher-
   specificity override of the global size), letting the global p rule's own
   sizes apply unopposed. */.hero-new:not(.hero-new--description-global-size) .hero-new__description p{font-size:.875rem!important}@media (min-width:415px){.hero-new:not(.hero-new--description-global-size) .hero-new__description p{font-size:1rem!important}}@media (min-width:1440px){.hero-new:not(.hero-new--description-global-size) .hero-new__description p{font-size:1.125rem!important}}@media (min-width:1920px){.hero-new:not(.hero-new--description-global-size) .hero-new__description p{font-size:1.5rem!important}}.hero-new--no-media .hero-new__description,.hero-new--stacked .hero-new__description{margin-inline:auto}.hero-new__cta-row{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.hero-new--no-media .hero-new__cta-row,.hero-new--stacked .hero-new__cta-row{justify-content:center}.hero-new__below-buttons{color:var(--hero-new-text-muted);font-size:.875rem}.hero-new__ratings{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}.hero-new--no-media .hero-new__ratings,.hero-new--stacked .hero-new__ratings{justify-content:center}.hero-new__rating-badge{align-items:center;color:#6b757e;display:inline-flex;font-size:var(--font-size-sm,.875rem);font-weight:700;gap:.375rem;letter-spacing:.1em;text-transform:uppercase}.hero-new__rating-badge .fa-star{bottom:1px;color:#6b757e;font-size:inherit;position:relative}.hero-new__media-col{align-items:center;backdrop-filter:blur(2px);display:flex;justify-content:center}.hero-new__media-container{border-radius:2rem;overflow:hidden;position:relative;width:100%}.hero-new__media-img{display:block;height:auto;object-fit:contain;width:100%}.hero-new__media-form{background-color:#fff;padding:2rem}.hero-new__media-img.hero-new__region-img,.hero-new__webm-fallback{display:none}.hero-new__webm-fallback.is-visible{display:block}

/* !important on every property here, not just the :not() exclusion added to
   the global rule in css/elements/_buttons.css — same belt-and-suspenders
   approach .progressive-form__modal-close already uses against this same
   rule (see css/main.css). Guarantees this wins regardless of stylesheet
   load order or CDN/browser caching lag on the other file. */.hero-new__video-trigger{align-items:normal!important;background:none!important;background-color:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:inherit!important;cursor:pointer!important;display:block!important;gap:0!important;height:100%!important;justify-content:normal!important;margin:0!important;overflow:visible!important;padding:0!important;position:relative!important;text-align:left!important;text-decoration:none!important;transform:none!important;transition:none!important;white-space:normal!important;width:100%!important}.hero-new__video-trigger:after{content:url(https://shipperhq.com/hubfs/ShipperHQ%20Theme/default/play.png);height:4rem;left:50%;opacity:80%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .4s ease;width:4rem}.hero-new__video-trigger:focus-visible:after{opacity:100%}@media (hover:hover) and (pointer:fine){.hero-new__video-trigger:hover:after{opacity:100%}}.hero-new__video-modal{align-items:center;background-color:rgba(15,14,12,.85);display:flex;inset:0;justify-content:center;opacity:0;padding:var(--space-6);position:fixed;transition:opacity var(--transition-default),visibility 0s linear var(--duration-base);visibility:hidden;z-index:var(--z-modal)}.hero-new__video-modal.is-open{opacity:1;transition:opacity var(--transition-default),visibility 0s linear;visibility:visible}.hero-new__video-modal-panel{aspect-ratio:16/9;max-width:75rem;position:relative;transform:translateY(1rem) scale(.98);transition:transform var(--transition-default);width:100%}.hero-new__video-modal.is-open .hero-new__video-modal-panel{transform:translateY(0) scale(1)}.hero-new__video-modal-panel:focus{outline:none}.hero-new__video-modal-frame{height:100%;width:100%}.hero-new__video-modal-frame iframe{border:none;display:block;height:100%;width:100%}.hero-new__video-modal-close{align-items:center;background:none!important;background-color:transparent!important;border:none!important;border-radius:var(--radius-full)!important;box-shadow:none!important;color:var(--primitive-vapor-white,#fff)!important;cursor:pointer;display:flex!important;gap:0!important;height:2rem;justify-content:center;min-width:0;overflow:visible!important;padding:0!important;position:absolute;right:0;top:-2.75rem;transform:none!important;transition:background-color var(--transition-fast),color var(--transition-fast)!important;width:2rem}.hero-new__video-modal-close:before{content:none!important;display:none!important}.hero-new__video-modal-close:focus-visible{background-color:hsla(0,0%,100%,.12)!important;box-shadow:none!important;color:var(--primitive-vapor-white,#fff)!important;transform:none!important}@media (hover:hover) and (pointer:fine){.hero-new__video-modal-close:hover{background-color:hsla(0,0%,100%,.12)!important;box-shadow:none!important;color:var(--primitive-vapor-white,#fff)!important;transform:none!important}}.hero-new__video-modal-close:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.hero-new__video-modal-close svg{height:1.125rem;width:1.125rem}.hero-new__breadcrumbs{margin-bottom:1rem;width:100%}.hero-new__breadcrumbs .breadcrumb-list{align-items:center;color:var(--hero-new-text-muted);display:flex;font-size:.875rem;gap:.5rem;list-style:none;margin:0;padding:0}.hero-new__breadcrumbs .breadcrumb-link{color:var(--hero-new-text-muted);text-decoration:none}.hero-new__breadcrumbs .breadcrumb-item.current{color:var(--hero-new-text)}