/*
  canaryaware.com, rebuilt from the Wix Studio design.

  Scaling: Wix "scale proportionally". 1rem = 100 design pixels.
  - Desktop and tablet (751px and up): the design is 1440 wide, so 1rem = 100vw / 14.4.
  - Mobile (750px and below): the design is 393 wide, so 1rem = 100vw / 3.93.
  So a 42px heading in the design is .42rem, and it grows and shrinks with the window.
  Wix menus and forms do not scale; those parts use px on purpose.
  Tablet (751px to 1000px) reuses the desktop design with a few overrides at the end.
*/

@font-face { font-family: "MD Regular"; src: url("/fonts/wix-madefor-display-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MD Medium"; src: url("/fonts/wix-madefor-display-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MD SemiBold"; src: url("/fonts/wix-madefor-display-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MD v1 Regular"; src: url("/fonts/wix-madefor-display-v1-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MD v1 SemiBold"; src: url("/fonts/wix-madefor-display-v1-600.woff2") format("woff2"); font-display: swap; }
/* Same two sources as Wix, in the same order, so each browser picks the same file it picks on Wix. */
@font-face { font-family: "Madefor Text"; font-weight: 400; src: url("/fonts/wix-madefor-text-var.woff2") format("woff2-variations"), url("/fonts/wix-madefor-text-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Madefor Text Mediumbold"; font-weight: 530; src: url("/fonts/wix-madefor-text-var.woff2") format("woff2-variations"), url("/fonts/wix-madefor-text-mediumbold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Work Sans SemiBold"; src: url("/fonts/work-sans-600.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #252525;
  --text: #404040;
  --charcoal: #2d2d2d;
  --yellow: #ffe743;
  --butter: #fff29a;
  --paper: #fefdfb;
  --stone: #f2f1ec;
  --bullet: #727171;
}

html { overflow-x: hidden; font-size: calc(100vw / 14.4); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 750px) { html { font-size: calc(100vw / 3.93); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--text); font: 16px/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 12px; background: #fff; color: #000; }
.skip-link:focus { top: 8px; }
section { position: relative; }
:focus-visible { outline: 2px solid #4d90fe; outline-offset: 2px; }

/* ---------- Type ---------- */
.h2 { font: .30rem/1.4667 "MD SemiBold"; letter-spacing: -.01em; color: var(--ink); }
.sub { font: .22rem/1.5455 "MD Regular"; letter-spacing: -.01em; color: var(--text); }
.h3 { font: .22rem/1.3636 "MD SemiBold"; letter-spacing: -.01em; color: var(--ink); }
.body, .num { font: .18rem/1.5556 "MD Regular"; color: var(--text); }
.bullet { font: .17rem/1.4706 "MD Regular"; letter-spacing: -.01em; color: var(--text); }

/* ---------- Header and nav ---------- */
/* The menu is a fixed 48px tall, so below about 1000px wide the header grows to hold it, as on Wix. */
:root { --header: max(.96rem, calc(.26rem + 48px)); }
.site-header { position: relative; z-index: 10; height: var(--header); background: var(--ink); }
.logo { position: absolute; left: .40rem; top: .19rem; width: 2.08rem; height: .72rem; }
.logo img { width: 100%; height: 100%; }
/* Wix cut the menu off below about 1400px (its 20px text no longer fit). Here the menu keeps its right edge
   and grows left into the space by the logo instead, so every item always shows. At 1440 it matches Wix. */
.nav { position: absolute; right: .72rem; top: .26rem; width: max-content; min-width: 5.79rem; height: 48px; }
.nav-list { display: flex; gap: 8px; height: 100%; }
.nav-item { position: relative; flex: 1 0 auto; }
.nav-item > a {
  display: flex; align-items: center; height: 48px; padding: 0 10px;
  font: 700 20px/28px "Madefor Text Mediumbold", sans-serif; color: #fff; text-decoration: none; white-space: nowrap;
  text-shadow: #000 1px 0 0, #000 -1px 0 0, #000 0 1px 0, #000 0 -1px 0;
}
.sub-toggle { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; background: none; overflow: hidden; }
.sub-toggle:focus-visible { width: 100%; height: 4px; background: #4d90fe; }
.submenu {
  position: absolute; z-index: 20; left: 0; top: 48px; width: 428px; padding: 54px 54px 50px; background: #000; border-radius: 20px;
  display: none; opacity: 0; transition: opacity .2s, display .2s allow-discrete;
}
.nav:has(.has-sub:hover) .submenu, .nav:has(.has-sub:focus-within) .submenu, .submenu:hover, .submenu:focus-within, .submenu.open { display: block; opacity: 1; }
@starting-style { .submenu { opacity: 0; } }
.submenu a {
  display: block; width: 320px; margin-bottom: 4px; padding: 9px 0 9px 1px; border-radius: 10px;
  font: 20px/25px "MD Medium"; color: #fff; text-decoration: none; white-space: nowrap;
}
.submenu a:hover, .submenu a:focus-visible { background: #4c4936; color: #fbe863; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: flex; align-items: center; border: 1px solid; border-radius: .16rem;
  padding-left: .23rem; font-family: "MD SemiBold"; letter-spacing: .02em; line-height: 1.25; text-decoration: none; white-space: nowrap;
}
.btn svg { position: absolute; }
.btn-yellow { background: var(--yellow); border-color: var(--charcoal); color: var(--charcoal); }
.btn-ghost { background: rgba(255, 231, 67, .1); border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-ghost svg { transform: rotate(-90deg); }
.btn-hero { height: .56rem; font-size: .20rem; }
.btn-hero.btn-yellow { width: 2.15rem; }
.btn-hero.btn-yellow svg { left: 1.715rem; top: .19rem; width: .15rem; height: .18rem; color: var(--text); }
.btn-hero.btn-ghost { width: 1.65rem; }
.btn-hero.btn-ghost svg { left: 1.20rem; top: .205rem; width: .15rem; height: .15rem; }
.btn-small { height: .48rem; width: 1.88rem; border-radius: .14rem; font-size: .16rem; }
.btn-small svg { left: 1.445rem; top: .15rem; width: .15rem; height: .18rem; }

/* ---------- Hero ----------
   On Wix the header sits on top of the hero, so positions here are measured from the page top. */
.hero { min-height: calc(9.14rem - var(--header)); background: var(--charcoal); overflow: hidden; }
.hero-title { position: absolute; z-index: 1; left: 1.12rem; top: calc(2.43rem - var(--header)); width: 5.93rem; font: .42rem/1.4286 "MD Medium"; letter-spacing: -.01em; color: #fff; }
.accent { color: var(--yellow); }
.hero-cta { position: absolute; z-index: 1; left: 8.40rem; top: calc(1.84rem - var(--header)); width: 3.72rem; display: flex; flex-direction: column; align-items: flex-start; }
.hero-lead { font: .28rem/1.2857 "MD Regular"; letter-spacing: -.01em; color: #fff; }
.hero-cta .btn-yellow { margin-top: .32rem; }
.hero-cta .btn-ghost { margin-top: .24rem; }
.hero-canary { position: absolute; left: 9.675rem; top: calc(4.208rem - var(--header)); width: 4.692rem; height: 4.959rem; }
.hero-outline { position: absolute; left: .40rem; top: calc(6.74rem - var(--header)); width: 10.01rem; height: 1.86rem; }

/* ---------- Intro over the schematics drawing ---------- */
.intro { min-height: 9.00rem; background: var(--butter); padding: 1.00rem 0 0 1.12rem; }
.intro-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-text { position: relative; width: 5.21rem; font: .34rem/1.353 "MD Regular"; letter-spacing: -.01em; color: var(--text); }

/* ---------- How Canary keeps your workplace safe ---------- */
.keeps { min-height: 9.44rem; background: var(--paper); padding: 1.04rem 1.12rem 0; }
.keeps .h2 { width: 4.88rem; }
.cards { display: grid; }
.keeps .cards { grid-template-columns: repeat(4, 2.80rem); column-gap: .32rem; margin-top: .56rem; }
.card img { width: 100%; height: auto; }
.keeps .card img { margin-top: .16rem; aspect-ratio: 280 / 176; }
.keeps .card .h3 { min-height: .918rem; margin-top: .40rem; }
.keeps .btn-small { margin: .80rem 0 0 auto; }

/* ---------- Real-time hazard alerts ---------- */
/* Wix gives the bullet list a 598px minimum height, which shows on narrower windows. */
.alerts { min-height: max(9.00rem, calc(1.644rem + 598.3px)); background: var(--butter); }
.alerts-dark { position: absolute; left: 0; top: 0; width: 7.20rem; height: 9.00rem; background: var(--ink); padding: 1.20rem 0 0 1.125rem; }
.alerts-dark .h2, .alerts-dark .sub { width: 4.88rem; color: #fff; }
.alerts-dark .sub { margin-top: .16rem; }
.radar { width: 4.88rem; height: 4.88rem; margin: .47rem 0 0 -.005rem; }
.point { position: relative; }
.point > svg { position: absolute; transform: rotate(-90deg); color: var(--bullet); }
.points .h3 { width: 4.88rem; }
.points .bullet { margin-top: .16rem; width: 3.842rem; }
.alerts-points { position: absolute; left: 7.771rem; top: 1.245rem; }
.alerts-points .point { padding-left: .501rem; }
.alerts-points .point > svg { left: .027rem; top: .066rem; width: .132rem; height: .132rem; }
.alerts-points .h3 { width: 4.29rem; }
.alerts-points .bullet { margin-top: .14rem; width: 3.377rem; }
.p-detect { margin-top: .51rem; }
.p-multi { margin-top: .617rem; }

/* ---------- Reduce risk with safety data ---------- */
.data { min-height: 9.83rem; background: var(--paper); padding: 1.04rem 0 0 1.12rem; }
.data .h2 { width: 5.77rem; }
.data .sub { width: 4.89rem; margin-top: .12rem; }
.data-canary { position: absolute; z-index: 2; left: 9.76rem; top: 2.98rem; width: .60rem; height: .60rem; }

/* Sliders (Wix Pro Gallery look): one row that scrolls sideways, arrow buttons on top. */
.slider { position: relative; margin-right: 0; }
.slides { display: flex; gap: 60px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 auto; scroll-snap-align: center; }
.slide:first-child { scroll-snap-align: start; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #000; cursor: pointer;
}
.slider-btn[hidden] { display: none; }
.slider-btn.prev { background: rgba(255, 255, 255, .8); }
.slider-btn svg.flip { transform: scaleX(-1); }
.slider-data { margin: .34rem 0 0 -.28rem; }
.slider-data .slide { width: 10.17rem; height: 4.61rem; }
.slider-data .next { right: 23px; }
.slider-data .prev { left: 23px; }
/* Wix gallery arrows are a fixed size. */
.slider-data .slider-btn { width: 50px; height: 50px; }
.slider-data .slider-btn svg { width: 12.3px; height: 20.8px; }

/* ---------- Streamlined pre-shift inspections ---------- */
.preshift { min-height: 9.00rem; background: #fff; }
.preshift-left { position: absolute; left: 0; top: 0; width: 7.20rem; height: 100%; background: var(--stone); padding: 1.04rem 0 0 1.125rem; }
.preshift-left::after { content: ""; position: absolute; left: 0; right: 0; top: 5.99rem; bottom: 0; background: rgba(180, 179, 175, .1); }
.preshift-left .h2, .preshift-left .sub { width: 4.88rem; }
.preshift-left .sub { margin-top: .16rem; }
.preshift-art { position: absolute; z-index: 1; left: 1.83rem; top: 3.94rem; width: 3.40rem; height: 3.40rem; }
.preshift-points { position: absolute; left: 7.84rem; top: .95rem; }
.preshift-points .point, .pilot-points .point { padding-left: .57rem; }
.preshift-points .point > svg, .pilot-points .point > svg { left: .03rem; top: .075rem; width: .15rem; height: .15rem; }
.p-guided .bullet { width: 4.331rem; }
.p-fleet { margin-top: .68rem; }
.p-compliance { margin-top: .99rem; }

/* ---------- Effortless installation ---------- */
.install { min-height: 9.64rem; background: var(--paper); padding: 1.04rem 1.12rem 0; }
.install .h2, .install .sub { width: 4.88rem; }
.install .sub { margin-top: .16rem; }
.install .cards { grid-template-columns: repeat(3, 3.84rem); column-gap: .32rem; margin-top: .56rem; }
.install .card img { margin-top: .16rem; aspect-ratio: 384 / 280; }
.install .card .h3 { margin-top: .292rem; }
.install .card .body { margin-top: .16rem; width: 3.482rem; }

/* ---------- Pilot program ---------- */
.pilot { min-height: 12.671rem; background: var(--stone); padding: 1.04rem 0 0 1.12rem; }
.pilot .h2, .pilot .sub { width: 4.88rem; }
.pilot .sub { margin-top: .16rem; }
.slider-pilot { margin: .88rem 0 0 -.22rem; }
.slider-pilot .slide { width: 10.12rem; height: 4.59rem; }
.slider-pilot .next { right: 23px; }
.slider-pilot .prev { left: 23px; }
.slider-pilot .slider-btn { width: 90px; height: 90px; }
.slider-pilot .slider-btn svg { width: 22.1px; height: 37.5px; }
.pilot-points { display: grid; grid-template-columns: repeat(2, 5.44rem); column-gap: 1.28rem; row-gap: .96rem; margin: .593rem 0 0 .01rem; }
.pilot-points .point:first-child .bullet { width: 4.311rem; }

/* ---------- Take the first step ---------- */
.cta { min-height: 8.61rem; background: var(--stone); padding-top: 1.04rem; }
.cta-box { width: 10.08rem; height: 6.53rem; margin-left: 2.16rem; padding-top: 1.20rem; border-radius: .40rem; background: var(--ink); display: flex; flex-direction: column; align-items: center; }
.cta-box .h2 { color: #fff; text-align: center; }
.cta-box img { width: 2.53rem; height: 1.38rem; margin-top: .56rem; }
.cta-box .sub { width: 5.16rem; margin-top: .56rem; color: #fff; }

/* ---------- Contact ---------- */
/* The form does not scale, so the section never gets shorter than 696px. */
.contact { min-height: max(6.959rem, 695.9px); background: var(--butter); padding: 1.04rem 0 0 1.12rem; }
.contact-text { width: 4.88rem; }
.contact-title { font: .30rem/1.3333 "MD v1 SemiBold"; letter-spacing: -.01em; color: #000; }
.contact .sub { margin-top: .196rem; }

/* The Wix form box scales with the page; everything inside it is fixed px, like Wix Forms. */
.form {
  position: absolute; left: 8.40rem; top: 1.04rem; width: 3.90rem; padding: 24px;
  border: 2px solid transparent; border-radius: 16px; background: rgba(255, 255, 255, .89);
  font: 700 16px/24px "MD v1 SemiBold", sans-serif; color: #000;
}
.f-interest { border: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; }
.f-interest legend { margin-bottom: 8px; font: 400 20px/25px "Work Sans SemiBold", sans-serif; }
.check { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.check input { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; opacity: 0; }
.check .box { flex: 0 0 16px; height: 16px; border: 1px solid rgba(0, 0, 0, .6); background: transparent; }
.check input:checked + .box { background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.7 11.2 3.5 8l.7-.7 2.5 2.5 5.1-5.1.7.7z' fill='%23fff'/%3E%3C/svg%3E") center / 16px; border-color: #000; }
.check input:focus-visible + .box { outline: 2px solid #4d90fe; outline-offset: 2px; }
.field { margin-top: 24px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  display: block; width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 6px;
  background: #fff; font: inherit; color: #000; outline-offset: 0;
}
.field input::placeholder { color: #6e6e6e; opacity: 1; }
.field.invalid input, .field.invalid .box { border-color: #df3131; }
.field-phone { position: relative; }
.field-phone input[type="tel"] { padding-left: 56px; }
.field-phone .globe { position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; pointer-events: none; }
.field-phone .globe svg { width: 24px; height: 24px; }
.field-phone .chev { position: absolute; left: 36px; top: 13px; width: 16px; height: 16px; pointer-events: none; }
.field-phone select { position: absolute; z-index: 1; left: 1px; top: 1px; width: 52px; height: 40px; opacity: 0; cursor: pointer; }
.field-phone select:focus-visible ~ .globe { outline: 2px solid #4d90fe; }
.field-phone .code { position: absolute; left: 12px; top: 9px; font-size: 16px; line-height: 24px; pointer-events: none; }
.field-consent .check { align-items: center; min-height: 48px; }
.field-consent a { color: var(--butter); text-decoration: none; }
.field-consent a:hover { text-decoration: underline; }
.error { display: flex; align-items: flex-start; gap: 4px; margin-top: 8px; font: 400 14px/19.6px "Madefor Text", "Helvetica Neue", Arial, sans-serif; color: #df3131; }
.error[hidden] { display: none; }
.error svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: -1px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font: 400 18px/1.4 "Madefor Text", sans-serif; color: #000; text-align: center; }
.form-status:empty { display: none; }
.form-status:not(:empty) { margin-top: 24px; }
.submit {
  display: block; width: 46%; height: 45px; margin: 24px 0 0 auto; padding: 0 8px; border: 2px solid rgba(0, 0, 0, .77); border-radius: 100px;
  background: rgba(255, 231, 67, .4); font: 400 16px/1.2 "Madefor Text", sans-serif; color: #000; cursor: pointer;
}
.submit:hover { text-decoration: underline; }
.submit[disabled] { opacity: .6; cursor: progress; }

/* ---------- Footer ---------- */
.site-footer { position: relative; height: 2.32rem; background: var(--ink); }
.footer-links { position: absolute; left: 1.40rem; top: .801rem; }
.footer-links li + li { margin-top: .239rem; }
.footer-links a { font: .20rem/1.2 "MD Medium"; letter-spacing: -.01em; color: #fff; text-decoration: none; }
.footer-mark { position: absolute; left: 12.30rem; top: .80rem; width: .637rem; height: .69rem; }

/* ---------- Privacy and Terms ---------- */
.legal-page { background: #fff; }
.legal { width: 13.183rem; margin-left: .779rem; padding: .432rem 0 .436rem; font: .18rem/1.6 "Madefor Text", "Helvetica Neue", Arial, sans-serif; color: #000; }
.legal-terms .legal { margin-left: .789rem; padding: 0; }
.legal ul, .legal ol { margin-left: .5em; padding-left: 1.3em; }
.legal ul { list-style: disc; }
.legal ul ul { list-style: circle; }
.legal ol { list-style: decimal; }
.legal a { text-decoration: none; }
.legal .center { text-align: center; }

.m-only { display: none; }

/* ---------- Tablet overrides (751px to 1000px). Values are in the 1440 design's rem. ---------- */
@media (min-width: 751px) and (max-width: 1000px) {
  .alerts-points { top: -.039rem; }
  .data-canary { display: none; }
  .slider-data { margin: 1.073rem 0 0 .005rem; }
  .slider-data, .slider-pilot { width: 12.574rem; }
  .slider-data .slide, .slider-pilot .slide { width: 9.418rem; height: 4.262rem; }
  .slider-pilot { margin: .307rem 0 0 -.062rem; }
  .pilot-points { margin-top: 1.494rem; }
  .alerts { min-height: max(9.00rem, calc(.35rem + 598.3px)); }
  .contact { min-height: 864.8px; }
  .contact-text { width: 11.498rem; }
  .contact .sub { font-size: .3375rem; margin-top: .162rem; }
  .form { left: 3.683rem; top: 5.04rem; width: 7.052rem; }
}

/* ---------- Mobile (750px and below). 1rem = 100 px of the 393 design. ---------- */
@media (max-width: 750px) {
  .d-only { display: none; }
  .m-only { display: block; }

  .h2 { font-size: .24rem; }
  .sub { font-size: .16rem; }
  .h3 { font-size: .18rem; }
  .body { font-size: .16rem; }
  .num { font-size: .14rem; }
  .bullet { font-size: .16rem; }

  .site-header { --header: .98rem; }
  :root { --header: .98rem; }
  .logo { left: 1.10rem; top: .241rem; width: 1.729rem; height: .598rem; }
  .nav { display: none; }

  .btn { border-radius: .16rem; font-size: .18rem; }
  .btn-hero { height: .48rem; }
  .btn-hero.btn-yellow { width: 2.10rem; padding-left: .227rem; }
  .btn-hero.btn-yellow svg { left: 1.602rem; top: .15rem; }
  .btn-hero.btn-ghost { width: 1.725rem; padding-left: .225rem; }
  .btn-hero.btn-ghost svg { left: 1.265rem; top: .151rem; width: .18rem; height: .18rem; }
  .btn-small { width: 1.951rem; height: .48rem; padding-left: .226rem; border-radius: .16rem; }
  .btn-small svg { left: 1.621rem; top: .15rem; }

  .hero { min-height: 7.02rem; }
  .hero-title { left: .24rem; top: calc(1.603rem - var(--header)); width: 3.45rem; font-size: .28rem; }
  .hero-cta { left: .24rem; top: calc(4.182rem - var(--header)); width: 3.45rem; }
  .hero-lead { font-size: .24rem; }
  .hero-cta .btn-yellow { margin-top: .267rem; }
  .hero-cta .btn-ghost { margin-top: .238rem; }
  .hero-canary, .hero-outline { display: none; }

  .intro { min-height: 3.00rem; padding: .403rem 0 0 .24rem; }
  .intro-text { width: 3.45rem; font-size: .24rem; }

  .keeps { min-height: 18.141rem; padding: .404rem .24rem 0; }
  .keeps .h2 { width: 3.38rem; margin-left: -.004rem; }
  .keeps .cards { grid-template-columns: 3.45rem; margin-top: .234rem; }
  .keeps .card img { margin-top: .137rem; aspect-ratio: 345 / 217.1; }
  .keeps .card .h3 { min-height: 0; margin-top: .193rem; }
  .keeps .card .body { margin-top: .069rem; }
  .keeps .card:nth-child(2) { margin-top: .33rem; }
  .keeps .card:nth-child(3) { margin-top: .341rem; }
  .keeps .card:nth-child(4) { margin-top: .358rem; }
  .keeps .card:nth-child(4) img { margin-top: .069rem; }
  .keeps .btn-small { margin: .454rem 0 0; }

  .alerts { min-height: 12.209rem; }
  .alerts-dark { position: relative; width: 100%; height: 5.387rem; padding: .397rem .24rem 0; }
  .alerts-dark .h2, .alerts-dark .sub { width: 3.45rem; }
  .alerts-dark .sub { margin-top: .138rem; font-size: .18rem; }
  .radar { width: 3.00rem; height: 3.00rem; margin: .241rem 0 0 .225rem; }
  .alerts-points { position: static; display: flex; flex-direction: column; margin: .40rem .24rem 0; }
  .alerts-points .point { padding-left: .322rem; }
  .alerts-points .point > svg { left: .01rem; top: .022rem; width: .16rem; height: .16rem; }
  .alerts-points .h3 { width: 3.129rem; }
  .alerts-points .bullet { margin-top: .125rem; width: 2.961rem; }
  .p-scan .bullet { font-size: .18rem; width: 2.96rem; }
  .p-multi { order: 2; margin-top: .30rem; }
  .p-multi .bullet { width: 2.92rem; }
  .p-detect { order: 3; margin-top: .327rem; }

  .data { min-height: 17.704rem; padding: .40rem .24rem 0; }
  .data .h2, .data .sub { width: 3.449rem; }
  .data .sub { margin-top: .16rem; }
  .data-canary { display: none; }
  .slider-data { margin: .308rem 0 0; }
  .slider-data .slides { display: block; overflow: visible; }
  .slider-data .slide { width: 3.45rem; height: 4.776rem; }
  .slider-data .slide:first-child { height: 4.994rem; }
  .slider-data .slide + .slide { margin-top: .095rem; }
  .slider-btn { display: none !important; }

  .preshift { min-height: 10.817rem; }
  .preshift-left { position: relative; width: 100%; height: 3.413rem; padding: .40rem .24rem 0; }
  .preshift-left::after { display: none; }
  .preshift::before { content: ""; position: absolute; left: 0; right: 0; top: 2.339rem; bottom: 0; background: rgba(180, 179, 175, .1); }
  .preshift-left .h2 { width: 3.502rem; }
  .preshift-left .sub { width: 2.923rem; margin-top: .105rem; }
  .preshift-art { left: 2.05rem; top: 1.733rem; width: 1.611rem; height: 1.611rem; }
  .preshift-points { position: relative; left: auto; top: auto; display: flex; flex-direction: column; margin: .437rem .24rem 0; }
  .preshift-points .point, .pilot-points .point { padding-left: .32rem; }
  .preshift-points .point > svg, .pilot-points .point > svg { left: 0; top: .029rem; width: .16rem; height: .16rem; }
  .preshift-points .h3 { width: 3.13rem; }
  .preshift-points .bullet { margin-top: .125rem; }
  .p-guided .bullet { width: 3.008rem; }
  .p-compliance { order: 2; margin-top: .358rem; }
  .p-compliance .bullet { width: 2.967rem; }
  .p-fleet { order: 3; margin-top: .229rem; }
  .p-fleet .bullet { width: 2.821rem; }

  .install { min-height: 14.795rem; padding: .404rem .236rem 0; }
  .install .h2, .install .sub { width: 3.45rem; }
  .install .sub { margin-top: .138rem; }
  .install .cards { grid-template-columns: 3.45rem; margin-top: .286rem; }
  .install .num { font: .14rem/1.3333 "MD v1 Regular"; letter-spacing: -.01em; color: var(--charcoal); }
  .install .card img { margin-top: .03rem; aspect-ratio: 345 / 217; object-fit: cover; border-radius: .16rem; }
  .install .card:first-child .body { width: 3.36rem; }
  .install .card .h3 { margin-top: .143rem; line-height: 1.3333; }
  .install .card .body { width: 3.45rem; margin-top: .107rem; line-height: 1.3333; letter-spacing: -.01em; }
  .install .card:nth-child(n+2) .body { font-family: "Madefor Text"; line-height: 1.6; letter-spacing: normal; color: #000; margin-top: .11rem; }
  .install .card:nth-child(2) { margin-top: .414rem; }
  .install .card:nth-child(3) { margin-top: .344rem; }
  .install .card:nth-child(n+2) img { margin-top: .031rem; }
  .install .card:nth-child(n+2) .h3 { margin-top: .142rem; }

  .pilot { min-height: 10.895rem; padding: .404rem .24rem 0 .236rem; }
  .pilot .h2, .pilot .sub { width: 3.45rem; }
  .pilot .sub { margin-top: .137rem; }
  .slider-pilot { margin: .28rem 0 0 .004rem; }
  .slider-pilot .slides { overflow: visible; }
  .slider-pilot .slide { width: 3.45rem; height: 2.481rem; }
  .slider-pilot .slide img { object-fit: cover; }
  .slider-pilot .slide + .slide { display: none; }
  .pilot-points { grid-template-columns: 3.45rem; row-gap: 0; margin: .365rem 0 0 .004rem; }
  .pilot-points .point { padding-left: .401rem; }
  .pilot-points .point > svg { top: .031rem; }
  .pilot-points .h3 { width: 3.13rem; }
  .pilot-points .bullet { width: 3.049rem; margin-top: .044rem; }
  .pilot-points .point:first-child .bullet { width: 3.049rem; margin-top: .094rem; }
  .pilot-points .point:nth-child(3) .bullet { width: 3.125rem; }
  .pilot-points .point:nth-child(2) { margin-top: .274rem; }
  .pilot-points .point:nth-child(3) { margin-top: .313rem; }
  .pilot-points .point:nth-child(4) { margin-top: .273rem; }

  .cta { min-height: 4.102rem; padding-top: .24rem; }
  .cta-box { width: 3.45rem; height: 3.592rem; margin-left: .243rem; padding-top: .397rem; border-radius: .109rem; }
  .cta-box .h2 { width: 3.00rem; font-size: .18rem; }
  .cta-box img { width: 1.572rem; height: .857rem; margin-top: .242rem; }
  .cta-box .sub { width: 2.882rem; margin-top: .369rem; }

  .contact { min-height: 991.7px; padding: .404rem .235rem 0; }
  .contact-text { width: 3.45rem; }
  .contact-title { font-size: .24rem; }
  .contact .sub { margin-top: .138rem; }
  .form { position: relative; left: auto; top: auto; width: max(306px, 3.447rem); margin: .303rem auto 0; }
  .f-interest { column-gap: 16px; }

  .site-footer { height: 1.333rem; }
  .footer-links { left: .238rem; top: .318rem; }
  .footer-links li + li { margin-top: .163rem; }
  .footer-links a { font: .14rem/1.2 "MD v1 Regular"; letter-spacing: -.01em; }
  .footer-mark { left: 3.335rem; top: .375rem; width: .41rem; height: .444rem; }

  /* Wix has no phone layout for these pages and shrinks the desktop text to about 5px.
     Here they use the phone header and readable 16px text instead. */
  .legal, .legal-terms .legal { width: auto; margin: 0; padding: .30rem .24rem .40rem; font-size: 16px; overflow-wrap: anywhere; }
}