/* Токены и примитивы приходят из style.css — здесь только страница-лендинг.
   Ниже — тонкие линии и поверхности, завязанные на общие переменные.

   Радиусы сведены к шкале ядра: --r-sm 8 / --r-md 10 / --r-lg 14 /
   --r-xl 18 / --r-full 999. Значения без точного совпадения округлены
   к ближайшему токену (при равном расстоянии — вниз):
     6px   → --r-sm   (.buy-status code)
     12px  → --r-md   (.cta-btn, .juggling-limitations, .fx-box, .faq-item details)
     16px  → --r-lg   (.compare-col, .juggling-col, .terms-box)
     20px  → --r-xl   (.pricing-card)
     100px → --r-full (.hero-badge, .plan-pill, .tier-badge)
   Окружность .how-num оставлена как 50% — токена для круга нет.

   Длительности — var(--dur-tap); цвет и границы едут на var(--ease-out),
   transform — на var(--ease-tap). Сжатие при нажатии одно на весь продукт:
   scale(var(--press)). Появление блоков не анимируется. */
:root{ --hairline:var(--border); }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);line-height:1.6;
  height:auto;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
.container{width:100%;min-width:0;max-width:1080px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.accent{color:var(--accent)}

/* ── Site header (всегда видимые Войти/Регистрация) ──────── */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);
  border-bottom:1px solid var(--border)}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s6);gap:var(--s4)}
.site-header-logo{font-weight:700;font-size:17px;color:var(--text)}
.site-header-nav{display:flex;align-items:center;gap:10px}
.site-header-link{padding:7px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;
  color:var(--text);border:1px solid var(--border);
  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)}
.site-header-link:hover{border-color:var(--accent);color:var(--accent)}
.site-header-link:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset);border-radius:var(--r-sm)}
.site-header-link:active{transform:scale(var(--press))}
.site-header-link[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.site-header-link-accent{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-fg)}
.site-header-link-accent:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.site-header-link-accent:active{background:var(--accent-press);border-color:var(--accent-press)}
.site-header-theme{width:34px;height:34px;padding:0;border-radius:var(--r-md);
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-height:0;
  transition:color var(--dur-tap) var(--ease-out),
             border-color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.site-header-theme:hover{color:var(--text);border-color:var(--border-strong)}
.site-header-theme:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset)}
.site-header-theme:active{transform:scale(var(--press))}
.site-header-theme:disabled,.site-header-theme[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none}

/* ── Promo bar ─────────────────────────────────────────── */
.promo-bar{padding:12px 0;text-align:center;background:var(--accent-soft);
  border-bottom:1px solid var(--accent-line);font-size:15px;color:var(--text)}
.promo-bar b{color:var(--accent)}

/* ── Free access section ───────────────────────────────── */
.free-access-section{padding:64px 0}
.free-access-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.free-access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-bottom:32px}
/* Карточка не кликабельна (обычный div в templates/pricing.html) — подъёма
   при наведении нет, движение остаётся только у настоящих контролов. */
.free-access-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s6) var(--s5);transition:border-color var(--dur-tap) var(--ease-out)}
.free-access-card:hover{border-color:var(--accent)}
.free-access-icon{font-size:32px;margin-bottom:10px}
.free-access-card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.free-access-status{font-size:14px;color:var(--text);margin-bottom:8px;font-weight:600}
.free-access-note{font-size:13px;color:var(--muted)}
.free-access-cta{text-align:center;padding:24px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);max-width:680px;margin:0 auto}
.free-access-cta p{font-size:17px;margin-bottom:20px;color:var(--text)}

/* ── Savings banner ────────────────────────────────────── */
.savings-banner{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;
  max-width:860px;margin:32px auto 0}
.savings-item{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);text-align:center}
.savings-label{font-size:13px;color:var(--muted);margin-bottom:8px}
.savings-value{font-size:32px;font-weight:800;color:var(--accent);margin-bottom:4px}
.savings-note{font-size:12px;color:var(--muted)}

/* ── Compare total highlight ───────────────────────────── */
.compare-item.compare-total{font-weight:800;font-size:16px;margin-top:8px;padding-top:12px;
  border-top:2px solid var(--border-strong)}

/* ── Tier popular badge ────────────────────────────────── */
.tier-popular{position:relative;overflow:visible}
.tier-popular{border-color:var(--accent)!important}
.tier-popular::after{content:"Выбирают чаще всего";position:absolute;top:-11px;left:50%;
  transform:translateX(-50%);background:var(--accent-2);color:var(--accent-fg);
  font-size:var(--t-xs);font-weight:650;
  padding:3px var(--s3);border-radius:var(--r-full);white-space:nowrap}

/* ── Hero ─────────────────────────────────────────────── */
.hero{text-align:center;padding:80px 24px 60px}
.hero-badge{display:inline-block;padding:6px var(--s4);background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-full);font-size:var(--t-sm);
  color:var(--muted);margin-bottom:var(--s6)}
.hero h1{font-size:clamp(32px,6vw,56px);font-weight:800;line-height:1.15;margin-bottom:20px}
.hero-sub{font-size:clamp(15px,2.5vw,19px);color:var(--muted);max-width:680px;margin:0 auto 36px}
.hero-price{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
  margin-bottom:16px}
.price-block{text-align:left;padding-right:28px;border-right:1px solid var(--border)}
.price-value{font-size:36px;font-weight:800;color:var(--accent)}
.price-period{font-size:14px;color:var(--muted)}
.hero-note{font-size:13px;color:var(--muted)}

/* ── CTA Button ─────────────────────────────────────────
   Эталон четырёх состояний для всей страницы: наведение, фокус, нажатие,
   недоступность. Кнопка используется и как <button>, и как <a>, поэтому
   недоступность ловим и через :disabled, и через [aria-disabled]. */
.cta-btn{display:inline-block;padding:var(--s4) 36px;background:var(--accent-2);
  color:var(--accent-fg);border:none;border-radius:var(--r-md);font-size:17px;font-weight:700;
  cursor:pointer;text-decoration:none;line-height:1.3;
  transition:background-color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.cta-btn:hover{background:var(--accent)}
.cta-btn:focus-visible{outline:var(--ring) solid var(--accent);outline-offset:var(--ring-offset)}
.cta-btn:active{background:var(--accent-press);transform:scale(var(--press))}
.cta-btn:disabled,.cta-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.cta-btn.big{width:100%;font-size:18px;padding:18px;margin-top:var(--s3)}

/* ── Benefits Banner ──────────────────────────────────── */
.benefits-banner{padding:32px 0;background:var(--panel);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.benefits-banner .container{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.benefit-pill{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);min-width:220px}
.benefit-icon{font-size:28px;flex-shrink:0}
.benefit-pill b{font-size:15px}
.benefit-pill .muted{font-size:12px}

/* ── Why / Comparison ─────────────────────────────────── */
.why-section{padding:64px 0}
.why-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1160px;margin:0 auto}
.compare-col{border-radius:var(--r-xl);padding:32px}
.compare-bad{background:var(--danger-soft);border:1px solid var(--danger-line)}
.compare-good{background:var(--ok-soft);border:1px solid var(--ok-line, var(--ok))}
.compare-col h3{font-size:24px;font-weight:700;margin:2px 0 0}
.compare-col-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.compare-col-head > div > span{display:block;color:var(--muted);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.compare-col-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 auto;border:1px solid currentColor;border-radius:var(--r-md);font-size:26px;font-weight:700}
.compare-bad .compare-col-mark{color:var(--danger)}
.compare-good .compare-col-mark{color:var(--ok)}
.compare-item{display:flex;align-items:flex-start;gap:12px;padding:13px 0;font-size:16px;
  line-height:1.5;border-bottom:1px solid var(--border)}
.compare-item > span{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-full);font-size:15px;font-weight:800;margin-top:1px}
.compare-bad .compare-item > span{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.compare-good .compare-item > span{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.compare-item:last-child{border-bottom:none;font-weight:700;margin-top:8px}
.compare-bad .compare-item:last-child{color:var(--danger)}
.compare-good .compare-item:last-child{color:var(--ok)}

/* ── Compare page: product-led layout ─────────────────── */
.promo-page-compare{overflow-x:clip}
.promo-page-compare .promo-subhero{max-width:1120px;padding:64px 16px 48px}
.promo-page-compare .promo-subhero > .container{max-width:none;padding:0}
.promo-page-compare .promo-subhero h1{font-size:clamp(32px,4.5vw,46px);max-width:780px;
  line-height:1.12;letter-spacing:-.03em;margin-bottom:16px}
.promo-page-compare .promo-subhero p{font-size:17px;line-height:1.55;max-width:680px}
.compare-kicker{display:block;color:var(--accent);font-size:12px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px}
.compare-hero-actions{display:flex;align-items:center;gap:22px;margin-top:28px}
.compare-text-link{font-size:16px;font-weight:700}
.compare-products-section{padding:32px 0 80px}
.promo-page-compare .compare-products-section > .container,
.promo-page-compare .why-section > .container{max-width:1120px;padding-left:16px;padding-right:16px}
.compare-section-head{max-width:800px;margin:0 auto 36px;text-align:center}
.compare-section-head h2,.compare-detail-head h2,.compare-table-head h2,.compare-extra-head h2{
  font-size:clamp(28px,3vw,36px);line-height:1.16;letter-spacing:-.025em;margin:0}
.compare-section-head p,.compare-detail-head p,.compare-table-head p,.compare-extra-head p{
  color:var(--muted);font-size:17px;line-height:1.6;margin:14px 0 0}
.compare-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:0 auto 72px;max-width:1088px}
.compare-product-card{display:flex;flex-direction:column;min-width:0;padding:30px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-xl)}
.compare-product-featured{background:var(--accent-soft);border-color:var(--accent-line)}
.compare-product-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.compare-product-mark{display:flex;align-items:center;justify-content:center;width:50px;height:50px;
  flex:0 0 auto;border-radius:var(--r-md);background:var(--accent-2);color:var(--accent-fg);
  font-size:22px;font-weight:800}
.compare-product-mark-neutral{background:var(--surface-3);color:var(--text)}
.compare-product-mark-warn{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn)}
.compare-product-badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;
  border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800}
.compare-product-badge-neutral{background:var(--surface-3);color:var(--text-soft)}
.compare-product-badge-warn{background:var(--warn-soft);color:var(--warn)}
.compare-product-card h3{font-size:22px;letter-spacing:-.02em;margin-bottom:12px}
.compare-product-lead{color:var(--muted);font-size:16px;line-height:1.62;min-height:78px;margin:0 0 22px}
.compare-product-price{font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.025em;
  padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.compare-product-price span{color:var(--muted);font-size:14px;font-weight:600;letter-spacing:0}
.compare-product-list{list-style:none;padding:20px 0 0;margin:0 0 24px;display:flex;
  flex-direction:column;gap:11px;color:var(--text-soft);font-size:15px}
.compare-product-list li{position:relative;padding-left:24px}
.compare-product-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.compare-product-cta{width:100%;margin-top:auto;text-align:center;padding-left:18px;padding-right:18px}
.compare-detail-head{max-width:760px;margin:0 auto 24px;text-align:center}
.promo-page-compare .fx-formulas{gap:20px;max-width:1088px;margin-bottom:72px}
.promo-page-compare .fx-box{padding:24px;border-radius:var(--r-lg)}
.promo-page-compare .fx-box h3{font-size:18px;margin-bottom:12px}
.promo-page-compare .fx-box code{font-size:13px;line-height:1.6}
.promo-page-compare .fx-box .muted{font-size:13px;line-height:1.55}
.compare-table-head{display:flex;align-items:end;justify-content:space-between;gap:32px;
  max-width:1088px;margin:0 auto 24px}
.compare-table-head > div{max-width:700px}
.compare-table-head p{max-width:340px;text-align:right;margin-bottom:4px}
.compare-scroll-hint{display:none;color:var(--muted);font-size:13px;margin:0 0 10px}
.promo-page-compare .plan-table-wrap{max-width:1088px;border-radius:var(--r-xl);contain:inline-size}
.promo-page-compare .plan-table{min-width:1020px;font-size:14px}
.promo-page-compare .plan-table th,.promo-page-compare .plan-table td{padding:15px 16px;line-height:1.5}
.promo-page-compare .plan-table th{font-size:13px;color:var(--text-soft);vertical-align:middle}
.promo-page-compare .plan-table-sticky{min-width:178px}
.promo-page-compare .vs-models-table td.model-desc{font-size:13px;line-height:1.55;max-width:300px}
.promo-page-compare .vs-table td{font-size:14px}
.compare-ant-head{background:var(--accent-soft)!important;color:var(--accent)!important}
.compare-ant-col{background:color-mix(in srgb,var(--accent) 7%,var(--bg))!important}
.compare-extra-head{max-width:760px;margin:72px auto 28px;text-align:center}
.compare-model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1088px;margin:0 auto}
.compare-model-card{display:flex;align-items:flex-start;gap:18px;min-height:210px;padding:26px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg)}
.compare-model-card:first-child{border-color:var(--accent-line);background:var(--accent-soft)}
.compare-model-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 auto;border-radius:var(--r-md);background:var(--surface-3);color:var(--accent);
  font-size:19px;font-weight:800}
.compare-model-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;height:100%}
.compare-model-card h3{font-size:18px;margin:1px 0 9px}
.compare-model-card p{color:var(--muted);font-size:14px;line-height:1.58;margin:0 0 18px}
.compare-access-badge{display:inline-flex;margin-top:auto;padding:5px 9px;border-radius:var(--r-sm);
  background:var(--ok-soft);color:var(--ok);font-size:12px;font-weight:750;line-height:1.4}
.compare-summary{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:36px;
  max-width:1088px;margin:28px auto 0;padding:32px;background:var(--panel);
  border:1px solid var(--accent-line);border-radius:var(--r-xl)}
.compare-summary-value{display:block;font-size:clamp(30px,4vw,42px);line-height:1.1;margin-bottom:7px}
.compare-summary-vs{display:block;color:var(--text-soft);font-size:15px}
.compare-summary p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}
.compare-footer-links{text-align:center;color:var(--muted);font-size:15px;margin:22px 0 0}
.promo-page-compare .why-section{padding:80px 0;background:var(--panel);border-top:1px solid var(--border)}
.promo-page-compare .savings-banner{max-width:1088px;margin-top:24px}
.promo-page-compare .savings-item{background:var(--bg);padding:24px 18px}
.promo-page-compare .savings-label{font-size:14px}
.promo-page-compare .savings-value{font-size:36px}
.promo-page-compare .savings-note{font-size:13px;line-height:1.5}

/* ── Models ───────────────────────────────────────────── */
.models-section{padding:64px 0}
.models-section h2,.features-section h2,.buy-section h2,.faq-section h2,
.why-section h2{
  text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.section-sub{text-align:center;color:var(--muted);margin-bottom:40px;font-size:16px}
.models-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.model-card{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px var(--s6);
  transition:border-color var(--dur-tap) var(--ease-out)}
.model-card:hover{border-color:var(--accent)}
/* На лендинге .model-card — обычный div, а не кнопка выбора модели, как в
   чате. Гасим подъём и сжатие, которые ядро даёт этому классу: движение
   обещало бы клик, которого здесь нет. Вес селектора поднят до (0,3,0),
   иначе правило :active из style.css перевесит. */
.promo-body .model-card:hover,
.promo-body .model-card:active{transform:none}
.model-icon{font-size:36px;margin-bottom:12px}
.model-card h3{font-size:20px;font-weight:700;margin-bottom:10px}
.model-card p{color:var(--muted);font-size:14px;margin-bottom:14px}
.model-card ul{list-style:none;padding:0}
.model-card li{font-size:13px;color:var(--text);padding:4px 0 4px 20px;position:relative}
.model-card li::before{content:"▸";position:absolute;left:0;color:var(--accent)}

/* ── Stop juggling / Cost comparison ────────────────────── */
.stop-juggling-section{padding:64px 0}
.stop-juggling-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.juggling-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto}
.juggling-col{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s6)}
.juggling-col.juggling-win{border-color:var(--ok-line, var(--ok));background:var(--ok-soft)}
.juggling-col h3{font-size:18px;font-weight:700;margin-bottom:16px}
.juggling-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  font-size:14px;border-bottom:1px solid var(--border)}
.juggling-row:last-of-type{border-bottom:none}
.juggling-price{font-weight:600;color:var(--muted)}
.juggling-win .juggling-price{color:var(--ok)}
.juggling-total{font-weight:800;font-size:16px;margin-top:8px;padding-top:12px;
  border-top:2px solid var(--border-strong)}
.juggling-total .juggling-price{font-size:16px}
.juggling-win .juggling-total .juggling-price{color:var(--ok)}
.juggling-extra{font-size:13px;color:var(--muted);margin-top:12px;padding-top:8px}
.juggling-savings{text-align:center;margin-top:var(--s6);padding:var(--s5);background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-lg);max-width:680px;margin:var(--s6) auto 0}
.juggling-savings-num{display:block;font-size:28px;font-weight:800;color:var(--ok);margin-bottom:6px}
.juggling-savings-text{font-size:14px;color:var(--muted)}
.juggling-limitations{max-width:860px;margin:var(--s5) auto 0;padding:var(--s4) var(--s5);
  background:var(--warn-soft);
  border:1px solid var(--warn-line, var(--warn));border-radius:var(--r-md);font-size:14px;
  color:var(--text-soft);line-height:1.55}
.juggling-limitations b{color:var(--warn)}

/* ── Use cases ─────────────────────────────────────────── */
.usecases-section{padding:64px 0}
.usecases-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.usecases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
/* Тоже некликабельный div — подъём убран, остаётся только линия границы. */
.usecase-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px var(--s6);transition:border-color var(--dur-tap) var(--ease-out)}
.usecase-card:hover{border-color:var(--accent)}
.usecase-icon{font-size:32px;margin-bottom:10px}
.usecase-card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.usecase-card p{font-size:14px;color:var(--muted);line-height:1.6}

/* ── Testimonials ──────────────────────────────────────── */
.testimonials-section{padding:64px 0;background:var(--panel)}
.testimonials-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;
  max-width:860px;margin:0 auto}
.testimonial-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 20px}
.testimonial-text{font-size:15px;line-height:1.7;color:var(--text);margin-bottom:12px;font-style:italic}
.testimonial-author{font-size:13px;color:var(--muted);font-weight:600}

/* ── How it works / Share model ─────────────────────────── */
.how-section{padding:64px 0;background:var(--panel)}
.how-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:860px;margin:0 auto 32px}
.how-step{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;position:relative}
.how-num{position:absolute;top:-14px;left:var(--s5);width:36px;height:36px;background:var(--accent-2);
  color:var(--accent-fg);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800}
.how-step h3{font-size:18px;font-weight:700;margin:8px 0 10px}
.how-step p{font-size:14px;color:var(--muted);line-height:1.6}
.how-comparison{display:flex;align-items:stretch;gap:16px;justify-content:center;flex-wrap:wrap;max-width:720px;margin:0 auto 20px}
.how-comp-item{flex:1;min-width:240px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);text-align:center}
.how-comp-item.how-comp-win{border-color:var(--ok-line, var(--ok));background:var(--ok-soft)}
.how-comp-label{font-size:14px;color:var(--muted);margin-bottom:8px}
.how-comp-price{font-size:24px;font-weight:800;margin-bottom:6px}
.how-comp-win .how-comp-price{color:var(--ok)}
.how-comp-note{font-size:12px;color:var(--muted)}
.how-comp-arrow{display:flex;align-items:center;font-size:32px;color:var(--accent);font-weight:700}
.how-footnote{text-align:center;font-size:14px;color:var(--muted);max-width:680px;margin:0 auto}

/* ── Features ─────────────────────────────────────────── */
.features-section{padding:64px 0;background:var(--panel)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.feature-item{text-align:center;padding:24px 16px}
.feature-icon{font-size:32px;margin-bottom:10px}
.feature-item h3{font-size:17px;font-weight:600;margin-bottom:8px}
.feature-item p{font-size:14px;color:var(--muted)}

/* ── Buy / Pricing ────────────────────────────────────── */
.buy-section{padding:64px 0}
.pricing-card{max-width:520px;margin:0 auto;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.pricing-header{padding:32px 28px 20px;text-align:center;background:var(--accent-soft);
  border-bottom:1px solid var(--accent-line)}
.pricing-header h3{font-size:22px;font-weight:700;margin-bottom:16px}
.pricing-price{display:flex;align-items:baseline;justify-content:center;gap:10px}
.price-big{font-size:42px;font-weight:800;color:var(--accent)}
.price-small{font-size:18px;color:var(--muted)}
.pricing-features{padding:24px 28px}
.pricing-feature{padding:8px 0;font-size:15px}
.buy-form{padding:0 28px 28px}
.form-row{margin-bottom:14px}
.form-row input{width:100%;padding:var(--s3) var(--s4);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:15px;
  transition:background-color var(--dur-tap) var(--ease-out),
             border-color var(--dur-tap) var(--ease-out)}
.form-row input:hover{border-color:var(--border-strong)}
/* Было outline:none без замены — поле фокусировалось «в никуда» для тех, кто
   ходит с клавиатуры. Кольцо вернули, подсветка границы осталась сверху. */
.form-row input:focus-visible{border-color:var(--accent);
  outline:var(--ring) solid var(--accent);outline-offset:var(--ring-offset)}
.form-row input:disabled{opacity:.45;cursor:not-allowed}
.buy-status{padding:14px var(--s4);border-radius:var(--r-md);font-size:14px;margin-top:14px}
.buy-status.ok{background:var(--ok-soft);border:1px solid var(--ok-line, var(--ok));color:var(--ok)}
.buy-status.error{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger)}
.buy-status code{background:var(--bg);padding:2px var(--s2);border-radius:var(--r-sm);font-size:13px}
.payment-methods{text-align:center;margin-top:32px}
.payment-methods p{color:var(--muted);font-size:14px;margin-bottom:12px}
.pay-methods{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.pay-method{padding:var(--s2) var(--s4);background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:14px}
.pay-note{font-size:13px;color:var(--muted);max-width:520px;margin:0 auto}

/* ── Plan comparison / solo tables ─────────────────────── */
.tiers-section{padding:64px 0}
.solo-section{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.plan-table-wrap{width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto;max-width:1100px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
.plan-table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.plan-table th,.plan-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:center;vertical-align:top}
.plan-table th{background:var(--panel);font-weight:700;position:sticky;top:0;z-index:1}
.plan-table-sticky{text-align:left!important;position:sticky;left:0;background:var(--bg);z-index:2;
  min-width:160px;font-weight:600}
.plan-table thead .plan-table-sticky{background:var(--panel);z-index:3}
.plan-col-price{font-size:15px;font-weight:800;margin-top:4px;color:var(--accent)}
.plan-col-popular{box-shadow:inset 0 0 0 1px var(--accent-line)}
.plan-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;
  border-radius:var(--r-full);
  background:var(--accent-soft);color:var(--accent);margin-left:var(--s1);vertical-align:middle}
.plan-table td.ok{color:var(--text)}
.plan-table td.no{color:var(--muted)}
.plan-table-actions td{border-bottom:none;padding-top:14px;padding-bottom:16px}
.plan-table .cta-btn.small{padding:8px 14px;font-size:13px;width:auto;min-width:88px}
.solo-table th:first-child,.solo-table td:first-child{text-align:left}
.solo-table th:nth-child(2),.solo-table td:nth-child(2),
.solo-table th:nth-child(3),.solo-table td:nth-child(3){text-align:left}
.solo-list{list-style:none;padding:0;margin:0;font-size:12px;line-height:1.4;color:var(--text)}
.solo-list li{padding:2px 0 2px 14px;position:relative}
.solo-list li::before{content:"·";position:absolute;left:2px;color:var(--accent);font-weight:700}
.solo-price{font-size:18px;font-weight:800;white-space:nowrap;color:var(--accent)}
.solo-table .muted.small{font-size:12px;margin-top:4px;max-width:220px}
.vs-table th .th-sub{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:2px}
.vs-table td{font-size:13px}
.vs-table .save-cell{color:var(--ok);font-weight:600;white-space:nowrap}
.vs-table tr.vs-total td{background:color-mix(in srgb, var(--accent) 6%, transparent);
  font-weight:600;border-top:2px solid var(--border)}
.vs-table .cta-btn.small{margin-top:6px;padding:6px 12px;font-size:12px}
.fx-formulas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
  max-width:1100px;margin:0 auto 20px}
.fx-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s4) 18px}
.fx-box h3{font-size:15px;margin:0 0 8px}
.fx-box code{display:block;font-size:12px;line-height:1.45;color:var(--accent);word-break:break-word}
.fx-box .muted{margin:8px 0 0}
.fx-steps{margin-top:6px;text-align:left}
.fx-steps summary{cursor:pointer;border-radius:var(--r-sm);
  transition:color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.fx-steps summary:hover{color:var(--accent)}
.fx-steps summary:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset)}
.fx-steps summary:active{transform:scale(var(--press))}
.fx-steps summary[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.fx-steps ol{margin:6px 0 0;padding-left:18px;font-size:11px;color:var(--muted);line-height:1.4}
.fx-steps li{margin-bottom:2px}
.vs-models-table td.model-desc{text-align:left;font-size:12px;line-height:1.4;max-width:280px;color:var(--text)}
.vs-models-table tr.pack-start td{border-top:2px solid var(--border)}
.vs-extra-title{max-width:1100px;margin:28px auto 12px;font-size:18px;font-weight:700}
.tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto;align-items:stretch}
/* Кликается кнопка внутри карточки, а не сама карточка — подъём при
   наведении убран, чтобы движение не обещало несуществующий клик. */
.tier-card{background:var(--panel);border:2px solid var(--border);border-radius:var(--r-xl);
  padding:28px 22px;transition:border-color var(--dur-tap) var(--ease-out);position:relative;
  display:flex;flex-direction:column}
.tier-card.free{border-color:var(--border-strong)}
.tier-card.basic{border-color:var(--accent-line)}
.tier-card.paid{border-color:var(--accent-line)}
.tier-card.premium{border-color:var(--ok-line, var(--ok))}
.tier-badge{display:inline-block;padding:var(--s1) var(--s3);border-radius:var(--r-full);
  font-size:12px;font-weight:700;margin-bottom:var(--s4)}
.tier-badge.free{background:var(--surface-3);color:var(--muted)}
.tier-badge.basic{background:var(--accent-soft);color:var(--accent)}
.tier-badge.paid{background:var(--accent-soft);color:var(--accent)}
.tier-badge.premium{background:var(--ok-soft);color:var(--ok)}
.tier-card h3{font-size:22px;font-weight:700;margin-bottom:8px}
.tier-price{font-size:36px;font-weight:800;margin-bottom:4px}
.tier-price .currency{font-size:20px;color:var(--muted)}
.tier-period{font-size:14px;color:var(--muted);margin-bottom:20px}
.tier-block{margin-bottom:16px}
.tier-block-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.tier-features{list-style:none;padding:0;margin:0 0 8px}
.tier-features li{font-size:13px;padding:5px 0 5px 22px;position:relative;color:var(--text);line-height:1.35}
.tier-features li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.tier-features li.no::before{content:"✗";color:var(--danger)}
.tier-features li.no{color:var(--muted)}
.tier-limits{list-style:none;padding:0;margin:0 0 8px}
.tier-limits li{font-size:13px;padding:4px 0 4px 22px;position:relative;color:var(--text);line-height:1.35}
.tier-limits li::before{content:"▸";position:absolute;left:0;color:var(--accent);font-weight:700}
.tier-note{font-size:12px;color:var(--muted);line-height:1.4;margin:6px 0 0;padding:var(--s2) 10px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb, var(--accent) 12%, transparent)}
.tier-card .cta-btn{width:100%;text-align:center;margin-top:8px}
.tier-card.free .cta-btn{background:var(--panel-2);border:1px solid var(--border)}
.tier-addon{font-size:13px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.tier-card .cta-btn{margin-top:auto}

/* ── FAQ ──────────────────────────────────────────────── */
.faq-section{padding:64px 0;background:var(--panel)}
.faq-item{max-width:720px;margin:0 auto 12px}
.faq-item details{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:0;overflow:hidden}
.faq-item summary{padding:18px 22px;font-size:16px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  transition:background-color var(--dur-tap) var(--ease-out),
             color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.faq-item summary:hover{background:var(--surface-2);color:var(--accent)}
/* фокус: у .faq-item details стоит overflow:hidden, внешнее кольцо срезало бы
   краем. Поэтому тот же ring, но отрисованный внутрь — видимость не теряем. */
.faq-item summary:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:calc(-1 * var(--ring-offset))}
.faq-item summary:active{transform:scale(var(--press))}
.faq-item summary[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.faq-item summary::after{content:"+";font-size:22px;color:var(--accent);
  transition:transform var(--dur-tap) var(--ease-tap)}
.faq-item details[open] summary::after{transform:rotate(45deg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 22px 18px;color:var(--muted);font-size:15px}

/* ── Terms / Disclaimer ───────────────────────────────── */
.terms-section{padding:64px 0;background:var(--panel)}
.terms-section h2{text-align:center;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:30px}
.terms-box{max-width:760px;margin:0 auto;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s7) 28px}
.terms-box > p{font-size:15px;line-height:1.7;margin-bottom:20px;color:var(--text)}
.terms-box h3{font-size:17px;font-weight:700;margin:24px 0 10px;color:var(--accent)}
.terms-box ul{list-style:none;padding:0;margin:0 0 16px}
.terms-box li{font-size:14px;line-height:1.6;color:var(--muted);padding:6px 0 6px 22px;position:relative}
.terms-box li::before{content:"•";position:absolute;left:6px;color:var(--accent)}
.terms-note{font-size:14px;color:var(--text);font-weight:600;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--border)}

/* ── Terms agreement checkbox ─────────────────────────── */
.terms-agree{display:flex;gap:10px;align-items:flex-start;margin:var(--s4) 0;
  font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer;
  transition:color var(--dur-tap) var(--ease-out)}
.terms-agree:hover{color:var(--text)}
.terms-agree input[type=checkbox]{margin-top:3px;flex-shrink:0;accent-color:var(--accent);
  width:18px;height:18px;cursor:pointer;border-radius:var(--r-sm);
  transition:opacity var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap)}
.terms-agree input[type=checkbox]:hover{opacity:.9}
.terms-agree input[type=checkbox]:focus-visible{outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset)}
.terms-agree input[type=checkbox]:active{transform:scale(var(--press))}
.terms-agree input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed;transform:none}
.terms-agree a{color:var(--accent);text-decoration:underline}

/* ── Footer ───────────────────────────────────────────── */
.footer{padding:40px 0;text-align:center;border-top:1px solid var(--border)}
.footer-links{display:flex;gap:20px;justify-content:center;margin-bottom:14px}
.footer-links a{font-size:14px}
.footer-copy{font-size:13px;color:var(--muted)}

/* ── Mobile ───────────────────────────────────────────── */
@media(max-width:600px){
  .hero{padding:60px 20px 40px}
  .hero-price{flex-direction:column;gap:20px}
  .price-block{text-align:center}
  .models-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .pricing-card{margin:0 12px}
  .compare-grid{grid-template-columns:1fr}
  .benefit-pill{min-width:auto;width:100%}
  .free-access-grid{grid-template-columns:1fr}
  .savings-banner{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr}
  .how-comparison{flex-direction:column}
  .how-comp-arrow{transform:rotate(90deg)}
  .juggling-grid{grid-template-columns:1fr}
  .promo-page-compare .container{padding-left:16px;padding-right:16px}
  .promo-page-compare .promo-subhero{padding:48px 16px 34px}
  .promo-page-compare .promo-subhero h1{font-size:38px}
  .promo-page-compare .promo-subhero p{font-size:16px}
  .compare-hero-actions{align-items:stretch;flex-direction:column;gap:14px}
  .compare-hero-actions .cta-btn{text-align:center;width:100%}
  .compare-text-link{text-align:center}
  .compare-products-section{padding:24px 0 56px}
  .compare-section-head{margin-bottom:26px}
  .compare-section-head h2,.compare-detail-head h2,.compare-table-head h2,.compare-extra-head h2{font-size:30px}
  .compare-section-head p,.compare-detail-head p,.compare-table-head p,.compare-extra-head p{font-size:15px}
  .compare-product-grid{grid-template-columns:1fr;gap:14px;margin-bottom:56px}
  .compare-product-card{padding:24px}
  .compare-product-lead{min-height:0}
  .compare-product-card h3{font-size:26px}
  .compare-product-price{font-size:29px}
  .promo-page-compare .fx-formulas{grid-template-columns:1fr;gap:12px;margin-bottom:56px}
  .compare-table-head{display:block;margin-bottom:12px}
  .compare-table-head p{text-align:left;margin-top:10px}
  .compare-scroll-hint{display:block}
  .promo-page-compare .plan-table-wrap{width:100%;max-width:100%;contain:inline-size}
  .promo-page-compare .plan-table{min-width:940px}
  .promo-page-compare .plan-table th,.promo-page-compare .plan-table td{padding:13px 14px}
  .compare-extra-head{margin-top:56px}
  .compare-model-grid{grid-template-columns:1fr;gap:12px}
  .compare-model-card{min-height:0;padding:22px}
  .compare-summary{grid-template-columns:1fr;gap:22px;padding:24px;margin-top:18px}
  .promo-page-compare .why-section{padding:56px 0}
  .compare-col{padding:24px 20px}
  .compare-item{font-size:15px}
}

@media(min-width:601px) and (max-width:900px){
  .compare-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare-product-featured{grid-column:1/-1}
  .compare-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Каталог моделей: статус и метки состояния ──────────────────────────────
   Раньше «онлайн» и «недоступен» различались только цветом одинаковых
   кружков — для человека с дальтонизмом там не было информации. Теперь
   отличается форма (заливка против кольца) и рядом стоит слово. */
.st{display:inline-flex;align-items:center;gap:var(--s1);white-space:nowrap;font-weight:600}
.st-mark{width:9px;height:9px;border-radius:var(--r-full);flex:0 0 auto}
.st-on{color:var(--ok)}
.st-on .st-mark{background:var(--ok)}
.st-off{color:var(--muted)}
.st-off .st-mark{background:transparent;border:2px solid currentColor}

/* Строка статуса каталога. Три состояния, и все три — правда:
   server — отдал сервер, JS ещё не отвечал;
   live   — только что обновлено со шлюза;
   stale  — обновить не вышло, показан список с момента загрузки. */
.models-status[data-state]{display:flex;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid transparent;
  border-radius:var(--r-md)}
.models-status[data-state="stale"]{color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 38%, transparent);
  background:color-mix(in srgb, var(--warn) 8%, transparent)}
.models-status[data-state="live"]{color:var(--muted)}

/* Скелет на случай, когда серверу нечего было отдать: показываем форму
   будущего списка, а не пустоту и не слово «загружаем». */
.model-card-skeleton{pointer-events:none}
.model-card-skeleton .sk{display:block;border-radius:var(--r-sm);background:var(--surface-3);
  animation:pulse 1.4s var(--ease-out) infinite}
.model-card-skeleton .sk-title{height:20px;width:58%;margin-bottom:var(--s3)}
.model-card-skeleton .sk-row{height:38px;margin-bottom:var(--s2)}
.model-card-skeleton .sk-row:last-child{margin-bottom:0;width:76%}

/* ── Статус заказа ──────────────────────────────────────────────────────────
   Раньше после «Оплатить» человек получал номер заказа и до суток тишины.
   Теперь видно, на каком шаге заказ и что происходит дальше. Шаги — реальные
   статусы из payment_store: created → pending → paid → approved. */
.order-track{margin-top:var(--s4);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s4);background:var(--panel)}
.order-track-head{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  margin-bottom:var(--s4)}
.order-track-head b{font-size:15px}
.order-track-head code{background:var(--bg);padding:2px var(--s2);
  border-radius:var(--r-sm);font-size:13px}

.order-steps{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--s3)}
.order-step{display:flex;gap:var(--s3);align-items:flex-start;
  color:var(--text-faint)}
.order-step .mark{flex:0 0 auto;width:20px;height:20px;border-radius:var(--r-full);
  border:2px solid currentColor;display:flex;align-items:center;
  justify-content:center;font-size:12px;line-height:1;margin-top:1px}
.order-step .txt{min-width:0}
.order-step .t{font-weight:600;font-size:14px}
.order-step .s{font-size:13px;color:var(--muted);margin-top:2px}

/* Пройденный шаг — заливка и галочка. Форма отличается от цвета намеренно:
   состояние читается и без различения оттенков. */
.order-step[data-state="done"]{color:var(--ok)}
.order-step[data-state="done"] .mark{background:var(--ok);border-color:var(--ok);
  color:var(--accent-fg)}
/* Текущий шаг — кольцо и пульс. Пульс тут законен: процесс идёт прямо сейчас. */
.order-step[data-state="now"]{color:var(--accent)}
.order-step[data-state="now"] .mark{animation:pulse 1.4s var(--ease-out) infinite}
.order-step[data-state="todo"] .mark{opacity:.55}

.order-track-foot{margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.order-track-foot a{font-weight:600}

/* ── «Как пользоваться моделями»: шаги ──────────────────────────────────────
   Нумерация здесь несёт смысл: это последовательность, где шаг 3 без шага 1
   не выполнится. Поэтому цифры, а не буллеты. */
.usage-steps{display:flex;flex-direction:column;gap:var(--s6);margin-top:var(--s6)}
.usage-step{display:flex;gap:var(--s4);align-items:flex-start}
.usage-step-n{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-full);
  background:var(--accent-soft);color:var(--accent);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;margin-top:2px}
.usage-step h3{font-size:17px;font-weight:700;margin:0 0 var(--s2)}
.usage-step p{color:var(--muted);font-size:14px;margin:0 0 var(--s2);max-width:68ch}
.usage-step p:last-child{margin-bottom:0}
.usage-step pre{margin:var(--s2) 0;overflow-x:auto}
.usage-step .cta-btn{display:inline-flex;margin-top:var(--s1)}

@media (max-width:560px){
  .usage-step{gap:var(--s3)}
  .usage-step pre{font-size:12px}
}