/* Приглашения на тест знаний SIFRA CHECK по сайту (ТЗ школы «SIFRA CHECK на сайте», oct 2026).
   Общий файл для index / pricing / subjects / about; карточка в окне «Спасибо» — в signup-form.css.
   Цвета — токены страниц (:root), шрифт текста наследуется; заголовки: RU Montserrat 600, HE Suez One.
   Решения владельца поверх ТЗ: «₪0» нигде не пишем (цена — словом «Бесплатно»), стрелок на кнопках нет. */

/* Пункты только для русской версии: в ивритском интерфейсе тест не показывает русскую подсказку,
   поэтому «русский и иврит в одном тесте» обещаем только на русском */
html:not(.ltr) .sfc-ru-only { display: none !important; }

/* ===== Кнопки ===== */
.sfc-btn {
  display: inline-block; border: none; border-radius: 28px; padding: 14px 28px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: normal;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
}
.sfc-btn:hover { opacity: 0.88; transform: translateY(-2px); }
.sfc-btn-y { background: var(--yellow); color: var(--purple-dark); }
.sfc-btn-p { background: var(--purple); color: var(--yellow); }
.sfc-btn-o { background: transparent; color: var(--purple); border: 2px solid var(--purple); }

/* ===== Метка, заголовок, чипы ===== */
.sfc-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
}
.sfc-lbl::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow); flex-shrink: 0;
}
.sfc-title { font-size: 32px; line-height: 1.2; margin-top: 10px; }
.ltr .sfc-title { font-family: 'Montserrat', 'Rubik', sans-serif; font-weight: 600; }
html:not(.ltr) .sfc-title { font-family: 'Suez One', 'Heebo', sans-serif; font-weight: 400; }
.sfc-title em { font-style: normal; }
.sfc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sfc-chips li { border-radius: 999px; padding: 6px 13px; font-size: 14px; font-weight: 600; }
.sfc-chips li::before { content: "✓ "; font-weight: 800; }
.sfc-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px; background: #fff8cc; color: #8a6500;
}

/* ===== Карточка-пример вопроса (иллюстрация, aria-hidden) ===== */
.sfc-q {
  background: #fff; color: var(--purple-dark); border-radius: 14px; padding: 16px 18px;
  transform: rotate(-3deg); box-shadow: 0 18px 40px rgba(30,0,70,0.35); text-align: start;
}
html:not(.ltr) .sfc-q { transform: rotate(3deg); }
.sfc-q-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #7040d0;
}
.sfc-q-dots { display: flex; gap: 3px; }
.sfc-q-dots i { width: 14px; height: 4px; border-radius: 4px; background: #f0e6fa; }
.sfc-q-dots i.on { background: #7040d0; }
.sfc-q-q { font-size: 17px; font-weight: 700; margin: 12px 0 6px; }
.sfc-q-sub { font-size: 13px; color: #9c6ad8; margin: -4px 0 8px; }
.sfc-q-o {
  display: flex; justify-content: space-between; margin-top: 6px; padding: 7px 12px;
  border: 1px solid var(--purple-pale); border-radius: 10px; font-size: 14px; font-weight: 700;
}
.sfc-q-o.ok { border-color: #22c55e; background: #ecfdf3; color: #15803d; }

/* ===== Ленточка «Бесплатно» в углу карточки ===== */
.sfc-rib {
  position: absolute; top: 20px; inset-inline-end: -42px; z-index: 1;
  transform: rotate(45deg); background: var(--yellow); color: var(--purple-dark);
  padding: 5px 48px; font-size: 10px; font-weight: 800; letter-spacing: 0.8px;
}
html:not(.ltr) .sfc-rib { transform: rotate(-45deg); }

/* ===== 1.2 Главная: фиолетовая плашка сразу после полосы с цифрами ===== */
.sfc-band { position: relative; background: #7040d0; color: #fff; padding: 0 80px 40px; }
/* Разделитель под цифрами — от крайней левой до крайней правой цифры полосы.
   Концы ставит alignBandLine() на index (замер текста); без JS — по полям плашки */
.sfc-band-line { position: absolute; top: 0; left: 80px; right: 80px; height: 1px; background: rgba(255,255,255,0.2); }
.sfc-band-in {
  max-width: 1120px; margin: 0 auto; padding-top: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px auto; gap: 32px; align-items: center;
}
.sfc-band .sfc-lbl { color: #e9d5ff; }
.sfc-band .sfc-title { color: #fff; }
.sfc-band .sfc-title em { color: var(--yellow); }
.sfc-band .sfc-chips li { background: rgba(255,255,255,0.14); }
.sfc-band .sfc-chips li::before { color: var(--yellow); }
.sfc-band .sfc-btn-y { box-shadow: 0 8px 20px rgba(30,0,70,0.25); }
/* Та же волна, что над полосой с цифрами, перевёрнутая: плашка уходит в белый */
.sfc-wdown { line-height: 0; background: #fff; }
.sfc-wdown svg { display: block; width: 100%; height: 70px; transform: rotate(180deg); }

/* ===== 1.3 Главная: «4 простых шага» — доска с заметками ===== */
.sfc-board {
  background: var(--section-alt); border: 1px solid var(--purple-pale); border-radius: var(--radius);
  padding: 34px 28px; display: grid; grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
  gap: 20px; align-items: start;
}
.sfc-note {
  position: relative; background: #fff; border-radius: 4px 4px 14px 4px;
  padding: 26px 16px 20px; text-align: center; box-shadow: 0 10px 22px rgba(112,64,208,0.12);
}
/* Булавка — цвета номеров шагов сайта, у шага 0 ярко-розовая */
.sfc-note::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px;
  border-radius: 50%; transform: translateX(-50%); background: var(--pin);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.sfc-note:nth-child(2) { transform: rotate(2deg); margin-top: 16px; }
.sfc-note:nth-child(3) { transform: rotate(-2deg); }
.sfc-note:nth-child(4) { transform: rotate(1.5deg); margin-top: 22px; }
.sfc-note:nth-child(5) { transform: rotate(-1.5deg); margin-top: 6px; }
.sfc-note-ic {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  border: 1.5px solid var(--purple-pale); color: #7040d0;
  display: grid; place-items: center;
}
.sfc-note-ic svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sfc-note-k {
  display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: var(--purple-mid);
}
.sfc-note-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.sfc-note p { font-size: 14px; line-height: 1.4; color: var(--text-mid); }
.sfc-note-0 { background: var(--yellow); transform: rotate(-3deg); }
.sfc-note-0 .sfc-note-ic { background: #fff; border: 0; color: var(--purple-dark); }
.sfc-note-0 .sfc-note-k { color: #be185d; }
.sfc-note-0 p { color: var(--purple-dark); }
.sfc-note-0 .sfc-btn { margin-top: 14px; padding: 10px 20px; font-size: 14px; }

/* ===== 1.4 Главная: карточка диагностики первой в ценах ===== */
.pricing.pricing-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard.pcard-test { border: 2px dashed var(--yellow); overflow: hidden; }
.pcard-test .pbadge { background: #fff8cc; color: #8a6500; }
.pcard-test .pprice { font-size: 34px; line-height: 44px; color: var(--purple-dark); }
.pcard-test .pcard-cta { margin-top: 18px; text-align: center; text-decoration: none; }

/* ===== 1.5 / 2.2 Кнопки внутри ответа FAQ ===== */
.sfc-fbtn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sfc-fbtn .sfc-btn { padding: 10px 20px; font-size: 14px; }
.sfc-fbtn .sfc-btn-o { padding: 8px 18px; }

/* ===== 2.1 Цены: блок «Не знаете, какой формат выбрать?» ===== */
.sfc-dash {
  position: relative; overflow: hidden; margin: 0 0 32px; padding: 28px 32px;
  background: #fff; border: 2px dashed var(--yellow); border-radius: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center;
}
.sfc-dash-free { font-size: 40px; font-weight: 700; line-height: 1; color: var(--purple-dark); }
.sfc-dash-title { font-size: 22px; font-weight: 700; color: var(--purple-dark); margin: 8px 0 6px; }
.ltr .sfc-dash-title { font-family: 'Montserrat', 'Rubik', sans-serif; font-weight: 600; }
.sfc-dash p { font-size: 15px; line-height: 1.55; color: var(--text-mid); }
.sfc-dash .sfc-chips { margin-top: 12px; }
.sfc-dash .sfc-chips li { background: var(--purple-pale-bg); color: var(--purple); font-size: 13px; padding: 5px 11px; }

/* ===== 3.1 Предметы: лавандовая полоса — продолжение волн шапки ===== */
.sfc-v1 { background: #E8DCFA; padding: 8px 80px 24px; margin-top: -1px; }
.sfc-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 48px; align-items: center;
}
.sfc-v1 .sfc-lbl { color: var(--purple-mid); }
.sfc-v1 .sfc-title { color: var(--purple-dark); margin-bottom: 12px; }
.sfc-v1 .sfc-title em { color: var(--purple); }
.sfc-text { max-width: 620px; margin-bottom: 16px; font-size: 16px; line-height: 1.6; color: var(--text-mid); }
.sfc-v1 .sfc-chips { margin: 0 0 22px; }
.sfc-v1 .sfc-chips li { background: #fff; border: 0.5px solid var(--purple-pale); color: var(--purple); font-size: 13px; padding: 5px 12px; }
.sfc-v1 .sfc-chips li::before { content: none; }
.sfc-small { margin-top: 10px; font-size: 13px; color: var(--text-light); }
.sfc-v1 .sfc-q { box-shadow: 0 14px 32px rgba(106,13,173,0.18); border: 0.5px solid var(--purple-pale); }
/* Волна под полосой: лаванда уходит в белый */
.sfc-wv { display: block; width: 100%; height: 90px; background: #fff; transform: scaleY(-1); }

/* ===== 4.2 О нас: плашка в конце страницы ===== */
.sfc-about { padding: 24px 80px 56px; background: var(--section-alt); }
.sfc-ab {
  max-width: 1100px; margin: 0 auto; padding: 28px 36px; overflow: hidden;
  background: #7040d0; color: #fff; border-radius: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 24px; align-items: center;
}
.sfc-ab .sfc-tag { background: rgba(255,255,255,0.18); color: #fff; }
.sfc-ab-title { font-size: 24px; line-height: 1.25; color: #fff; margin: 8px 0 6px; }
.ltr .sfc-ab-title { font-family: 'Montserrat', 'Rubik', sans-serif; font-weight: 600; }
html:not(.ltr) .sfc-ab-title { font-family: 'Suez One', 'Heebo', sans-serif; font-weight: 400; }
.sfc-ab p { font-size: 15px; color: #f1e4ff; }
.sfc-ab img { width: 170px; height: auto; align-self: end; margin-bottom: -28px; }

/* ===== Промежуточные ширины ===== */
@media (max-width: 1180px) {
  .pricing.pricing-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .sfc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfc-note-0 { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 420px; }
  .sfc-note:nth-child(n) { margin-top: 0; }
}
@media (max-width: 1024px) {
  .sfc-band-in { grid-template-columns: minmax(0, 1fr) 260px; }
  .sfc-band-in > .sfc-btn { grid-column: 1 / -1; justify-self: center; }
}

/* ===== Телефон ===== */
@media (max-width: 768px) {
  .sfc-title { font-size: 24px; }
  .sfc-q { max-width: 280px; margin: 0 auto; }

  .sfc-band { padding: 0 20px 28px; }
  .sfc-band-line { left: 20px; right: 20px; }
  .sfc-band-in { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; text-align: center; }
  .sfc-band .sfc-chips { justify-content: center; }
  .sfc-band-in > .sfc-btn { width: 100%; max-width: 360px; }
  .sfc-wdown svg { height: 44px; }

  .sfc-board { grid-template-columns: 1fr; padding: 24px 18px; gap: 18px; }
  .sfc-note-0 { max-width: none; }

  .pricing.pricing-4 { grid-template-columns: 1fr; }

  /* сверху место под ленточку: на узком экране крупное «Бесплатно» доходит до угла */
  .sfc-dash { grid-template-columns: 1fr; gap: 16px; padding: 40px 18px 24px; text-align: center; }
  .sfc-dash-free { font-size: 32px; }
  .sfc-dash .sfc-chips { justify-content: center; }

  .sfc-v1 { padding: 8px 20px 28px; }
  .sfc-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .sfc-text { max-width: none; font-size: 15px; }
  .sfc-v1 .sfc-chips { justify-content: center; }
  .sfc-wv { height: 50px; }

  .sfc-about { padding: 16px 20px 40px; }
  .sfc-ab { grid-template-columns: 1fr; padding: 24px 20px; text-align: center; }
  /* слоник «садится» на нижний край плашки — на телефоне кнопка идёт перед ним */
  .sfc-ab .sfc-btn { order: 1; justify-self: center; }
  .sfc-ab img { order: 2; justify-self: center; margin-bottom: -24px; }
}