/* ============================================================
   СПБ Переезд — текстовая страница (page-text.php)
   Политика конфиденциальности, гарантии и прочие текстовые
   ============================================================ */

/* шапка — синий градиент как в каталоге */
.sp-text-page__hero{background:linear-gradient(135deg,var(--ink),var(--brand-dk));
  color:#fff;padding:110px 0 100px}
.sp-text-page__hero h1{font-size:clamp(24px,4vw,40px);font-weight:800;margin:0 0 12px;line-height:1.2}
.sp-text-page__hero p{font-size:16px;color:rgba(255,255,255,.8);margin:0;max-width:640px;line-height:1.5}

/* текстовый блок */
.sp-text-page__body{padding:52px 0 64px;background:var(--card)}

/* типографика .sp-prose (используется и на странице прайса) */
.sp-prose{font-size:15.5px;color:var(--ink-2);line-height:1.75}
.sp-prose h2{font-family:var(--f-display);font-size:24px;font-weight:700;
  color:var(--ink);margin:40px 0 14px}
.sp-prose h2:first-child{margin-top:0}
.sp-prose h3{font-family:var(--f-display);font-size:19px;font-weight:700;
  color:var(--ink);margin:30px 0 10px}
.sp-prose h4{font-size:16px;font-weight:700;color:var(--ink);margin:24px 0 8px}
.sp-prose p{margin:0 0 16px}
.sp-prose p:last-child{margin-bottom:0}
.sp-prose ul,.sp-prose ol{padding-left:22px;margin:0 0 16px}
.sp-prose li{margin-bottom:6px}
.sp-prose a{color:var(--brand);font-weight:500}
.sp-prose a:hover{text-decoration:underline}
.sp-prose strong{color:var(--ink);font-weight:600}
.sp-prose blockquote{border-left:3px solid var(--brand);padding:12px 20px;
  margin:24px 0;background:var(--brand-soft);border-radius:0 var(--r) var(--r) 0;
  color:var(--ink-2);font-style:italic}
.sp-prose table{width:100%;border-collapse:collapse;margin:20px 0}
.sp-prose th{background:var(--bg-2);font-weight:600;text-align:left;
  padding:10px 14px;border:1px solid var(--line)}
.sp-prose td{padding:10px 14px;border:1px solid var(--line)}
.sp-prose tr:nth-child(even) td{background:var(--bg-2)}
.sp-prose hr{border:none;border-top:1px solid var(--line);margin:32px 0}

@media(max-width:640px){
  .sp-text-page__hero{padding:54px 0 48px}
  .sp-text-page__body{padding:32px 0 44px}
  .sp-prose h2{font-size:20px}
  .sp-prose h3{font-size:17px}
}

/* ============================================================
   Врезки в статьях: важно / лайфхак / ошибка / цитата
   Разметка: <div class="sp-note sp-note--tip">…</div>
   ============================================================ */
.sp-note{position:relative;display:flex;gap:14px;align-items:flex-start;
  margin:26px 0;padding:18px 22px;border-radius:var(--r);
  border:1px solid var(--line);border-left:4px solid var(--brand);
  background:var(--card);font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.sp-note p{margin:0 0 10px}
.sp-note p:last-child{margin-bottom:0}
.sp-note ul,.sp-note ol{margin:8px 0 0;padding-left:20px}
.sp-note li{margin-bottom:6px}
.sp-note__ic{flex:none;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--brand-soft)}
.sp-note__ic svg{width:19px;height:19px;stroke:var(--brand);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sp-note__body{flex:1;min-width:0}
.sp-note__title{display:block;font-family:var(--f-display);font-weight:700;
  font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--brand);margin-bottom:6px}

/* важно — оранжевый */
.sp-note--warn{border-left-color:#e8871a;background:#fffaf3}
.sp-note--warn .sp-note__ic{background:#fdefdc}
.sp-note--warn .sp-note__ic svg{stroke:#e8871a}
.sp-note--warn .sp-note__title{color:#c26f12}

/* лайфхак — зелёный */
.sp-note--tip{border-left-color:#0f9d4f;background:#f4fbf6}
.sp-note--tip .sp-note__ic{background:#dcf3e5}
.sp-note--tip .sp-note__ic svg{stroke:#0f9d4f}
.sp-note--tip .sp-note__title{color:#0d8544}

/* частая ошибка — красный */
.sp-note--err{border-left-color:#d64545;background:#fdf5f5}
.sp-note--err .sp-note__ic{background:#fadede}
.sp-note--err .sp-note__ic svg{stroke:#d64545}
.sp-note--err .sp-note__title{color:#b93a3a}

@media(max-width:600px){
  .sp-note{padding:15px 16px;gap:11px;margin:20px 0;font-size:14px}
  .sp-note__ic{width:32px;height:32px}
  .sp-note__ic svg{width:17px;height:17px}
}