/* File: web/assets/pricing.css — /pricing (redesign canvas artboard 02). Loaded AFTER
 * landing.css and uses its tokens; like the landing it is a dark-only marketing surface. */
.pr-head { padding: 88px 0 48px; max-width: 40em; }
.pr-head h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -.04em; margin: 16px 0 16px; }
.pr-head p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }
.pr-plans { margin-bottom: 96px; }
.pr-plans .plan { display: flex; flex-direction: column; }
.pr-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pr-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.pr-list svg { margin-top: 2px; color: var(--ok); }
.pr-list li.no svg { color: var(--faint); }
.pr-fine { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); margin: -12px 0 22px; letter-spacing: .02em; }
.pr-states { display: grid; gap: 14px; margin-bottom: 96px; }
.pr-state { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 24px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 14px; background: var(--panel); }
.pr-state .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.pr-state strong { display: block; font-size: 16px; margin-bottom: 4px; }
.pr-state p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.pr-state.warn { border-left-color: var(--amber); } .pr-state.warn .tag { color: var(--amber); }
.pr-state.run { border-left-color: var(--ok); } .pr-state.run .tag { color: var(--ok); }
.pr-state.sub { border-left-color: var(--accent); } .pr-state.sub .tag { color: var(--accent); }
.pr-faq { margin-bottom: 110px; }
.pr-faq h3 { font-size: 17px; letter-spacing: -.02em; margin: 0 0 8px; }
.pr-faq p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 760px) {
  .pr-head { padding: 56px 0 32px; }
  .pr-state { grid-template-columns: 1fr; gap: 8px; }
}