/* Shared pricing component (site + dashboard). Uses brand tokens with fallbacks for both contexts. */
.pr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.pr-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border: 1px solid var(--line, #e5e8ed); border-radius: 18px; background: var(--surface, #fff); transition: box-shadow .22s cubic-bezier(.2,.7,.2,1), border-color .22s; }
.pr-plan:hover { box-shadow: 0 16px 36px -24px rgba(11,26,51,.3); border-color: color-mix(in srgb, var(--brand, #F26B1D) 35%, var(--line, #e5e8ed)); }
.pr-plan.hot { border-color: var(--brand, #F26B1D); box-shadow: 0 0 0 3px var(--brand-soft, #FFF4EC), 0 24px 48px -30px rgba(242,107,29,.45); }
.pr-plan.current { border-color: var(--brand, #F26B1D); }
.pr-tag { font: 600 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text, #B2480E); min-height: 11px; }
.pr-plan.hot .pr-tag { background: var(--brand, #F26B1D); color: var(--on-brand, #fff); padding: 5px 9px; border-radius: 999px; align-self: flex-start; }
.pr-plan h3 { margin: 4px 0 0; font: 700 22px/1.1 var(--font-display, var(--sans, inherit)); letter-spacing: -.02em; color: var(--fg, var(--ink, #0c0e12)); }
.pr-price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 6px; }
.pr-price b { font: 700 36px/1 var(--font-display, var(--sans, inherit)); letter-spacing: -.03em; color: var(--fg, var(--ink, #0c0e12)); }
.pr-price small { font-size: 13px; color: var(--fg-3, var(--muted, #828896)); }
.pr-plan ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-plan li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: var(--fg-2, var(--ink-2, #4b5160)); }
.pr-plan li svg { color: var(--brand, #F26B1D); margin-top: 2px; }
.pr-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong, #d3d8e0); font: 600 14px var(--font-text, var(--sans, inherit)); color: var(--fg, var(--ink, #0c0e12)); background: var(--surface, #fff); text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s; white-space: nowrap; }
.pr-btn.ghost:hover { background: var(--surface-2, #f3f4f7); }
.pr-btn.primary { background: var(--brand, #F26B1D); color: var(--on-brand, #fff); border-color: var(--brand, #F26B1D); }
.pr-btn.primary:hover { background: var(--brand-hover, #D85A12); box-shadow: 0 10px 24px -12px rgba(242,107,29,.6); }
.pr-btn.current { background: var(--brand-soft, #FFF4EC); color: var(--brand-text, #B2480E); border-color: transparent; cursor: default; }
.pr-principles { margin: 28px auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; max-width: 1100px; }
.pr-principles li { padding: 14px 16px; border-left: 3px solid var(--brand, #F26B1D); background: var(--surface-2, #f3f4f7); border-radius: 0 12px 12px 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-2, var(--ink-2, #4b5160)); }
/* comparison table */
.pr-compare { margin-top: 36px; overflow-x: auto; border: 1px solid var(--line, #e5e8ed); border-radius: 18px; background: var(--surface, #fff); -webkit-overflow-scrolling: touch; }
.pr-compare table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.pr-compare th, .pr-compare td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--line, #e5e8ed); vertical-align: middle; }
.pr-compare thead th { position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }
.pr-compare th.hot, .pr-compare td.hot { background: color-mix(in srgb, var(--brand-soft, #FFF4EC) 55%, var(--surface, #fff)); }
.pr-compare .pr-lbl { text-align: left; color: var(--fg, var(--ink, #0c0e12)); font-weight: 500; width: 34%; min-width: 240px; }
.pr-compare .pr-lbl small { display: block; font-weight: 400; color: var(--fg-3, var(--muted, #828896)); font-size: 12px; margin-top: 2px; }
.pr-th { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.pr-th b { font: 700 15px var(--font-display, var(--sans, inherit)); color: var(--fg, var(--ink, #0c0e12)); }
.pr-th span { font-size: 12px; color: var(--fg-3, var(--muted, #828896)); }
.pr-compare .pr-group th { text-align: left; font: 600 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text, #B2480E); background: var(--surface-2, #f3f4f7); padding: 10px 16px; }
.pr-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-100, #D6F3EE); color: var(--teal-700, #0A756A); }
.pr-no { color: var(--fg-3, var(--faint, #b4bac6)); }
.pr-val { color: var(--fg, var(--ink, #0c0e12)); font-weight: 500; }
.pr-compare tbody tr:hover td { background: color-mix(in srgb, var(--surface-2, #f3f4f7) 70%, var(--surface, #fff)); }
.pr-compare tfoot td { border-bottom: 0; padding: 16px; }
.pr-compare tfoot .pr-btn { margin: 0; height: 38px; font-size: 13px; }
@media (max-width: 600px) { .pr-price b { font-size: 30px; } .pr-compare table { min-width: 640px; } }
.pr-plan h3, .pr-th b { text-transform: none; }

.pr-plan[data-plan="free"] .pr-tag { background: var(--teal-100, #D6F3EE); color: var(--teal-700, #0A756A); padding: 5px 9px; border-radius: 999px; align-self: flex-start; }
.pr-edge { margin-top: 44px; }
.pr-edge-h { max-width: 760px; margin: 0 auto 18px; text-align: center; }
.pr-edge-h h3 { font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--font-display, var(--sans, inherit)); letter-spacing: -.02em; margin: 0 0 8px; color: var(--fg, var(--ink, #0c0e12)); }
.pr-edge-h p { margin: 0; color: var(--fg-2, var(--ink-2, #4b5160)); font-size: 15px; line-height: 1.55; }
.pr-edge-t table { min-width: 1040px; }
.pr-edge-t .pr-lbl { width: 22%; min-width: 200px; }
.pr-edge-t td { font-size: 13px; }
.pr-src { font-size: 12px; color: var(--fg-3, var(--muted, #828896)); margin: 10px 4px 0; }