/* NordRouter — черновик новой главной, v2. Локально, не для прода.
   Шрифты: Unbounded (заголовки), Golos Text (текст), JetBrains Mono (цены, id, код). */
/* Одна кривая ускорения на страницу: резкий старт, мягкая посадка.
   Раньше она стояла на двух переходах из двадцати трёх. */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --bg:#05080d;--bg2:#0b111c;--card:#0f1623;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --text:#eef2f7;--muted:#9aa5b8;--dim:#7a8aa3;--blue:#0b6ae0;--green:#34d399;--orange:#ff7a00;--focus:#5aa6ff;
  --head:NRRubHead,Unbounded,"Golos Text",system-ui,sans-serif;--mono:NRRubMono,"JetBrains Mono",ui-monospace,monospace;--body:NRRubBody,"Golos Text",system-ui,sans-serif;
  --w:1240px;--sec:104px;
  /* Скругления. Их было девять значений россыпью по файлу, и каждая новая
     правка добавляла своё — так 4px из выбранного направления («полки и
     линейки, а не карточки») соседствовали с 24px из прежней версии.
     Здесь они названы, чтобы следующая правка брала ступень, а не число. */
  --r-flat:4px;      /* крупные поверхности: панели, полки, таблица */
  --r-soft:10px;     /* мелкие элементы внутри них: поля, значки, плитки */
  --r-card:24px;     /* блоки, перенесённые с прода: карточки площадок */
  --r-pill:999px;    /* метки и кнопки-таблетки */
  --r-dot:50%;       /* кружки */
  --r-hair:2px;      /* волосяные детали: штрихи бургера, ползунок */
  --r-xs:6px;        /* мелкие квадраты и кольца фокуса на них */
  --r-btn:12px;      /* кнопки и нажимаемые полки */
  --r-lg:18px;       /* крупные вставки: блок кода, клипы Студии */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
h2 em{font-style:normal;color:var(--muted)}
p{margin:0}
.wrap{width:min(var(--w),92vw);margin:0 auto}
.live{display:inline-block;width:7px;height:7px;border-radius:var(--r-dot);background:var(--green);box-shadow:none;margin-right:7px;vertical-align:middle}
.center{text-align:center;max-width:760px;margin:0 auto 44px}
.center p{color:var(--muted);margin-top:16px;font-size:16px}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:40px}
.sec-head>*{min-width:0}

.sec-head p{color:var(--muted);font-size:15.5px;max-width:460px;justify-self:end;line-height:1.65}

/* разделители и сетки между блоками */
section{position:relative;border-top:1px solid var(--line)}
section::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:min(1380px,100% - 64px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none}
.hero{border-top:0}
section>.wrap{position:relative;z-index:1}

/* кнопки: моношрифт, деловые */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:var(--r-btn);font:600 14px var(--body);border:1px solid transparent;cursor:pointer;transition:transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);letter-spacing:.01em}
.btn:hover{transform:translateY(-1px)}
.btn.pill{border-radius:var(--r-pill)}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.45)}

.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--line2);color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.sm{padding:9px 18px;font-size:13px}
.btn.wide{width:100%}
.btn.google{background:#fff;color:#111;font-family:var(--body);font-weight:600;font-size:15px}
.btn.yandex{flex:1;background:#fc3f1d;color:#fff;font-family:var(--body);font-weight:600;font-size:14px}
.btn.tg{flex:1;background:#1c7fb8;color:#fff;font-family:var(--body);font-weight:600;font-size:14px}
.ya{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--r-xs);background:rgba(255,255,255,.18);font-weight:800;font-size:12px}
.btn.go{background:#fff;color:var(--bg);padding:18px 30px;font-size:15px;border-radius:var(--r-pill)}
.btn span{transition:transform .2s var(--ease)}.btn:hover span{transform:translateX(3px)}

/* шапка: сплошная, логотип рядом с меню */
.nav{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-left{display:flex;align-items:center;gap:44px}
.logo{display:inline-flex;align-items:center;gap:9px}
.logo-img{width:36px;height:36px;display:block;border-radius:var(--r-soft);box-shadow:none}
.menu{display:flex;gap:36px;font:500 14px var(--body);color:var(--muted);letter-spacing:.01em}
.menu a{display:inline-flex;align-items:center;min-height:24px;padding:4px 0;transition:color .2s var(--ease)}.menu a:hover{color:#fff}
.nav-cta{display:flex;gap:10px;align-items:center}

/* 1. первый экран */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:130px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(5,8,13,.6),transparent 70%),linear-gradient(180deg,rgba(5,8,13,.55),rgba(5,8,13,.15) 25%,rgba(5,8,13,.2) 65%,var(--bg))}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
h1{font-size:clamp(38px,4.6vw,58px);line-height:1.06;font-weight:700;letter-spacing:-.03em}
.lead{font-size:17.5px;color:var(--muted);max-width:520px;margin:24px 0 34px;line-height:1.6}
.hero-points{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:560px}
.hero-points li{display:flex;gap:14px}
.hero-points i{flex:none;width:9px;height:9px;border-radius:var(--r-dot);background:var(--orange);margin-top:8px;box-shadow:none}
.hero-points b{display:block;font:600 14.5px var(--body);letter-spacing:0}
.hero-points span{font-size:14px;color:var(--muted)}

.auth{justify-self:end;width:min(420px,100%);background:rgba(8,12,20,.85);border:1px solid var(--line2);border-radius:var(--r-card);padding:28px}
.auth>p{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.auth-row{display:flex;gap:10px;margin-top:10px}
.or{display:flex;align-items:center;gap:12px;color:var(--dim);font:500 12px var(--body);letter-spacing:.08em;text-transform:uppercase;margin:18px 0 14px}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.auth input[type=email]{width:100%;min-height:46px;padding:13px 14px;border-radius:var(--r-soft);border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.05);color:#fff;font:500 14px var(--mono);outline:none;margin-bottom:12px}
.auth input[type=email]:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.auth small{display:block;font-size:12.5px;color:var(--dim);margin-top:12px;line-height:1.45}
.auth small a{color:var(--muted);text-decoration:underline}
.auth-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);text-align:center}
.auth-foot a{color:#fff;font-weight:600;display:inline-block;padding:4px 2px;min-height:24px}

/* 2. доверие — стили перенесены с прода, шрифты заменены на наши */
.nl-marketplaces{isolation:isolate;background:var(--bg);padding:var(--sec) 0;position:relative;overflow:hidden}
.nl-marketplaces-inner{grid-template-columns:.64fr 1.36fr;align-items:center;gap:clamp(42px,6vw,92px);display:grid}
.nl-marketplaces-copy h2{color:var(--text);margin:21px 0 0;line-height:1.08}
.nl-marketplaces-copy h2 em{color:var(--dim);font-style:normal}
.nl-marketplaces-copy p{color:var(--dim);max-width:455px;margin:25px 0 0;font-size:15px;line-height:1.7}
.nl-marketplace-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}
.nl-marketplace-card{isolation:isolate;background:linear-gradient(145deg,#ffffff12,#ffffff06);border:1px solid #ffffff21;border-radius:var(--r-card);flex-direction:column;min-width:0;min-height:342px;padding:28px;transition:transform .38s var(--ease),border-color .38s,box-shadow .38s;display:flex;position:relative;overflow:hidden;box-shadow:0 26px 70px #00000052,inset 0 1px #ffffff12}
.nl-marketplace-card:hover{transform:translateY(-7px)}
.nl-marketplace-ggsel:hover{border-color:#47d65173;box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09)}
.nl-marketplace-plati:hover{border-color:#ff8a187a;box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09)}
.nl-marketplace-card-head{justify-content:space-between;align-items:flex-start;gap:15px;display:flex}
.nl-marketplace-brand{align-items:center;min-width:0;display:flex}
.nl-marketplace-brand-ggsel{gap:11px}
.nl-marketplace-brand-ggsel svg{fill:#47d651;width:31px;height:35px;overflow:visible}
.nl-marketplace-brand-ggsel strong{color:var(--text);letter-spacing:-.075em;font-size:35px;font-weight:840;line-height:1;font-family:var(--body)}
.nl-marketplace-brand-plati{color:var(--text);gap:4px}
.nl-marketplace-brand-plati>span{letter-spacing:-.085em;font-size:31px;font-style:italic;font-weight:900;line-height:1;font-family:var(--body)}
.nl-marketplace-brand-plati>small{color:#ff8a18;letter-spacing:-.04em;align-self:flex-end;margin:0 0 1px 3px;font:700 11px var(--mono)}
.nl-plati-a{color:#ff8a18;font-style:normal;display:inline-block;position:relative;transform:skew(-7deg)}
.nl-plati-a>i{background:#ff9b28;border-radius:var(--r-dot);width:3px;height:3px;position:absolute;box-shadow:none}
.nl-plati-a>i:first-child{top:-6px;left:8px}.nl-plati-a>i:nth-child(2){top:-1px;right:-3px}.nl-plati-a>i:nth-child(3){top:2px;left:-1px}
.nl-marketplace-verified{color:var(--muted);text-align:right;justify-content:flex-end;align-items:center;gap:5px;max-width:140px;font:600 12px/1.35 var(--body);display:flex}
.nl-marketplace-verified svg{color:var(--dim);width:14px;flex:none}
.nl-marketplace-stats{align-items:center;gap:23px;margin-top:auto;padding:39px 0 28px;display:flex}
.nl-marketplace-stats>div{min-width:0}
.nl-marketplace-stats strong{color:var(--text);letter-spacing:-.04em;font:700 clamp(30px,2.6vw,40px)/.9 var(--head);display:block;white-space:nowrap}
.nl-marketplace-stats sup{margin-left:2px;font-size:max(11px,.36em);position:relative;top:-.85em;font-weight:700}
.nl-marketplace-ggsel .nl-marketplace-stats sup{color:#54df5d}
.nl-marketplace-plati .nl-marketplace-stats sup{color:#ff982d}
.nl-marketplace-stats span{color:var(--dim);margin-top:9px;font:600 12px var(--body);display:block}
.nl-marketplace-stats>i{background:linear-gradient(#0000,#ffffff2e,#0000);width:1px;height:50px}
.nl-marketplace-link{color:var(--text);border-top:1px solid #ffffff1a;justify-content:space-between;align-items:center;min-height:47px;padding-top:18px;font:700 12px var(--body);display:flex}
.nl-marketplace-link svg{width:16px;transition:transform .25s var(--ease)}
.nl-marketplace-card:hover .nl-marketplace-link svg{transform:translate(3px,-3px)}
.nl-marketplace-ggsel .nl-marketplace-link svg{color:#54df5d}
.nl-marketplace-plati .nl-marketplace-link svg{color:#ff982d}

/* 3. каталог: вкладки → вендоры слева → модели справа, без длинного скролла */
.catalog{padding:var(--sec) 0}
.catalog::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.3) 1.2px,transparent 1.8px);background-size:28px 28px;mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000,transparent 75%);opacity:.5}
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill);border:1px solid var(--line2);background:rgba(255,255,255,.03);font:600 13.5px var(--body);color:var(--muted);cursor:pointer;transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.tab b{font-weight:500;color:var(--dim)}
.tab:hover{background:rgba(255,255,255,.07)}
.tab.on{background:#fff;color:var(--bg);border-color:#fff}.tab.on b{color:#4a5568}
.cat-panel{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line2);border-radius:var(--r-card);background:var(--card);overflow:hidden;height:560px}
.cat-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#cat-search{margin:12px;padding:11px 14px;border-radius:var(--r-soft);border:1px solid var(--line2);background:rgba(255,255,255,.04);color:#fff;font:500 13px var(--mono);outline:none}
#cat-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.cat-vendors{overflow:auto;scrollbar-gutter:stable;padding:0 8px 8px;display:grid;gap:4px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.vbtn{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-btn);border:1px solid transparent;background:transparent;color:#fff;text-align:left;cursor:pointer;font-family:var(--body);transition:background .15s var(--ease), border-color .15s var(--ease)}
.vbtn:hover{background:rgba(255,255,255,.04)}
.vbtn.on{background:rgba(11,106,224,.16);border-color:rgba(11,106,224,.42)}
.vlogo{width:36px;height:36px;border-radius:var(--r-soft);background:rgba(255,255,255,.05);border:1px solid var(--line);display:grid;place-items:center;color:#fff}
.vlogo svg{width:20px;height:20px}.vlogo b{font:700 12px var(--head)}
.vlogo.lg{width:46px;height:46px;border-radius:var(--r-btn)}.vlogo.lg svg{width:26px;height:26px}
.vtxt b{display:block;font-size:14px;font-weight:600}.vtxt small{font:500 12px var(--mono);color:var(--muted)}
.vchev svg{width:14px;height:14px}
.vchev{color:var(--dim);font-size:16px}.vbtn.on .vchev svg{width:14px;height:14px}
.vchev{color:#8fb6ff}
.cat-main{display:flex;flex-direction:column;min-height:0}
.cat-main-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(11,106,224,.10),transparent 60%)}
.cat-main-head h3{font-size:16px}.cat-main-head span{font:500 13px var(--body);color:var(--muted)}.cat-main-head span b{color:#fff}
.cat-list{overflow:auto;min-height:0;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.mhead{position:sticky;top:0;z-index:1;background:var(--card);display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr auto;gap:14px;padding:10px 20px 8px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr auto;gap:14px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--line);font-size:14px;animation:rowIn .35s both}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.mrow:hover{background:rgba(255,255,255,.03)}
.mrow .mn{font-weight:600}.mrow .mn small{display:block;font:500 12px var(--mono);color:var(--dim)}
.mrow .ctx,.mrow .pr{font:500 13px var(--mono);color:var(--muted)}
.mrow .pr b{color:#fff;font-weight:600}
.mrow .pr i{display:block;font-style:normal;font-size:10.5px;color:var(--dim)}
.mrow .copy{font:500 11px var(--mono);padding:6px 10px;border-radius:var(--r-soft);border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer}
.mrow .copy:hover{background:#fff;color:var(--bg)}
.cat-empty{padding:30px;text-align:center;color:var(--muted);font:500 13px var(--mono)}
/* Прайс не загрузился. Состояние отказа — такая же часть страницы, как
   сам прайс: без него человек видит пустую рамку и решает, что сломано всё. */
.cat-down{grid-column:1/-1;display:grid;align-content:center;justify-items:start;gap:10px;padding:48px 32px;max-width:560px}
.cat-down b{font:700 20px/1.2 var(--head);letter-spacing:-.02em;color:var(--text)}
.cat-down p{font:500 14px/1.55 var(--body);color:var(--muted);margin:0}
.cat-down-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cat-panel.is-down{grid-template-columns:1fr;height:auto}
.cat-panel.is-down>:not(.cat-down){display:none}
/* Сноска-список: слева короткая зацепка, справа объяснение. Раньше это был
   один абзац моноширинным 12,5px, в котором тонуло единственное объяснение
   графы «Кэш». */
.cat-foot{display:grid;gap:10px 24px;margin-top:26px;color:var(--dim)}
.cat-foot>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:baseline}
.cat-foot dt{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cat-foot dd{margin:0;font:500 13px/1.55 var(--body);color:var(--muted);max-width:74ch}
.cat-foot a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
@media (max-width:700px){.cat-foot>div{grid-template-columns:1fr;gap:3px}}

/* 4. студия */
.studio{padding:var(--sec) 0}
.gallery{columns:5;column-gap:14px;margin:0 auto 38px;max-width:1080px}
.clip{position:relative;break-inside:avoid;margin-bottom:14px;border-radius:var(--r-lg);overflow:hidden;background:#0d1320;border:1px solid var(--line);transition:transform .25s var(--ease)}
.clip:hover{transform:translateY(-4px)}
.clip video{display:block;width:100%;height:auto}

/* 5. подключение: мягкие диагональные полосы как в референсе, код + логотипы */
.connect{padding:var(--sec) 0;overflow:hidden;background:var(--bg)}
/* .bands удалён: диагональные полосы с blur 34px — шестая декоративная
   система на странице и характерный «сгенерированный» приём. */

.dev-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.code-card{border-radius:var(--r-card);background:rgba(6,9,15,.9);border:1px solid var(--line2);box-shadow:0 40px 100px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.code-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);flex-wrap:wrap}
.code-tabs button{padding:8px 14px;border-radius:var(--r-soft);border:1px solid transparent;background:transparent;color:var(--muted);font:600 12.5px var(--mono);cursor:pointer}
.code-tabs button.on{background:rgba(255,255,255,.08);color:#fff;border-color:var(--line)}
.code-body{flex:1;margin:0;padding:22px 24px;font:14px/1.65 var(--mono);color:#d8dee9;white-space:pre;overflow:auto;min-height:300px}
.code-body .k{color:#f0a36b}.code-body .s{color:#8fb6ff}.code-body .c{color:#8794a5}.code-body .h{background:rgba(11,106,224,.24);border-radius:var(--r-flat);padding:1px 4px;margin:0 -4px}
.code-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid var(--line);font:500 12px var(--mono);color:var(--muted)}
.code-foot a{color:#fff;display:inline-flex;align-items:center;padding:3px 2px;min-height:24px}
.tools{border-radius:var(--r-card);background:rgba(6,9,15,.7);border:1px solid var(--line2);padding:22px;display:flex;flex-direction:column}
.tools-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px}
.tools-head span{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tools-head em{font:500 11px var(--mono);color:var(--dim);font-style:normal}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-decoration:none;border-radius:var(--r-btn);background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);min-height:96px}
.tool:hover{background:rgba(255,255,255,.08);border-color:var(--line2);transform:translateY(-3px)}
.tool svg{width:28px;height:28px}
.tool span{font:500 12px var(--body);color:var(--muted)}
.mono{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-soft);background:linear-gradient(135deg,#1b3c7a,var(--blue));font:700 14px var(--head);color:#fff}

/* 6. cta: резкий диагональный акцент, без размытых градиентов */
.cta{padding:0 0 var(--sec);border-top:0}
.cta::after{display:none}
.cta-card{position:relative;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;padding:56px 60px;border-radius:var(--r-card);background:var(--bg2);border:1px solid var(--line2);overflow:hidden;isolation:isolate}
.cta-card::before{content:"";position:absolute;top:0;bottom:0;right:0;width:46%;background:var(--blue);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);z-index:-1}
/* Штриховка на клине CTA убрана: клин сам по себе — достаточный акцент. */

.cta-copy p{margin-top:14px;color:var(--muted);max-width:480px;font-size:15.5px}
.cta-right{display:flex;flex-direction:column;align-items:flex-end;gap:22px}

/* подвал: логотип слева, четыре ссылки справа */
.foot{border-top:1px solid var(--line);padding:70px 0 0;overflow:hidden;position:relative;background:linear-gradient(180deg,var(--bg),#03050a)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:70px}
.foot-logo{display:inline-flex;align-items:center;gap:12px;font:700 20px var(--head);letter-spacing:-.02em}
.foot-logo img{width:44px;height:44px;display:block}

/* переключатель языка */

/* сетка на первом экране, снизу, органично уходит в тень */
/* Сетка-подложка убрана: в герое уже есть авторский момент — видео. */


@media (max-width:1000px){
  .nav{padding:0 18px}
  /* Десктопное меню на телефоне заменяет бургер. Правило {display:none}
     было съедено зачисткой соседних мёртвых селекторов, и три ссылки
     вернулись в шапку: 18px высотой и вместе с CTA выталкивали бургер
     на x=510 при вьюпорте 375. */
  .menu{display:none}
  .hero-grid,.sec-head,.dev-grid,.cta-card,.nl-marketplaces-inner{grid-template-columns:1fr}.auth{justify-self:stretch;width:100%}.sec-head p{justify-self:start}
  .nl-marketplace-grid{grid-template-columns:1fr}.gallery{columns:3}.tools-grid{grid-template-columns:repeat(4,1fr)}
  .cat-panel{grid-template-columns:1fr;height:auto}.cat-side{border-right:0;border-bottom:1px solid var(--line)}.cat-vendors{max-height:220px}.cat-list{max-height:420px}.mrow,.mhead{grid-template-columns:1.2fr .7fr 1fr}
  .foot-top{flex-direction:column}.cta-card::before,.cta-card::after{width:100%;clip-path:polygon(0 70%,100% 45%,100% 100%,0 100%)}.cta-right{align-items:flex-start}
}
@media (max-width:600px){.gallery{columns:2}.tools-grid{grid-template-columns:repeat(3,1fr)}.foot-top{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════
   Проход 19.09.2026 по итогам /impeccable critique (17/36).
   Чинится: контраст, состояния формы, мобильная версия, вес первого экрана.
   ═══════════════════════════════════════════════════════════════════════ */

/* Контраст: --blue был #0878ff (белый текст 4,08:1 при норме 4,5),
   --dim был #66738a (4,19:1). Значения исправлены в самих токенах выше,
   а не вторым :root поверх первого. */
/* Белый на этих фонах не проходил: 3.58:1 и 4.1:1. */
.btn.yandex{background:#d8301a}
.btn.tg{background:#176c9c}
/* Бейдж «new»: белым по оранжевому было 2.6:1. Тёмным по тому же фону — 7.7:1. */
/* Подписи под ценами и «официальная страница продавца» были 9–10.5px. */

.mrow .pr i{font-size:11px}
.nl-marketplace-verified{font-size:11px}
/* ── Поверхности, которые рисует браузер, а не мы. ───────────────────── */
::selection{background:var(--blue);color:#fff}
input,.cat-list,.cat-vendors,.code-body{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.cat-list::-webkit-scrollbar,.cat-vendors::-webkit-scrollbar,.code-body::-webkit-scrollbar{width:10px;height:10px}
.cat-list::-webkit-scrollbar-thumb,.cat-vendors::-webkit-scrollbar-thumb,.code-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box}
.cat-list::-webkit-scrollbar-track,.cat-vendors::-webkit-scrollbar-track,.code-body::-webkit-scrollbar-track{background:transparent}
/* Цены в колонках — табличные цифры, иначе столбец «пляшет». */
.mrow .pr b,.mrow .ctx,.cur-rate b{font-variant-numeric:tabular-nums}
/* Фокус был только у двух инпутов. Теперь у всего, чем можно управлять. */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}

/* ── Свечения: тень обязана иметь смещение и размытие. ───────────────── */


/* ── Визуально скрытая подпись для скринридера ───────────────────────── */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Переключатель валюты ────────────────────────────────────────────── */
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.cur{display:inline-flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.cur-btn{font:600 13px var(--mono);width:38px;height:34px;border-radius:var(--r-soft);cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--muted);transition:background .18s var(--ease), color .18s var(--ease)}
.cur-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.cur-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cur-rate{font:500 12.5px var(--mono);color:var(--dim)}
.cur-rate b{color:var(--muted);font-weight:600}

/* ── «Почему дешевле» ────────────────────────────────────────────────── */
.why{padding:var(--sec) 0}
.why h2{margin-bottom:34px}

/* ── Мобильное меню ──────────────────────────────────────────────────── */
.burger{display:none;width:44px;height:44px;border-radius:var(--r-soft);border:1px solid var(--line2);
  background:transparent;cursor:pointer;padding:0;place-items:center;align-content:center;gap:5px}
.burger span{display:block;width:18px;height:1.5px;background:var(--text);border-radius:var(--r-hair);transition:transform .22s var(--ease), opacity .18s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.m-nav{display:none;position:sticky;top:64px;z-index:40;background:var(--bg2);border-bottom:1px solid var(--line);padding:6px 4vw 14px}
.m-nav a{display:block;padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line);color:var(--text)}
.m-nav a:last-child{border-bottom:0}
body.nav-open{overflow:hidden}

/* ── Форма: ошибка, отправка, успех ──────────────────────────────────── */
.auth-h{font-family:var(--head);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.auth input[type=email]{transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.auth.has-err input[type=email]{border-color:#e4573f;box-shadow:0 1px 0 0 rgba(228,87,63,.35)}
.field-err[hidden]{display:none}
.field-err{margin:8px 0 0;font-size:13px;line-height:1.45;color:#ff9c88;display:flex;gap:7px}
.field-err::before{content:"";flex:none;width:15px;height:15px;margin-top:1px;border-radius:var(--r-dot);background:#e4573f;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* Подсказка про опечатку в домене — не ошибка: адрес формально верный,
   мы лишь предполагаем. Красный значок и красный текст здесь врут, поэтому
   на время подсказки строка становится нейтральной. */
.auth.has-hint .field-err{color:var(--muted);font-weight:500;align-items:baseline}
.auth.has-hint .field-err::before{background:var(--dim);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 17v-6M12 7h.01'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000)}
/* 24px по высоте — нижний порог размера цели по WCAG 2.2 AA (2.5.8). Кнопка
   была 108×18: попасть можно, но она стоит в ряду с полем ввода, где цена
   промаха — потерянный адрес. Подчёркивание рисуем фоном, чтобы оно осталось
   у текста, а не уехало к краю увеличенной кнопки. */
.err-fix{font:600 13px var(--body);color:var(--text);background:none;border:0;
  padding:3px 0;min-height:24px;cursor:pointer;border-radius:var(--r-hair);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 calc(100% - 3px)}
/* Было var(--acc) — токена с таким именем в :root нет, и ховер единственной
   кликабельной подсказки на странице просто не срабатывал. Акцент здесь
   называется --blue. */
.err-fix:hover{color:var(--blue)}
.err-fix:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-hair)}
.auth-assure{margin:10px 0 0;font:500 12.5px var(--body);color:var(--muted);display:flex;align-items:center;gap:8px}
.auth-assure i{flex:none;width:15px;height:15px;border-radius:var(--r-dot);background:rgba(52,211,153,.18);
  display:inline-block;position:relative}
.auth-assure i::after{content:"";position:absolute;left:4px;top:4.5px;width:6px;height:3px;
  border-left:1.7px solid var(--green);border-bottom:1.7px solid var(--green);transform:rotate(-45deg)}
.btn[disabled]{cursor:not-allowed}
.auth.sending [data-submit]{position:relative;color:transparent}
.auth.sending [data-submit]::after{content:"";position:absolute;inset:0;margin:auto;width:17px;height:17px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:var(--r-dot);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){
  /* Форма целиком уходила под сгиб: буллиты идут после неё. */
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{order:1}
  .auth{order:2}
  .hero-points{order:3;margin-top:26px}
  .hero h1{font-size:clamp(34px,10vw,46px)}
    .cat-bar{gap:12px}
  /* Код скроллится вбок внутри вертикального скролла — даём перенос. */
  .code-body{white-space:pre-wrap;word-break:break-word}
}

/* ── Уважение к настройке «меньше движения» ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  /* Тотальный .001ms гасил 114 переходов — вместе с обратной связью на фокусе,
     наведении и смене вкладки. «Меньше движения» просит убрать перемещение и
     бесконечные циклы, а не отклик интерфейса. Поэтому глушим анимации и
     сдвиги, а смену цвета и прозрачности оставляем. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important}
  *,*::before,*::after{transition-property:color,background-color,border-color,opacity,box-shadow!important}
  .clip:hover,.clip:active,.btn.primary:hover,.nl-marketplace-card:hover{transform:none!important}
}

/* ── Раскладка героя после выноса буллитов из .hero-copy ─────────────── */
@media (min-width:1001px){
  .hero-grid{grid-template-rows:auto auto;align-items:start}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-points{grid-column:1;grid-row:2;margin-top:34px}
  .auth{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* На узком экране форма идёт сразу за заголовком: это объект конверсии,
   а список преимуществ дочитывают уже после неё. */
@media (max-width:1000px){
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{order:1}
  .auth{order:2}
  .hero-points{order:3;margin-top:28px}
}
/* Точка буллита светилась тенью без смещения — это декорация, а не глубина. */


/* Наведение на главную кнопку осталось от старого синего и давало 3.6:1.
   Затемняем, а не осветляем: белый текст обязан пройти 4.5:1 и в hover. */
.btn.primary:hover{background:#0a5cc4;box-shadow:0 10px 26px rgba(0,0,0,.5)}

/* ── Студия: плитка стала настоящей кнопкой ──────────────────────────── */
/* Раньше это был div с hover-подъёмом, который ничего не делал, и тегами
   моделей, которых нет в каталоге. Теперь модель и цена настоящие, а клик
   отдаёт промт — ровно то, что обещает копирайт. */
.clip{display:block;width:100%;padding:0;text-align:left;cursor:pointer;color:inherit;
  font:inherit;border:1px solid var(--line);background:#0d1320}
.clip:hover{transform:translateY(-4px);border-color:var(--line2)}
.clip:active{transform:translateY(-1px)}

.clip-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px 11px}
.clip-meta b{font:600 12px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-meta em{flex:none;font-style:normal;font:700 13px var(--mono);color:var(--text);font-variant-numeric:tabular-nums}


/* ── Объяснение токенов ──────────────────────────────────────────────── */
.tok{margin:22px 0 0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.tok summary{list-style:none;cursor:pointer;padding:15px 20px;font:500 14px var(--body);color:var(--muted);
  display:flex;align-items:center;gap:10px}
.tok summary::-webkit-details-marker{display:none}
.tok summary::before{content:"";flex:none;width:16px;height:16px;border-radius:var(--r-dot);border:1px solid var(--line2);
  background:linear-gradient(transparent 7px,var(--dim) 7px,var(--dim) 8px,transparent 8px),
             linear-gradient(90deg,transparent 7px,var(--dim) 7px,var(--dim) 8px,transparent 8px);
  transition:transform .2s var(--ease)}
.tok[open] summary::before{transform:rotate(45deg)}
.tok[open] summary{color:var(--text);border-bottom:1px solid var(--line)}
.tok-body{padding:16px 20px 20px;display:grid;gap:11px}
.tok-body p{font-size:14.5px;line-height:1.65;color:var(--muted);max-width:74ch}
.tok-body b{color:var(--text);font-weight:600}

/* ── Подвал: конец страницы — не юридические документы ───────────────── */
.foot-help{display:grid;gap:12px;justify-items:end;text-align:right}
.foot-help b{font-family:var(--head);font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em}
.foot-help span{font-size:13.5px;color:var(--dim)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 26px;padding:26px 0 4px;border-top:1px solid var(--line)}
.foot-legal p{margin:0;font-size:13px;color:var(--dim);line-height:1.6}
.foot-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .18s var(--ease)}
.foot-legal a:hover{color:var(--text)}
/* Градиентный текст — запрет планки: вес и размер несут акцент сами. */
@media (max-width:760px){
  .foot-help{justify-items:start;text-align:left}
}

/* ── Свечения → нейтральная глубина ──────────────────────────────────── */
/* Правило планки: цветная размытая тень на тёмном фоне — это декорация, а не
   глубина, и характерный признак «сгенерированного» интерфейса. Смещения
   мало, цвет тоже надо убрать. Глубину несут смещение, размытие и чёрный. */
.live{box-shadow:none}
.hero-points i{box-shadow:none}
.logo-img{box-shadow:none}
.btn.primary{box-shadow:0 8px 22px rgba(0,0,0,.45)}
.nl-marketplace-ggsel:hover,.nl-marketplace-plati:hover{box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09)}
.nl-plati-a{text-shadow:none}
.nl-plati-a>i{box-shadow:none}
/* Кольцо фокуса — функция, а не украшение, но цвет уводим в нейтральный,
   чтобы не читаться как свечение. Видимость держит outline из :focus-visible. */
.auth input[type=email]:focus,#cat-search:focus{box-shadow:0 0 0 3px rgba(255,255,255,.14)}

/* Подсветки секций были ещё и радиальными пятнами — гасим до следа. */

/* ═══ Правки по второму разбору (17/32) ═══════════════════════════════ */

/* ── Шапка на телефоне: бургер стоял на x=368…407 при вьюпорте 375,
   то есть целиком за краем. Навигации на мобиле не было вовсе. ──────── */
@media (max-width:600px){
  .nav{padding:0 16px}
  /* «Войти» дублируется внутри формы и в бургер-меню, а в шапке съедает
     ширину: без этого правила .nav-cta занимает 230px в 375px вьюпорте и
     выталкивает бургер на x=596 — за экран. Правило уже было и пропало
     вместе с зачисткой соседнего переключателя языков. */
  .nav-cta .btn.ghost{display:none}
  .nav-cta{gap:8px}
  .nav-cta .btn.primary{white-space:nowrap;padding:9px 14px}
  .burger{width:44px;height:44px;flex:none}
}

/* ── Читаемость мелкого текста ───────────────────────────────────────── */
/* Второй прогон насчитал 21 элемент на 10.5px — это коды языков. */
/* 53 узла на 11.5px: поднимаем весь этот ярус до 12px. */
.auth small,.cat-foot,.tools-head em,.mrow .mn small{font-size:12px}
/* Тесный паддинг у плашки «new»: 6px при тексте 12.5px. */

/* ── Длина строки: три абзаца шли по 95–98 символов при цели 80 ─────── */
.tok-body p{max-width:68ch}
.center p{max-width:64ch;margin-left:auto;margin-right:auto}

/* ── Радиальные подсветки секций — последний «сгенерированный» приём ─── */

/* Имя модели обрезалось многоточием на 6 плитках из 10 — переносим. */
.clip-meta{flex-wrap:wrap}
.clip-meta b{overflow:visible;text-overflow:clip;white-space:normal;word-break:break-all;line-height:1.35}

/* ── Экран успеха больше не тупик ────────────────────────────────────── */

/* ── Заглушки вместо прыжка наверх ───────────────────────────────────── */
/* href="#" уносит на верх страницы: человек теряет место и не понимает,
   что произошло. В черновике честнее показать «скоро». */

/* ── Ссылка «к содержимому» для клавиатуры (103 фокусируемых узла) ───── */
.skip{position:fixed;left:12px;top:-60px;z-index:60;padding:10px 16px;border-radius:var(--r-soft);
  background:var(--blue);color:#fff;font:600 13px var(--body);transition:top .18s var(--ease)}
.skip:focus{top:12px}

/* ── Двойная волосяная линия на каждой границе секций ────────────────── */
section::after{display:none}

/* ── Первый экран на телефоне: конверсия должна попасть в 812 px ─────── */
/* Замер до правки: высота героя 1565, кнопка «Продолжить» на y=964. */
@media (max-width:600px){
  .hero{padding-top:84px;padding-bottom:36px}
  .hero h1{font-size:clamp(30px,8.4vw,38px);line-height:1.06}
  .hero .lead{font-size:15px;line-height:1.5;margin-top:12px}
  .hero-grid{gap:22px}
  .auth{padding:20px 18px}
  .auth-h{font-size:18px}
  .auth>p{font-size:13px;margin-top:6px}
  .auth .btn.wide.google{margin-top:14px}
  .or{margin:14px 0 12px}
}

/* Паддинг плашки «new» был 7px при пороге 8. */
/* «.market» в лого Plati шёл 9px — единственный текст ниже порога читаемости.
   Логотип переживёт лишние два пикселя, нечитаемая подпись — нет. */



/* ── Цели нажатия на телефоне ────────────────────────────────────────── */
/* Замер: 35 интерактивных элементов имели сторону меньше 40px. */
@media (max-width:600px){
  .tab{min-height:44px}
  .foot-legal a,.auth small a{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}
  .cur-btn{height:40px}
  /* На узком экране заголовок секции переносится, а не срезается. */
}

/* ── Студия: постер и стабильная высота плитки ───────────────────────── */
/* Пять плиток из десяти не имели фиксированной пропорции: до загрузки
   высота схлопывалась и вёрстка прыгала. */
/* При «меньше движения» остаётся постер, а не пустота. */
/* Имя модели переносится по слэшу, а не рвётся посреди слова. */
.clip-meta b{word-break:normal;overflow-wrap:anywhere}
/* Кнопки выхода из успеха были 22px. */

/* ── Цели нажатия: замер показал 22 элемента со стороной меньше 40px ──── */
@media (max-width:600px){
  .mrow .copy{min-height:44px;padding:12px 14px}
  .code-tabs button{min-height:44px}
    .m-nav a{min-height:44px;display:flex;align-items:center}
  .auth-foot a,.foot-help a{display:inline-block;min-height:44px;line-height:44px}
  .clip-copy{min-height:32px;display:inline-flex;align-items:center}
  .nl-marketplace-link{min-height:44px}
}

/* ── Заголовки секций: слово должно влезать, а не рваться по буквам ──── */
/* «Автоматизируешь?» — самое длинное слово на странице. Размер подобран
   так, чтобы оно помещалось в колонку и на 1440, и на 375. */
/* Якорь не должен прятать заголовок под фиксированную шапку. */
html{scroll-padding-top:78px}
#auth:focus{outline:none}

/* ── Главная кнопка шапки была 93×37 при собственном пороге 40 ───────── */
@media (max-width:600px){
  .nav-cta .btn.primary{min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px;display:inline-flex;align-items:center}
}

/* Последние цели меньше 40px: ширина переключателя валюты и ссылка в подвале. */
@media (max-width:600px){
  .cur-btn{width:44px}
  .foot-help a,.cat-foot a{min-height:44px;display:inline-flex;align-items:center}
}


/* ── Вход для вернувшегося клиента на телефоне ───────────────────────── */
.m-login{font-weight:600}
.m-nav .m-login{border-bottom:1px solid var(--line2);margin-bottom:4px}

/* ── Плашка «new» стала ссылкой: стрелка теперь не врёт ──────────────── */

/* ── Ложный аффорданс: 16 плиток поднимались, не будучи кликабельными ── */
.tool:hover{transform:none}

/* ── Фокус после skip-link должен быть виден ─────────────────────────── */
#auth:focus-visible{outline:2px solid var(--focus);outline-offset:6px}

/* ── Тихие заглушки: мертвы, но без крика ────────────────────────────── */
[data-quiet]{cursor:default}
[data-quiet]:hover{color:var(--dim)}

/* При «меньше движения» видео героя остаётся на месте ради постера. */

/* ── Граф маршрутизации вместо фонового видео ────────────────────────── */
/* Видео весило 3,2 МБ и не выражало ничего. Холст — единицы килобайт и
   прямая метафора продукта: множество моделей через один ключ. */
#routegraph{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bg{background:radial-gradient(ellipse 70% 60% at 72% 46%,rgba(11,106,224,.16),transparent 62%),var(--bg)}

/* ── Колонка кэша ────────────────────────────────────────────────────── */
/* Повторный контекст у кэширующих моделей стоит в разы дешевле — для агентов
   и длинных диалогов это главная статья экономии, и её надо видеть в прайсе. */
/* Колонка имени шире, «Контекст» уже: в первую кладётся id ВМЕСТЕ с постфиксом
   канала и меткой, и при 1.6fr самые длинные не помещались — либо обрезались
   многоточием ровно по постфиксу, либо метка уезжала на вторую строчку и
   строка становилась выше соседних. Во второй лежит «1M» — ей столько не надо. */
.mhead,.mrow{grid-template-columns:minmax(0,2.1fr) minmax(0,.46fr) minmax(0,.86fr) minmax(0,.86fr) minmax(0,.86fr)}
.pr-cache b{color:#7fd6ab}
.pr-cache .pr-no{color:var(--dim);font-weight:500}

/* Блок с объяснением прилипал к таблице вплотную. */
.tok{margin:0 0 26px}
.cat-bar{margin-top:6px}
@media (max-width:1000px){
  .tok{margin-bottom:20px}
}

/* ═══ Правки по шестому разбору (21/32) ═══════════════════════════════ */

/* ── Студия на тач: промт уходит ПОД подпись, а не поверх товара ─────── */
/* Замер показал перекрытие клипа на 29–84%, а чип пересекался с текстом
   промта на всех десяти плитках. Раздел прятал ровно то, что продаёт. */

/* ── Подпись про расчёт цен не проходила AA: 10,5px при 3,5:1 ────────── */
.cat-foot dd{font-size:13px;color:var(--muted)}
.cur-hint{font:500 12px var(--body);color:var(--dim)}

/* ── Абзац CTA наезжал на синий клин: 1,8:1 ──────────────────────────── */
.cta-copy p{max-width:30ch}
@media (max-width:760px){
  .cta-card::before{clip-path:polygon(0 88%,100% 72%,100% 100%,0 100%)}
  .cta-copy p{max-width:none}
  /* Принудительные переносы рассыпали заголовки на 5 и 3 рваные строки. */
  .cta-card h2 br,.studio h2 br{display:none}
}

/* ── Сообщение вместо молчания у мёртвых ссылок ──────────────────────── */
.said{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;margin:0;
  max-width:min(92vw,460px);padding:12px 18px;border-radius:var(--r-btn);
  background:var(--card);border:1px solid var(--line2);color:var(--text);
  font-size:13.5px;line-height:1.45;text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.said[hidden]{display:none}

/* ── Студия: реальные генерации, картинки и видео вперемешку ─────────── */
/* Метка типа: фото и видео в одной сетке надо различать без чтения id. */
.clip-vid .clip-meta em::before{content:"";display:inline-block;width:0;height:0;
  margin-right:6px;vertical-align:1px;border-style:solid;border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent var(--dim)}

/* ═══ Правки по седьмому разбору ═════════════════════════════════════ */

/* Подсказка курса рядом с переключателем давала 122px лишней ширины на
   iPhone: на узком уходит на свою строку, ниже 420px не нужна вовсе. */
@media (max-width:760px){
  .cur{width:100%;justify-content:flex-start}
  .cur-hint{flex-basis:100%}
}


/* Шапка зафиксирована на 64px: без запаса якорь ставит заголовок секции
   ровно под неё. Раньше в кадр попадало случайно. */
section[id],#auth{scroll-margin-top:84px}
/* Ссылка «к содержимому» была 37px по высоте — ниже тач-порога. */
.skip{min-height:44px;display:inline-flex;align-items:center}

/* ── Медиа-строка: четыре колонки вместо шести ───────────────────────── */
/* Токенная сетка навязывала медиа «Контекст», «Выход» и «Кэш» — три
   заголовка над пустотой на пяти вкладках из восьми. */
.cat-list.media .mhead,.cat-list.media .mrow{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
.mrow .unit{align-self:center;font:500 12.5px var(--body);color:var(--muted)}
.cat-list.media .pr b{font-size:14.5px}
@media (max-width:760px){
}

/* ── Плитка Студии, один связный набор правил ────────────────────────── */
/* История: промт и кнопка были детьми .clip с inset:0, а .clip — flex-колонка
   с подписью внизу. Оверлей растягивался на всю плитку, текст садился на
   прозрачный конец градиента (1,47:1), а кнопка «скопировать промт» ложилась
   ровно на первую строку промта — 137×23 px на каждой из десяти плиток.
   Теперь медиа завёрнуто в .clip-media, и оверлей накрывает ровно картинку. */
.clip{position:relative;display:flex;flex-direction:column;overflow:hidden}
.clip-media{position:relative;display:block;line-height:0}

.clip-prompt{position:absolute;inset:0;display:flex;align-items:flex-end;
  /* Верхние 44px отданы кнопке: длинный промт растёт вверх и раньше заезжал под неё. */
  padding:44px 14px 14px;
  background:linear-gradient(to top,rgba(5,8,13,.96) 0%,rgba(5,8,13,.9) 55%,rgba(5,8,13,.62) 100%);
  opacity:0;transition:opacity .22s var(--ease)}
.clip-prompt>span{font-size:13px;line-height:1.45;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clip:hover .clip-prompt,.clip:focus-visible .clip-prompt{opacity:1}

.clip-copy{position:absolute;right:10px;top:10px;z-index:2;font:600 12px var(--mono);
  letter-spacing:.02em;padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--line2);
  background:rgba(5,8,13,.88);color:var(--text);opacity:0;
  transition:opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)}
.clip:hover .clip-copy,.clip:focus-visible .clip-copy{opacity:1}
.clip.copied .clip-copy{opacity:1;color:var(--green);border-color:rgba(52,211,153,.45)}

.clip-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:10px 12px 11px;background:#0d1320}
.clip-meta b{font:600 12px var(--mono);color:var(--muted);line-height:1.35;
  overflow:visible;text-overflow:clip;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.clip-meta em{flex:none;font-style:normal;font:700 13px var(--mono);color:var(--text);
  font-variant-numeric:tabular-nums}

/* На тач наведения нет: показываем сразу, но не даём тексту съесть кадр. */

/* ── Вендор без готовой марки ────────────────────────────────────────── */
/* Половина вендоров рисовалась серым квадратом с двумя буквами и стояла в
   одном ряду с фирменными знаками — выглядело как недогруженная картинка.
   Монограмма должна читаться как решение, а не как дырка: свой контур,
   тёплый градиент и моноширинные литеры в тон остальному интерфейсу. */
.vlogo:has(b){background:linear-gradient(145deg,rgba(11,106,224,.22),rgba(255,255,255,.04));
  border-color:rgba(120,170,255,.28)}
.vlogo b{font:700 12px var(--mono);letter-spacing:.04em;color:#cfe0ff}
.vlogo.lg b{font-size:15px}
/* Видео получает постер только при появлении в кадре, поэтому пропорции
   задаём заранее — иначе коробка нулевой высоты дёргает раскладку. */

/* ── Кадр Студии показывается целиком ────────────────────────────────── */
/* Пропорция приходит из данных (--ar), а не из позиции плитки в сетке.
   object-fit тут не нужен вовсе: коробка ровно такая, как сам файл. */
.clip-media img,.clip-media video{display:block;width:100%;height:auto;
  aspect-ratio:var(--ar,16/9);
  background:linear-gradient(135deg,#131c2c,#0b1220 55%,#101826)}

/* На тач наведения нет, и раньше промт висел поверх кадра НАВСЕГДА: десять
   плиток были закрыты градиентом с тремя строками текста, а витрина
   показывала текст вместо картинок. Теперь он просто идёт под кадром. */
@media (hover:none){
  .clip-prompt{position:static;opacity:1;background:none;padding:10px 12px 0;
    display:block}
  .clip-prompt>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:12.5px;line-height:1.4;color:var(--muted);text-shadow:none}
  /* Чип «скопировать промт» лежал поверх кадра: 136×32 на кадре 164×92 —
     29% товара закрыто кнопкой. На тач уводим его под кадр, к цене. */
  .clip-copy{position:static;opacity:1;order:5;align-self:flex-start;
    margin:0 12px 12px;padding:6px 11px;font-size:11px;background:rgba(255,255,255,.06)}
}
/* Подсказка из пустого результата поиска. */
.cat-jump{font:600 12.5px var(--body);color:var(--text);background:rgba(255,255,255,.06);
  border:1px solid var(--line2);border-radius:var(--r-pill);padding:7px 13px;margin:6px 4px 0 0;
  cursor:pointer;transition:background .18s var(--ease), border-color .18s var(--ease)}
.cat-jump:hover{background:rgba(11,106,224,.22);border-color:rgba(120,170,255,.4)}

/* Бейджи соцкнопок давали 3,80:1 и 3,85:1 при пороге 4,5 — подложка была
   полупрозрачной поверх и без того яркой кнопки. Делаем её тёмной. */
.ya{background:rgba(0,0,0,.34);color:#fff}

/* Текущий раздел в шапке. */
.menu a.here,.m-nav a.here{color:var(--text)}
.menu a.here{position:relative}
.menu a.here::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:var(--r-hair);background:var(--blue)}

/* Дата рядом с курсом: без неё «89 ₽» читается как «может быть любым». */
.cur-rate i{font-style:normal;color:var(--dim);font-size:12px;margin-left:2px}

/* Скрытая прокрутка в каталоге: 111 и 172 px содержимого уезжали без намёка. */
.cat-vendors,.cat-list{position:relative}
.cat-vendors::after,.cat-list::after{content:"";position:sticky;bottom:0;display:block;height:28px;
  margin-top:-28px;pointer-events:none;
  background:linear-gradient(to top,var(--card),rgba(15,22,35,0))}

/* Кнопка отправки при «меньше движения»: спиннер замирал, а подпись была
   спрятана — 900 мс пустой кнопки. Показываем слово вместо вращения. */
@media (prefers-reduced-motion:reduce){
  .auth.sending [data-submit]{color:var(--text)}
  .auth.sending [data-submit]::after{display:none}
}
/* Вкладка, в которой под текущий запрос ничего нет. */
.tab.dim:not([aria-selected="true"]){opacity:.5}

/* Последние три цели нажатия ниже 40px на телефоне (замер на 375). */
@media (max-width:600px){
  .logo{min-width:44px}
  .btn.pill.sm{min-height:44px;padding-top:11px;padding-bottom:11px}
  .code-foot a{min-height:44px;display:inline-flex;align-items:center}
}

/* «Меньше движения» сбрасывало длительность, но не задержку: строки таблицы
   держались на opacity:0 всю лесенку — до секунды у крупного вендора. */
@media (prefers-reduced-motion:reduce){
  .mrow{animation-delay:0s!important}
}

/* ── Первый экран на телефоне ────────────────────────────────────────── */
/* Замер на 375×812: кнопка «Продолжить» стояла на 711 px при видимой
   области Safari ≈635 — целиком за сгибом. Полностью поднять её нельзя,
   не выкинув заголовок или форму, но лишний воздух убрать можно:
   поле ввода и три способа входа уходят выше сгиба, а кнопка оказывается
   в двух сантиметрах от него, а не в пяти. */
@media (max-width:600px){
  :root{--sec:64px}
  .hero{padding-top:68px}
  .hero-copy .lead{margin-top:8px;margin-bottom:20px}
  .auth{padding-top:16px;padding-bottom:16px}
  .auth-h{margin-bottom:2px}
  .auth small{margin-top:10px;margin-bottom:8px}
}

/* ── Почему дешевле: строки счёта, а не три одинаковые карточки ──────── */
/* Планка прямо запрещает «карточка = иконка + заголовок + текст» как
   структуру страницы. Здесь она вдобавок делала самый важный довод самым
   слабым на вид. Теперь это разворот счёта: статья слева, объяснение
   справа, между ними линейка — ровно так читают то, за что платят. */
.why-list{margin:0;border-top:1px solid var(--line2)}
.why-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,13fr);gap:28px;
  align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.why-row dt{font:700 18px/1.25 var(--head);letter-spacing:-.015em;color:var(--text)}
.why-row dd{margin:0;color:var(--muted);font-size:15px;line-height:1.66;max-width:62ch}
.why-row dd b{color:var(--text);font-family:var(--mono);font-weight:600;
  font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .why-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .why-row dt{font-size:16.5px}
  .why-row dd{font-size:14.5px}
}

/* ── Итог на CTA: строка счёта вместо «большое число + подпись» ──────── */
@media (max-width:760px){
    }

/* ── Суммы — дисплейная гарнитура страницы ───────────────────────────── */
/* В счёте читают суммы, а у нас цена была набрана 13px наравне с подписью
   «вход / 1M» и читалась как сноска. Это главный аргумент прайса: даём ему
   размер и вес, а единицу оставляем мелкой и приглушённой — так глаз берёт
   число, а не строку целиком. */
.mrow .pr b{font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.mrow .pr i{margin-top:1px}
.cat-list.media .pr b{font-size:16.5px}
.cat-main-head span b{font-size:16px;font-weight:700}
/* Цена генерации на плитке Студии — то же правило. */
.clip-meta em{font-size:14.5px}
@media (max-width:1000px){
  .mrow .pr b{font-size:15px}
}

/* ── Кольцо фокуса сильнее собственных outline:none у полей ──────────── */
/* Общее правило проигрывало по специфичности двум инпутам: .auth input
   [type=email] (0,2,1) и #cat-search (1,0,0). Замер: 58 остановок Tab из 61
   давали кольцо 7,96:1, эти две — ничего, только смена рамки на 1,06:1. */
.auth input[type=email]:focus-visible,
#cat-search:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ── Подписи в итоговой строке CTA лежат на синем клине: было 3,92:1 ─── */

/* ═══ Язык поверхностей: полки и линейки, а не карточки ══════════════ */
/* Направление было объявлено и применено на двух поверхностях из восьми —
   страница заговорила на двух языках сразу, и это хуже, чем один карточный.
   Закон простой: крупная поверхность — это полка, очерченная волосяной
   линейкой, без радиуса в палец, без градиента и без цветного ореола.
   Радиус остаётся только там, где он функционален: у пилюль и у кадров. */
.auth,.cat-panel,.code-card,.tools,.cta-card,.tok,.nl-marketplace-card{
  border-radius:var(--r-flat)}
.auth{background:rgba(6,9,15,.92);border-color:var(--line2)}
.cat-panel,.tok{background:var(--card)}
.code-card{background:rgba(6,9,15,.92);box-shadow:none}
.tools{background:transparent}
.clip{border-radius:var(--r-xs)}
.clip-media img,.clip-media video{border-radius:0}

/* Площадки: блок был перенесён с прода целиком и нёс свою палитру, свои
   компоненты и свою физику наведения. Приводим к общему закону. */
.nl-marketplace-card{background:rgba(255,255,255,.03);border-color:var(--line);box-shadow:none;
  transition:border-color .32s var(--ease),background .32s var(--ease)}
.nl-marketplace-card:hover{transform:none;background:rgba(255,255,255,.055);
  border-color:var(--line2);box-shadow:none}
.nl-marketplace-ggsel:hover,.nl-marketplace-plati:hover{box-shadow:none}
/* Самая крупная цифра страницы досталась счётчику чужих продаж — 40px
   заголовочной гарнитурой. Дисплейный размер принадлежит суммам. */
.nl-marketplace-stats strong{font:700 22px/1.1 var(--mono);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--text)}

/* Сумма «от N ₽» в шапке вендора — то самое число, ради которого открывают
   прайс. Ему и достаётся заголовочная гарнитура. */
.cat-main-head span b{font:700 22px/1 var(--head);letter-spacing:-.03em;color:var(--text)}

/* Раскрывашка про токены получала браузерное кольцо: общее правило
   перечисляет a, button, input и [tabindex], но не summary. */
summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Единственное состояние, где главная кнопка формы говорит «не работает»,
   было без оформления вовсе: текст наследовал 14px и рвал кнопку на две
   строки, карточка прыгала на 12px, фокус улетал в body. */
.soc-wait{font:600 12px/1.2 var(--body);white-space:nowrap;color:var(--text)}

/* ── Цели нажатия зависят от способа ввода, а не от ширины ───────────── */
/* Размеры стояли в блоке max-width:600px, и планшет на 768 получал цели
   по 36–37px: пальцу всё равно, какой ширины экран. */
@media (hover:none){
  .menu a,.m-nav a,.foot a,.foot-legal a,.auth small a,.code-foot a{
    min-height:44px;display:inline-flex;align-items:center}
  .logo,.foot-logo{min-width:44px;min-height:44px}
  .btn.pill.sm,.tab,#code-tabs button{min-height:44px}
  .cur-btn{width:44px;height:44px;min-height:44px;padding:0}
  #cat-search{min-height:44px}
  .nav-cta .btn,.m-nav a{min-width:44px}
  .copy{min-height:44px;padding-left:12px;padding-right:12px}
  .clip-copy{min-height:44px;display:inline-flex;align-items:center}
  .vbtn{min-height:44px}
  .cat-jump{min-height:44px}
}

/* ═══ Поведение документа: так набирают счёт ════════════════════════ */
/* Прошлый разбор сформулировал точно: счёт узнают не по радиусу коробки,
   а по тому, как внутри неё выключены цифры. Замер показал, что ни одного
   признака не было — правые края сумм гуляли на 19px, единица повторялась
   тридцать раз на экран, заголовки шли шестью кеглями. */

/* 1. Суммы выключены вправо, разряд под разрядом. */
.mrow .pr,.mhead span:nth-child(n+3){text-align:right;justify-self:stretch}
.mrow .pr b{display:block;text-align:right;font-variant-numeric:tabular-nums}
.mrow .ctx{text-align:right}
.mhead span:nth-child(2){text-align:right}

/* 2. Единица — один раз, в шапке графы, мелко и приглушённо. */
.mhead span i{display:block;font-style:normal;font-size:12px;letter-spacing:.02em;
  color:var(--dim);margin-top:2px;text-transform:none}
.mhead{align-items:end}

/* Карточная раскладка на узком: там графы нет, поэтому единица возвращается
   в строку — но подписью колонки, а не хвостом каждой суммы. */
@media (max-width:1000px){
}

/* Выписка на первом экране: строка счёта, а не карточка со статистикой. */
.hero-price{margin:26px 0 0;max-width:470px;border-top:1px solid var(--line2)}
.hp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.hp-row dt{font:500 13.5px var(--body);color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-row dd{margin:0;text-align:right}
.hp-row b{display:block;font:700 16px var(--mono);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-row i{display:block;font-style:normal;font-size:12px;color:var(--dim);
  letter-spacing:.02em;margin-top:1px}
@media (max-width:600px){
  .hero-price{max-width:none;margin-top:20px}
  .hp-row dt{font-size:13px}
  .hp-row b{font-size:15px}
}

/* ── Три провала на денежных контролах ───────────────────────────────── */
/* Сообщение об ошибке рендерилось БАЙТ В БАЙТ как нейтральная подсказка:
   .field-err (0-1-0) проигрывало .auth>p (0-1-1). Это тот же класс промаха,
   который я в прошлый заход чинил для кольца фокуса на этих же двух полях —
   починил кольцо и не проверил остальную форму тем же способом. */
.auth .field-err{color:#ff9c88;font-weight:600}

/* Плейсхолдер — единственная видимая подпись главного поля страницы, и он
   оставался браузерным дефолтом: 3,96:1 у почты и 3,57:1 у поиска. */
.auth input[type=email]::placeholder,#cat-search::placeholder{color:var(--muted);opacity:1}

/* Кольцо фокуса на последней кнопке страницы лежит целиком на синем клине:
   --focus на --blue даёт 2,01:1 при норме 3. Тёмный внешний контур
   отделяет кольцо от подложки независимо от её цвета. */
.btn.go:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px rgba(5,8,13,.55)}

/* Глубину сняли с двух близнецов из трёх: .auth осталась с тенью и белой
   внутренней волосинкой — каноничный стеклянный блик на поверхности,
   которую мы объявили полкой. */

/* Оговорка про курс — единственная на странице — пропадала ниже 420px. */
@media (max-width:420px){ .cur-hint{display:block;flex-basis:100%;font-size:12px} }

/* Метка новизны стоит там, где её можно проверить, — в строке модели. */
.mn-new{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:var(--r-pill);
  background:rgba(255,122,0,.16);border:1px solid rgba(255,122,0,.4);
  color:#ffb166;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;
  vertical-align:2px}

/* Курсор и схема — последние браузерные поверхности, до которых не дошли. */
:root{color-scheme:dark}
input,textarea,[contenteditable]{caret-color:var(--blue)}
/* Эмбеддинги: четыре графы вместо шести — платы за выход у них нет. */
.cat-list.only-in .mhead,.cat-list.only-in .mrow{grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr) minmax(0,.95fr)}
@media (max-width:1000px){
}

/* ── Выписка героя в колоночной раскладке ────────────────────────────── */
/* На 375×667 она занимала 175px между заголовком и формой и уносила
   кнопку «Продолжить» на 150px за сгиб. Ниже 1000px она идёт ПОСЛЕ формы,
   а над сгибом остаётся одна строка: сумма на первом экране всё равно есть. */
@media (max-width:1000px){
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{order:1}
  .hero-price{order:2;margin:18px 0 0;max-width:none}
  .auth{order:3}
  .hero-points{order:4}
  .hero-price .hp-row:nth-child(n+2){display:none}
}
@media (min-width:1001px){
  .hero-grid{grid-template-areas:"copy auth" "price auth" "points auth";
    grid-template-columns:1.15fr .85fr;grid-template-rows:auto auto 1fr}
  .hero-copy{grid-area:copy}
  .hero-price{grid-area:price}
  .hero-points{grid-area:points}
  .auth{grid-area:auth}
}
/* Стрелка перехода — рисованная, как шеврон вендора и метка видео. */
.ico-go{width:15px;height:15px;flex:none;margin-left:2px}

/* Итог CTA — строка счёта предложением, а не три метрики в ряд. */
.cta-total{margin:0 0 18px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.6;
  text-align:right;max-width:34ch;margin-left:auto}
.cta-total b{font:700 17px var(--mono);color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:760px){ .cta-total{text-align:left;margin-left:0} }

/* ── Документы ───────────────────────────────────────────────────────── */
/* Названы поимённо и честно помечены: покупатель перед оплатой картой
   ищет именно эти слова, а общая фраза «готовятся» поиск не закрывает. */
.legal-list{list-style:none;margin:0 0 10px;padding:0;display:flex;gap:8px 22px;flex-wrap:wrap}
.legal-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
/* Это список ссылок, а не ссылки внутри предложения: исключение WCAG 2.5.8
   на них не распространяется, и 19,5px по высоте их не хватало. */
.legal-list a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;
  text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line2)}
.legal-list a:hover{text-decoration-color:currentColor}
.legal-soon{font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px 8px}
@media (max-width:600px){ .legal-list{gap:8px 16px} }

/* ── Сравнение с официальной ценой ───────────────────────────────────── */
/* Язык ценника внутри языка счёта: сколько у них, сколько у нас. Только
   для моделей, чей прайс мы проверили на странице самого вендора. */
/* Обратно 78: метка на строке id осталась одна, переносить нечего. Запас в
   84px был нужен, пока рядом с ней стояла вторая плашка. */
.mrow{min-height:78px}
.mrow .pr{display:flex;flex-direction:column;justify-content:center}
.mrow .pr s{display:block;margin-top:2px;min-height:15px;font:500 12px var(--mono);
  color:var(--dim);text-decoration-thickness:1px;text-underline-offset:2px;
  font-variant-numeric:tabular-nums}
/* Строка без проверенного прайса держит ту же высоту, что и со сравнением. */
.mrow .pr b{min-height:19px}
/* Кратность у зачёркнутой цены. Не плашка: она стояла почти на каждой строке
   и переставала что-либо выделять, а рядом с длинным id ещё и переносилась
   на вторую строчку через раз. Здесь она читается вместе с числом, которое
   её и порождает. */
.pr-k{font-style:normal;margin-left:6px;font:700 11px var(--mono);color:#7fd6ab;
  letter-spacing:.02em;text-decoration:none;display:inline-block}
.mrow .pr s{text-decoration-color:rgba(255,255,255,.35)}
/* Полка с пояснением метки. Была залитой плашкой с цветной полосой слева —
   той самой «карточкой с акцентным бортиком», которая противоречит собственному
   направлению страницы: тут разделяют линейки, а не заливки. Отделение нужно
   (владелец просил не сливать её с текстом), но делается тем же средством, что
   и везде: волосяная линейка сверху и снизу. Цвет несёт сама метка. */
.cat-note{display:flex;align-items:flex-start;gap:12px;margin:20px 0 0;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat-note .mn-stable{margin-left:0;flex:none;margin-top:1px}
.cat-note span{font:500 13px/1.55 var(--body);color:var(--muted)}
/* Выделенный канал. Синий — цвет акцента страницы, и он же единственный,
   которым на этой странице ничего больше не помечено: зелёный уже занят
   выгодой, поэтому «дешевле» и «стабильный» не сливаются в одну мысль. */
.mn-stable{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--r-pill);
  background:rgba(90,166,255,.14);border:1px solid rgba(90,166,255,.42);
  color:#8fc0ff;font:700 11px var(--body);letter-spacing:.02em;white-space:nowrap}
/* Окантовка строки — слева, а не рамкой по кругу: рамка внутри таблицы
   разрывает разлиновку и строка перестаёт читаться как строка. */
.mrow.is-stable{background:linear-gradient(90deg,rgba(90,166,255,.07),transparent 42%);
  box-shadow:inset 2px 0 0 rgba(90,166,255,.75)}
.mrow .mn small{display:flex;align-items:center;gap:0;min-width:0}
.mrow .mn{min-width:0}
/* Идентификатор обрезался многоточием с КОНЦА — то есть ровно там, где стоит
   постфикс канала, единственное, чем строка отличается от соседней. А id тут
   не украшение: его копируют в свой код. Поэтому строка с метками переносится,
   а не обрезается; многоточие остаётся только для случая, когда и переносить
   некуда (очень узкий экран). */
.mrow .mn small{flex-wrap:wrap;row-gap:4px}
.mrow .mn small>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:1000px){ .mrow .pr s{display:inline;margin-left:8px} }
/* Пустая вторая строка выравнивает высоту, но не рисует ничего. */
.mrow .pr s.pr-none{text-decoration:none}

/* ── Вендор без публичного знака ─────────────────────────────────────── */
/* Пяти маркам (Kling, Topaz, Recraft, HappyHorse, Keenable) открытого
   вектора не существует, а рисовать чужой товарный знак «по мотивам»
   хуже, чем честная монограмма. Значит монограмма должна выглядеть
   решением: своя геометрия, свой контур, литеры в тон интерфейсу. */
.vlogo:has(b){background:
  radial-gradient(120% 120% at 30% 0%, rgba(11,106,224,.32), rgba(255,255,255,.04));
  border-color:rgba(120,170,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.vlogo b{font:700 12px var(--mono);letter-spacing:.02em;color:#d6e4ff}
.vlogo.lg b{font-size:15px}

/* Способ входа, который ещё не подключён, говорит об этом словом. */
/* Контраст «скоро» был 4,22 при 11px — ниже порога. Виновата не сама метка,
   а blanket-opacity на кнопке: прозрачность composite-ит ВЕСЬ поддерев, и
   подпись тускнела вместе с фоном. Гасим кнопку цветом, а не прозрачностью,
   тогда метка сохраняет собственный контраст. */
.btn-soon{margin-left:8px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(0,0,0,.34);
  font:700 11px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.btn[disabled]{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03);cursor:not-allowed}
.btn[disabled] svg,.btn[disabled] .ya{opacity:.6}
.btn[disabled]:hover{transform:none}

/* ── Таблица остаётся таблицей ───────────────────────────────────────── */
/* Блочный вид на узких экранах убран: прайс читают колонками, а рассыпанная
   в карточки таблица перестаёт быть таблицей. На узком она прокручивается
   вбок внутри своей панели — колонки при этом держат минимальную ширину. */
.cat-list{overflow:auto}
/* 790, а не 680: при 680 колонка имени получала ~250px, и самые длинные
   идентификаторы обрезались многоточием ровно по постфиксу канала — то есть
   по единственному, что отличает строку. Таблица тут и так прокручивается
   вбок, лишние 110px стоят чуть большей прокрутки, а не поломки. */
.cat-list .mhead,.cat-list .mrow{min-width:790px}
.cat-list.media .mhead,.cat-list.media .mrow{min-width:520px}
/* У эмбеддингов три колонки, поэтому раскладка уже — но и идентификаторы там
   самые длинные на странице: «sentence-transformers/multi-qa-mpnet-base-dot-v1»
   это 48 символов. При 560px их резало посередине имени варианта. */
.cat-list.only-in .mhead,.cat-list.only-in .mrow{min-width:800px}

/* Горизонтальная прокрутка таблицы должна жить ВНУТРИ панели, а не
   выталкивать страницу: grid-ребёнок по умолчанию не уже своего
   содержимого, пока ему явно не разрешить сжиматься. */
.cat-panel,.cat-main,.cat-list{min-width:0}
.cat-main{overflow:hidden}

/* Кнопки входа с меткой «скоро» не помещались парой в 375px. */
/* Пара кнопок входа не помещалась в карточку 420px: подпись и метка
   «скоро» запрещают перенос, и flex не мог их сжать — Телеграм уезжал
   за край на 35px. Раз обе сейчас неактивны, ставим их в колонку, как
   и Google выше: так они и читаются ровнее. */
.auth-row{flex-direction:column}
.auth-row .btn{width:100%;min-width:0;justify-content:flex-start;padding-left:16px}
.auth-row .btn-soon{margin-left:auto}

/* Длинное имя модели переносилось на вторую строку и делало строку выше
   соседних на 3px. В прайсе высота строки обязана быть одна. */
.mrow .mn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .mn small span{flex:0 1 auto}

/* Способы входа в состоянии «скоро» выглядят одинаково приглушёнными и
   не переносят подпись на вторую строку. */
.auth-row .btn[disabled]{background:rgba(255,255,255,.05);color:var(--muted);
  border:1px solid var(--line2);white-space:nowrap}
.auth-row .btn[disabled] .ya,.auth-row .btn[disabled] svg{opacity:.6}
.auth-row .btn[disabled] .btn-soon{background:rgba(255,255,255,.10);color:var(--text)}

/* ── Навигация ниже 1000px ───────────────────────────────────────────── */
/* .burger и .m-nav объявлены display:none базово, а правила, которые их
   возвращали, унесло моей же зачисткой мёртвых селекторов. В итоге на
   всём диапазоне до 1000px (включая ноутбук 960) страница высотой почти
   десять тысяч пикселей оставалась вообще без меню. */
@media (max-width:1000px){
  .burger{display:inline-grid}
  .m-nav:not([hidden]){display:block}
}

/* ── Липкая шапка прайса ─────────────────────────────────────────────── */
/* Она объявлена sticky, но не липла: overflow-x:hidden, который я поставил
   на .cat-main и .cat-panel ради горизонтальной прокрутки, делает предков
   скролл-контейнерами и убивает sticky. Плюс top:0 прятал её под
   фиксированную шапку сайта. Прокрутку оставляем только там, где она нужна. */
.cat-main{overflow:visible}
.cat-panel{overflow:hidden}
.mhead{top:0;z-index:5}

/* Таблица прокручивается вбок — значит она должна быть достижима с
   клавиатуры: после снятия кнопки «копировать» внутри не осталось ни
   одного фокусируемого элемента, и до цен нельзя было доехать вовсе. */
.cat-list:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* Плитка с 3D-моделью в Студии.
   Она НЕ кнопка, в отличие от остальных: клик по ней вертит модель, а не
   копирует промт. Поэтому промт стоит подписью, а не всплывает по наведению. */
.clip-3d{cursor:grab}
.clip-3d model-viewer{display:block;width:100%;aspect-ratio:var(--ar,1);background:#0b0b0d;--poster-color:transparent}
.clip-3d-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  padding:7px 14px;border-radius:999px;background:rgba(10,12,18,.72);backdrop-filter:blur(6px);
  color:#eef2f7;font-size:12.5px;font-weight:600;pointer-events:none;white-space:nowrap}
.clip-3d-p{display:block;padding:9px 2px 0;color:var(--muted,#9aa5b8);font-size:12.5px;line-height:1.45}

/* Картинка-постер до клика: занимает плитку ровно как модель, чтобы подмена
   не дёргала вёрстку. */
.clip-3d-poster{display:block;width:100%;aspect-ratio:var(--ar,1);object-fit:cover}

/* Высоту задаёт обёртка, а не содержимое: иначе при подмене картинки на модель
   плитка меняла высоту на два десятка пикселей и вёрстка дёргалась. */
.clip-3d .clip-media{display:block;position:relative;aspect-ratio:var(--ar,1)}
.clip-3d .clip-media>model-viewer,.clip-3d .clip-media>.clip-3d-poster{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}