.obosn { padding: 72px 0; background: #F6F4F1; }
.vobzory + .obosn, .obosn + .kviz, .obosn + .obosn { padding-top: 32px; }
.obosn__zag { text-align: center; }
.obosn__zag h2 { font: 700 40px/1.15 var(--zag); letter-spacing: -.005em; color: #141414; text-wrap: balance; }
.obosn__akcent { color: var(--oranzh); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .obosn__akcent {
    background: linear-gradient(var(--oranzh-1), var(--oranzh-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.obosn__zag p { margin-top: 10px; font: 400 21px/1.4 var(--osn); color: #5a5a5a; text-wrap: balance; }
.obosn__skryto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.obosn__ikonka { flex: none; width: 18px; height: 18px; margin-top: calc(.725em - 9px); }
.obosn__ikonka--net { color: #B5ADA4; }
.obosn__ikonka--da { color: var(--oranzh-2); }
.obosn__tabl {
  margin-top: 28px; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.obosn__shapka, .obosn__str { display: grid; grid-template-columns: 160px minmax(0, 45fr) minmax(0, 55fr); }
.obosn__str { border-top: 1px solid #EEE8E1; }
.obosn__sh { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; font: 700 18px/1.25 var(--zag); }
.obosn--v4 .obosn__sh--net { padding-left: 52px; }
.obosn__sh--da { gap: 7px; padding: 16px 22px 12px 17px; }
.obosn__znak {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); color: #fff;
}
.obosn__znak svg { width: 17px; height: 17px; }
.obosn__sh .obosn__ikonka { margin-top: 0; }
.obosn__pusto, .obosn__sh--net { background: #F8F6F3; }
.obosn__sh--net { color: #8C857E; }
.obosn__sh--da { color: #fff; background: linear-gradient(#F7A440, #E9761C); }
.obosn__nazv { padding: 14px 10px 14px 28px; font: 700 15px/1.35 var(--zag); color: #141414; }
.obosn__net, .obosn__da { display: flex; gap: 12px; padding: 14px 22px; font: 400 14px/1.45 var(--osn); }
.obosn__net { color: #6B655F; }
.obosn__da { color: #1E1E1E; background: #FFF6EB; }
.obosn__da b { font-weight: 700; color: #141414; }
.obosn__metka, .obosn__polosa { display: none; }
.obosn__chernovik {
  width: fit-content; margin: 0 auto 18px; padding: 6px 14px; border: 1px solid #E9D46B; border-radius: 8px;
  background: #FFF3B0; font: 600 13px/1.35 var(--osn); color: #6B5A00; text-align: center;
}
@media (min-width: 1000px) {
  .obosn__da b { white-space: nowrap; }
  .obosn--ramka .obosn__tabl { position: relative; }
  .obosn--ramka .obosn__tabl::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: calc((100% - 160px) * .55);
    border: 1px solid var(--oranzh); border-radius: 0 24px 24px 0; pointer-events: none;
  }
}
.obosn__tochki { display: none; }
.obosn__otzyv {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: center; margin: 28px 0 0; padding: 0 28px;
}
.obosn__kto { display: flex; flex-direction: column; gap: 6px; }
.obosn__zvezdy { display: flex; gap: 3px; color: var(--oranzh); }
.obosn__zvezdy svg { width: 18px; height: 17px; }
.obosn__imja { margin-top: 2px; font: 600 14px/1.3 var(--osn); color: #5F5953; }
.obosn__gde { font: 400 13px/1.3 var(--osn); color: #8C857E; }
.obosn__tekst { margin: 0; font: italic 400 14px/1.5 var(--osn); color: #333; }
.obosn__tekst b { font-weight: 700; color: #141414; }
@media (max-width: 1199px) {
  .obosn__shapka, .obosn__str { grid-template-columns: 150px minmax(0, 45fr) minmax(0, 55fr); }
  .obosn--ramka .obosn__tabl::after { width: calc((100% - 150px) * .55); }
  .obosn__sh { gap: 10px; padding: 16px 18px 12px; font-size: 17px; }
  .obosn--v4 .obosn__sh--net { padding-left: 46px; }
  .obosn__sh--da { gap: 5px; padding: 14px 18px 10px 13px; }
  .obosn__nazv { padding: 12px 10px 12px 24px; }
  .obosn__net, .obosn__da { gap: 10px; padding: 12px 18px; }
  .obosn__otzyv { padding: 0 24px; }
}
@media (max-width: 999px) {
  .obosn--kopija, .obosn__chernovik { display: none; }
  .obosn__tabl { margin-top: 6px; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
  .obosn__shapka { display: none; }
  .obosn__lenta {
    position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); margin: 0 calc(var(--pad) * -1);
    padding: 12px var(--pad) 18px; scrollbar-width: none;
  }
  .obosn__lenta::-webkit-scrollbar { display: none; }
  .obosn__str {
    display: flex; flex-direction: column; gap: 10px; flex: 0 0 clamp(240px, calc(100vw - var(--pad) - 70px), 320px);
    scroll-snap-align: start; padding: 16px; border: 0; border-radius: 16px; background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  }
  .obosn__nazv { padding: 0; font-size: 17px; line-height: 1.3; }
  .obosn__net, .obosn__da { flex-direction: column; padding: 0; font-size: 15px; }
  .obosn__net > .obosn__ikonka, .obosn__da > .obosn__ikonka { display: none; }
  .obosn__net { gap: 4px; }
  .obosn__metka { display: flex; align-items: center; gap: 6px; font: 700 13px/1.15 var(--zag); color: #8C857E; }
  .obosn__metka .obosn__ikonka { width: 12px; height: 12px; margin-top: 0; }
  .obosn__da { position: relative; gap: 0; border-radius: 12px; overflow: hidden; }
  .obosn__da::after {
    content: ''; position: absolute; inset: 0; border: 1px solid var(--oranzh); border-radius: inherit; pointer-events: none;
  }
  .obosn__polosa {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; background: linear-gradient(#F7A440, #E9761C);
    font: 700 14px/1.15 var(--zag); color: #fff;
  }
  .obosn__polosa .obosn__znak { width: 22px; height: 22px; }
  .obosn__polosa .obosn__znak svg { width: 13px; height: 13px; }
  .obosn__opis { padding: 10px 12px 12px; }
  .obosn__tochki { display: flex; justify-content: center; align-items: center; gap: 8px; }
  .obosn__tochki button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #D9D1C7; cursor: pointer;
    transition: width .2s ease;
  }
  .obosn__tochki button.is-on { width: 28px; background: linear-gradient(var(--oranzh-1), var(--oranzh-2)); cursor: default; }
  .obosn__otzyv {
    display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; padding: 18px 16px 16px;
    border-radius: 16px; background: rgba(246, 147, 16, .07); text-align: center;
  }
  .obosn__kto { display: contents; }
  .obosn__zvezdy { order: 1; }
  .obosn__tekst { order: 2; }
  .obosn__imja { order: 3; margin-top: 2px; }
  .obosn__gde { order: 4; margin-top: -4px; }
}
@media (max-width: 374px) {
  .obosn__str { flex-basis: calc(100vw - var(--pad) - 46px); }
  .obosn__lenta { gap: 10px; }
}
@media (max-width: 899px) {
  .obosn { padding: 56px 0; }
  .vobzory + .obosn, .obosn + .kviz, .obosn + .obosn { padding-top: 24px; }
  .obosn__zag h2 { font-size: 30px; }
  .obosn__zag p { font-size: 18px; }
}
@media (max-width: 999px) and (hover: hover) and (pointer: fine) {
  .obosn__lenta { scrollbar-width: thin; scrollbar-color: #CFC7BE transparent; }
  .obosn__lenta::-webkit-scrollbar { display: block; height: 6px; }
  .obosn__lenta::-webkit-scrollbar-thumb { border-radius: 3px; background: #CFC7BE; }
}
@media (max-width: 599px) {
  .obosn { padding: 44px 0; }
  .vobzory + .obosn, .obosn + .kviz, .obosn + .obosn { padding-top: 16px; }
  .obosn__zag h2 { font-size: 26px; }
  .obosn__zag p { font-size: 16px; }
  .obosn__tabl { margin-top: 8px; }
  .obosn__lenta { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .obosn__tochki button { transition: none; }
}