/* The companion products share a header: brand, product choice, section links. The choice is two text tabs, the
   current one underlined by a 2 px line in its product's colour (the plan of 10.11.2026: no pill, no filled half), the
   other a plain link; the home page and /tehpodderzhka load this one file from /assets. */
@font-face {
  font-family: 'Product Switch Manrope';
  src: url('/assets/fonts/manrope.woff2?v=acf292ea2f') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

body .product-switch.unified-product-switch {
  --ps-active: #16382b;
  --ps-ink: #173b30;
  --ps-muted: #4f5d55;
  --ps-line: #dedfd2;
  --ps-focus: #397bc1;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: auto;
  max-width: 100%;
  gap: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ps-ink);
  font-family: 'Product Switch Manrope', Manrope, Arial, sans-serif;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0;
}

body.page-support .product-switch.unified-product-switch {
  --ps-active: #3155b6;
  --ps-ink: #334b80;
  --ps-muted: #4d5b7a;
  --ps-line: #c6d2eb;
}

body .product-switch.unified-product-switch > .ps-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  gap: 0;
  margin: 0;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ps-muted);
  font-family: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  transition: border-color .15s, color .15s;
}

body .product-switch.unified-product-switch .ps-word {
  display: block;
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  text-wrap: balance;
}

/* The current tab differs by its ink and its line alone, never by its width: the same words take the same room on both
   products' pages, and the header keeps its height when one switches to the other. */
body .product-switch.unified-product-switch > [aria-current="page"] {
  border-bottom-color: var(--ps-active);
  background: transparent;
  color: var(--ps-ink);
}

body .product-switch.unified-product-switch > a.ps-item:hover {
  border-bottom-color: var(--ps-line);
  background: transparent;
  color: var(--ps-ink);
}

body .product-switch.unified-product-switch > a.ps-item:focus-visible {
  outline: 3px solid var(--ps-focus);
  outline-offset: 3px;
}

body .topbar:has(> .header-products) {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  align-items: center;
  min-height: 88px;
  height: auto;
  gap: 24px;
  padding-block: 12px;
}

/* The tabs start right after the brand, not in the middle of the room the page's own links leave: the home's links and
   /tehpodderzhka's differ in width, and a centred switch stood 42 px further right on the tech support's page (the
   acceptance of 10.11.2026). */
body .topbar > .header-products {
  display: block;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  margin: 0;
  padding: 0;
  justify-self: start;
}

body .topbar:has(> .header-products) .brand-desc,
body .topbar:has(> .header-products) > .topbar-cta {
  display: none;
}

/* From 761 px each tab takes its words' width, on one line. A phone keeps the two tabs under the brand. */
@media (min-width: 761px) {
  body .topbar > .header-products .product-switch.unified-product-switch {
    justify-content: flex-start;
  }

  body .topbar > .header-products .product-switch.unified-product-switch > .ps-item {
    white-space: nowrap;
  }
}

body .topbar:has(> .header-products) > .nav {
  gap: 20px;
  margin: 0;
}

body .topbar:has(> .header-products) > .nav a {
  white-space: nowrap;
  font-size: 14px;
}

body .topbar:has(> .header-products) > .nav:not(.open) :is(.nav-product, .nav-cta) {
  display: none;
}

@media (max-width: 1100px) {
  body .topbar:has(> .header-products) {
    grid-template-columns: auto minmax(280px, 1fr) 44px;
  }

  body .topbar:has(> .header-products) > .menu-button {
    display: block;
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  body .topbar:has(> .header-products) > .nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 12px 24px 24px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--sheet, var(--paper));
    box-shadow: 0 12px 28px #173b3014;
  }

  body .topbar:has(> .header-products) > .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  body .topbar:has(> .header-products) > .nav a {
    min-height: 44px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }

  body .topbar:has(> .header-products) > .nav.open .nav-cta {
    display: block;
    margin-top: 12px;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--forest, #3155b6);
    color: #fff;
    text-align: center;
    font-weight: 700;
  }
}

@media (max-width: 760px) {
  body .topbar:has(> .header-products) {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 4px 12px;
    padding-block: 14px 0;
  }

  body .topbar > .header-products {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    justify-self: stretch;
  }

  /* Two equal tabs under the brand, the line under the current one across its half. 8 px between them: inside the
     header's 20 px sides each keeps the width it had (a 390 px phone's «Для компаний с записью» on one line). */
  body .topbar > .header-products .product-switch.unified-product-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body .topbar:has(> .header-products) > .menu-button {
    grid-column: 2;
  }

  body .product-switch.unified-product-switch > .ps-item {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .product-switch.unified-product-switch > .ps-item {
    transition: none;
  }
}