@font-face {
  font-family: "PT Root UI";
  src: url("../fonts/PT-Root-UI-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope Local";
  src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Commissioner Local";
  src: url("../fonts/commissioner-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Commissioner Local";
  src: url("../fonts/commissioner-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope Local";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "PT Root UI";
  src: url("../fonts/PT-Root-UI-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --site-font-family: "PT Root UI", Arial, sans-serif;
  --site-heading-font-family: "Commissioner Local", "PT Root UI", Arial, sans-serif;
  --site-control-font-family: "PT Root UI", Arial, sans-serif;
  --site-control-font-size: 12px;
  --site-control-font-weight: 500;
  --site-page-background: #f4f9ff;
  --site-page-surface: rgba(255, 255, 255, .78);
  --site-page-surface-soft: rgba(235, 244, 251, .72);
  --site-pattern-blue: rgba(7, 93, 187, .052);
  --site-pattern-cyan: rgba(37, 184, 207, .055);
}

/*
 * Shared production canvas.
 * The homepage remains the source of truth; internal pages reuse its cold light
 * base, restrained cyan/blue light and technical grid without flattening the
 * page-specific content surfaces.
 */
body:is(.internal-light, .account-access-page, .auth-page):not(.page-home):not(.lab-page) {
  background-color: var(--site-page-background) !important;
  background-image:
    radial-gradient(ellipse 52% 34% at 88% 8%, var(--site-pattern-cyan), transparent 72%),
    radial-gradient(ellipse 44% 32% at 8% 38%, var(--site-pattern-blue), transparent 76%),
    linear-gradient(rgba(94, 132, 164, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 132, 164, .026) 1px, transparent 1px) !important;
  background-size: auto, auto, 64px 64px, 64px 64px !important;
  background-attachment: scroll !important;
}

body:is(.internal-light, .account-access-page, .auth-page):not(.page-home):not(.lab-page) main {
  background-color: transparent;
}

/* Homepage-like dissolved transitions are injected as inert decorative layers. */
.site-flow-section {
  position: relative;
  isolation: isolate;
}

.site-flow-section > .site-flow-pattern {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: clamp(112px, 14vw, 220px);
  overflow: hidden;
  pointer-events: none;
  opacity: .78;
  background:
    radial-gradient(ellipse 42% 70% at var(--site-flow-x, 78%) 0%, rgba(37, 184, 207, .075), transparent 72%),
    linear-gradient(180deg, rgba(244, 249, 255, .82), rgba(244, 249, 255, .28) 52%, transparent 100%);
}

.site-flow-section > .site-flow-pattern::after {
  content: "";
  position: absolute;
  inset: -58% -7% 0;
  background: url("../assets/hero-bg.png") var(--site-flow-x, 78%) 12% / 118% auto no-repeat;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .26) 68%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .26) 68%, transparent 100%);
}

.site-flow-section:nth-of-type(even) > .site-flow-pattern {
  --site-flow-x: 22%;
}

.site-flow-section > :not(.site-flow-pattern) {
  position: relative;
  z-index: 1;
}

/* Approved control typography. Apply this tuple to production controls and every preview variant. */
.hm-hero-event-card__link,
.hm-hero-logo-card-btn,
.home3-logo-details strong,
.home3-product-feature-toggle,
.home3-product-copy [data-product-link] {
  font-family: var(--site-control-font-family) !important;
  font-size: var(--site-control-font-size) !important;
  font-weight: var(--site-control-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Partner glass cards follow the same light technical hierarchy as site copy. */
body.page-home .hm-hero-logo-card-sub {
  font-family: var(--site-font-family) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

body.page-home .hm-hero-logo-card-text {
  font-family: var(--site-font-family) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

body.page-home .hm-hero-logo-card-text strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

body.page-home .hm-hero-logo-card-btn-label {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Product-story typography follows the approved site hierarchy explicitly. */
body.page-home .home3-product-feature h4 {
  font-family: var(--site-heading-font-family) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.page-home .home3-product-feature > p,
body.page-home .home3-product-feature-body p,
body.page-home .home3-product-feature-body strong {
  font-family: var(--site-font-family) !important;
  letter-spacing: 0 !important;
}

body.page-home .home3-product-feature > p,
body.page-home .home3-product-feature-body p {
  font-weight: 400 !important;
}

body.page-home .home3-product-feature-body strong {
  font-weight: 700 !important;
}

html,
body,
body *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--site-font-family) !important;
}

/* Approved typography tuple for every production control, including animated labels. */
body :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [class~="btn"],
  [class$="-btn"],
  [class*="-btn "],
  [class^="btn-"],
  [class*="__btn"],
  [class~="button"],
  [class$="-button"],
  [class*="-button "],
  [class^="button-"],
  [class*="__button"],
  [class*="cta"]
) {
  font-family: var(--site-control-font-family) !important;
  font-size: var(--site-control-font-size) !important;
  font-weight: var(--site-control-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body :is(
  button,
  [role="button"],
  [class~="btn"],
  [class$="-btn"],
  [class*="-btn "],
  [class^="btn-"],
  [class*="__btn"],
  [class~="button"],
  [class$="-button"],
  [class*="-button "],
  [class^="button-"],
  [class*="__button"],
  [class*="cta"]
) :is(span, strong, em, small) {
  font: inherit !important;
  letter-spacing: inherit !important;
}

body:not(.page-home) :is(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

body:not(.page-home) :is(p, li, dd, figcaption) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

/* Commissioner is the approved display typeface across all site sections. */
h1,
h2,
h3,
h4,
h5,
h6,
[class~="title"],
[class$="-title"],
[class*="-title "],
[class^="title-"],
[class*="__title"],
body.internal-light h1,
body.internal-light h2,
body.internal-light h3,
body.internal-light h4,
body.internal-light h5,
body.internal-light h6,
body.internal-light [class~="title"],
body.internal-light [class$="-title"],
body.internal-light [class*="-title "],
body.internal-light [class^="title-"],
body.internal-light [class*="__title"] {
  font-family: var(--site-heading-font-family) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Exact approved Commissioner option from hero-font-preview.html. */
body.page-home .hm-hero-slide--1 .hm-hero-title {
  max-width: 630px !important;
  font-family: "Commissioner Local", "PT Root UI", Arial, sans-serif !important;
  font-size: 82px !important;
  font-weight: 500 !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.page-home .home3-main :is(h1, h2, h3, h4, h5, h6),
body.page-home .home3-main :is([class~="title"], [class$="-title"], [class*="-title "], [class^="title-"], [class*="__title"]) {
  font-family: "Commissioner Local", "PT Root UI", Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 768px) {
  body.page-home .hm-hero-slide--1 .hm-hero-title {
    font-size: 50px !important;
  }
}

@media (max-width: 768px) {
  body:is(.internal-light, .account-access-page, .auth-page):not(.page-home):not(.lab-page) {
    background-size: auto, auto, 40px 40px, 40px 40px !important;
  }

  .site-flow-section > .site-flow-pattern {
    height: 112px;
    opacity: .58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-flow-pattern,
  .site-flow-pattern::after {
    animation: none !important;
    transform: none !important;
  }
}

/* Unified top navigation placement: desktop header and mobile command bar. */
.site-header,
.site-header.header-apple-glass,
.site-header.is-scrolled,
body.page-home .site-header,
body.page-home .site-header.is-scrolled,
body.page-home .site-header.is-header-hidden,
body.internal-light .site-header,
body.internal-light .site-header.is-scrolled,
body.internal-light .site-header.is-header-hidden {
  top: 0 !important;
}

@media (max-width: 1200px) {
  html {
    scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    scroll-padding-bottom: 0 !important;
  }

  body {
    padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0 !important;
    transition: padding-top .28s cubic-bezier(.32, .72, 0, 1) !important;
  }

  body.mob-nav-scroll-hidden {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
  }

  .mob-nav {
    top: 0 !important;
    bottom: auto !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(6, 86, 185, .07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 8px 40px rgba(10,22,40,.1) !important;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px !important;
  }

  .mob-nav.is-scroll-hidden {
    transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))) !important;
  }

  .mob-drawer-sheet {
    top: 0 !important;
    bottom: auto !important;
    border-radius: 0 0 28px 28px !important;
    transform: translateY(-100%) !important;
    box-shadow: 0 32px 80px rgba(10, 22, 40, .18) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 16px !important;
  }

  .mob-drawer.is-open .mob-drawer-sheet {
    transform: translateY(0) !important;
  }
}

code,
pre,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
}

/* Approved navigation typeface. Keep the rest of the site on PT Root UI. */
.site-header,
.site-header *,
.site-breadcrumb,
.site-breadcrumb *,
.mob-drawer,
.mob-drawer *,
body.internal-light .site-header,
body.internal-light .site-header *,
body.internal-light .site-breadcrumb,
body.internal-light .site-breadcrumb *,
body.internal-light .mob-drawer,
body.internal-light .mob-drawer * {
  font-family: "Manrope Local", Arial, sans-serif !important;
}

.site-header .nav-trigger,
.site-header .nav-link-top,
.site-header .header-phone-main,
.site-header .header-catalog-main,
.site-header .header-search-inline-input {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.site-header .header-catalog-main span,
.site-header .header-phone-main span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
}

@media (min-width: 1700px) {
  .site-header .nav-trigger,
  .site-header .nav-link-top,
  .site-header .header-phone-main,
  .site-header .header-catalog-main,
  .site-header .header-search-inline-input {
    font-size: 15px !important;
  }
}

@media (min-width: 1400px) and (max-width: 1699px) {
  .site-header .nav-trigger,
  .site-header .nav-link-top,
  .site-header .header-phone-main,
  .site-header .header-catalog-main,
  .site-header .header-search-inline-input {
    font-size: 13px !important;
  }
}

@media (min-width: 1201px) and (max-width: 1399px) {
  .site-header .nav-trigger,
  .site-header .nav-link-top {
    font-size: 14px !important;
  }

  .site-header .header-phone-main,
  .site-header .header-catalog-main,
  .site-header .header-search-inline-input {
    font-size: 13px !important;
  }
}

/* Catalog cards use the same approved hierarchy as the rest of the site. */
.catalog-view .cat-card-title,
.catalog-view .cat-card-title a {
  font-family: "Commissioner Local", "PT Root UI", Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.catalog-view .cat-card-desc,
.catalog-view .cat-card-specs {
  font-family: "PT Root UI", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.catalog-view .cat-card-buy,
.catalog-view .cat-card-price,
.catalog-view .cat-card-sku,
.catalog-view .cat-card-avail {
  font-family: "PT Root UI", Arial, sans-serif !important;
  font-weight: 700 !important;
}

.catalog-view .cat-card-details-toggle {
  font-family: var(--site-control-font-family) !important;
  font-size: var(--site-control-font-size) !important;
  font-weight: var(--site-control-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Decorative counters are still part of the typography system. */
:is(
  .ev-hero-mono,
  .is-dir-slide-idx,
  .pps-adv-n,
  .kb-step-num,
  .kb-stage-num
) {
  font-family: var(--site-heading-font-family) !important;
  font-variant-numeric: tabular-nums;
}