:root {
  --bg: #eeeeec;
  --paper: #fff;
  --ink: #171717;
  --muted: #686b70;
  --line: #e3e4e5;
  --accent: #b4002d;
  --header: #171717;
  --max: 1240px;
  --sidebar: 280px;
  --radius: 12px;
  --shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.62
}

.page-wrap {
  width: min(calc(100% - 40px), 1340px) !important;
  margin: 18px auto 42px !important;
  padding: 0 !important;
}

.frolean_contents {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 22px !important;
  align-items: start !important;
}

.frolean_left {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-heading {
  padding: 18px 26px 20px !important;
  margin: 0 !important;
}

.frolean_textway {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.page-heading h1 {
  margin: 0 !important;
  padding: 0 !important;
}

.content-body {
  padding: 26px !important;
  margin: 0 !important;
}

.frolean_right {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.manual-page-navigation {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 34px 0 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid #e3e4e5 !important;
}

.manual-page-navigation__link {
  display: block !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid #e3e4e5 !important;
  border-radius: 12px !important;
  background: #f8f8f6 !important;
  color: #171717 !important;
  text-decoration: none !important;
}

.manual-page-navigation__link--next {
  text-align: right !important;
}

.manual-page-navigation__label {
  display: block !important;
  margin: 0 0 6px !important;
  color: #777 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.manual-page-navigation__title {
  display: block !important;
  color: #171717 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

@media(max-width:980px) {
  .page-wrap {
    width: min(calc(100% - 24px), 1240px) !important
  }

  .frolean_contents {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .frolean_right {
    position: static !important;
    top: auto !important
  }
}

@media(max-width:820px) {
  .page-wrap {
    width: 100% !important;
    margin: 10px 0 28px !important;
    padding: 0 10px !important
  }

  .frolean_contents {
    grid-template-columns: 1fr !important
  }

  .frolean_right {
    display: none !important
  }
}

@media(max-width:600px) {

  .page-heading,
  .content-body {
    padding: 18px !important
  }

  .manual-page-navigation {
    grid-template-columns: 1fr !important
  }

  .manual-page-navigation__link--next {
    text-align: left !important
  }
}

img {
  max-width: 100%;
  height: auto
}

a {
  color: var(--accent);
  text-underline-offset: 3px
}

a:hover {
  text-decoration: none
}

.site-shell {
  min-height: 100vh
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--header);
  border-bottom: 1px solid #2d2d2d
}

.header-inner {
  width: min(calc(100% - 40px), var(--max));
  height: 62px;
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px
}

.brand {
  display: flex;
  align-items: center
}

.frolean_logoimg {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 58px
}

.navbar ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none
}

.navbar li a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700
}

.navbar li a:hover {
  background: #292929
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px
}

#search {
  width: 215px
}

#search form {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 7px 0 14px;
  background: #fff;
  border-radius: 999px
}

#search #s {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: 13px
}

#search button {
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 0;
  background: none;
  cursor: pointer
}

#search button img {
  display: block;
  width: 17px;
  height: 17px
}

.frolean_lang {
  display: flex;
  gap: 5px
}

.frolean_lang a {
  display: flex
}

.frolean_lang img {
  border-radius: 50%
}

.page-wrap {
  width: min(calc(100% - 40px), var(--max));
  margin: 18px auto 42px
}

.frolean_contents {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar);
  gap: 22px;
  align-items: start
}

.frolean_left,
.frolean_right {
  background: var(--paper);
  border: 1px solid #e7e7e7;
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

.frolean_left {
  min-width: 0;
  overflow: hidden
}

.page-heading {
  padding: 18px 26px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff
}

.frolean_textway {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0;
  color: #777;
  font-size: 11px;
  line-height: 1.35
}

.frolean_textway a {
  color: #777;
  text-decoration: none
}

.frolean_textway a:hover {
  color: var(--accent)
}

.breadcrumb-separator {
  color: #b2b2b2
}

.breadcrumb-current {
  color: #303030;
  font-weight: 700
}

.frolean_left h1 {
  max-width: 900px;
  margin: 0;
  padding: 0;
  color: #171717;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.02em
}

.content-body {
  padding: 26px 28px 38px
}

.content-body>:first-child {
  margin-top: 0 !important
}

.content-body>:last-child {
  margin-bottom: 0
}

.frolean_left p {
  margin: 0 0 17px
}

.frolean_left h2 {
  margin: 0px 0 12px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #171717
}

.frolean_left h3 {
  margin: 24px 0 10px;
  font-size: 18px;
  line-height: 1.35;
  color: #171717
}

.frolean_left h4 {
  margin: 20px 0 8px;
  font-size: 16px;
  line-height: 1.35
}

.frolean_left ul,
.frolean_left ol {
  margin: 0 0 20px;
  padding-left: 24px
}

.frolean_left li {
  margin: 7px 0
}

.frolean_left img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto
}

.content-body>p:first-child:has(img) {
  margin-bottom: 22px
}

.frolean_firstimg,
.frolean_secondimg {
  display: inline-block;
  width: auto;
  max-width: 32%;
  margin: 0 4px 8px 0;
  vertical-align: top
}

table {
  max-width: 100%;
  border-collapse: collapse
}

th,
td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left
}

.ad-slot:empty {
  display: none
}

.frolean_right {
  position: sticky;
  top: 82px;
  padding: 0;
  overflow: hidden
}

.frolean_rightmainmenu {
  display: block
}

.sidebar-card {
  padding: 18px;
  border-bottom: 1px solid var(--line)
}

.sidebar-card:last-child {
  border-bottom: 0
}

.sidebar-card__eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}

.sidebar-manual-card {
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f5 100%)
}

.sidebar-manual-card__media {
  margin: 0 0 14px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .05)
}

.sidebar-manual-card__media img {
  display: block;
  width: 100%;
  max-width: 210px;
  max-height: 136px;
  margin: 0 auto;
  object-fit: contain
}

.sidebar-manual-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #171717;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase
}

.sidebar-manual-card__title {
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.2;
  color: #171717
}

.sidebar-manual-card__title a {
  color: #171717;
  text-decoration: none
}

.sidebar-manual-card__title a:hover {
  color: var(--accent)
}

.sidebar-manual-card__meta {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5
}

.sidebar-manual-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px
}

.sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #171717;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: .15s ease
}

.sidebar-btn:hover {
  border-color: #c7c8ca;
  background: #f3f3f1
}

.sidebar-btn--primary {
  background: #171717;
  border-color: #171717;
  color: #fff
}

.sidebar-btn--primary:hover {
  background: #2a2a2a;
  border-color: #2a2a2a
}

.sidebar-links-card h2,
.frolean_right h2 {
  margin: 10px 0 10px;
  font-size: 18px;
  line-height: 1.25
}

.sidebar-links-card ul,
.frolean_right ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.sidebar-links-card li,
.frolean_right li {
  margin: 0
}

.sidebar-links-card li+li,
.frolean_right li+li {
  border-top: 1px solid #f0f0ee
}

.sidebar-links-card a,
.frolean_right li a {
  display: block;
  padding: 11px 0;
  color: #171717;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.42
}

.sidebar-links-card a:hover,
.frolean_right li a:hover {
  color: var(--accent)
}

.sidebar-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line)
}

.sidebar-note__icon {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 10px;
  background: #171717;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800
}

.sidebar-note__text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5
}

/* Home page */
.home-intro {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 300px;
  margin: 0 0 18px;
  padding: 38px 36px;
  background: linear-gradient(90deg, rgba(12, 12, 14, .95) 0%, rgba(16, 16, 18, .93) 46%, rgba(20, 10, 14, .72) 66%, rgba(20, 6, 12, .28) 100%), url("images/hero-versa-bg.png") right center/cover no-repeat;
  border-radius: 14px;
  color: #fff
}

.home-intro>* {
  position: relative;
  z-index: 1
}

.home-intro:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .06));
  pointer-events: none
}

.home-intro__content {
  max-width: 56%
}

.home-intro__eyebrow,
.section-kicker {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent)
}

.home-intro__eyebrow {
  color: #ff7998
}

.home-intro h2 {
  max-width: 580px;
  margin: 8px 0 12px;
  color: #fff;
  font-size: 44px;
  line-height: 1.06
}

.home-intro p {
  max-width: 560px;
  color: #d9dce1;
  font-size: 15px;
  line-height: 1.65
}

.home-intro__actions {
  display: flex;
  gap: 10px;
  margin-top: 22px
}

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none
}

.button-primary {
  background: #d60039;
  color: #fff
}

.button-secondary {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .04);
  color: #fff
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 22px
}

.feature-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f7f5
}

.feature-card h2 {
  margin: 0 0 8px;
  font-size: 18px
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6
}

.editorial-section {
  margin: 30px 0
}

.manual-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line)
}

.manual-card__cover {
  padding: 12px;
  background: #f6f6f4;
  border-radius: 10px
}

.manual-card__cover img {
  max-height: 210px
}

.popular-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px
}

.popular-links a {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none
}

.manual-page-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #e3e4e5
}

.manual-page-navigation__link {
  display: block;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e3e4e5;
  border-radius: 12px;
  background: #f8f8f6;
  color: #171717;
  text-decoration: none
}

.manual-page-navigation__link--next {
  text-align: right
}

.manual-page-navigation__label {
  display: block;
  margin: 0 0 6px;
  color: #777;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase
}

.manual-page-navigation__title {
  display: block;
  color: #171717;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere
}

.site-footer {
  background: #111;
  color: #aaa
}

.frolean_bottom {
  width: min(calc(100% - 40px), var(--max));
  margin: auto;
  padding: 36px 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.frolean_bottom_item h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .09em
}

.frolean_bottom_item ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.frolean_bottom_item li {
  margin: 7px 0
}

.frolean_bottom_item a {
  color: #aaa;
  text-decoration: none
}

.frolean_lastblock {
  padding: 15px 20px;
  border-top: 1px solid #292929;
  text-align: center;
  font-size: 12px
}

.frolean_lastblock a {
  color: #ddd
}

.hamburger-lines,
.checkbox {
  display: none
}

@media(max-width:1000px) {

  .header-inner,
  .page-wrap {
    width: min(calc(100% - 24px), var(--max))
  }

  .frolean_contents {
    grid-template-columns: minmax(0, 1fr) 240px
  }

  .header-tools {
    gap: 7px
  }

  #search {
    width: 180px
  }

  .home-intro__content {
    max-width: 68%
  }
}

@media(max-width:820px) {
  .frolean_contents {
    grid-template-columns: 1fr
  }

  .frolean_right {
    position: static;
    display: none
  }

  .header-tools {
    display: none
  }

  .navbar ul {
    gap: 0
  }

  .navbar li a {
    padding: 9px
  }

  .feature-grid {
    grid-template-columns: 1fr
  }

  .manual-card {
    grid-template-columns: 120px 1fr
  }

  .manual-page-navigation {
    grid-template-columns: 1fr
  }
}

@media(max-width:640px) {
  body {
    font-size: 14px
  }

  .header-inner {
    height: 58px
  }

  .page-wrap {
    width: 100%;
    margin: 10px 0 26px;
    padding: 0 8px
  }

  .page-heading {
    padding: 15px 18px 17px
  }

  .frolean_textway {
    margin-bottom: 8px
  }

  .frolean_left h1 {
    font-size: 25px
  }

  .content-body {
    padding: 20px 18px 28px
  }

  .home-intro {
    min-height: 260px;
    padding: 28px 22px;
    background-position: 72% center
  }

  .home-intro__content {
    max-width: 100%
  }

  .home-intro h2 {
    font-size: 34px
  }

  .home-intro__actions {
    flex-direction: column
  }

  .feature-grid {
    grid-template-columns: 1fr
  }

  .manual-card {
    grid-template-columns: 1fr
  }

  .manual-page-navigation__link--next {
    text-align: left
  }

  .frolean_bottom {
    width: 100%;
    padding: 30px 20px;
    grid-template-columns: 1fr
  }

  .navbar .menu-items {
    display: none
  }
}


body {
  background: #17181b !important
}

.site-shell {
  min-height: 100vh;
  background: url("images/site-bg-versa.png") center top/cover no-repeat fixed, #17181b !important
}

.site-header,
.site-footer,
.page-wrap {
  position: relative;
  z-index: 1
}

.frolean_left,
.frolean_right {
  background: #f8f8f7;
  border-color: #e6e6e6
}

.sidebar-manual-card__title {
  font-size: 22px !important
}

.sidebar-manual-card__title a {
  color: #171717 !important;
  text-decoration: none
}

.sidebar-manual-card__meta {
  font-size: 13px !important;
  line-height: 1.58 !important;
  color: #61646a !important
}

.sidebar-manual-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px !important;
  margin-top: 14px
}

.sidebar-btn,
.sidebar-service-btn,
.sidebar-sitemap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: .15s ease
}

.sidebar-btn {
  border: 1px solid #171717;
  background: #171717;
  color: #fff
}

.sidebar-btn:hover {
  background: #2a2a2a;
  border-color: #2a2a2a
}

.sidebar-service-btn {
  border: 1px solid #e4c8d1;
  background: #fff8fa;
  color: #7c1732
}

.sidebar-service-btn:hover {
  background: #fff0f4;
  border-color: #d8afbb
}

.sidebar-service-btn__tag {
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #b56b7f
}

.sidebar-sitemap-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: #171717
}

.sidebar-sitemap-btn:hover {
  background: #f3f3f1;
  border-color: #c7c8ca
}

.sidebar-links-card h2 {
  margin-bottom: 8px
}

.sidebar-links-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  color: #171717;
  text-decoration: none
}

.sidebar-links-card a:after {
  content: " ›";
  color: #b7b7b7;
  font-size: 18px;
  line-height: 1
}

.sidebar-help-card {
  padding: 16px 18px;
  background: #111;
  color: #fff;
  border-bottom: 0
}

.sidebar-help-card h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 18px
}

.sidebar-help-card p {
  margin: 0;
  color: #d7d7d7;
  font-size: 13px;
  line-height: 1.56
}

.sidebar-help-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 12px
}

@media(max-width:1100px) {
  .site-shell {
    background: linear-gradient(90deg, rgba(17, 18, 22, .93), rgba(17, 18, 22, .76)), url("images/site-bg-versa.png") center top/cover no-repeat fixed, #17181b !important
  }
}

@media(max-width:820px) {
  .site-shell {
    background: #ececea !important
  }
}