/*
  service-studio.css - оформление блоков SeoServiceStudio на /servis/<ключ>.

  Две задачи.

  1. Свои блоки: демо-сцена, тарифная пара, разбор метода. Префикс .svc-st.
  2. Заплатка под разметку Art-классов. Класс .ms-art__how-col, в котором
     приходит колонка «Как пользоваться», не описан ни в одном css сайта -
     из-за этого разбор метода выглядел как сырой текст. Правила ниже
     намеренно ограничены собственными обёртками .svc-st--method и
     .svc-st--demo, чтобы не задеть остальные страницы.
*/

.svc-st {
  --st-ink: #241c4d;
  --st-body: #4f566b;
  --st-muted: #8b7ca0;
  --st-line: #ece6f8;
  --st-soft: #f6f3ff;
  --st-accent: #3a2a7d;
  margin: 30px 0 8px;
}

.svc-st__h2 {
  margin: 0 0 12px;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--st-ink);
}

.svc-st__lead {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--st-body);
  font-size: .97rem;
  line-height: 1.65;
}

.svc-st__note {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--st-soft);
  color: #5b5273;
  font-size: .88rem;
  line-height: 1.6;
}

/* ---------- демо-сцена ---------- */

.svc-st--demo .svc-st__stage {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.svc-st--demo .svc-st__stage > * {
  max-width: 100%;
}

.svc-st--demo img,
.svc-st--demo svg {
  max-width: 100%;
  height: auto;
}

/* ---------- тарифная пара ---------- */

.svc-st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.svc-st-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--st-line);
  box-shadow: 0 10px 30px rgba(49, 31, 101, .06);
}

.svc-st-card--paid {
  background: linear-gradient(160deg, #faf7ff, #fff 60%);
  border-color: #dbcffb;
}

.svc-st-card__h3 {
  margin: 0;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.svc-st-card__price {
  margin: 6px 0 2px;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--st-accent);
}

.svc-st-card__foot {
  margin: 0 0 12px;
  color: var(--st-muted);
  font-size: .82rem;
}

.svc-st-card__price + .svc-st-dl,
.svc-st-card__price + .svc-st-ul {
  margin-top: 12px;
}

/* пара «подзаголовок - пояснение» для открытой части */
.svc-st-dl {
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}

.svc-st-dl dt {
  margin: 0;
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--st-ink);
}

.svc-st-dl dd {
  margin: 3px 0 0;
  color: var(--st-body);
  font-size: .92rem;
  line-height: 1.6;
}

.svc-st-ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.svc-st-ul li {
  position: relative;
  padding-left: 22px;
  color: var(--st-body);
  font-size: .93rem;
  line-height: 1.6;
}

.svc-st-ul li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.svc-st-ul--free li::before {
  content: '·';
  color: #7c6bd6;
  font-size: 1.3rem;
  line-height: 1.1;
}

.svc-st-ul--paid li::before {
  content: '+';
  color: #6847f5;
}

.svc-st-card__sample {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--st-soft);
  border: 1px solid #e7e0fa;
  color: #4a4165;
  font-size: .89rem;
  line-height: 1.6;
}

.svc-st-card__sample span {
  display: block;
  margin-bottom: 4px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.svc-st-card__vol {
  margin: 0 0 14px;
  color: var(--st-muted);
  font-size: .84rem;
}

.svc-st-card__acts {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.svc-st-card > .primary-button {
  margin-top: auto;
  align-self: flex-start;
}

.svc-st-card__link {
  color: #6b5acb;
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 90, 203, .35);
}

.svc-st-card__link:hover {
  border-bottom-color: #6b5acb;
}

/* ---------- разбор метода ---------- */

.svc-st--method .ms-art--how,
.svc-st--method [class*="-art--how"] {
  display: block;
}

/* .ms-art__how-col не описан ни в одном css сайта - оформляем здесь */
.svc-st--method .ms-art__how-col,
.svc-st--method [class*="-art__how-col"] {
  display: block;
  max-width: 74ch;
}

.svc-st--method .ms-art__how-col > h2,
.svc-st--method [class*="-art__how-col"] > h2 {
  margin: 22px 0 8px;
  font-size: 1.09rem;
  line-height: 1.35;
  color: var(--st-ink);
}

.svc-st--method .ms-art__how-col > h2:first-child,
.svc-st--method [class*="-art__how-col"] > h2:first-child {
  margin-top: 0;
}

.svc-st--method .ms-art__how-col p,
.svc-st--method [class*="-art__how-col"] p {
  margin: 0 0 10px;
  color: var(--st-body);
  font-size: .96rem;
  line-height: 1.68;
}

.svc-st--method [class*="-art__block-title"] {
  margin: 20px 0 10px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--st-muted);
}

.svc-st--method [class*="-art__steps"] ol,
.svc-st--method [class*="-art__how-col"] ol {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  counter-reset: none;
}

.svc-st--method [class*="-art__steps"] ol > li,
.svc-st--method [class*="-art__how-col"] ol > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--st-line);
}

.svc-st--method [class*="-art__steps"] ol > li > span:first-child,
.svc-st--method [class*="-art__how-col"] ol > li > span:first-child {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efe9ff;
  color: var(--st-accent);
  font-size: .82rem;
  font-weight: 800;
}

.svc-st--method [class*="-art__steps"] ol b,
.svc-st--method [class*="-art__how-col"] ol b {
  display: block;
  margin-bottom: 2px;
  color: var(--st-ink);
  font-size: .95rem;
}

.svc-st--method [class*="-art__steps"] ol p,
.svc-st--method [class*="-art__how-col"] ol p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
}

.svc-st--method [class*="-art__how-col"] > ul {
  margin: 0 0 14px;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}

.svc-st--method [class*="-art__how-col"] > ul li {
  color: var(--st-body);
  font-size: .93rem;
  line-height: 1.6;
}

/* ---------- мелкие состояния из Art-разметки без своего css ---------- */

.svc-st .is-minus {
  color: #b4436b;
}

.svc-st .is-peregrine {
  color: var(--st-muted);
}

/* ---------- узкие экраны ---------- */

@media (max-width: 720px) {
  .svc-st-card {
    padding: 18px 18px;
  }

  .svc-st__h2 {
    font-size: 1.12rem;
  }

  .svc-st-card__acts {
    gap: 10px;
  }

  .svc-st-card__acts > .secondary-button {
    width: 100%;
    text-align: center;
  }
}

/* ── year_forecast_app.php: иерархия разделов вместо панелей без заголовков ── */
.yf-app-sec {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ece6f8;
  border-radius: 16px;
}
.yf-app-sec--demo,
.yf-app-sec--tiers {
  padding: 0;
  background: none;
  border: 0;
}
.yf-app-h2 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  line-height: 1.3;
  font-weight: 800;
  color: #241c4d;
  letter-spacing: -0.01em;
}
.yf-app-h3 {
  margin: 0 0 2px;
  font-size: 0.92rem;
  line-height: 1.3;
  font-weight: 700;
  color: #241c4d;
}
.yf-app-lead {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4f566b;
}
.yf-app-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8b7ca0;
}
.yf-app-fine {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: #8b7ca0;
}
.yf-app-fine a { color: #3a2a7d; }
.yf-app-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yf-app-year {
  padding: 8px 14px;
  border: 1px solid #e8e4f4;
  border-radius: 10px;
  background: #fff;
  color: #2a2420;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.yf-app-year.is-active {
  background: #c9a227;
  border-color: #c9a227;
  color: #fff;
}
.yf-app-cascade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.yf-app-card {
  display: block;
  padding: 12px 14px;
  border: 1px solid #e8e4f4;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.yf-app-card:hover { border-color: #dbcffb; }
.yf-app-card__sub {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #8b7ca0;
}
@media (max-width: 720px) {
  .yf-app-sec { padding: 14px; }
  .yf-app-h2 { font-size: 1.04rem; }
}