/* ═══ Страница «Безопасность» ═══
   Построена по той же сетке, что «Продукт»: чередование белых и серых
   полос, карточки со значком в мятном квадрате, крупные числа. Общие
   переменные, шапка, кнопки и подвал — из styles.css. */

.sc-main{padding-block-end:35px}
.sc-main h2{font-size:clamp(24px,2.8vw,32px);line-height:1.2;margin:0 0 14px}
.ctr{text-align:center}
.sc-main .eyebrow.ctr{text-align:center}

/* ── Первый экран ── */
.sc-hero{padding-block:clamp(20px,2.4vw,32px) clamp(30px,3.6vw,48px);
  background:linear-gradient(160deg,#f7fbf9,var(--card) 60%)}
.sc-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(26px,3.4vw,56px);align-items:center}
.sc-hero h1{font-size:clamp(28px,3.8vw,46px);line-height:1.12;letter-spacing:-.03em;
  font-weight:800;margin:0 0 16px}
.sc-lede{font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:52ch;
  margin:0 0 26px}
.sc-btns{display:flex;flex-wrap:wrap;gap:12px;margin-block-end:30px}

.sc-marks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sc-mark{display:flex;flex-direction:column;gap:9px;font-size:12.5px;
  line-height:1.4;color:var(--ink-soft)}
.sc-mark-ico{display:grid;place-items:center;width:38px;height:38px;
  border-radius:11px;background:var(--green-wash);color:var(--green)}
.sc-mark-ico svg{width:19px;height:19px}

.sc-shot img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}

/* ── Карточки «как устроено» ── */
.sc-how{padding-block:clamp(30px,3.6vw,48px);background:var(--card)}
.sc-cards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,16px);margin-block-start:clamp(24px,3vw,36px)}
.sc-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;
  box-shadow:0 1px 2px rgba(17,19,25,.03),0 12px 26px -24px rgba(17,19,25,.2)}
.sc-card h3{font-size:15px;font-weight:700;color:var(--ink);margin:14px 0 8px}
.sc-card p{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0}
.sc-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--green-wash);color:var(--green)}
.sc-ico svg{width:21px;height:21px}

/* ── Путь ключа ── */
.sc-path{padding-block:clamp(30px,3.6vw,48px);background:#f7f8fa}
.sc-path-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,48px);align-items:center}
.sc-path-lede{font-size:14.5px;line-height:1.65;color:var(--ink-soft);
  max-width:50ch;margin:0 0 22px}
.sc-checks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.sc-checks li{position:relative;padding-inline-start:30px;font-size:14px;
  line-height:1.5;color:var(--ink-soft)}
.sc-checks li::before{content:"";position:absolute;inset-block-start:1px;
  inset-inline-start:0;width:20px;height:20px;border-radius:50%;
  background:var(--green-wash)}
.sc-checks li::after{content:"";position:absolute;inset-block-start:7px;
  inset-inline-start:6px;width:8px;height:4.5px;
  border-inline-start:2px solid var(--green);border-block-end:2px solid var(--green);
  rotate:-45deg}

/* Шаги пронумерованы: это последовательность, а не набор свойств. */
.sc-steps{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px;counter-reset:step;
  box-shadow:0 2px 6px rgba(17,19,25,.04),0 18px 36px -28px rgba(17,19,25,.2)}
.sc-steps h3{font-size:15px;margin:0 0 18px;color:var(--ink)}
.sc-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.sc-steps li{position:relative;padding-inline-start:40px;font-size:13.5px;
  line-height:1.6;color:var(--ink-soft)}
.sc-steps li::before{counter-increment:step;content:counter(step);
  position:absolute;inset-inline-start:0;inset-block-start:-1px;
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--green-wash);color:var(--green-deep);
  font-size:12.5px;font-weight:700}
.sc-steps b{color:var(--ink)}

/* ── Чего делать не нужно ── */
/* Единственная красная полоса на сайте — и это правильно: раздел про то,
   как теряют деньги, не должен выглядеть так же, как раздел про то, как
   мы их бережём. */
.sc-dont{padding-block:clamp(30px,3.6vw,48px);background:var(--card)}
.sc-dont-lede{max-width:64ch;margin:0 auto clamp(24px,3vw,36px);
  text-align:center;font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.sc-dont-cards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,16px)}
.sc-dont-card{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:22px 20px;
  box-shadow:0 1px 2px rgba(17,19,25,.03),0 12px 26px -24px rgba(17,19,25,.2)}
.sc-dont-ico{display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;background:var(--red-wash);color:var(--red)}
.sc-dont-ico svg{width:21px;height:21px}
.sc-dont-card h3{font-size:15px;font-weight:700;color:var(--ink);margin:14px 0 8px}
.sc-dont-card p{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0}
.sc-dont-card p + p{margin-block-start:8px}
.sc-dont-card em{font-style:normal;color:var(--red);font-weight:600}

/* ── Числа ── */
.sc-nums{padding-block:clamp(30px,3.6vw,48px);background:#f7f8fa}
.sc-num-cards{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);margin-block-start:clamp(22px,2.6vw,32px)}
.sc-num{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 20px;text-align:center;
  box-shadow:0 1px 2px rgba(17,19,25,.03),0 12px 26px -24px rgba(17,19,25,.2)}
.sc-num b{display:block;font-size:clamp(24px,2.8vw,32px);font-weight:800;
  letter-spacing:-.03em;color:var(--green);font-variant-numeric:tabular-nums}
.sc-num span{display:block;margin-block-start:7px;font-size:13px;color:var(--ink-soft)}
.sc-nums-note{max-width:66ch;margin:20px auto 0;text-align:center;font-size:13px;
  line-height:1.6;color:var(--ink-faint)}

/* ── Финальная полоса ── */
.sc-final{padding-block:clamp(24px,3vw,38px) 0}
.sc-final-band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,2.2vw,28px);
  background:linear-gradient(115deg,#f4fbf7,#e8f6ef);
  border:1px solid rgba(169,220,198,.55);border-radius:18px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px)}
.sc-final-art{flex:none;width:46px;color:var(--green)}
.sc-final-art svg{width:100%;height:auto;display:block}
.sc-final-band h2{font-size:18px;margin:0 0 6px}
.sc-final-band p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.sc-disclaimer{font-size:12px;line-height:1.6;color:var(--ink-faint);
  margin-block-start:20px}

@media (max-width:1100px){
  .sc-cards{grid-template-columns:repeat(2,1fr)}
  .sc-dont-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sc-hero-grid{grid-template-columns:1fr}
  .sc-shot{order:-1}
  .sc-path-grid{grid-template-columns:1fr}
  .sc-num-cards{grid-template-columns:repeat(2,1fr)}
  .sc-final-band{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sc-cards{grid-template-columns:1fr}
  .sc-dont-cards{grid-template-columns:1fr}
  .sc-marks{grid-template-columns:repeat(2,1fr)}
  .sc-btns .btn{flex:1 1 100%;justify-content:center}
}