/* Лендинг для владельцев серверов — поверх токенов /static/style.css.

   Отступы приведены к шкале 4px (--s1..--s9); значения 5/6/7/10/11/13/14/18/28px
   заменены ближайшим токеном (5→--s1, 6,7→--s2, 10,11,13→--s3, 14,18→--s4,
   28→--s7). Размеры шрифтов и геометрия элементов (28px кружок, 12.5px код)
   оставлены как есть — для них токенов нет.

   Состояния: наведение, фокус (кольцо var(--ring) solid var(--accent)),
   нажатие (scale(var(--press))), недоступность. Появление не анимируется. */
.sell-body{display:block;min-height:100dvh;background:var(--bg);color:var(--text);
  font-family:var(--font);overflow-y:auto;line-height:1.6}
.sell-body h1,.sell-body h2,.sell-body h3{line-height:1.25}

.sell-nav{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) var(--s6);background:var(--surface);
  border-bottom:1px solid var(--border)}
.sell-brand{display:inline-flex;align-items:center;gap:var(--s3);min-width:0;color:var(--muted);font-size:var(--t-sm);font-weight:600;text-decoration:none}
.sell-brand img{display:block;width:176px;height:auto}
.sell-logo{font-size:20px}
.sell-nav-links{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.sell-nav-links a{color:var(--muted);text-decoration:none;padding:var(--s2) var(--s3);
  border-radius:var(--r-md);font-size:var(--t-sm);
  transition:background-color var(--dur-tap) var(--ease-out),
             color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.sell-nav-links a:hover{background:var(--surface-2);color:var(--text)}
.sell-nav-links a:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset);border-radius:var(--r-md)}
.sell-nav-links a:active{transform:scale(var(--press))}
.sell-nav-links a[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.sell-cta-sm{padding:var(--s2) var(--s4) !important;color:var(--accent-fg) !important;font-weight:600}

.sell-hero{padding:var(--s9) var(--s6) var(--s8);border-bottom:1px solid var(--border)}
.sell-hero-in{max-width:820px;margin:0 auto;text-align:center}
.sell-badge{display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:var(--r-full);padding:var(--s2) var(--s4);font-size:var(--t-sm);font-weight:550;
  margin-bottom:var(--s4)}
.sell-hero h1{font-size:clamp(28px,5vw,46px);font-weight:680;margin:0 0 var(--s4);
  letter-spacing:-.02em}
.sell-lead{font-size:var(--t-lg);color:var(--muted);margin:0 auto var(--s6);max-width:660px}
.sell-actions{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.sell-cta{text-decoration:none;padding:var(--s3) var(--s7) !important;border-radius:var(--r-md);
  font-size:var(--t-md);font-weight:600;display:inline-block;
  transition:background-color var(--dur-tap) var(--ease-out),
             border-color var(--dur-tap) var(--ease-out),
             color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
/* Кольцо задаём явно: общее правило ядра сбрасывает радиус на --r-sm,
   а у кнопки он --r-md — кольцо должно повторять её форму. */
a.sell-cta:focus-visible,a.sell-cta-sm:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset);border-radius:var(--r-md)}
/* Ссылки ядро не сжимает при нажатии (правило :active перечисляет кнопки),
   поэтому у CTA-ссылок сжатие прописано здесь. */
a.sell-cta:active,a.sell-cta-sm:active{transform:scale(var(--press))}
a.sell-cta[aria-disabled="true"],a.sell-cta-sm[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none}
a.sell-cta.primary{background:var(--accent-2);color:var(--accent-fg);border:1px solid var(--accent-2)}
a.sell-cta.primary:hover{background:var(--accent);border-color:var(--accent)}
a.sell-cta.primary:active{background:var(--accent-press);border-color:var(--accent-press)}
a.sell-cta.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
a.sell-cta.secondary:hover{background:var(--surface-3);border-color:var(--border-strong)}
a.sell-cta.secondary:active{background:var(--surface-2)}
.sell-note{margin-top:var(--s4);color:var(--muted);font-size:var(--t-sm)}

.sell-sec{max-width:1040px;margin:0 auto;padding:var(--s8) var(--s6)}
.sell-sec h2{font-size:clamp(22px,3vw,30px);margin:0 0 var(--s3);font-weight:660}
.sell-h3{font-size:var(--t-lg);margin:var(--s6) 0 var(--s3);font-weight:620}
.sell-sub{color:var(--muted);margin:0 0 var(--s5);max-width:760px}

.sell-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s4)}
.sell-step{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s4)}
.sell-step b{display:block;margin:var(--s2) 0 var(--s1)}
.sell-step p{margin:0;color:var(--muted);font-size:var(--t-sm)}
.sell-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);font-weight:650}

.sell-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s4)}
.sell-card{min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5)}
.sell-card.featured{border-color:var(--accent)}
.sell-card h3{margin:0 0 var(--s3);font-size:var(--t-lg)}
.sell-card ul{margin:0 0 var(--s3);padding-left:var(--s4)}
.sell-card li{margin-bottom:var(--s1)}
.sell-card-tag{display:inline-block;font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.6px;color:var(--accent);font-weight:600;margin-bottom:var(--s2)}

.sell-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg)}
.sell-table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:600px}
.sell-table th{text-align:left;padding:var(--s3) var(--s4);background:var(--surface-2);
  color:var(--muted);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--border);font-weight:600}
.sell-table td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);vertical-align:top}
.sell-table tr:last-child td{border-bottom:none}
.sell-table code{font-size:12px}
.sell-table a{color:var(--accent)}

.sell-callout{background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r-md);
  padding:var(--s4);margin-top:var(--s4);font-size:var(--t-sm)}
.sell-callout.warn{border-left-color:var(--warn)}

/* Фон блока кода — токен --code-bg: он переключается по теме, а прежний
   var(--n-950,#0b0d12) оставался тёмным и на светлой теме съедал текст. */
.sell-pre{background:var(--code-bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s4);overflow-x:auto;margin:0 0 var(--s3)}
.sell-pre code{font-family:var(--mono);font-size:12.5px;color:var(--text);
  background:none;border:0;padding:0;white-space:pre}
.sell-pre.big code{font-size:12px}

.sell-list{margin:0;padding-left:var(--s4)}
.sell-list li{margin-bottom:var(--s2)}

.sell-faq details{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.sell-faq summary{cursor:pointer;font-weight:560;border-radius:var(--r-sm);
  transition:color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.sell-faq summary:hover{color:var(--accent)}
.sell-faq summary:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset)}
.sell-faq summary:active{transform:scale(var(--press))}
.sell-faq summary[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.sell-faq p{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--t-sm)}

.sell-final{text-align:center;padding:var(--s9) var(--s6);
  border-top:1px solid var(--border);background:var(--surface)}
.sell-final h2{font-size:clamp(22px,3.4vw,32px);margin:0 0 var(--s3)}
.sell-final p{color:var(--muted);margin:0 0 var(--s5)}

.sell-foot{padding:var(--s6);text-align:center;color:var(--muted);
  border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--s2)}
.sell-foot .small{max-width:640px;margin:0 auto}

@media (prefers-reduced-motion: reduce){
  .sell-nav-links a,.sell-cta,.sell-cta-sm,.sell-faq summary{transition:none}
  .sell-nav-links a:active,a.sell-cta:active,a.sell-cta-sm:active,
  .sell-faq summary:active{transform:none}
}

@media (max-width:700px){
  .sell-hero{padding:var(--s7) var(--s4) var(--s6)}
  .sell-sec{padding:var(--s6) var(--s4)}
  .sell-nav{padding:var(--s3) var(--s4)}
  .sell-brand img{width:148px}
  .sell-nav-links{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--s1)}
  .sell-nav-links a{white-space:nowrap}
}