/* TsBot redesign — the TsBot War landing (tsbot.co/war). On top of ds.css and the home styles (testweb.css: hero,
   sections, the board of the hero card, cells, FAQ). The moving border is on the hero board only. */

/* hero: the board takes more room than on the home */
.wl-hero .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wl-hero .hc-stage { width: min(58vw + 44px, 1180px); }
.wl-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.9rem); }
.wl-hero h1 > span { display: block; }
.wl-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.wl-board .hc-pane { display: flex; flex-direction: column; }
/* the sound alert sits inside the board, bottom left, next to the 24 h figures (on the home it overhangs the card) */
.wl-board .wb-body { padding-bottom: 14px; }
.wl-board .wb-toast { left: 16px; bottom: 14px; }
.wl-board .wb-kpi { min-height: 96px; align-items: flex-end; }
.wl-early { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--mut); font-size: 14px; }
.wl-early .nav-new { flex: none; }

/* the board: six features */
.wl-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wl-feats .cell { gap: 12px; }
.wl-feats h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.wl-feats p { color: var(--mut); font-size: 15px; }
.wl-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--cyan); background: rgba(34, 188, 214, .07); }
.wl-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* two columns: copy + a demo card */
.wl-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.wl-split.rev .wl-split-copy { order: 2; }
.wl-split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.wl-split-copy h2 { font-size: clamp(2.05rem, 4.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.wl-split-copy h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.wl-split-copy > p { color: var(--mut); max-width: 36em; }

.wl-alert, .wl-stats { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wl-kick { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.wl-alert h3 { font-size: 1.3rem; }
.wl-rule { border: 1px solid var(--acc-line); border-radius: 14px; background: rgba(255, 90, 51, .05); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wl-rule-h { display: flex; align-items: center; gap: 10px; }
.wl-rule-h b { font-size: 15px; color: var(--strong); }
.wl-on { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); }
.wl-eq { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.wl-eq i { width: 3px; border-radius: 2px; background: var(--acc); animation: wlEq 1.1s ease-in-out infinite; }
.wl-eq i:nth-child(1) { height: 40%; } .wl-eq i:nth-child(2) { height: 90%; animation-delay: .15s; } .wl-eq i:nth-child(3) { height: 60%; animation-delay: .3s; }
.wl-eq i:nth-child(4) { height: 100%; animation-delay: .45s; } .wl-eq i:nth-child(5) { height: 50%; animation-delay: .6s; }
@keyframes wlEq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.wl-eq i { transform-origin: bottom; }
.wl-rule p { margin: 0; color: var(--mut); font-size: 14.5px; }
.wl-rule p b { color: var(--fg); }
.wl-last { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 4px 0 0; }
.wl-log { display: flex; flex-direction: column; font-size: 12.5px; }
.wl-log li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: var(--fg); }
.wl-log li span:first-child { color: var(--dim); }

.wl-stats-h { display: flex; justify-content: flex-end; }
.wl-stats-h span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; }
.wl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl-kpis div { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 11, 16, .5); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wl-kpis span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.wl-kpis b { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.wl-kpis b.fr { color: var(--friend); } .wl-kpis b.en { color: var(--acc); }
.wl-ch { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 6px 0 0; }
.wl-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 96px; align-items: end; }
.wl-bar { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.wl-bar i { flex: 1; border-radius: 3px 3px 0 0; }
.wl-bar i.us { background: var(--friend); } .wl-bar i.them { background: var(--acc); opacity: .85; }
.wl-heat { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.wl-heat i, .wl-ramp i { display: block; aspect-ratio: 1; border-radius: 2px; }
.wl-heat .h0, .wl-ramp .h0 { background: #121b24; } .wl-heat .h1, .wl-ramp .h1 { background: #3a1a12; } .wl-heat .h2, .wl-ramp .h2 { background: #6e2a16; }
.wl-heat .h3, .wl-ramp .h3 { background: #b4401f; } .wl-heat .h4, .wl-ramp .h4 { background: var(--acc); }
.wl-ramp { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dim); }
.wl-ramp i { width: 12px; }

/* roles and verification */
.wl-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wl-role { gap: 14px; }
.wl-role > p { color: var(--mut); font-size: 15px; }
.wl-badge { align-self: flex-start; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg); }
.wl-role.own .wl-badge { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc-text); }
.wl-need { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 14px; color: var(--fg); }
.wl-need b { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.wl-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wl-m { flex-direction: row; align-items: flex-start; gap: 16px; }
.wl-m > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wl-m h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wl-m p { color: var(--mut); font-size: 15px; }
.wl-check { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; border: 1.5px solid var(--line-2); position: relative; }
.wl-check.on { border-color: var(--acc); background: var(--acc); }
.wl-check.on::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--acc-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wl-def { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); }
.wl-toggle { flex: none; width: 40px; height: 22px; margin-top: 2px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06); position: relative; }
.wl-toggle i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--mut); }

/* plans (the same pieces as /pricing; prices from the database via war-promo.js) */
.pw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.pw-head .sh { margin-bottom: 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 { border-color: var(--acc); box-shadow: 0 40px 90px -40px rgba(255, 90, 51, .45); }
.pw-plan-name { font-weight: 600; font-size: 1.1rem; color: var(--strong); }
.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); }
.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-plan .btn { margin-top: auto; width: 100%; white-space: normal; text-align: center; }
.wl-fine { margin: 18px 0 clamp(36px, 5vw, 64px); color: var(--dim); }
.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-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; }

/* security, help link, closing */
.wl-sec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wl-sec .cell { gap: 10px; }
.wl-sec h3 { font-size: 1.15rem; }
.wl-sec p { color: var(--mut); font-size: 15px; }
.wl-help { margin-top: 26px; }
.wl-help a { display: inline-flex; align-items: center; gap: 10px; color: var(--friend); font-weight: 500; }
.wl-help a:hover { color: var(--strong); }
/* the same help link near the top (hero) and in the closing card: easy to find (owner, 07-10-2026) */
.wl-help-q { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font: 600 12px/1 var(--mono); }
.wl-help .bi { flex: none; }
.wl-help-top { margin-top: 18px; }
.wl-end-card .wl-help { margin-top: 0; max-width: none; }
.wl-end-card { padding: clamp(28px, 5vw, 64px); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 980px; }
.wl-end-card h2 { font-size: clamp(2.05rem, 4.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.wl-end-card p { color: var(--mut); max-width: 40em; }

/* ---------- /war/help ---------- */
.wh-head { padding-block: clamp(40px, 6vw, 84px) clamp(28px, 4vw, 48px); }
.wh-head .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.wh-head h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.wh-head .lead { color: var(--mut); max-width: 44em; }
.wh-crumb { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.wh-crumb a { color: var(--friend); }
.wh-grid { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: clamp(60px, 8vw, 110px); }
.wh-toc { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.wh-toc a { padding: 8px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--mut); font-size: 14.5px; line-height: 1.35; }
.wh-toc a:hover { color: var(--fg); }
.wh-toc a.on { color: var(--strong); border-left-color: var(--acc); }
.wh-body { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); min-width: 0; }
.wh-group { scroll-margin-top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.wh-group h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); letter-spacing: -.025em; }
.wh-items { display: flex; flex-direction: column; border-top: 1px solid var(--line); counter-reset: whs; }
.wh-step { counter-increment: whs; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wh-step::before { content: counter(whs, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--mono); font-size: 12px; color: var(--acc); padding-top: 3px; }
.wh-step b { font-weight: 500; color: var(--strong); font-size: 16px; }
.wh-step p { color: var(--mut); font-size: 15px; }
.wh-q { border-bottom: 1px solid var(--line); }
.wh-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; gap: 14px; padding: 16px 0; font-size: 16px; font-weight: 500; color: var(--fg); }
.wh-q summary::-webkit-details-marker { display: none; }
.wh-q summary::after { content: "+"; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--mono); color: var(--acc); transition: transform .2s; }
.wh-q[open] summary::after { transform: rotate(45deg); }
.wh-q p { color: var(--mut); font-size: 15px; padding: 0 40px 18px 0; max-width: 46em; }
.wh-stuck { padding: clamp(20px, 3vw, 30px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 8px; }
.wh-stuck b { font-size: 1.1rem; color: var(--strong); }
.wh-stuck p { color: var(--mut); }

@media (max-width: 1100px) {
  .wl-roles, .wl-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .wh-grid { grid-template-columns: minmax(0, 1fr); }
  .wh-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .wh-toc a { margin: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
  .wh-toc a.on { border-color: var(--acc-line); }
}
@media (max-width: 980px) {
  .wl-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-hero .hc-stage { width: auto; }
  .wl-split, .wl-methods, .pw-plans, .pw-ways { grid-template-columns: minmax(0, 1fr); }
  .wl-split.rev .wl-split-copy { order: 0; }
  .wl-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-plan.on { order: -1; }
}
@media (max-width: 640px) {
  .wl-feats, .wl-roles, .wl-sec { grid-template-columns: minmax(0, 1fr); }
  .wl-board .wb-body { min-height: 0; }
  .wl-board .wb-kpi { min-height: 0; }
  .pw-toggle { border-radius: 18px; }
  .wl-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .wl-kpis div { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .wl-eq i { animation: none; } }