/* TsBot redesign — /pricing: the page around the configurator (its heading and the TsBot War blocks for customers and
   newcomers). The configurator itself is a component with its own stylesheet (configurator.css, scoped under .tsc). */
main.wrap { padding-top: clamp(40px, 6vw, 84px); }
.pl-head { gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); }
.pl-head h1 em { color: var(--fg); }
.pw-jump { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--fg); font-size: 14px; max-width: 100%; }
.pw-jump b { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); }
.pw-jump span { min-width: 0; }
.pw-jump:hover { border-color: var(--acc-line); color: var(--strong); }

/* TsBot War plans */
.pw { margin-top: clamp(80px, 11vw, 150px); display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 40px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.pw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pw-head .section-head { min-width: 0; flex: 1 1 520px; }
.pw-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); max-width: 100%; }
.pw-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .08); cursor: pointer; padding: 0; }
.pw-switch span { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--mut); transition: transform .2s, background-color .2s; }
.pw-switch[aria-checked="true"] { background: var(--acc-soft); border-color: var(--acc-line); }
.pw-switch[aria-checked="true"] span { transform: translateX(20px); background: var(--acc); }
.pw-toggle-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; color: var(--fg); }
.pw-toggle-txt b { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--acc-text); }
.pw-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pw-plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-2), var(--glass)); min-width: 0; }
.pw-plan.on { box-shadow: 0 40px 90px -40px rgba(255, 90, 51, .45); }
.pw-plan-name { font-weight: 600; font-size: 1.1rem; color: var(--strong); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pw-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.pw-price b { font-size: clamp(2.4rem, 4.2vw, 3.3rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--strong); font-variant-numeric: tabular-nums; }
.pw-price s { color: var(--dim); font-family: var(--mono); font-size: 14px; }
.pw-price span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pw-plan ul { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: auto; }
.pw-plan li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--mut); overflow-wrap: break-word; }
.pw-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pw-ways > .pw-way:only-child { grid-column: 1 / -1; }
.pw-way { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-2), var(--glass)); min-width: 0; }
.pw-way.cust { background: radial-gradient(circle at 100% 0%, rgba(255, 90, 51, .12), transparent 55%), linear-gradient(180deg, var(--glass-2), var(--glass)); border-color: var(--acc-line); }
.pw-way h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.12; letter-spacing: -.03em; }
.pw-way h3 .hot { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--fg); letter-spacing: -.01em; }
.pw-deadline { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--acc-line); background: var(--acc-soft); color: var(--fg); font-size: 14.5px; }
.pw-deadline svg { width: 18px; height: 18px; color: var(--acc); overflow: hidden; }
.pw-deadline b { color: var(--strong); }
.pw-facts, .pw-steps { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--line); }
.pw-facts li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--mut); font-size: 14.5px; }
.pw-steps { counter-reset: st; }
.pw-steps li { counter-increment: st; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.pw-steps li::before { content: counter(st, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--mono); font-size: 11px; color: var(--acc); padding-top: 4px; }
.pw-steps b { font-weight: 500; color: var(--fg); font-size: 15px; }
.pw-steps span { color: var(--mut); font-size: 14px; }
.pw-way .btn { margin-top: auto; }
.pw-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 999px; }
.pw-foot p { color: var(--mut); font-size: 14.5px; min-width: 0; }
.pc .pw { margin-top: clamp(64px, 9vw, 120px); }

@media (max-width: 1080px) {
  .pw-plans { grid-template-columns: minmax(0, 1fr); }
  .pw-plan.on { order: -1; }
  .pw-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pw-toggle { border-radius: 18px; }
  .pw-foot { border-radius: 18px; }
  .pw-way .btn, .pw-foot .btn { width: 100%; white-space: normal; text-align: center; }
}