/* Pricing (/pricing) and the payment page (/upgrade): small additions to vizwalk.css and app.css. Tokens only. */

/* ---- /pricing ---- */
.plan .plan-or{margin:0}
.pay-line{display:flex;gap:10px;align-items:flex-start;margin:var(--s5) 0 0;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--r);font-size:15px;color:var(--ink-2)}
.pay-line .icon{flex:none;color:var(--accent);margin-top:2px}
.pay-line a{font-weight:600;white-space:nowrap}
.plan-rights .compare{min-width:560px}
@media (max-width:600px){.plan-rights .compare{min-width:500px;font-size:14px}.plan-rights .compare th,.plan-rights .compare td{padding:10px}.plan-rights .compare tbody th{min-width:118px;width:118px}}
.plan-rights .compare td{white-space:normal}
@media (min-width:768px){.plan-rights .compare th[scope=col]{width:22%}}

/* ---- /upgrade ---- */
.pay-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:var(--s4) 0 var(--s2)}
.pay-price .amount{font-size:2.25rem;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.pay-price small{font-size:15px;color:var(--soft)}
.pay-steps{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.pay-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.pay-steps>li>div{min-width:0}
.pay-steps .button{max-width:100%;white-space:normal}
.pay-steps h2{font-size:1.125rem;margin:8px 0 4px}
.pay-steps p{margin:0 0 var(--s3);color:var(--ink-2);font-size:15px}
.pay-steps .button{margin-top:4px}
.pay-state{display:flex;gap:12px;align-items:flex-start}
.pay-state .icon{flex:none;margin-top:2px}
.pay-state h2{font-size:1.125rem;margin:0 0 4px;color:inherit}
.pay-state p{margin:0 0 6px}
.pay-state p:last-child{margin-bottom:0}
.pay-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.pay-cancel{margin-top:var(--s4);font-size:15px}
.pay-cancel .link{color:var(--soft);padding:0}
.card .facts{margin-top:var(--s4)}
.currency.small{margin:0 0 var(--s3)}
.currency.small a{min-height:44px;padding:0 12px;font-size:14px}

/* ---- /pricing chapters (redesign) ---- */
.pricing-intro{padding-bottom:var(--s7)}
.pricing-intro .chapter-head{margin-bottom:var(--s5)}
#plans .pay-line{max-width:52rem;margin-inline:auto}
.pricing-context .frows h3{font-weight:400}
/* Our guarantee (the refund policy, owner decision of 4 Oct 2026): a compact list under the plans on /pricing, and one line under "Pay by card". */
.guarantee{max-width:52rem;margin:var(--s6) auto 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.35)}
.guarantee-title{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 17px/1.3 Inter,system-ui,sans-serif;letter-spacing:0}
.guarantee-title .icon{color:var(--accent-ink,var(--accent))}
.guarantee ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.guarantee li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-2)}
.guarantee li .icon{flex:none;margin-top:2px;color:var(--accent-ink,var(--accent))}
@media (min-width:900px){.guarantee ul{grid-template-columns:1fr 1fr;column-gap:28px}}
.pay-guarantee{display:flex;gap:8px;align-items:center;margin-top:8px}
.pay-guarantee .icon{flex:none;color:var(--accent)}

/* The packages (owner, 5 Oct 2026): the Yearly / Monthly switch, the prices of the side shown, the Custom counter. */
.packages{display:grid;gap:var(--s5)}
.packages[data-billing=year] [data-show=month],.packages[data-billing=month] [data-show=year]{display:none}
.billing-switch{justify-self:center;display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-3)}
.billing-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);color:var(--ink);font:600 15px var(--font);text-decoration:none}
.billing-switch a[aria-checked=true]{background:var(--accent);color:var(--on-accent)}
.billing-switch button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font:600 15px var(--font);cursor:pointer}
.billing-switch button[aria-checked=true]{background:var(--accent);color:var(--on-accent)}
.billing-switch button:focus-visible{outline:2px solid var(--accent-link);outline-offset:2px}
.billing-switch .save{padding:2px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.billing-switch button[aria-checked=false] .save{background:var(--bg-4);color:var(--accent-link)}
.packages .plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.plan.quiet{background:transparent}
.stepper{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.stepper button{width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-4);color:var(--ink);font:600 20px/1 var(--font);cursor:pointer}
.stepper button:focus-visible{outline:2px solid var(--accent-link);outline-offset:2px}
.stepper label{display:flex;align-items:baseline;gap:8px;flex:1;justify-content:center}
.stepper input{width:64px;min-height:44px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2,transparent);color:var(--ink);font:600 20px var(--font);text-align:center;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper span{color:var(--soft);font-size:15px}
.package-pick{display:grid;gap:12px;margin:var(--s4) 0}
@media (max-width:767px){.packages .plan[data-plan=free]{order:1}}