/* Оффер 27.08: калькулятор «Как заработать», кривая пути, пакеты роликов.
   Мир «ночь и янтарь»: те же токены, что у сайта и приложения (--fon, --sloy, --gran, --akcent, --mono). */
.chipy-vybor{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chipy-vybor button{background:var(--fon);border:1px solid var(--gran);color:var(--tekst2);font:inherit;font-weight:600;font-size:var(--kegl-pilyuli,13px);min-height:var(--knopka-vys,36px);padding:0 13px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.chipy-vybor button:hover{border-color:#43352A;color:var(--tekst)}
.chipy-vybor button[aria-pressed=true]{background:var(--akcent);border-color:var(--akcent);color:#1A0E04}
.chipy-vybor button:focus-visible,.chipy-vybor input:focus-visible,.paket-knopka a:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.chipy-vybor button:disabled{opacity:.45;cursor:default}
.chipy-vybor input{width:12ch;min-width:0;background:var(--fon);border:1px solid var(--gran);border-radius:999px;color:var(--tekst);font:inherit;font-family:var(--mono);font-size:var(--kegl-tekst);padding:8px 12px;font-variant-numeric:tabular-nums}
.chipy-vybor input::placeholder{color:var(--tekst2)}
.kalk-porog{font-size:var(--kegl-podzag,13.5px);color:var(--tekst2);margin:0;line-height:1.5}
.kalk-primech{font-size:var(--kegl-stroki);color:var(--tekst2);margin:0;line-height:1.5;max-width:72ch}

.kalk-krivaya{background:var(--fon);border:1px solid var(--gran);border-radius:16px;padding:10px 12px 6px;overflow:hidden}
.krivaya{display:block;width:100%;height:auto;font-family:var(--mono);font-variant-numeric:tabular-nums}
.krivaya .liniya{fill:none;stroke:var(--akcent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.krivaya .veha line{stroke:var(--gran);stroke-dasharray:3 5}
.krivaya .veha circle{fill:var(--fon);stroke:var(--tekst2);stroke-width:1.7}
.krivaya .veha text{fill:var(--tekst2);font-size:11px}
.krivaya .veha .pod{fill:var(--tekst);font-size:10.5px}
.krivaya .razbor{stroke:var(--tekst2);stroke-width:1.7}
.krivaya .os{fill:var(--tekst2);font-size:10.5px}
.krivaya .tut line{stroke:var(--rost);stroke-width:1.7;stroke-dasharray:4 4}
.krivaya .tut circle{fill:var(--rost);stroke:var(--fon);stroke-width:1.7}
.krivaya .tut text{fill:var(--rost);font-size:12px;font-weight:600}

.pakety{display:grid;gap:16px;margin-top:26px}
@media (min-width:900px){.pakety{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
.paket{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--sloy);border:1px solid var(--gran);border-radius:20px;padding:26px 24px;min-width:0;transition:border-color .15s,transform .2s}
.paket:hover{border-color:#43352A}
.paket[data-top]{border-color:var(--akcent);box-shadow:0 18px 44px -24px rgba(255,138,43,.45)}
.paket[data-top]:hover{border-color:var(--akcent);transform:translateY(-2px)}
.paket[data-moy]{border-color:var(--rost)}
.paket[data-metka]::after{content:attr(data-metka);position:absolute;top:-11px;right:18px;background:var(--akcent);color:#1A0E04;font-size:var(--kegl-podpisi);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.paket[data-moy][data-metka]::after{background:var(--rost)}
.paket header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.paket h3{font-size:var(--kegl-imeni);font-weight:800;letter-spacing:-0.02em;margin:0}
.paket-kto{font-size:var(--kegl-stroki);color:var(--tekst2);white-space:nowrap}
.paket-rolikov{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.paket-rolikov b{font-family:var(--mono);font-size:var(--kegl-cifry);font-weight:600;letter-spacing:-0.04em;line-height:1}
.paket-rolikov span{color:var(--tekst2);font-size:var(--kegl-podpisi,12px)}
.paket-cena{font-family:var(--mono);font-size:var(--kegl-cifry);font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.paket-cena small{display:block;font-family:var(--shrift-tekst,var(--shrift));font-size:var(--kegl-stroki);font-weight:400;color:var(--tekst2);letter-spacing:0;margin-top:4px}
.paket ul{list-style:none;margin:0;padding:0;flex:1}
.paket li{padding:7px 0;border-top:1px solid var(--gran);font-size:var(--kegl-stroki,13px);line-height:1.45;text-wrap:pretty}
.paket li:first-child{border-top:0}
.paket-mest{margin:0;font-size:var(--kegl-stroki);color:var(--akcent)}
.paket-knopka{margin-top:auto}
/* Канон 05.09 (Кай): главная кнопка — не заливка, а прозрачная с неоновым кантом.
   Фолбэк у --neon-kray — как у --trevoga выше: страница может не знать переменную. */
.paket-knopka a,.paket-knopka .knopka{display:inline-flex;align-items:center;justify-content:center;min-height:var(--knopka-vys,36px);box-sizing:border-box;margin:0 auto;background:var(--akcent);color:var(--na-akcente);border:1px solid var(--akcent);box-shadow:var(--neon-glav, 0 0 12px rgba(255,138,43,.45));font-weight:700;text-decoration:none;padding:0 18px;border-radius:999px;font-size:var(--knopka-shrift,13px);transition:filter .15s}
.paket-knopka a:hover{filter:brightness(1.18)}
.paket-knopka .skoro,.paket-moy{display:block;text-align:center;color:var(--tekst2);font-size:var(--kegl-podzag,13.5px);padding:10px 0}
.paket-moy{color:var(--rost);font-weight:600}

/* ---- раскладка А: цена первой ---- */
/* Число карточек задаёт лестница (04.09 их стало четыре), а не вёрстка: колонки
   набираются сами по ширине — иначе четвёртый пакет уезжал бы во вторую строку из одной карточки. */
.polosa-paketov{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
@media (min-width:760px){.polosa-paketov{gap:14px}}
.pk{background:var(--sloy);border:1px solid var(--gran);border-radius:16px;padding:14px 10px;min-width:0;cursor:pointer;transition:border-color .15s,transform .2s;display:flex;flex-direction:column;gap:6px}
@media (min-width:760px){.pk{padding:20px 18px;gap:8px}}
.pk:hover{border-color:#43352A}
.pk[data-top]{border-color:var(--akcent);box-shadow:0 18px 44px -24px rgba(255,138,43,.45)}
.pk[data-vybran]{background:#1A1512;border-color:var(--akcent)}
.pk[data-moy]{border-color:var(--rost)}
.pk h3{font-size:var(--kegl-stroki);font-weight:800;letter-spacing:.02em;margin:0;text-transform:uppercase}
@media (min-width:760px){.pk h3{font-size:var(--kegl-zagolovka)}}
.pk-n{font-variant-numeric:tabular-nums;color:var(--tekst2);font-size:var(--kegl-podpisi)}
.pk-n b{font-family:var(--mono);font-size:var(--kegl-cifry);font-weight:600;letter-spacing:-0.04em;color:var(--tekst);line-height:1}
@media (min-width:760px){.pk-n b{font-size:var(--kegl-cifry)}}
.pk-cena{font-family:var(--mono);font-size:var(--kegl-zagolovka);font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 320px: «160 000 ₽» в 17px шире трети экрана — полоса давала документу 6px горизонтали */
/* «ПЕРСОНАЛЬНО» — 11 капс-букв: в треть 320-экрана влезает только 10px */
@media (max-width:379px){.pk{padding:12px 6px}.pk-cena{font-size:var(--kegl-stroki)}.pk h3{font-size:var(--kegl-podpisi);letter-spacing:.01em}}
@media (min-width:760px){.pk-cena{font-size:var(--kegl-cifry)}}
.pk-pod{font-size:var(--kegl-podpisi);color:var(--tekst2);line-height:1.35}
@media (min-width:760px){.pk-pod{font-size:var(--kegl-stroki)}}
.pk-knopka{margin-top:auto}
.pk-knopka a{display:inline-flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;background:transparent;color:var(--akcent);border:1px solid transparent;box-shadow:var(--neon-kray, 0 0 0 1px var(--akcent), 0 0 14px rgba(255,138,43,.34), 0 0 38px rgba(255,138,43,.14));font-weight:700;text-decoration:none;padding:9px 6px;border-radius:999px;font-size:var(--kegl-podpisi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:760px){.pk-knopka a{padding:12px 14px;font-size:var(--kegl-tekst)}}
.raschet-stroka{display:grid;gap:10px;margin-top:18px;background:var(--sloy);border:1px solid var(--gran);border-radius:16px;padding:16px}
.fraza{margin:0;font-size:var(--kegl-podzag,13.5px);line-height:1.55;text-wrap:pretty}
.fraza b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--akcent)}
.fraza small{display:block;color:var(--tekst2);font-size:var(--kegl-stroki);margin-top:4px}
.fraza a{color:var(--tekst);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#43352A}
.put-blok{margin-top:18px}
.put-zag{font-size:var(--kegl-zagolovka,16px);font-weight:700;margin:0 0 10px;color:var(--tekst2)}
.lestnica{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:shag}
.lestnica li{position:relative;padding:10px 0 10px 34px;border-top:1px solid var(--gran);display:grid;gap:3px;counter-increment:shag}
.lestnica li:first-child{border-top:0}
.lestnica li::before{content:counter(shag);position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;border:1px solid var(--gran);display:grid;place-items:center;font-family:var(--mono);font-size:var(--kegl-podpisi);color:var(--tekst2);background:var(--fon)}
.lestnica li[data-tut]::before{background:var(--rost);border-color:var(--rost);color:#04140A}
.lestnica li b{font-size:var(--kegl-zagolovka,16px)}
.lestnica li span{font-size:var(--kegl-podzag);color:var(--tekst2);line-height:1.45;text-wrap:pretty}
.lestnica li i{font-style:normal;font-family:var(--mono);font-size:var(--kegl-podpisi);color:var(--akcent);font-variant-numeric:tabular-nums}
.lestnica li em{font-style:normal;color:var(--rost);font-size:var(--kegl-podpisi);font-weight:600}
/* Тексты 28.08 (нить Шульгина): фраза-итог пакета, честность над калькулятором, спонсоры одной строкой */
.pk-itog{margin:2px 0 0;font-size:var(--kegl-podpisi);color:var(--tekst2);line-height:1.45;text-wrap:pretty}
@media (min-width:760px){.pk-itog{font-size:var(--kegl-podzag)}}
.of-chestno{margin:0;font-size:var(--kegl-podzag,13.5px);line-height:1.55;color:var(--tekst);max-width:62ch;text-wrap:pretty}
.of-sponsory{margin:0;font-size:var(--kegl-podzag,13.5px);line-height:1.55;color:var(--tekst2);max-width:62ch;text-wrap:pretty}
.sostav{margin-top:18px}
.sostav summary{cursor:pointer;color:var(--tekst2);font-size:var(--kegl-pilyuli,13px);min-height:var(--knopka-vys,36px);display:flex;align-items:center}
.sostav summary:hover{color:var(--tekst)}
.sostav .pakety{margin-top:12px}

.polosa-liniya{position:relative;height:38px;margin:0 12px}
.polosa-liniya::before{content:"";position:absolute;left:0;right:0;top:18px;height:2px;background:var(--gran)}
.polosa-liniya i{position:absolute;top:13px;width:16px;height:16px;margin-left:-6px;border-radius:50%;background:var(--fon);border:2px solid var(--tekst2)}
.polosa-liniya i[data-proyden]{background:var(--rost);border-color:var(--rost)}
.polosa-liniya b{position:absolute;top:-6px;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:var(--kegl-podpisi);color:var(--rost);font-weight:600}
.polosa-podpisi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:4px}
.polosa-podpisi>div{min-width:0;left:auto !important;display:grid;gap:3px}
.polosa-podpisi b{font-size:var(--kegl-stroki)}
.polosa-podpisi span{font-size:var(--kegl-podpisi);color:var(--tekst2);line-height:1.4;text-wrap:pretty}
.polosa-podpisi i{font-style:normal;font-family:var(--mono);font-size:var(--kegl-podpisi);color:var(--akcent);font-variant-numeric:tabular-nums}

.pk-figura svg{width:44px;height:30px;fill:none;stroke:var(--akcent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:760px){.pk-figura svg{width:56px;height:38px}}

/* ============ Окно открытия: пакеты в структуре эталона Кая (Higgsfield, 02.09 21:03) ========
   Мир наш — «ночь и янтарь» (DESIGN-REF §6): чёрная ткань, один тлеющий янтарь, свет приходит
   сбоку-сверху смещённой тенью, а не ореолом из центра. Эталон дал СТРУКТУРУ (бейдж-полоса,
   радио, зачёркнутая цена, две строки состава, «Подробнее», низ, липкая кнопка), но не цвета:
   у Higgsfield два неона и стекло, здесь ни одного стеклянного слоя и ни одного радиального
   свечения. Приём-характер ровно один — кант выбранной карточки разгорается. */

.ok{display:grid;gap:14px;position:relative}
.ok[hidden]{display:none}

/* Вариант B: акцентная лента «Открытие» во всю ширину блока */
.ok-lenta{display:flex;align-items:center;gap:10px;background:var(--akcent);color:#1A0E04;
  border-radius:12px;padding:9px 14px;font-family:var(--shrift);letter-spacing:-0.01em}
.ok-lenta b{font-size:var(--kegl-podzag,13.5px);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.ok-lenta span{font-family:var(--mono);font-size:var(--kegl-imeni,19px);font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto}
.ok-lenta i{font-style:normal;font-size:var(--kegl-stroki);font-weight:600;opacity:.72}

/* Ступень эталона «купон применён» — без поля ввода: скидка в окне даётся всем */
.ok-primenena{display:flex;align-items:center;gap:9px;margin:0;font-size:var(--kegl-podzag,13.5px);color:var(--rost);
  font-weight:600;text-wrap:pretty}
.ok-galka{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:0}
.ok-zag{font-family:var(--shrift);font-size:var(--kegl-cifry);font-weight:800;letter-spacing:-0.035em;
  line-height:1.06;margin:2px 0 0;text-wrap:balance}
.ok-zag b{color:var(--akcent);font-weight:800;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.05em}
.ok-pod{margin:0;font-size:var(--kegl-podzag,13.5px);line-height:1.5;color:var(--tekst2);max-width:56ch;text-wrap:pretty}

.ok-spisok{display:grid;gap:12px;margin-top:4px}

/* Карточка: бейдж-полоса сверху — верхняя кромка самой карточки, как в эталоне */
.okp{position:relative;border:1px solid var(--gran);border-radius:18px;background:var(--sloy);
  overflow:hidden;transition:border-color .18s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1)}
.okp-metka{margin:0;padding:7px 16px;background:#1B1510;color:var(--akcent);border-bottom:1px solid var(--gran);
  font-family:var(--shrift);font-size:var(--kegl-podpisi);font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.okp[data-glavnyy] .okp-metka{background:var(--akcent);color:#1A0E04;border-bottom-color:var(--akcent)}
.okp-telo{display:grid;gap:0;padding:0}

/* Тлеющий кант: единственный авторский момент экрана. Свет ложится сверху и роняет
   СМЕЩЁННУЮ вниз тёплую тень — контровой свет по канону, а не ореол «просто так». */
.okp[data-vybran]{border-color:var(--akcent);box-shadow:var(--kray-vybran, 0 0 0 1px var(--akcent))}
.okp[data-vybran]::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--akcent) 22%,var(--akcent) 78%,transparent);
  transform-origin:50% 0;animation:ok-kant .42s cubic-bezier(.23,1,.32,1)}
@keyframes ok-kant{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
.okp[data-moy]{border-color:var(--rost)}
@media (hover:hover) and (pointer:fine){.okp:hover{border-color:#43352A}.okp[data-vybran]:hover{border-color:var(--akcent)}}

.okp-vybor{display:flex;align-items:center;gap:13px;width:100%;min-height:var(--knopka-vys,36px);border-radius:18px;background:none;border:0;
  color:inherit;font:inherit;text-align:left;padding:12px 16px;cursor:pointer}
.okp-radio{flex:none;width:22px;height:22px;border-radius:50%;border:1.6px solid #4A3B2E;
  display:grid;place-items:center;transition:background .16s ease-out,border-color .16s ease-out}
.okp-radio svg{width:16px;height:16px;fill:none;stroke:#1A0E04;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;opacity:0;transition:opacity .14s ease-out}
.okp[data-vybran] .okp-radio{background:var(--akcent);border-color:var(--akcent)}
.okp[data-vybran] .okp-radio svg{opacity:1}
.okp-imya{min-width:0;display:grid;gap:2px}
.okp-imya b{font-family:var(--shrift);font-size:var(--kegl-zagolovka,16px);font-weight:800;letter-spacing:-0.025em;line-height:1.15}
.okp-imya i{font-style:normal;font-size:var(--kegl-podpisi,12px);color:var(--tekst2);line-height:1.35}
.okp-cena{margin-left:auto;flex:none;display:grid;justify-items:end;gap:1px;text-align:right}
.okp-cena s{font-family:var(--mono);font-size:var(--kegl-podpisi);color:var(--tekst2);text-decoration-color:var(--trevoga, #FF4F3F);
  text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums}
.okp-cena b{font-family:var(--mono);font-size:var(--kegl-imeni);font-weight:600;letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.okp[data-vybran] .okp-cena b{color:var(--akcent)}
.okp-cena em{font-style:normal;font-size:var(--kegl-podpisi);color:var(--tekst2)}

.okp-stroki{list-style:none;margin:0;padding:9px 16px;border-top:1px solid var(--gran);display:grid;gap:7px}
.okp-stroki li{display:flex;align-items:center;gap:10px;font-size:var(--kegl-stroki,13px);line-height:1.4;color:var(--tekst);text-wrap:pretty}
.okp-stroki svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--akcent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.okp-niz{display:flex;justify-content:flex-end;padding:0 12px 11px}
.okp-podrobnee{display:inline-flex;align-items:center;gap:6px;min-height:var(--knopka-vys,36px);background:none;border:1px solid var(--gran);
  border-radius:999px;color:var(--tekst2);font:inherit;font-size:var(--kegl-podpisi);font-weight:600;padding:6px 12px;cursor:pointer;
  transition:color .15s ease-out,border-color .15s ease-out}
.okp-podrobnee svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.okp-podrobnee[aria-expanded=true] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.okp-podrobnee:hover{color:var(--tekst);border-color:#43352A}}
.okp-polno{padding:0 16px 15px;border-top:1px solid var(--gran);margin-top:-1px}
.okp-itog{margin:10px 0 0;font-size:var(--kegl-podzag,13.5px);line-height:1.5;color:var(--tekst);text-wrap:pretty}
.okp-polno ul{list-style:none;margin:10px 0 0;padding:0}
.okp-polno li{padding:7px 0;border-top:1px solid var(--gran);font-size:var(--kegl-stroki,13px);line-height:1.45;color:var(--tekst2);text-wrap:pretty}
.okp-polno li:first-child{border-top:0}

.ok-nizhnie{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.ok-nizh{background:var(--sloy);border:1px solid var(--gran);border-radius:12px;color:var(--tekst2);
  font:inherit;font-size:var(--kegl-podzag);font-weight:600;padding:12px 10px;cursor:pointer;
  transition:color .15s ease-out,border-color .15s ease-out}
@media (hover:hover) and (pointer:fine){.ok-nizh:hover{color:var(--tekst);border-color:#43352A}}
.ok-vernut{width:100%;background:var(--sloy);border:1px solid var(--gran);border-radius:12px;color:var(--tekst);
  font:inherit;font-size:var(--kegl-tekst);font-weight:600;padding:14px;cursor:pointer;margin-top:4px}

/* Липкая кнопка эталона. Не стекло: под ней плотная растушёвка ночи, чтобы текст,
   уезжающий под кнопку, гас, а не просвечивал сквозь размытие. */
.ok-lipkaya{position:sticky;bottom:0;z-index:5;margin:6px -4px -4px;padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(7,6,5,0) 0%,rgba(7,6,5,.86) 34%,var(--fon) 72%)}
.ok-lipkaya-telo{display:block}
.ok-lipkaya a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--knopka-vys,36px);box-sizing:border-box;
  margin:0 auto;background:var(--akcent);color:var(--na-akcente);border:1px solid var(--akcent);font-family:var(--shrift);font-weight:700;font-size:var(--knopka-shrift,13px);
  letter-spacing:-0.015em;text-decoration:none;padding:0 18px;border-radius:999px;white-space:nowrap;
  box-shadow:var(--neon-glav, 0 0 12px rgba(255,138,43,.45));
  transition:filter .15s ease-out,transform .12s cubic-bezier(.23,1,.32,1)}
.ok-lipkaya a em{font-style:normal;font-family:var(--mono);font-size:var(--kegl-podpisi,12px);font-weight:600;
  background:rgba(26,14,4,.16);border-radius:999px;padding:3px 8px;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.ok-lipkaya a:hover{filter:brightness(1.18)}}
.ok-lipkaya a:active{transform:scale(.985)}
.ok-lipkaya-moy{display:block;text-align:center;color:var(--rost);font-weight:600;font-size:var(--kegl-podzag,13.5px);padding:12px 0}

/* Поверхности, которые рисует браузер, — тоже наши: фокус, выделение, каретка */
.ok :focus-visible{outline:2px solid var(--akcent);outline-offset:2px;border-radius:12px}
.ok ::selection{background:rgba(255,138,43,.3);color:var(--tekst)}
.ok{caret-color:var(--akcent)}

/* 390 и уже: имя пакета и цена делят одну строку — «ПЕРСОНАЛЬНО» + «160 000 ₽» её переполняют */
@media (max-width:400px){
  .okp-vybor{gap:10px;padding:14px 13px}
  .okp-imya b{font-size:var(--kegl-zagolovka)}
  .okp-imya i{font-size:var(--kegl-podpisi)}
  .okp-cena b{font-size:var(--kegl-zagolovka)}
  .okp-cena s{font-size:var(--kegl-podpisi)}
  .okp-stroki{padding:12px 13px}
  .okp-stroki li{font-size:var(--kegl-podpisi)}
  .ok-lipkaya a{font-size:var(--knopka-shrift,13px);padding:0 14px;gap:6px}
}
/* Широкий экран: карточки не растягиваются на весь 1440 — читать цену через полстола нечем */
@media (min-width:760px){
  .ok{max-width:680px;margin-inline:auto}
  .okp-vybor{padding:19px 20px}
  .okp-imya b{font-size:var(--kegl-imeni)}
  .okp-cena b{font-size:var(--kegl-cifry)}
  .okp-stroki{padding:15px 20px}
  .okp-polno{padding:0 20px 17px}
  .ok-lipkaya{max-width:680px;margin-inline:auto}
}
/* Приложение: над липкой кнопкой стоит своя нижняя навигация — кнопка садится на неё */
#ekran-pakety .ok-lipkaya{bottom:calc(72px + env(safe-area-inset-bottom))}

@media (prefers-reduced-motion:reduce){
  .okp,.okp-radio,.okp-radio svg,.okp-podrobnee svg,.ok-lipkaya a{transition:none}
  .okp[data-vybran]::before{animation:none}
}

/* Полосы цен лендинга: зачёркнутая цена без повода читается как техническая ошибка */
.polosa-skidka{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 12px;padding:7px 14px;
  border:1px solid var(--akcent);border-radius:999px;color:var(--akcent);font-size:var(--kegl-stroki);font-weight:600;
  letter-spacing:-0.005em}
.polosa-skidka b{font-family:var(--mono);font-size:var(--kegl-tekst);font-weight:700;font-variant-numeric:tabular-nums}
.pk-cena .bylo{font-family:var(--mono);font-size:.66em;color:var(--tekst2);text-decoration-color:var(--trevoga, #FF4F3F);
  text-decoration-thickness:1.4px;margin-right:5px}
.pk-cena .stalo{color:var(--akcent)}
.paket-cena .bylo{font-size:.62em;color:var(--tekst2);text-decoration-color:var(--trevoga, #FF4F3F);
  text-decoration-thickness:1.4px;margin-right:6px}
.paket-cena .stalo{color:var(--akcent)}

/* Пять строк выгоды в раскрытии карточки (Кай 02.09 21:40): подпись — текст, парами.
   Подпись мельче и тише текста: она указатель, а не содержание. */
.okp-vygody{margin:12px 0 0;display:grid;gap:0}
.okp-vygody dt{font-family:var(--shrift);font-size:var(--kegl-podpisi);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--akcent);padding:11px 0 0;border-top:1px solid var(--gran)}
.okp-vygody dt:first-of-type{border-top:0;padding-top:2px}
.okp-vygody dd{margin:4px 0 11px;font-size:var(--kegl-podzag);line-height:1.5;color:var(--tekst);
  max-width:62ch;text-wrap:pretty}
.okp-vygody dd:last-of-type{margin-bottom:2px}
.okp-spisok{list-style:none;margin:10px 0 0;padding:0}
.okp-spisok li{padding:8px 0;border-top:1px solid var(--gran);font-size:var(--kegl-podzag);line-height:1.45;color:var(--tekst2)}
.okp-spisok li:first-child{border-top:0}
.ok-lipkaya .skoro{display:block;text-align:center;color:var(--tekst2);font-size:var(--kegl-tekst);font-weight:600;
  padding:15px 12px;border:1px dashed var(--gran);border-radius:999px}

/* Правки по снимкам 02.09 — дефекты, которых не видно в исходнике:
   1. глобальное `p{max-width:62ch}` (index.html:408) обрезало полосу бейджа до 496px
      внутри 680px карточки — бейдж выглядел оборванным куском фона;
   2. `margin-inline:auto` на 1440 уводил карточки вправо от заголовка экрана: блок был
      отцентрован в колонке, а заголовок и текст над ним — прижаты влево;
   3. липкая кнопка на широком экране накрывала бейдж «Выбор Ильи»: под мышью большой палец
      не при чём, и кнопке незачем висеть — она встаёт под карточками. */
.okp-metka{max-width:none;width:100%}
@media (min-width:760px){
  /* §2.5 центровка: на 1440 витрина стояла у левого края, а правая половина экрана
     пустовала. Колонка держит свою меру и встаёт по центру рабочей области. */
  .ok{margin-inline:auto}
  .ok-lipkaya{position:static;margin:10px 0 0;padding:0;background:none;max-width:none}
  .ok-lipkaya a{width:auto;min-width:0;margin-inline:auto}
}
/* «−40%» набран моноширинным с отрицательным трекингом и слипался со следующим словом */
.ok-zag b{margin-right:.18em}
/* Статус-чип «скидка применена»: он про цены ниже, поэтому стоит вплотную к списку */
.ok-primenena{margin:2px 0 0;max-width:none;align-self:start;border:1px solid rgba(74,222,128,.32);
  border-radius:999px;padding:8px 14px 8px 11px;background:rgba(74,222,128,.07)}
/* oferta.css живёт на трёх страницах с разными наборами токенов: у app/index.html есть
   --trevoga, у app/ceh.html и app/vhod.html — нет. Неизвестная переменная делает всё
   свойство недействительным, и зачёркнутая цена теряла красную черту ровно на сайте,
   то есть там, где её увидит человек с холодного трафика. Поэтому у каждой переменной,
   которой нет во всех трёх :root, стоит запасное значение прямо в объявлении. */

/* Полоса цен лендинга на 390px: в карточку шириной ~120px не влезают ДВЕ цены в строку
   («160 000 ₽» зачёркнутая + «96 000 ₽»), и документ получал 7px горизонтали — гейт
   поймал это на app/selfcheck_prohod.py, снимок экрана пакетов в приложении не показывал.
   Старая цена уходит на свою строку: она подпись к новой, а не вторая цена рядом. */
.pk-cena{white-space:normal}
.pk-cena .bylo{display:block;margin-right:0;line-height:1.15}
.pk-cena .stalo{display:block;white-space:nowrap}
@media (max-width:420px){.pk-cena .bylo{font-size:.62em}}
/* 380-420px: «ПЕРСОНАЛЬНО» — 11 капс-букв в треть экрана. Правило для 320px обрывалось на
   379px, и ровно на 390 (наш эталонный размер) имя упиралось в край карточки. */
@media (min-width:380px) and (max-width:420px){
  .pk{padding:13px 8px}
  .pk h3{font-size:var(--kegl-podpisi);letter-spacing:.005em}
  .pk-cena{font-size:var(--kegl-tekst)}
}

/* ============ Референс Кая 03.09 00:10: градиент, неон, цветные плашки, радиусы ==========
   Слово Кая: «нравится градиент + неон + кнопки выделены цветом + шрифты + закругления
   плашек». Взято ровно это, и ровно в нашем мире: у эталона ДВА неона (лайм и малина) плюс
   стекло, у нас один тлеющий янтарь и ткань. Второй цвет не заводится: краска на экране
   остаётся одна, меняется её плотность. Стеклянных слоёв и эмодзи нет.

   1. ГРАДИЕНТ. У эталона тело главной карточки залито сверху вниз от яркого к чёрному.
      У нас то же движение янтарём: свет входит под бейджем и гаснет к низу карточки. */
.okp[data-glavnyy]{background:linear-gradient(180deg,rgba(255,138,43,.13) 0%,rgba(255,138,43,.05) 34%,var(--sloy) 72%)}
.okp[data-vybran]:not([data-glavnyy]){background:linear-gradient(180deg,rgba(255,138,43,.08),var(--sloy) 58%)}

/* 2. НЕОН. Кант выбранной карточки светится, но свет всё равно ПАДАЕТ: тугое кольцо по краю
      плюс смещённая вниз тёплая тень. Ореол без смещения — украшение, у нас так не светят. */
.okp[data-vybran]{border-color:var(--akcent);
  box-shadow:0 0 0 1px var(--akcent),0 0 18px -4px rgba(255,138,43,.5),0 18px 44px -26px rgba(255,138,43,.62)}
.okp[data-glavnyy]{box-shadow:0 0 22px -8px rgba(255,138,43,.42),0 16px 40px -28px rgba(255,138,43,.5)}
.okp[data-glavnyy][data-vybran]{box-shadow:0 0 0 1px var(--akcent),0 0 24px -3px rgba(255,138,43,.58),0 20px 48px -24px rgba(255,138,43,.7)}

/* 3. ЦЕНА — ПЛАШКА, а не строка. Самый заметный приём эталона: цена лежит на своей
      цветной подложке справа. У главной карточки подложка янтарная с тёмным текстом,
      у остальных — тёмная плашка с янтарным числом. */
.okp-cena{padding:9px 12px;border-radius:14px;background:#191410;border:1px solid var(--gran);
  min-width:104px;justify-items:center;gap:0}
.okp[data-glavnyy] .okp-cena{background:var(--akcent);border-color:var(--akcent)}
.okp[data-glavnyy] .okp-cena b,.okp[data-glavnyy][data-vybran] .okp-cena b{color:#1A0E04}
.okp[data-glavnyy] .okp-cena em{color:rgba(26,14,4,.68)}
.okp[data-glavnyy] .okp-cena s{color:rgba(26,14,4,.55);text-decoration-color:rgba(26,14,4,.75)}
.okp[data-vybran]:not([data-glavnyy]) .okp-cena{border-color:var(--akcent)}
@media (max-width:400px){.okp-cena{min-width:92px;padding:8px 10px;border-radius:12px}}

/* 4. РАДИУСЫ. У эталона плашки скруглены заметно сильнее наших. Шкала одна на весь блок:
      карточка 20, плашка 14, кнопки-пилюли — полный радиус. */
.okp{border-radius:20px}
.ok-lenta{border-radius:14px}
.ok-nizh{border-radius:14px}
.ok-primenena{border-radius:999px}

/* 5. КНОПКИ ВЫДЕЛЕНЫ ЦВЕТОМ. «Подробнее» перестаёт быть прозрачной надписью и получает
      свою подложку. Липкая кнопка была янтарным градиентом (референс 03.09) — канон
      неона 05.09 отменяет это: главная кнопка прозрачная с кантом, без заливки вообще,
      градиентной в том числе. Правило ниже её сюда возвращало и глушило §219. */
.okp-podrobnee{background:#191410;color:var(--tekst)}
.okp[data-glavnyy] .okp-podrobnee{background:rgba(255,138,43,.14);border-color:rgba(255,138,43,.4);color:var(--akcent)}
.ok-lenta{background:linear-gradient(90deg,#FFA047,var(--akcent) 46%,#F07A1C)}
/* Зачёркнутая цена на янтарной плашке была на грани читаемости (≈3:1) — подняли до AA */
.okp[data-glavnyy] .okp-cena s{color:rgba(26,14,4,.72);text-decoration-color:rgba(26,14,4,.85)}
.okp[data-glavnyy] .okp-cena em{color:rgba(26,14,4,.78)}
/* Чип «скидка применена» распирало во всю ширину: в grid `align-self` управляет вертикалью,
   а прижимает по горизонтали `justify-self`. Из-за этого статус-строка читалась как ещё
   один баннер и вместе с лентой и заголовком съедала первую карточку на 390px. */
.ok-primenena{justify-self:start;max-width:100%}
.ok{gap:11px}
@media (max-width:400px){
  .ok-zag{font-size:var(--kegl-cifry)}
  .ok-pod{font-size:var(--kegl-podzag)}
  .ok-primenena{font-size:var(--kegl-stroki);padding:7px 13px 7px 10px}
}

/* ===== Витрина выгоды (Кай 03.09 23:05): цена ролика и чекпойнты вместо калькулятора ===== */
/* Одна мера отступа на весь блок: 14 между строками, 10 внутри плитки. Числа держат
   моноширинный ряд, как цены в карточках — иначе три плитки «прыгают» на сравнении. */
.vyg{display:grid;gap:14px;margin-top:18px}
.vyg-put{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;
  counter-reset:none;position:relative}
.vyg-put li{display:grid;gap:4px;padding:10px 10px 12px;background:var(--sloy);border:1px solid var(--gran);
  border-radius:14px;min-width:0}
.vyg-put li b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--kegl-zagolovka);line-height:1;color:var(--tekst2)}
.vyg-put li span{font-size:var(--kegl-podpisi);line-height:1.35;color:var(--tekst2)}
.vyg-put li[data-proydeno]{border-color:var(--akcent)}
.vyg-put li[data-proydeno] b{color:var(--akcent)}
.vyg-plitki{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.vyg-p{display:grid;gap:6px;align-content:start;padding:12px 12px 14px;background:var(--sloy);
  border:1px solid var(--gran);border-radius:16px;min-width:0}
.vyg-p h4{margin:0;font-size:var(--kegl-podpisi);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst2)}
.vyg-cena{margin:0;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.vyg-cena b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--kegl-imeni);line-height:1;color:var(--tekst)}
.vyg-cena i{font-style:normal;font-size:var(--kegl-podpisi);color:var(--tekst2)}
.vyg-skolko{margin:0;font-size:var(--kegl-podpisi);color:var(--tekst2);font-variant-numeric:tabular-nums}
.vyg-chto{margin:0;font-size:var(--kegl-podpisi);line-height:1.4;color:var(--tekst)}
.vyg-metka{margin:2px 0 0;font-size:var(--kegl-podpisi);font-weight:600;color:var(--akcent)}
.vyg-p[data-vybran]{border-color:var(--akcent)}
.vyg-p[data-deshevle] .vyg-cena b{color:var(--akcent)}
.vyg-sponsory{margin:0;font-size:var(--kegl-podpisi);line-height:1.45;color:var(--tekst2)}
/* Расклад по деньгам в плитке пакета (Кай 04.09): пять строк «подпись · число», без карточки в карточке */
.vyg-dengi{margin:6px 0 0;padding:8px 0 0;border-top:1px solid var(--gran);display:grid;gap:5px}
.vyg-dengi div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.vyg-dengi dt{margin:0;font-size:var(--kegl-podpisi);color:var(--tekst2);line-height:1.3}
/* nowrap растягивал плитку и давал горизонтальную прокрутку на 768 (прибор прохода, 04.09):
   строка «вклад вернётся при …» длиннее колонки. Число переносится, но не расталкивает экран. */
.vyg-dengi dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--kegl-podpisi);color:var(--tekst);text-align:right;min-width:0;overflow-wrap:anywhere}
.vyg-dengi dt{min-width:0}
.vyg-dengi div:last-child dd{color:var(--akcent)}
@media (max-width:520px){
  .vyg-put{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vyg-plitki{grid-template-columns:1fr}
  .vyg-p{grid-template-columns:auto 1fr;grid-template-areas:"imya cena" "skolko skolko" "chto chto" "metka metka" "dengi dengi";
    align-items:baseline;column-gap:10px}
  .vyg-p h4{grid-area:imya} .vyg-dengi{grid-area:dengi}
  .vyg-cena{grid-area:cena;justify-self:end}
  .vyg-skolko{grid-area:skolko}
  .vyg-chto{grid-area:chto}
  .vyg-metka{grid-area:metka}
}

/* С14: оферта у кнопки оплаты — подпись, а не преграда: читается, но не спорит с кнопкой */
.oferta-ryadom{margin:6px 0 0;text-align:center;font-size:var(--kegl-podpisi,12px);color:var(--tekst2,#a89a85);line-height:1.35}
.oferta-ryadom a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.oferta-ryadom a:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}