/* Страница сервиса + статья — общий layout с боковым оглавлением */

/* page is themed per-brand via --brand / --brand-soft on .page-svc */
.page-svc{ --brand:var(--c-deli); --brand-soft:var(--c-deli-soft); }

/* ---- Hero сервиса ---- */
.svc-hero{ background:linear-gradient(180deg,var(--brand-soft),#fff); border-bottom:1px solid var(--border); padding:8px 0 44px; }
.svc-hero-grid{ display:grid; grid-template-columns:1.5fr .85fr; gap:44px; align-items:start; margin-top:20px; }
.svc-hero-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.svc-hero-head .svc-badge{ width:60px; height:60px; font-size:30px; border-radius:16px; box-shadow:var(--shadow-sm); }
.svc-hero-head .lbl{ font-size:14px; color:var(--muted); font-weight:600; }
.svc-hero-head h1{ font-size:clamp(30px,3.6vw,42px); margin-top:2px; }
.svc-hero .meta-row{ margin:20px 0 22px; }
.svc-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

.svc-summary{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--r); padding:20px 22px; }
.svc-summary h2{ font-size:16px; font-family:var(--font-text); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:12px; }
.svc-summary ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.svc-summary li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; }
.svc-summary li svg{ width:19px; height:19px; color:var(--success); flex-shrink:0; margin-top:2px; }

.facts-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-top:26px; }
.facts-strip .f{ background:var(--surface); padding:18px 20px; }
.facts-strip .f span{ display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
.facts-strip .f b{ font-family:var(--font-display); font-size:20px; color:var(--ink); font-weight:700; }

/* ---- Layout с боковым TOC ---- */
.doc-layout{ display:grid; grid-template-columns:248px 1fr; gap:48px; align-items:start; padding:48px 0 8px; }
.toc{ position:sticky; top:96px; }
.toc-title{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; margin:0 0 12px; padding-left:14px; }
.toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; border-left:2px solid var(--border); }
.toc a{ display:block; padding:8px 14px; font-size:14.5px; color:var(--muted); border-left:2px solid transparent; margin-left:-2px; transition:.13s; }
.toc a:hover{ color:var(--ink); }
.toc a.active{ color:var(--brand); border-left-color:var(--brand); font-weight:600; background:var(--brand-soft); border-radius:0 6px 6px 0; }

.doc-body{ min-width:0; max-width:760px; }
.doc-body section{ padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid var(--border); }
.doc-body section:last-of-type{ border-bottom:0; }
.doc-body h2{ font-size:28px; margin-bottom:16px; scroll-margin-top:100px; }
.doc-body h3{ margin:28px 0 10px; }
.doc-body p{ color:var(--text); }
.doc-body ul.bullets{ margin:0 0 1em; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.doc-body ul.bullets li{ position:relative; padding-left:30px; }
.doc-body ul.bullets li::before{ content:""; position:absolute; left:6px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--brand); }

/* tariff table */
.t-table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; font-size:15px; margin:6px 0 4px; }
.t-table th, .t-table td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--border); }
.t-table thead th{ background:var(--surface-2); font-family:var(--font-text); font-weight:700; color:var(--ink); font-size:14px; }
.t-table tbody tr:last-child td{ border-bottom:0; }
.t-table td b{ color:var(--ink); }
.t-table .accent{ color:var(--brand); font-weight:700; }

/* steps */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.steps li{ counter-increment:s; display:flex; gap:16px; align-items:flex-start; }
.steps li::before{ content:counter(s); flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-family:var(--font-display); font-weight:800; display:grid; place-items:center; font-size:16px; }
.steps li b{ color:var(--ink); display:block; }
.steps li span{ color:var(--muted); font-size:15px; }

/* requirement cards */
.req-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.req{ background:var(--surface-2); border-radius:var(--r); padding:18px; }
.req b{ color:var(--ink); font-size:15.5px; display:block; margin-bottom:3px; }
.req span{ color:var(--muted); font-size:14px; }

/* car cards */
.car-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.car{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.car-img{ aspect-ratio:16/10; background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 12px,#eaedf2 12px,#eaedf2 24px); display:grid; place-items:center; color:var(--faint); font-size:13px; }
.car-info{ padding:14px 16px; }
.car-info b{ color:var(--ink); display:block; }
.car-info span{ color:var(--muted); font-size:13.5px; }
.car-info .price{ color:var(--brand); font-weight:700; font-size:14px; margin-top:6px; display:block; }

/* promo block */
.promo{ background:var(--brand); color:#fff; border-radius:var(--r-lg); padding:26px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.promo h3{ color:#fff; margin:0 0 4px; }
.promo p{ color:rgba(255,255,255,.85); margin:0; font-size:15px; }
.promo-code{ display:flex; align-items:center; gap:0; border-radius:var(--r-xs); overflow:hidden; box-shadow:var(--shadow-sm); }
.promo-code .code{ background:#fff; color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:.05em; padding:14px 20px; }
.promo-code .copy{ background:var(--ink); color:#fff; border:0; padding:14px 18px; font-family:var(--font-text); font-weight:600; cursor:pointer; font-size:14px; }

/* support contacts */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.contact{ border:1px solid var(--border); border-radius:var(--r); padding:18px; }
.contact span{ font-size:13px; color:var(--muted); display:block; margin-bottom:4px; }
.contact b{ color:var(--ink); font-size:16px; }

/* child article links */
.child-links{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.child-link{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--r); color:var(--ink); font-weight:600; transition:.15s; background:var(--surface); }
.child-link:hover{ border-color:var(--brand); color:var(--brand); }
.child-link svg{ width:18px; height:18px; flex-shrink:0; }

@media (max-width:900px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:26px; }
  .facts-strip{ grid-template-columns:1fr 1fr; }
  .doc-layout{ grid-template-columns:1fr; gap:0; }
  .toc{ position:static; display:none; }
  .car-grid, .contact-grid{ grid-template-columns:1fr 1fr; }
  .req-grid, .child-links{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .facts-strip{ grid-template-columns:1fr; }
  .car-grid, .contact-grid{ grid-template-columns:1fr; }
  .promo{ flex-direction:column; align-items:flex-start; }
}