/* Online Oil: продолжение лендинга. Изолированные стили, без JavaScript. */
/* 1. Основа и типографика */
.oo-features {
  --of-ink:#10282c;
  --of-muted:#526177;
  --of-accent:#008c7f;
  --of-line:#dce9e6;
  background:#fff;
  color:var(--of-ink);
  font-family:Arial,Helvetica,sans-serif
}


.oo-features *,.oo-features *::before,.oo-features *::after {
  box-sizing:border-box
}


.oo-features__inner {
  width:95vw;
  max-width:1500px;
  margin-inline:auto
}


.oo-features__section {
  padding:clamp(48px,6vw,96px) 0
}


.oo-features__intro {
  max-width:1000px
}


.oo-features .oo-features__label {
  margin:0 0 20px;
  color:var(--of-accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.6
}


.oo-features h2 {
  margin:0 0 24px;
  font-size:clamp(28px,3vw,44px);
  line-height:1.16;
  letter-spacing:-.035em;
  font-weight:800;
  color:var(--of-ink)
}


.oo-features h3 {
  margin:0 0 12px;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--of-ink)
}


.oo-features p {
  margin:0 0 16px;
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.65;
  color:var(--of-muted)
}


.oo-features p:last-child {
  margin-bottom:0
}


.oo-features u {
  text-decoration-color:#90d8cf;
  text-decoration-thickness:1px;
  text-underline-offset:4px
}


/* 2. Сравнение */
.oo-features__comparison {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin-top:40px
}


.oo-features__method {
  position:relative;
  padding:32px;
  border:1px solid var(--of-line);
  border-radius:20px;
  background:#fff;
  min-width:0
}


.oo-features__method p {
  font-size:18px
}


.oo-features__icon {
  display:block;
  width:48px;
  height:48px;
  margin-bottom:28px;
  fill:none;
  stroke:var(--of-accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}


.oo-features__method--online {
  background:#eaf8f4;
  border-color:#79cbb9;
  box-shadow:0 12px 32px #0b72510a
}


.oo-features__arrow {
  position:absolute;
  right:-26px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  display:grid;
  place-items:center;
  width:24px;
  height:32px;
  background:#fff;
  color:var(--of-accent);
  font-size:26px
}


/* 3. Кабинет и показатели */
.oo-features__section--cabinet {
  background:#f5f9f8;
  border-block:1px solid #edf2f0
}


.oo-features .oo-features__stats-heading {
  margin:32px 0 20px;
  font-size:18px;
  color:var(--of-ink);
  font-weight:700
}


.oo-features__stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin:0 0 36px
}


.oo-features__stats>div {
  padding:8px 16px 8px 20px;
  border-left:3px solid #00ae9c
}


.oo-features__stats dt {
  font-size:clamp(20px,1.8vw,26px);
  font-weight:700;
  line-height:1.3;
  margin:0 0 8px
}


.oo-features__stats dd {
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--of-muted)
}


.oo-features__screenshot {
  margin:0;
  border:1px solid var(--of-line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 20px 60px #153f3010
}


.oo-features__screenshot a {
  display:block;
  cursor:zoom-in
}


.oo-features__screenshot a:focus-visible {
  outline:3px solid var(--of-accent);
  outline-offset:-3px
}


.oo-features__screenshot img {
  display:block;
  width:100%;
  height:auto
}


.oo-features__screenshot figcaption {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:18px 24px;
  font-size:14px;
  line-height:1.5;
  color:var(--of-muted)
}


/* 4. Сотрудники */
.oo-features__employees {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,6vw,100px)
}


.oo-features__workflow {
  list-style:none;
  padding:32px;
  margin:0;
  background:#f5f9f8;
  border:1px solid var(--of-line);
  border-radius:20px
}


.oo-features__workflow li {
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--of-line)
}


.oo-features__workflow li:first-child {
  padding-top:0
}


.oo-features__workflow li:last-child {
  padding-bottom:0;
  border-bottom:0
}


.oo-features__workflow li>span {
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:12px;
  color:var(--of-accent);
  background:#e0f2ed;
  font-size:20px;
  font-weight:700
}


.oo-features__workflow h3 {
  font-size:21px;
  margin:0 0 8px
}


.oo-features__workflow p {
  font-size:16px
}


/* 5. Адаптация */
@media(max-width:1000px) {
  .oo-features__employees {
  grid-template-columns:1fr
}

.oo-features__method {
  padding:24px
}

.oo-features__stats {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.oo-features h3 {
  font-size:21px
}


}


@media(max-width:650px) {
  .oo-features__inner {
  padding-inline:12px
}

.oo-features__comparison {
  grid-template-columns:1fr;
  gap:28px
}

.oo-features__arrow {
  right:calc(50% - 12px);
  top:auto;
  bottom:-31px;
  transform:rotate(90deg)
}

.oo-features__icon {
  margin-bottom:20px
}

.oo-features__workflow {
  padding:24px
}

.oo-features__screenshot figcaption {
  flex-direction:column;
  padding:16px
}

.oo-features__stats {
  gap:20px 12px
}

.oo-features__stats>div {
  padding-left:12px
}

.oo-features__stats dt {
  font-size:19px
}

.oo-features__stats dd {
  font-size:15px
}


}