/* =========================================================================
   демо.некрутой.рф · стили страницы правил
   Базовые токены, шапка, кнопки, подвал — assets/site.css (копия из site-v2).
   Здесь только то, чего нет на главной: карточки резюме, шаги, образец плашки,
   нумерованный документ. Цвета — только токены из site.css.
   ========================================================================= */

/* ---------- Первый экран ---------- */
.intro{padding-top:clamp(40px,6vw,80px)}
.intro-title{max-width:18em}
.intro .lead{margin-top:20px}
.intro-meta{margin-top:20px;color:var(--ink-3);font-size:15px}

/* ---------- Коротко: шесть карточек ---------- */
.short-lead{margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin-top:36px}
.card{min-width:0;padding:24px 24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--field)}
.card-i{display:block;width:28px;height:28px;color:var(--accent)}
.card-t{margin-top:16px;font:600 18px/1.3 var(--font-h);letter-spacing:-.01em}
.card p{margin-top:10px;color:var(--ink-2);font-size:16px}

/* ---------- Три шага ---------- */
.steps{display:grid;gap:28px;counter-reset:step}
.steps > li{position:relative;min-width:0;padding-left:56px;counter-increment:step}
.steps > li::before{content:counter(step);position:absolute;left:0;top:-2px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 16px/1 var(--font-h)}
.steps p{margin-top:8px;color:var(--ink-2)}
@media (max-width:480px){
  .steps > li{padding-left:0;padding-top:52px}
}

/* ---------- Образец плашки: «окно» с тонкой строкой сверху и схемой страницы под ней ----------
   Цвета строки те же, что у настоящей плашки (demo-shell/plaque.css): тёмный графит и красный акцент
   из палитры, они не зависят от темы сайта. */
.bar-sample{margin-top:28px;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.bar-sample-bar{display:flex;align-items:center;justify-content:center;gap:0 18px;min-height:32px;padding:4px 12px;background:var(--band);color:var(--band-ink-2);border-bottom:1px solid var(--band-line);font:500 13px/1 var(--font-b);white-space:nowrap;overflow:hidden}
.bar-sample-tag{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:20px;padding:0 8px;border-radius:6px;background:#FF2A3D;color:#0B0F17;font:600 11px/1 var(--font-h);text-transform:uppercase;letter-spacing:.05em}
.bar-sample-bar a{color:var(--band-ink);text-decoration-color:var(--band-ink-2);text-underline-offset:3px}
.bar-sample-bar a:hover{text-decoration-color:var(--band-was)}
.bar-sample-page{display:flex;align-items:center;gap:14px;height:64px;padding:0 16px;background:var(--field)}
.bar-sample-page span{display:block;border-radius:6px;background:var(--line)}
.bsp-logo{width:96px;height:14px}
.bsp-nav{flex:1 1 auto;max-width:220px;height:10px;margin-left:12px}
.bsp-btn{width:84px;height:28px;margin-left:auto;border-radius:9px;background:var(--line-2) !important}
/* Иконка «ничего не продаётся»: перечёркнутая корзина, у черты подложка цветом карточки, чтобы она
   не сливалась с линиями корзины */
.card-i .halo{stroke:var(--field);stroke-width:5}

/* ---------- Документ ---------- */
.doc{max-width:860px}
.doc-meta{margin-top:12px;color:var(--ink-3);font-size:15px}
.doc-h{display:flex;gap:12px;margin-top:44px;font:600 clamp(19px,1.8vw,23px)/1.3 var(--font-h);letter-spacing:-.01em}
.doc-h .num{flex:none;color:var(--accent)}
.clauses{display:grid;gap:14px;margin-top:16px}
.clauses > li{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:0 8px;color:var(--ink-2)}
.clauses .num{color:var(--ink-3);font-variant-numeric:tabular-nums}
.terms{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.terms dt{font-weight:600;color:var(--ink)}
.terms dd{color:var(--ink-2)}
.terms dd::before{content:"— "}
@media (min-width:640px){
  .terms{grid-template-columns:minmax(10em,max-content) minmax(0,1fr);gap:12px 20px}
  .terms dd::before{content:none}
}
@media (max-width:480px){
  .clauses > li{grid-template-columns:minmax(0,1fr)}
  .clauses .num{display:block;margin-bottom:2px}
}

/* ---------- Удаление ---------- */
.remove-btn{margin-top:28px}
.remove-note{margin-top:20px;color:var(--ink-3);font-size:15px}