/* Shared style for /pricing, /terms, /privacy, /refund pages.
   Standalone — these are static HTML and don't go through Vite's
   bundler, so we use plain CSS with no CSS variables that depend on
   the React app's tokens. Looks like the same brand though. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  background: #24202f;
  color: #efebe3;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

a { color: #f4a261; text-decoration: none; }
a:hover { text-decoration: underline; }

.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(36, 32, 47, 0.88);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #efebe3;
  text-decoration: none;
}
.legal-brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4a261, #e76f51);
  display: flex; align-items: center; justify-content: center;
  color: #fff8ef;
  box-shadow: 0 2px 8px rgba(231,111,81,0.3);
}
.legal-brand-mark svg { width: 22px; height: 22px; }
.legal-brand-text { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.legal-brand-text span { font-weight: 500; color: #b5b0a7; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: #efebe3;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255,255,255,0.04);
}
.legal-back:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.legal-page {
  max-width: 760px;
  margin: 56px auto 80px;
  padding: 0 24px;
}
/* Pricing needs more horizontal room because three cards side by side
   look cramped at 760px. Bumps to 1080px and gives each card breathing
   space. Below 720px it falls back to single column via the @media
   rule at the bottom of this file. */
.legal-page.legal-page--wide {
  max-width: 1080px;
}
.legal-page h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.legal-page .legal-meta {
  font-size: 13px;
  color: #8a857c;
  margin-bottom: 32px;
}
.legal-page h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 32px 0 12px;
  color: #efebe3;
}
.legal-page h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 8px;
  color: #efebe3;
}
.legal-page p {
  margin-bottom: 14px;
  color: #b5b0a7;
}
.legal-page ul {
  margin: 0 0 16px 22px;
  color: #b5b0a7;
}
.legal-page ul li { margin-bottom: 6px; }
.legal-page strong { color: #efebe3; font-weight: 600; }
.legal-page code {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: #efebe3;
}

.legal-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 32px;
  text-align: center;
  color: #8a857c;
  font-size: 12px;
}
.legal-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
}
.legal-footer-links a { color: #b5b0a7; }

/* Pricing page additions */
.pricing-hero {
  text-align: center;
  margin-bottom: 40px;
}
.pricing-hero h1 {
  font-size: 36px;
  margin-bottom: 12px;
}
.pricing-hero p {
  font-size: 16px;
  color: #b5b0a7;
  max-width: 540px;
  margin: 0 auto;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 48px;
}
.pricing-card {
  padding: 32px 28px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  position: relative;
  min-width: 0;
}
.pricing-card.featured {
  border-color: rgba(231,111,81,0.45);
  background:
    linear-gradient(180deg, rgba(244,162,97,0.06), transparent 60%),
    rgba(255,255,255,0.03);
}
.pricing-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f4a261, #e76f51);
  color: #fff8ef;
  padding: 4px 10px;
  border-radius: 6px;
}
.pricing-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.pricing-tagline {
  font-size: 13px;
  color: #8a857c;
  margin-bottom: 18px;
}
.pricing-amount {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.pricing-amount span {
  font-size: 14px;
  color: #8a857c;
  font-weight: 500;
  margin-left: 2px;
}
.pricing-perks {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
/* Absolute-positioned checkmark instead of a flex layout — flex was
   splitting the <strong> and the trailing text into separate flex
   items, so long bullets like "Chat with PDF — ask questions..."
   were wrapping in two columns. Plain text flow + absolute ✓ keeps
   the description on one continuous line and wraps naturally. */
.pricing-perks li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: #b5b0a7;
  margin-bottom: 11px;
  line-height: 1.55;
}
.pricing-perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #6dce89;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
}
.pricing-perks li strong {
  color: #efebe3;
  font-weight: 600;
}
.pricing-cta {
  display: block;
  text-align: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.pricing-cta.primary {
  background: linear-gradient(135deg, #f4a261, #e76f51);
  color: #fff8ef;
  box-shadow: 0 2px 8px rgba(231,111,81,0.32);
}
.pricing-cta.primary:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.pricing-cta.secondary {
  background: rgba(255,255,255,0.04);
  color: #efebe3;
  border: 1px solid rgba(255,255,255,0.14);
}
.pricing-cta.secondary:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
}