/* Page-only typography. Keep the existing red text fills and their reveal triggers. */
body.dopog-page {
  --dopog-ui-font: -apple-system, BlinkMacSystemFont, system-ui, Inter, "Helvetica Neue", Arial, sans-serif;
}

body.dopog-page :is(#main, #product-dialog) {
  font-family: var(--dopog-ui-font);
  font-optical-sizing: auto;
}

body.dopog-page #main :is(.dopog-hero, #requirements, #dopog-catalog, #price-match, #installation, #included, #faq, #related-services) :is(h1, h2, h3, p, a, button, li, dt, dd, label, input, textarea, select, span, strong, small),
body.dopog-page :is(#product-dialog, #callback-dialog, #login-dialog) :is(h2, h3, p, a, button, label, input, textarea, select, li, dt, dd, summary, span, strong, small) {
  font-family: var(--dopog-ui-font) !important;
}

body.dopog-page #main :is(.dopog-hero, #requirements, #dopog-catalog, #price-match, #installation, #included, #faq, #related-services) :is(h1, h2, h3, p, a, button, li, dt, dd, label) :is(span, strong, small),
body.dopog-page :is(#product-dialog, #callback-dialog, #login-dialog) :is(h2, h3, p, a, button, label, li, dt, dd, summary) :is(span, strong, small) {
  font-family: inherit !important;
}

body.dopog-page #main :is(#dopog-hero-title, #dopog-requirements-title, #dopog-catalog-title, #price-match-title, #installation-title, #dopog-workflow-title, #faq-title) :is(span, strong) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body.dopog-page #main .dopog-hero #dopog-hero-title {
  font-size: 50px !important;
  font-weight: 600;
  letter-spacing: -0.009em;
  line-height: 56px;
}

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

body.dopog-page #main .dopog-hero .era-hero__proof dt {
  font-weight: 600;
}

body.dopog-page #main :is(#dopog-requirements-title, #dopog-catalog-title, #price-match-title, #installation-title, #dopog-workflow-title, #faq-title) {
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: 0;
}

body.dopog-page #main :is(#dopog-requirements-title, #dopog-catalog-title, #installation-title) {
  color: #1d1d1f;
}

/* Balance long phrases without hard line breaks or changes to their wording. */
body.dopog-page #main :is(#dopog-requirements-title, #installation-title) {
  text-wrap: balance;
}

body.dopog-page #main #installation .era-installation__intro > .era-eyebrow {
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

body.dopog-page #main :is(#requirements .dopog-tanker__lead, #requirements .dopog-tanker__check, #dopog-catalog .dopog-catalog__verification p, #price-match .price-match__copy > p, #installation .era-installation__intro > p:not(.era-eyebrow), #installation .era-installation__checklist article p, #installation .era-installation__geo-copy p, #included .section-intro, #included .era-registration__lead, #included .work-item > div > p, #faq .faq-panel__note, #faq .faq-answer__inner p) {
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.022em;
}

body.dopog-page #main :is(#requirements .dopog-tanker__lead, #requirements .dopog-tanker__check, #dopog-catalog .dopog-catalog__verification p, #installation .era-installation__intro > p:not(.era-eyebrow), #installation .era-installation__checklist article p) {
  color: #1d1d1f;
}

body.dopog-page #main :is(#requirements .dopog-tanker__lead, #requirements .dopog-tanker__check, #price-match .price-match__copy > p, #installation .era-installation__intro > p:not(.era-eyebrow), #installation .era-installation__checklist article p, #included .section-intro, #included .era-registration__lead, #included .work-item > div > p, #faq .faq-answer__inner p) :is(span, strong, a) {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body.dopog-page #main #price-match .price-match__copy > p,
body.dopog-page #main #installation .era-installation__geo-copy p,
body.dopog-page #main #included :is(.section-intro, .era-registration__lead, .work-item > div > p, .era-registration__details li, .era-registration__source) {
  color: #fff;
}

body.dopog-page #main #faq :is(#faq-support-title, [data-faq-support-copy], .faq-panel__label, .faq-panel__note) {
  color: #1d1d1f;
}

body.dopog-page #main #installation :is(.era-installation__checklist h3, .era-installation__facts dt, .era-installation__facts dd),
body.dopog-page #main #dopog-catalog .monitoring-product-card:not(.monitoring-product-card--featured) :is(.monitoring-product-card__specs dt, .monitoring-product-card__specs dd) {
  color: #1d1d1f;
}

body.dopog-page #main #dopog-catalog .monitoring-product-card--featured :is(.monitoring-product-card__specs dt, .monitoring-product-card__specs dd) {
  color: #fff;
}

body.dopog-page #main #included #dopog-workflow-title {
  color: #fff;
}

/* Keep the timeline's grey/red/white character wave and its final colour. */
body.dopog-page #main #included .work-item :is(h3, p) {
  --glonass-history-text-color: #fff;
  color: #fff;
}

body.dopog-page #main #included .has-stepped-timeline .work-item:not(.is-reached) .glonass-history-text {
  color: #aab3bf;
}

@media (prefers-reduced-motion: reduce) {
  body.dopog-page #main #included .has-stepped-timeline .work-item .glonass-history-text {
    color: #fff;
  }
}

body.dopog-page #main :is(#installation .era-installation__checklist article h3, #included .work-item h3, #dopog-catalog .monitoring-product-card h3) {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.009em;
}

body.dopog-page #main #dopog-catalog .monitoring-product-card:not(.monitoring-product-card--featured) :is(h3, .monitoring-product-card__description) {
  color: #1d1d1f;
}

body.dopog-page #main #dopog-catalog .monitoring-product-card--featured :is(h3, .monitoring-product-card__description) {
  color: #fff;
}

body.dopog-page #main :is(.hero-callback, .dopog-tanker__button, .monitoring-product-card__actions a, .monitoring-product-card__actions button, .price-match__cta, .messenger-switch__action, .era-registration__source, .faq-aside .button) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
}

body.dopog-page :is(#product-dialog .product-dialog__actions .button, #product-dialog .messenger-switch__action, #callback-dialog .callback-submit, #login-dialog [data-login-submit]) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
}

body.dopog-page :is(#product-dialog #product-dialog-title, #callback-dialog #callback-title, #login-dialog #login-title) {
  color: #1d1d1f;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

body.dopog-page :is(#product-dialog .product-dialog__description, #callback-dialog #callback-description, #login-dialog .login-intro) {
  color: #1d1d1f;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
}

/* Keep the small dialog sections compact, with the same light-surface ink. */
body.dopog-page #product-dialog :is(.product-dialog__note, .product-dialog__requirements h3, .product-dialog__requirements p, .product-dialog__requirements li) {
  color: #1d1d1f;
}

body.dopog-page #product-dialog h3 {
  font-weight: 600;
}

body.dopog-page #main #installation #dopog-geo-title {
  font-weight: 600;
}

body.dopog-page #main #faq .faq-item:not(.is-open) :is(.faq-summary, .faq-question, .faq-answer__inner p) {
  color: #1d1d1f;
}

body.dopog-page :is(#callback-dialog .callback-field > span, #callback-dialog .callback-consent, #callback-dialog .callback-consent-note, #login-dialog [data-login-label]) {
  font-size: 13px;
  line-height: 1.5;
}

body.dopog-page #main #faq :is(.faq-summary, .faq-question) {
  font-size: 17px;
  font-weight: 600;
  line-height: 25px;
}

body.dopog-page #main #faq #faq-title {
  font-size: 40px !important;
  line-height: 44px !important;
}

body.dopog-page #main #faq #faq-support-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

body.dopog-page #main #faq .faq-item.is-open .faq-answer__inner p {
  color: #fff;
}

body.dopog-page #main #related-services #dopog-related-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

body.dopog-page #main #related-services .section-intro {
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.58;
}

body.dopog-page #main #related-services .related-card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}

body.dopog-page #main #related-services .related-card p {
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

body.dopog-page #main #related-services .related-card__index {
  font-size: 10px;
}

body.dopog-page #main #related-services .related-card__link {
  font-size: 12px;
  font-weight: 600;
}

body.dopog-page #main #related-services .related-card:is(:hover, :focus-visible, :focus-within) :is(h3, p, .related-card__link) {
  color: #fff;
}

body.dopog-page #main #related-services .related-card:not(:hover):not(:focus-visible):not(:focus-within) h3 {
  color: #1d1d1f;
}

body.dopog-page #main #related-services .related-card:is(:hover, :focus-visible, :focus-within) {
  background: var(--sv-navy, #002f6c);
}

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

  body.dopog-page #main :is(#dopog-requirements-title, #dopog-catalog-title, #price-match-title, #installation-title, #dopog-workflow-title, #faq-title) {
    font-size: 32px;
    line-height: 36px;
  }

  body.dopog-page #main :is(#installation .era-installation__checklist article h3, #included .work-item h3, #dopog-catalog .monitoring-product-card h3),
  body.dopog-page #main #faq #faq-support-title {
    font-size: 21px;
    line-height: 25px;
  }

  body.dopog-page #main #faq #faq-title {
    font-size: 32px !important;
    line-height: 36px !important;
  }
}

@media (max-width: 900px) {
  body.dopog-page #main #related-services .related-card h3 {
    font-size: 17px;
    line-height: 21.25px;
  }

  body.dopog-page #main #related-services .related-card p {
    font-size: 12.5px;
    line-height: 18.75px;
  }
}

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

  body.dopog-page #main :is(#dopog-requirements-title, #dopog-catalog-title, #price-match-title, #installation-title, #dopog-workflow-title, #faq-title) {
    font-size: 28px;
    line-height: 32px;
  }

  body.dopog-page #main :is(#installation .era-installation__checklist article h3, #included .work-item h3, #dopog-catalog .monitoring-product-card h3),
  body.dopog-page #main #faq #faq-support-title {
    font-size: 21px;
    line-height: 25px;
  }

  body.dopog-page #main #faq #faq-title {
    font-size: 28px !important;
    line-height: 32px !important;
  }

}

@media (max-width: 600px) {
  body.dopog-page #main #installation .era-installation__intro > .era-eyebrow {
    font-size: 10px;
  }

  body.dopog-page #main #related-services #dopog-related-title {
    font-size: 10px;
  }

  body.dopog-page #main #related-services .section-intro {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* Concise requirements overview; keep shared links and other routes unchanged. */
body.dopog-page #main #requirements #dopog-requirements-title {
  max-width: none;
}
body.dopog-page #main #requirements {
  padding-block: clamp(48px, 5vw, 72px);
}

body.dopog-page #main #requirements .dopog-tanker__layout {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "media content" "related related";
  gap: 16px 48px;
  align-items: center;
}

body.dopog-page #main #requirements .dopog-tanker__heading {
  display: grid;
  gap: 12px;
}

body.dopog-page #main #requirements .dopog-tanker__content {
  grid-area: content;
  display: grid;
  gap: 16px;
  max-width: none;
}

body.dopog-page #main #requirements .dopog-tanker__heading :is(h2, .dopog-tanker__lead) {
  grid-row: auto;
  margin: 0;
}

body.dopog-page #main #requirements .dopog-tanker__equipment {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.dopog-page #main #requirements .dopog-tanker__equipment li {
  padding-left: 14px;
  border-left: 2px solid var(--sv-red);
}

body.dopog-page #main #requirements .dopog-tanker__equipment :is(strong, span) {
  display: block;
  color: #1d1d1f;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.022em;
}

body.dopog-page #main #requirements .dopog-tanker__equipment strong {
  font-weight: 600;
}

body.dopog-page #main #requirements .dopog-tanker__media {
  grid-area: media;
  min-width: 0;
}

body.dopog-page #main #requirements .dopog-tanker__media img {
  width: min(100%, 540px);
  transform: scaleX(-1);
}

body.dopog-page #main #requirements .dopog-tanker__related {
  display: grid;
  grid-area: related;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

body.dopog-page #main #requirements .dopog-tanker__related article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px 12px;
  border: 1px solid rgb(0 47 108 / 12%);
  border-radius: 12px;
  background: #fff;
}

body.dopog-page #main #requirements .dopog-tanker__related h3 {
  margin: 0;
  color: #1d1d1f;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

body.dopog-page #main #requirements .dopog-tanker__law {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 2px;
  color: var(--arrow-link-color);
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body.dopog-page #main #requirements .dopog-tanker__related article > p {
  margin: 8px 0 12px;
  color: #1d1d1f;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.022em;
}

body.dopog-page #main #requirements .arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  margin-top: auto;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

body.dopog-page #main #requirements .dopog-tanker__link-label {
  display: block;
  min-width: 0;
}

body.dopog-page #main #requirements .arrow-link__arrow {
  position: static;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0;
  vertical-align: middle !important;
}

body.dopog-page #main #requirements :is(.arrow-link, .dopog-tanker__law):focus-visible {
  outline: 2px solid var(--arrow-link-hover);
  outline-offset: 4px;
  border-radius: 2px;
}

body.dopog-page #main #requirements .dopog-tanker__law:hover {
  color: var(--arrow-link-hover);
}


@media (max-width: 900px) {
  body.dopog-page #main #requirements .dopog-tanker__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "content" "related";
    gap: 24px;
  }

  body.dopog-page #main #requirements .dopog-tanker__related {
    grid-template-columns: minmax(0, 1fr);
  }

  body.dopog-page #main #requirements .dopog-tanker__media img {
    width: min(100%, 400px);
  }

  body.dopog-page #main #requirements .dopog-tanker__law {
    min-height: 44px;
  }
}

@media (max-width: 600px) {
  body.dopog-page #main #requirements .dopog-tanker__related article {
    padding: 16px 20px 8px;
  }
}