/* LeadScraper pricing page (keeps the class names the page script uses) */
:root { --primary: #ff5a1f; --success: #0a7468; --border: var(--ls-line); --text: var(--ls-text); --card-bg: var(--ls-surface); }
.pr-main { width: min(1000px, 100% - 40px); margin: 0 auto; padding: 56px 0 80px; }
.pr-main .header { margin-bottom: 32px; max-width: 640px; }
.pr-main .header h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; margin: 10px 0 12px; }
.pr-main .header p { color: var(--ls-ink-2); font-size: 17px; }

.current-plan-banner { display: none; background: var(--ls-surface); border: 1.5px solid var(--ls-ink); border-radius: var(--ls-radius-lg); padding: 20px 22px; margin-bottom: 28px; }
.current-plan-banner.active { display: block; }
.current-plan-banner h3 { font-size: 18px; }
.current-plan-banner h3 span { color: var(--ls-orange-text); }
.current-plan-banner p { font-family: var(--ls-narrow); font-size: 15px; color: var(--ls-ink-2); }
.usage-bar { height: 8px; background: var(--ls-paper-2); border-radius: 4px; overflow: hidden; }
.usage-fill { height: 100%; background: var(--ls-orange); transition: width .4s; }

.billing-toggle { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: var(--ls-narrow); font-weight: 600; font-size: 16px; }
.billing-toggle span { color: var(--ls-muted); }
.billing-toggle span.active { color: var(--ls-text); }
.toggle { width: 52px; height: 28px; background: var(--ls-paper-2); border: 1.5px solid var(--ls-ink); border-radius: 999px; cursor: pointer; position: relative; }
[data-theme="dark"] .toggle { border-color: var(--ls-line); }
.toggle.active { background: var(--ls-orange); }
.toggle::after { content: ""; position: absolute; width: 20px; height: 20px; background: #fff; border: 1.5px solid var(--ls-ink); border-radius: 50%; top: 2px; left: 2px; transition: transform .2s; }
.toggle.active::after { transform: translateX(24px); }
.save-badge { background: var(--ls-teal-tint); color: var(--ls-teal-text); padding: 3px 8px; border-radius: 4px; font-size: 13px; }

.pricing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pricing-card { background: var(--ls-surface); border: 1.5px solid var(--ls-line); border-radius: var(--ls-radius-lg); padding: 30px; position: relative; display: flex; flex-direction: column; }
.pricing-card.featured { border-color: var(--ls-ink); box-shadow: 6px 6px 0 var(--ls-orange); }
[data-theme="dark"] .pricing-card.featured { border-color: var(--ls-orange); box-shadow: none; }
.pricing-card.featured::before { content: "Professional"; position: absolute; top: -12px; right: 20px; background: var(--ls-ink); color: #fff; font-family: var(--ls-narrow); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.pricing-card.current::after { content: "Your plan"; position: absolute; top: -12px; left: 20px; background: var(--ls-teal); color: #fff; font-family: var(--ls-narrow); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.plan-name { font-family: var(--ls-head); font-weight: 800; font-size: 22px; }
.plan-desc { color: var(--ls-muted); font-size: 15px; margin-top: 4px; }
.price { font-family: var(--ls-head); font-weight: 800; font-size: 50px; letter-spacing: -0.03em; margin-top: 16px; }
.price span { font-size: 16px; font-weight: 600; color: var(--ls-muted); margin-left: 4px; letter-spacing: 0; }
.price-note { font-family: var(--ls-narrow); color: var(--ls-muted); margin-bottom: 20px; }
#couponCodeInput { background: var(--ls-surface); color: var(--ls-text); border: 1.5px solid var(--ls-line) !important; border-radius: var(--ls-radius) !important; font-family: var(--ls-narrow) !important; }
#applyCouponBtn { background: var(--ls-ink) !important; border-radius: var(--ls-radius) !important; font-family: var(--ls-head); }
[data-theme="dark"] #applyCouponBtn { background: var(--ls-text) !important; color: var(--ls-ink) !important; }
#couponApplied { background: var(--ls-teal) !important; border-radius: var(--ls-radius) !important; }
#couponError { color: var(--ls-red) !important; }
#couponSuccess { color: var(--ls-teal-text) !important; }
.features-list { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.features-list li { padding: 7px 0 7px 24px; position: relative; font-size: 15px; border-top: 1px dashed var(--ls-line); }
.features-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 11px; height: 6px; border-left: 2px solid var(--ls-teal); border-bottom: 2px solid var(--ls-teal); transform: rotate(-45deg); }
.features-list li:has(strong) { padding-left: 0; border-top: 0; margin-top: 10px; font-family: var(--ls-narrow); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ls-orange-text); }
.features-list li:has(strong)::before { display: none; }
.plan-btn { font-family: var(--ls-head); font-weight: 700; font-size: 16px; padding: 13px 18px; border-radius: var(--ls-radius); cursor: pointer; width: 100%; border: 1.5px solid var(--ls-ink); }
.plan-btn.primary { background: var(--ls-orange); color: var(--ls-ink); box-shadow: 2px 2px 0 var(--ls-ink); }
.plan-btn.primary:hover { background: var(--ls-orange-press); }
.plan-btn.outline { background: transparent; color: var(--ls-text); border-color: var(--ls-line); }
.plan-btn:disabled { opacity: .6; cursor: not-allowed; }

.faq { margin-top: 64px; }
.faq h2 { font-size: 30px; font-weight: 800; margin-bottom: 18px; }
.faq-item { border-bottom: 1.5px solid var(--ls-line); cursor: pointer; }
.faq-item:first-of-type { border-top: 1.5px solid var(--ls-line); }
.faq-question { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--ls-head); font-weight: 700; font-size: 17px; }
.faq-question span { color: var(--ls-orange-text); font-size: 22px; line-height: 1; }
.faq-answer { display: none; padding: 0 0 18px; color: var(--ls-ink-2); }
.faq-item.open .faq-answer { display: block; }
.pr-nav .btn { display: inline-flex; align-items: center; font-family: var(--ls-head); font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: var(--ls-radius); text-decoration: none; border: 1.5px solid var(--ls-line); color: var(--ls-text); }
.pr-nav .btn-primary { background: var(--ls-orange); color: var(--ls-ink); border-color: var(--ls-ink); box-shadow: 2px 2px 0 var(--ls-ink); }
.pr-nav { display: flex; gap: 10px; margin-left: auto; }

@media (max-width: 760px) {
  .pricing-cards { grid-template-columns: 1fr; }
  .pricing-card { padding: 24px 20px; }
  .current-plan-banner > div { grid-template-columns: 1fr !important; }
  .pr-nav .btn:not(.btn-primary) { padding: 10px 12px; }
}

.pr-main .header .ls-eyebrow { color: var(--ls-orange-text); font-size: 13px; }