@charset "UTF-8";

/* Transport-video typography; loaded after the existing route refinements. */
body.video-page {
  --video-ui-font: -apple-system, BlinkMacSystemFont, system-ui, Inter, "Helvetica Neue", Arial, sans-serif;
  --service-font-body: var(--video-ui-font);
  --service-font-display: var(--video-ui-font);
  --font-body: var(--video-ui-font);
  --font-display: var(--video-ui-font);
  font-family: var(--video-ui-font);
}

body.video-page #main :is(.video-hero, #applicability, #monitoring-catalog, #price-match, #round-view, #included) {
  font-family: var(--video-ui-font);
}

body.video-page #main :is(.video-hero, #applicability, #monitoring-catalog, #price-match, #round-view, #included) :is(h1, h2, h3, p, a, button, span, small, strong, dt, dd):not(.price-match__invoice-edit):not(.price-match__invoice-edit *) {
  font-family: var(--video-ui-font) !important;
}

/* Keep the three authored reveal lines and the red text-fill animation. */
body.video-page #main .video-hero #video-hero-title {
  font-size: 50px !important;
  font-weight: 600;
  line-height: 56px !important;
}

body.video-page #main .video-hero #video-hero-title :is(.hero-title__line, .hero-title__clip, .hero-title__fragment, .video-hero-title__accent) {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Keep the locality with its preposition without forcing the whole line. */
body.video-page #main .video-hero #video-hero-title .hero-title__line:last-child .hero-title__fragment > span {
  white-space: nowrap;
}

body.video-page #main .video-hero .era-hero__lead,
body.video-page #main #applicability .era-vehicle-slide__summary,
body.video-page #main #monitoring-catalog .monitoring-catalog__description,
body.video-page #main #price-match .price-match__copy > p,
body.video-page #main #round-view :is(.round-view__lead, .round-view__note),
body.video-page #main #included :is(.section-intro, .work-item > div > p) {
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.022em;
}

body.video-page #main .video-hero .era-hero__lead,
body.video-page #main #monitoring-catalog .monitoring-catalog__description,
body.video-page #main #price-match .price-match__copy > p,
body.video-page #main #included :is(.section-intro, .work-item > div > p) {
  color: #fff;
}

body.video-page #main #round-view :is(.round-view__lead, .round-view__note),
body.video-page #main #round-view #round-view-title,
body.video-page #main #applicability .era-vehicle-slide__summary {
  color: #1d1d1f;
}

body.video-page #main .video-hero .era-hero__proof :is(dt, dd) {
  color: #fff;
}

/* The heading and description span the same full catalog width. */
body.video-page #main #monitoring-catalog .monitoring-catalog__head,
body.video-page #main #monitoring-catalog .monitoring-catalog__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

body.video-page #main #monitoring-catalog .monitoring-catalog__heading > .monitoring-catalog__intro {
  width: 100%;
  color: #fff;
}

body.video-page #main #monitoring-catalog .video-kit-card .monitoring-product-card__body :is(h3, .monitoring-product-card__description, .monitoring-product-card__specs dt, .monitoring-product-card__specs dd, .monitoring-product-card__price span, .monitoring-product-card__price strong) {
  color: #1d1d1f;
}

body.video-page #main #price-match #price-match-title,
body.video-page #main #round-view #round-view-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: 0;
}

body.video-page #main #price-match #price-match-title .price-match__title-accent {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body.video-page #main #included .work-item h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.009em;
}

body.video-page #main #included #included-title {
  font-size: 11px;
  line-height: 1.2;
}

body.video-page #main #round-view .round-view__eyebrow {
  font-size: 12px;
  line-height: 1.2;
}

body.video-page #main :is(.video-hero .era-hero__actions .hero-callback, .video-hero .era-hero__actions .messenger-switch__action, .video-hero .era-hero__actions .messenger-switch__label, #price-match .price-match__cta, #price-match .messenger-switch__action, #price-match .messenger-switch__label, #round-view .round-view__cta) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
}

body.video-page #main .video-hero .era-hero__actions .hero-callback > span {
  font-size: inherit;
  line-height: inherit;
}

/* Match the reference prose scale even in the hero's compact layout. */
body.video-page #main .video-hero .era-hero__copy .era-hero__lead {
  font-size: 17px;
  line-height: 25px;
}

/* Only the tab controls become square; product cards retain their shape. */
body.video-page #main #monitoring-catalog :is(.monitoring-catalog__head, .monitoring-catalog__heading, #video-kit-catalog-title, .monitoring-catalog__description) {
  width: 100%;
  max-width: none;
}

body.video-page #main #monitoring-catalog .monitoring-catalog__tabs,
body.video-page #main #monitoring-catalog .monitoring-catalog__tab {
  border-radius: 0 !important;
}

@media (min-width: 735px) and (max-width: 1068px) {
  body.video-page #main .video-hero #video-hero-title {
    font-size: 44px !important;
    line-height: 48px !important;
  }

  body.video-page #main #price-match #price-match-title,
  body.video-page #main #round-view #round-view-title {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 0.004em;
  }

  body.video-page #main #included .work-item h3 {
    font-size: 21px;
    line-height: 25px;
  }
}

@media (max-width: 734px) {
  body.video-page #main .video-hero #video-hero-title {
    font-size: 32px !important;
    line-height: 36px !important;
  }

  body.video-page #main #price-match #price-match-title,
  body.video-page #main #round-view #round-view-title {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007em;
  }

  body.video-page #main #included .work-item h3 {
    font-size: 21px;
    line-height: 25px;
  }
}