/* EvidencePilot public secondary pages: one visual language with the homepage.
 * This file is presentation-only; payment, order and consent state styles keep
 * their semantic colours while inheriting the same calm cream/ink surfaces. */
:root {
  --ep-page: #f7f8f3;
  --ep-surface: rgba(250, 249, 245, .94);
  --ep-surface-strong: #faf9f5;
  --ep-ink: #141413;
  --ep-muted: #59645f;
  --ep-line: #d9ded4;
  --ep-line-strong: #aebaae;
  --ep-mineral: #629987;
  --ep-mineral-deep: #3f7562;
  --ep-clay: #d97757;
  --ep-shadow: 0 18px 55px rgba(24, 38, 31, .10);
  --ep-shadow-sm: 0 8px 26px rgba(24, 38, 31, .07);
}

.pricing-body, .mode-body, body.support-body {
  --navy: var(--ep-ink);
  --navy-2: #2b3d33;
  --text: var(--ep-ink);
  --text-2: var(--ep-muted);
  --text-3: #66736b;
  --line: var(--ep-line);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.92), transparent 24rem),
    radial-gradient(circle at 94% 12%, rgba(207,225,211,.45), transparent 28rem),
    linear-gradient(180deg, #faf9f5 0%, var(--ep-page) 100%);
  color: var(--ep-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pricing-body *, .mode-body *, .support-body * { box-sizing: border-box; }

.pricing-topbar {
  min-height: 68px;
  padding: 12px clamp(18px, 4vw, 56px);
  background: rgba(250, 249, 245, .88);
  border-bottom: 1px solid rgba(174,186,174,.52);
  box-shadow: 0 5px 20px rgba(24,38,31,.04);
  backdrop-filter: blur(16px);
}
.pricing-back, .pricing-help { min-height: 44px; display: inline-flex; align-items: center; color: var(--ep-muted); }
.pricing-back:hover, .pricing-help:hover { color: var(--ep-mineral-deep); }
.pricing-brand strong { color: var(--ep-ink); font-size: 17px; letter-spacing: -.025em; }
.pricing-brand span { color: var(--ep-muted); }
.pricing-main { padding-top: clamp(38px, 6vw, 70px); }
.pricing-hero h1, .legal-card h1, .orders-toolbar h1 { color: var(--ep-ink); letter-spacing: -.035em; line-height: 1.18; }
.pricing-hero h1 { font-size: clamp(30px, 4vw, 48px); }
.pricing-sub { color: var(--ep-muted); line-height: 1.8; }

.billing-toggle { border-color: var(--ep-line); background: rgba(255,255,255,.68); border-radius: 14px; box-shadow: var(--ep-shadow-sm); }
.toggle-btn { min-height: 42px; border-radius: 10px; }
.toggle-btn.is-active { background: var(--ep-ink); }
.plan-grid { gap: 20px; }
.plan-card, .beta-plan, .legal-card, .order-card, .orders-notice, .empty-orders {
  background: var(--ep-surface);
  border-color: var(--ep-line);
  border-radius: 22px;
  box-shadow: var(--ep-shadow-sm);
}
.plan-card { padding: 30px 26px; }
.plan-card:hover { box-shadow: var(--ep-shadow); }
.plan-card.featured { border-color: var(--ep-mineral); }
.plan-ribbon { background: var(--ep-clay); }
.plan-title { color: var(--ep-muted); }
.plan-price .amount, .plan-price .currency, .order-amount { color: var(--ep-ink); }
.plan-features li { border-bottom-color: rgba(174,186,174,.34); }
.plan-features b { color: var(--ep-mineral-deep); }
.plan-cta { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; border-color: var(--ep-line); background: var(--ep-surface-strong); }
.plan-cta:hover:not(:disabled) { border-color: var(--ep-mineral); color: var(--ep-mineral-deep); }
.plan-cta.primary { background: var(--ep-ink); border-color: var(--ep-ink); }
.plan-cta.primary:hover { background: #2b3d33; border-color: #2b3d33; }
.plan-note a { color: var(--ep-clay); }
.pricing-faq details { border-color: var(--ep-line); border-radius: 14px; background: var(--ep-surface); }
.pricing-faq summary { min-height: 30px; display: flex; align-items: center; }
.pricing-faq details p, .beta-copy, .beta-feature span, .legal-card p, .legal-card li { color: var(--ep-muted); }
.beta-kicker { color: var(--ep-mineral-deep); border-color: var(--ep-line); background: var(--ep-surface-strong); }
.beta-boundary { background: rgba(231,240,231,.58); border-left-color: var(--ep-mineral); }
.beta-feature strong { color: var(--ep-mineral-deep); }
.beta-action strong { color: var(--ep-mineral-deep); }
.beta-footer a { color: var(--ep-muted); }
.pay-card { border: 1px solid var(--ep-line); border-radius: 22px; background: var(--ep-surface-strong); box-shadow: 0 28px 90px rgba(20,20,19,.24); }
.pay-head h3 { color: var(--ep-ink); }
.pay-plan-line { background: rgba(231,240,231,.58); border: 1px solid var(--ep-line); }
.icon-button { min-width: 44px; min-height: 44px; border-radius: 10px; }

.support-card { border: 1px solid var(--ep-line); border-radius: 22px; background: var(--ep-surface); box-shadow: var(--ep-shadow); }
.support-card h1 { color: var(--ep-ink); font-size: clamp(26px, 4vw, 36px); letter-spacing: -.035em; }
.support-sub, .support-tip, .support-notes { color: var(--ep-muted); }
.support-back { min-height: 46px; padding: 10px 20px; border-radius: 11px; background: var(--ep-ink) !important; color: #fff !important; }
.support-back:hover { background: #2b3d33 !important; }
.support-qr { border-color: var(--ep-line); border-radius: 16px; }
.support-notes { border-top-color: var(--ep-line); }
.support-notes b { color: var(--ep-ink); }

.mode-body .mode-main { padding-top: clamp(42px, 6vw, 72px); }
.mode-body :is(.mode-hero h1, .mode-title) { color: var(--ep-ink); letter-spacing: -.035em; }
.mode-body .mode-hero p, .mode-body .mode-desc { color: var(--ep-muted); }
.mode-body .mode-card { border-color: var(--ep-line); border-radius: 22px; background: var(--ep-surface); box-shadow: var(--ep-shadow-sm); }
.mode-body .mode-card:hover { border-color: var(--ep-mineral); box-shadow: var(--ep-shadow); }

/* Keep the download page's blue product accents, but give its shell the same
   typography, radii and focus treatment as the homepage. */
.download-nav, .download-shell, .download-footer { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif; }
.download-nav { min-height: 76px; }
.download-brand-mark { border-radius: 14px; }
.download-status-card, .download-device-card, .download-release-card, .download-grid > *, .download-safety { border-radius: 22px; }
.download-primary, .download-secondary { min-height: 46px; border-radius: 11px; }

:where(.pricing-body, .mode-body, .support-body, .download-shell) :where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--ep-mineral-deep);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .pricing-topbar { padding-inline: 14px; }
  .pricing-brand span { display: none; }
  .pricing-main { padding-inline: 16px; }
  .support-body { padding: 16px !important; }
  .support-card { padding: 28px 20px 22px; }
  .support-back { margin: 4px 0 !important; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card, .support-back { transition: none !important; }
}