/* Блок тарифов лендинга в стиле страницы тарифов приложения (/pricing, классы pr-* в
   apps/web/src/app/globals.css; правила — vault/design-system-страница-тарифов.md).
   Всё под .lp-pr: остальной лендинг эти правила не задевают. Окно анкеты и «Задать вопрос»
   (turnkey.js) кладёт в body элемент .tk-ov.lp-pr — токены и кнопки работают и там.
   Переменные лендинга: --text / --text-muted / --text-faint / --bg / --surface-2 / --border. */
.lp-pr{
  --pr-stage:#f7f7f6;
  --pr-line:rgba(0,0,0,.09);
  --pr-line2:rgba(0,0,0,.06);
  --pr-card:#ffffff;
  --pr-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --pr-accent:#ff8a3d;
  --pr-accent-soft:#ffcfa8;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display',system-ui,sans-serif;
}
[data-theme="dark"] .lp-pr{
  --pr-stage:#161616;
  --pr-line:rgba(255,255,255,.13);
  --pr-line2:rgba(255,255,255,.07);
  --pr-card:#242424;
}
@property --pr-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes pr-spin{to{--pr-angle:360deg}}
@keyframes pr-sweep{0%{background-position:120% 0}100%{background-position:-160% 0}}

/* Переключатель «Помесячно / За год» — как сегменты /pricing: серый жёлоб, белая подложка */
#pricing .billing-toggle{background:var(--surface-2);border:0;padding:3px;gap:0;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display',system-ui,sans-serif}
#pricing .billing-toggle button{font-family:inherit;font-size:13px;font-weight:590;line-height:1;padding:8px 14px;color:var(--text-muted);transition:color .2s}
#pricing .billing-toggle button.active{background:var(--bg);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04)}
[data-theme="dark"] #pricing .billing-toggle button.active{box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06)}
#pricing .billing-toggle .save-badge{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;
  line-height:1;color:#0a7a3d;background:#e7f7ee;border-radius:4px;padding:3px 5px;margin-left:6px}
[data-theme="dark"] #pricing .billing-toggle .save-badge{color:#7ee2a8;background:rgba(22,163,74,.16)}

/* ── Сетка: одна рамка вокруг всех колонок + волосяные разделители, карточек нет ── */
.lp-pr.pr-plans{border:1px solid var(--pr-line);border-radius:12px;background:var(--pr-stage);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;text-align:left;
  --pr-r1:52px;--pr-r2:92px;--pr-r3:140px}
@media(max-width:1180px){.lp-pr.pr-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.lp-pr.pr-plans{grid-template-columns:minmax(0,1fr);--pr-r1:auto;--pr-r2:auto;--pr-r3:auto}}
.lp-pr .pr-col{padding:26px 22px 28px;position:relative;background:transparent;min-width:0;
  display:grid;grid-template-rows:var(--pr-r1) var(--pr-r2) var(--pr-r3) auto}
.lp-pr .pr-col + .pr-col::after{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--pr-line2);pointer-events:none}
@media(max-width:1180px) and (min-width:681px){
  .lp-pr .pr-col:nth-child(3)::after{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .lp-pr .pr-col:nth-child(4)::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--pr-line2);pointer-events:none}
}
@media(max-width:680px){.lp-pr .pr-col + .pr-col::after{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}}
.lp-pr .pr-col.pop{background:var(--pr-card);z-index:2;border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.04)}
[data-theme="dark"] .lp-pr .pr-col.pop{box-shadow:0 10px 34px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3)}
.lp-pr .pr-col.pop::after,.lp-pr .pr-col.pop + .pr-col::after{display:none}
.lp-pr .pr-col.pop::before{content:'';position:absolute;inset:-1px;border-radius:13px;padding:1.5px;
  background:conic-gradient(from var(--pr-angle,0deg),
    var(--pr-line) 0deg,var(--pr-line) 244deg,var(--pr-accent-soft) 280deg,var(--pr-accent) 300deg,
    var(--pr-accent-soft) 320deg,var(--pr-line) 352deg,var(--pr-line) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:pr-spin 6s linear infinite;pointer-events:none}

.lp-pr .pr-name{font-size:14px;font-weight:590;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text);align-self:start}
.lp-pr .pr-badge{font-family:var(--pr-mono);font-size:11px;font-weight:600;line-height:1;text-transform:uppercase;
  letter-spacing:.02em;border:1px solid currentColor;border-radius:3px;padding:3px 5px}
.lp-pr .pr-badge-grad{position:relative;border:0;padding:4px 6px;color:transparent;
  background:linear-gradient(90deg,var(--text) 18%,var(--pr-accent) 44%,var(--pr-accent-soft) 50%,var(--pr-accent) 56%,var(--text) 82%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;animation:pr-sweep 4.5s linear infinite}
.lp-pr .pr-badge-grad::before{content:'';position:absolute;inset:0;border-radius:4px;padding:1px;
  background:linear-gradient(90deg,var(--pr-line) 18%,var(--pr-accent) 44%,var(--pr-accent-soft) 50%,var(--pr-accent) 56%,var(--pr-line) 82%);
  background-size:280% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:pr-sweep 4.5s linear infinite;pointer-events:none}

.lp-pr .pr-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lp-pr .pr-amount{font-size:38px;line-height:1;font-weight:450;letter-spacing:-.035em;white-space:nowrap;color:var(--text)}
.lp-pr .pr-per{font-family:var(--pr-mono);font-size:13px;color:var(--text-muted)}
.lp-pr .pr-note{font-family:var(--pr-mono);font-size:12px;line-height:16px;color:var(--text-faint);margin:9px 0 0;min-height:0}

.lp-pr .pr-cta{display:flex;flex-direction:column;gap:8px;align-self:start;padding-top:2px}
.lp-pr .pr-btn{display:block;box-sizing:border-box;width:100%;text-align:center;text-decoration:none;padding:9px 6px;border-radius:8px;
  font-family:inherit;font-size:13.5px;font-weight:590;line-height:1.25;cursor:pointer;border:1px solid transparent;
  transition:opacity .15s;text-wrap:balance}
.lp-pr .pr-btn:hover{opacity:.88}
.lp-pr .pr-btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.lp-pr .pr-btn.solid{background:var(--text);color:var(--bg)}
.lp-pr .pr-btn.line{background:var(--bg);color:var(--text);border-color:var(--border);font-size:12.6px}
.lp-pr .pr-btn[disabled]{cursor:default}

.lp-pr .pr-grp{font-family:var(--pr-mono);font-size:10.5px;font-weight:600;line-height:1.4;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-faint);margin:16px 0 14px}
.lp-pr .pr-feats{list-style:none;padding:16px 0 0;margin:14px 0 0;border-top:1px solid var(--pr-line2);
  display:flex;flex-direction:column;gap:11px;font-size:13px;line-height:18px;color:var(--text)}
.lp-pr .pr-grp + .pr-feats{margin-top:0}
.lp-pr .pr-feats li{display:flex;gap:9px;align-items:flex-start;padding:0;font-size:13px;color:var(--text)}
.lp-pr .pr-feats li::before{content:none}
.lp-pr .pr-feats .txt{flex:1;min-width:0}
.lp-pr .pr-feats .ck{flex:none;width:14px;margin-top:0;color:#16a34a}
.lp-pr .pr-feats strong{font-weight:590;color:inherit}

/* ── Окно анкеты «Под ключ» и «Задать вопрос» (turnkey.js) — как .pr-tk-* приложения ── */
.tk-ov.lp-pr{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:tk-fade .18s ease-out}
.lp-pr .tk-box{width:100%;max-width:540px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);color:var(--text);border:1px solid var(--pr-line);border-radius:12px;padding:26px 22px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);animation:tk-in .22s cubic-bezier(.2,.8,.2,1);text-align:left}
[data-theme="dark"] .lp-pr .tk-box{box-shadow:0 20px 50px rgba(0,0,0,.55)}
.lp-pr .tk-box.sm{max-width:440px}
@keyframes tk-fade{from{opacity:0}}
@keyframes tk-in{from{opacity:0;transform:translateY(8px) scale(.985)}}
.lp-pr .tk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lp-pr .tk-title{font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.25;color:var(--text)}
.lp-pr .tk-sub{font-size:13px;color:var(--text-faint);margin-top:4px}
.lp-pr .tk-x{flex:none;width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--text-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.lp-pr .tk-x:hover{background:var(--surface-2);color:var(--text)}
.lp-pr .tk-q{padding:16px 0;border-top:1px solid var(--pr-line2)}
.lp-pr .tk-q:first-child{margin-top:16px}
.lp-pr .tk-ql{font-size:13.5px;font-weight:590;line-height:1.4;color:var(--text);display:flex;gap:8px}
.lp-pr .tk-ql .n{font-family:var(--pr-mono);font-size:11px;font-weight:600;color:var(--text-faint);padding-top:2px}
.lp-pr .tk-opts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0 25px}
.lp-pr .tk-opt{padding:7px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg);text-align:left;
  color:var(--text);font-family:inherit;font-size:13px;line-height:1.25;cursor:pointer;
  transition:border-color .15s,background-color .15s,transform .12s ease-out}
.lp-pr .tk-opt:hover{border-color:color-mix(in srgb,var(--text) 40%,transparent)}
.lp-pr .tk-opt:active{transform:scale(.97)}
.lp-pr .tk-opt.on{border-color:var(--text);background:var(--text);color:var(--bg)}
.lp-pr .tk-in{display:block;width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg);
  color:var(--text);font-family:inherit;font-size:16px;line-height:1.3;outline:none}
.lp-pr .tk-in:focus{border-color:var(--text)}
.lp-pr textarea.tk-in{resize:vertical;min-height:96px}
.lp-pr .tk-more{width:calc(100% - 25px);margin:10px 0 0 25px}
.lp-pr .tk-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:10px 0 0 25px}
.lp-pr .tk-askf{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lp-pr .tk-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 0 25px;opacity:.45;transition:opacity .2s}
.lp-pr .tk-price.on{opacity:1}
.lp-pr .tk-price .l{font-family:var(--pr-mono);font-size:13px;color:var(--text-muted)}
.lp-pr .tk-price .v{font-size:38px;line-height:1;font-weight:450;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.lp-pr .tk-foot{padding-top:16px;border-top:1px solid var(--pr-line2)}
.lp-pr .tk-prepay{font-family:var(--pr-mono);font-size:12px;line-height:16px;color:var(--text-muted);margin-bottom:12px}
.lp-pr .tk-err{font-size:12.5px;color:#ef4444;margin:0 0 10px}
.lp-pr .tk-done{text-align:center;padding:30px 6px 10px}
.lp-pr .tk-done .ck{width:40px;height:40px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--pr-line);color:#16a34a}
.lp-pr .tk-done .pr-btn{margin:20px auto 0;max-width:200px}
@media (max-width:480px){.lp-pr .tk-fields{grid-template-columns:minmax(0,1fr)}
  .lp-pr .tk-opts,.lp-pr .tk-fields,.lp-pr .tk-price{margin-left:0}.lp-pr .tk-more{width:100%;margin-left:0}}

@media (prefers-reduced-motion: reduce){
  .lp-pr .pr-col.pop::before,.lp-pr .pr-badge-grad,.lp-pr .pr-badge-grad::before,.tk-ov.lp-pr,.lp-pr .tk-box{animation:none}
}