/* ══════════════════════════════════════════════
   ReadFlow — Pricing Page v2
   All selectors scoped under .pr-wrapper
   ══════════════════════════════════════════════ */

:root {
  --accent:#6366f1;--accent-light:#818cf8;--accent-deep:#4f46e5;
  --warm:#f59e0b;--warm-light:#fbbf24;--green:#22c55e;--green-light:#4ade80;
  --red:#ef4444;--text:#1e293b;--text-muted:#64748b;--text-light:#94a3b8;
  --surface:#f8fafc;--white:#ffffff;--border:#e2e8f0;--dark:#0a0e1a;
}

.pr-wrapper .fi { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1) }
.pr-wrapper .fi.v { opacity:1; transform:none }
.pr-wrapper { font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; color:var(--text) }
.pr-wrapper h1,.pr-wrapper h2,.pr-wrapper h3,.pr-wrapper h4 { text-transform:none; letter-spacing:-.02em; margin:0; padding:0 }
.pr-wrapper p { margin:0; padding:0 }
.pr-wrapper a { text-decoration:none }
.pr-wrapper button { text-transform:none; letter-spacing:normal; cursor:pointer; font-family:'DM Sans',sans-serif }

/* ═══ HERO ═══ */
.pr-wrapper .pr-hero { background:var(--dark); padding:120px 24px 160px; text-align:center; position:relative; overflow:hidden }
.pr-wrapper .pr-hero::before { content:''; position:absolute; inset:0; opacity:.03; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.5) 1px,transparent 0); background-size:32px 32px }
.pr-wrapper .pr-hero-glow { position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:900px; height:900px; background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%); border-radius:50%; filter:blur(80px) }
.pr-wrapper .pr-hero-inner { max-width:700px; margin:0 auto; position:relative; z-index:2 }
.pr-wrapper .pr-hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); border-radius:100px; padding:6px 18px; margin-bottom:28px }
.pr-wrapper .pr-hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--green) }
.pr-wrapper .pr-hero-badge-text { color:var(--green-light); font-size:13px; font-weight:600 }
.pr-wrapper .pr-hero h1 { font-size:48px; font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.03em; margin-bottom:16px }
.pr-wrapper .pr-hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--accent),var(--accent-light),#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.pr-wrapper .pr-hero-desc { font-size:18px; line-height:1.7; color:rgba(255,255,255,.5); max-width:560px; margin:0 auto 32px }
.pr-wrapper .pr-hero-trust { display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin-top:8px }
.pr-wrapper .pr-hero-trust-item { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.4); font-size:13px; font-weight:500 }
.pr-wrapper .pr-hero-trust-item span:first-child { font-size:16px }

/* ═══ PRICING CARDS ═══ */
.pr-wrapper .pr-section { padding:80px 24px }
.pr-wrapper .pr-section.alt { background:var(--surface) }
.pr-wrapper .pr-section.dark { background:var(--dark) }
.pr-wrapper .pr-inner { max-width:1100px; margin:0 auto }
.pr-wrapper .pr-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:-80px; position:relative; z-index:10 }
.pr-wrapper .pr-card { background:var(--white); border-radius:24px; padding:40px 32px 36px; border:2px solid var(--border); position:relative; transition:transform .3s,box-shadow .3s; display:flex; flex-direction:column }
.pr-wrapper .pr-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.08) }
.pr-wrapper .pr-card.featured { border-color:var(--accent); box-shadow:0 8px 40px rgba(99,102,241,.15) }
.pr-wrapper .pr-card.featured:hover { box-shadow:0 20px 60px rgba(99,102,241,.2) }
.pr-wrapper .pr-popular { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; font-size:12px; font-weight:700; padding:6px 20px; border-radius:100px; white-space:nowrap; letter-spacing:.03em; box-shadow:0 4px 16px rgba(99,102,241,.3) }
.pr-wrapper .pr-card-icon { font-size:32px; margin-bottom:16px }
.pr-wrapper .pr-card-name { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px }
.pr-wrapper .pr-card-price { display:flex; align-items:baseline; gap:4px; margin-bottom:4px }
.pr-wrapper .pr-card-price .amount { font-size:48px; font-weight:800; color:var(--text); letter-spacing:-.03em; line-height:1 }
.pr-wrapper .pr-card-price .unit { font-size:16px; color:var(--text-muted); font-weight:500 }
.pr-wrapper .pr-card-billing { font-size:13px; color:var(--text-light); margin-bottom:6px }
.pr-wrapper .pr-card-save { display:inline-block; font-size:12px; font-weight:700; color:var(--green); background:rgba(34,197,94,.08); border-radius:6px; padding:4px 10px; margin-bottom:20px }
.pr-wrapper .pr-card-save.hidden { visibility:hidden }
.pr-wrapper .pr-card-divider { height:1px; background:var(--border); margin-bottom:20px }
.pr-wrapper .pr-card-features { list-style:none; margin-bottom:28px; flex-grow:1 }
.pr-wrapper .pr-card-features li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-muted); line-height:1.5; margin-bottom:12px }
.pr-wrapper .pr-card-features li .check { width:20px; height:20px; border-radius:50%; background:rgba(34,197,94,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; color:var(--green); margin-top:1px }
.pr-wrapper .pr-card-btn { display:block; width:100%; text-align:center; padding:16px; border-radius:14px; font-size:15px; font-weight:700; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .3s; text-decoration:none }
.pr-wrapper .pr-card-btn.primary { background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; box-shadow:0 4px 20px rgba(99,102,241,.25) }
.pr-wrapper .pr-card-btn.primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,102,241,.35) }
.pr-wrapper .pr-card-btn.outline { background:var(--white); color:var(--accent); border:2px solid var(--border) }
.pr-wrapper .pr-card-btn.outline:hover { border-color:var(--accent); background:rgba(99,102,241,.03) }

/* ═══ QUOTES SLIDER ═══ */
.pr-wrapper .pr-quotes { background:var(--dark); padding:64px 24px; position:relative; overflow:hidden }
.pr-wrapper .pr-quotes-inner { max-width:700px; margin:0 auto; text-align:center; position:relative; min-height:220px }
.pr-wrapper .pr-quote-slide { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; pointer-events:none }
.pr-wrapper .pr-quote-slide.active { opacity:1; transform:translateY(0); pointer-events:auto }
.pr-wrapper .pr-quote-slide.exit { opacity:0; transform:translateY(-20px) }
.pr-wrapper .pr-quote-mark { font-size:48px; color:var(--accent); opacity:.2; font-family:'DM Serif Display',serif; line-height:1; margin-bottom:8px }
.pr-wrapper .pr-quote-text { font-size:20px; line-height:1.75; color:rgba(255,255,255,.8); font-style:italic; margin-bottom:24px; max-width:600px; font-weight:500; text-align:center }
.pr-wrapper .pr-quote-author-row { display:flex; align-items:center; gap:12px; justify-content:center }
.pr-wrapper .pr-quote-avatar { width:36px; height:36px; border-radius:50%; background:rgba(99,102,241,.15); display:flex; align-items:center; justify-content:center; font-size:16px }
.pr-wrapper .pr-quote-name { font-size:14px; font-weight:700; color:rgba(255,255,255,.6) }
.pr-wrapper .pr-quote-role { font-size:12px; color:rgba(255,255,255,.3) }
.pr-wrapper .pr-quotes-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; position:relative; z-index:2 }
.pr-wrapper .pr-quotes-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); cursor:pointer; transition:all .3s; border:none; padding:0 }
.pr-wrapper .pr-quotes-dot.active { background:var(--accent-light); width:24px; border-radius:4px }
.pr-wrapper .pr-quotes-dot:hover { background:rgba(255,255,255,.3) }

/* ═══ VALUE PROPOSITION ═══ */
.pr-wrapper .pr-value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px }
.pr-wrapper .pr-value-card { text-align:center; padding:32px 20px; background:var(--white); border-radius:18px; border:1px solid var(--border); transition:transform .3s }
.pr-wrapper .pr-value-card:hover { transform:translateY(-3px) }
.pr-wrapper .pr-value-icon { font-size:32px; margin-bottom:14px }
.pr-wrapper .pr-value-num { font-size:28px; font-weight:800; color:var(--accent); margin-bottom:4px }
.pr-wrapper .pr-value-label { font-size:14px; color:var(--text-muted); line-height:1.4 }

/* ═══ COMPARISON TABLE ═══ */
.pr-wrapper .pr-table-wrap { overflow-x:auto; margin-top:48px }
.pr-wrapper .pr-table { width:100%; border-collapse:collapse; min-width:600px }
.pr-wrapper .pr-table th,.pr-wrapper .pr-table td { padding:16px 20px; text-align:left; font-size:14px; border-bottom:1px solid var(--border) }
.pr-wrapper .pr-table thead th { background:var(--surface); font-weight:700; color:var(--text); font-size:13px; text-transform:uppercase; letter-spacing:.05em }
.pr-wrapper .pr-table thead th:first-child { border-radius:12px 0 0 0 }
.pr-wrapper .pr-table thead th:last-child { border-radius:0 12px 0 0 }
.pr-wrapper .pr-table thead th.highlight { background:rgba(99,102,241,.06); color:var(--accent) }
.pr-wrapper .pr-table tbody td { color:var(--text-muted) }
.pr-wrapper .pr-table tbody td.highlight { background:rgba(99,102,241,.02) }
.pr-wrapper .pr-table tbody td .yes { color:var(--green); font-weight:700 }
.pr-wrapper .pr-table tbody td .no { color:var(--text-light) }
.pr-wrapper .pr-table tbody tr:last-child td { border-bottom:none }
.pr-wrapper .pr-table .feature-name { font-weight:600; color:var(--text) }

/* ═══ GUARANTEE ═══ */
.pr-wrapper .pr-guarantee { display:flex; align-items:center; gap:24px; background:rgba(34,197,94,.04); border:1px solid rgba(34,197,94,.15); border-radius:20px; padding:32px 36px; max-width:800px; margin:0 auto }
.pr-wrapper .pr-guarantee-icon { font-size:48px; flex-shrink:0 }
.pr-wrapper .pr-guarantee h3 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:6px; text-align:left }
.pr-wrapper .pr-guarantee p { font-size:15px; color:var(--text-muted); line-height:1.65; text-align:left }

/* ═══ FAQ ═══ */
.pr-wrapper .pr-faq { max-width:720px; margin:48px auto 0 }
.pr-wrapper .pr-faq-item { border-bottom:1px solid var(--border); padding:20px 0 }
.pr-wrapper .pr-faq-item:first-child { border-top:1px solid var(--border) }
.pr-wrapper .pr-faq-q { font-size:16px; font-weight:700; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px }
.pr-wrapper .pr-faq-q::after { content:'+'; font-size:22px; font-weight:300; color:var(--text-light); transition:transform .3s; flex-shrink:0 }
.pr-wrapper .pr-faq-item.open .pr-faq-q::after { content:'−' }
.pr-wrapper .pr-faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease,padding .3s; padding-top:0 }
.pr-wrapper .pr-faq-item.open .pr-faq-a { max-height:300px; padding-top:12px }
.pr-wrapper .pr-faq-a p { font-size:15px; color:var(--text-muted); line-height:1.7; text-align:left }

/* ═══ SECTION HEADERS ═══ */
.pr-wrapper .pr-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:12px; display:block; text-align:center }
.pr-wrapper .pr-h2 { font-size:36px; font-weight:800; line-height:1.2; letter-spacing:-.02em; margin-bottom:16px; text-align:center; display:block }
.pr-wrapper .pr-subdesc { font-size:17px; line-height:1.7; color:var(--text-muted); max-width:560px; margin:0 auto; text-align:center }

/* ═══ CTA ═══ */
.pr-wrapper .pr-cta { background:var(--dark); padding:100px 24px; text-align:center; position:relative; overflow:hidden }
.pr-wrapper .pr-cta-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 60%); border-radius:50%; filter:blur(80px) }
.pr-wrapper .pr-cta-inner { max-width:600px; margin:0 auto; position:relative; z-index:2 }
.pr-wrapper .pr-cta h2 { font-size:36px; font-weight:800; color:#fff; margin-bottom:16px; letter-spacing:-.02em; line-height:1.25; text-align:center }
.pr-wrapper .pr-cta p { font-size:17px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:32px; text-align:center }
.pr-wrapper .pr-cta-btn { background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; border:none; padding:18px 40px; border-radius:14px; font-size:17px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; box-shadow:0 8px 40px rgba(99,102,241,.35); transition:all .3s; display:inline-block; text-decoration:none }
.pr-wrapper .pr-cta-btn:hover { transform:translateY(-2px); box-shadow:0 16px 48px rgba(99,102,241,.5); color:#fff }
.pr-wrapper .pr-cta-sub { font-size:13px; color:rgba(255,255,255,.3); margin-top:16px; text-align:center }

/* ═══ MATH BREAKDOWN ═══ */
.pr-wrapper .pr-math-card { background:var(--surface); border-radius:16px; padding:28px 16px; border:1px solid var(--border); text-align:center }
.pr-wrapper .pr-math-icon { font-size:28px; margin-bottom:8px }
.pr-wrapper .pr-math-num { font-size:24px; font-weight:800; color:var(--accent); margin-bottom:4px }
.pr-wrapper .pr-math-label { font-size:13px; color:var(--text-muted) }
/* ═══ Fix Flatsome button override on dots ═══ */
.pr-wrapper .pr-quotes-dot {
  width: 8px !important;
  height: 8px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  line-height: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
.pr-wrapper .pr-quotes-dot.active {
  background: var(--accent-light) !important;
  width: 24px !important;
  border-radius: 4px !important;
}
.pr-wrapper .pr-quotes-dot:hover {
  background: rgba(255,255,255,.3) !important;
}
/* ═══ Fix quotes container height ═══ */
.pr-wrapper .pr-quotes {
  background: var(--dark) !important;
  padding: 64px 24px !important;
  display: block !important;
  min-height: 320px !important;
}
.pr-wrapper .pr-quotes-inner {
  max-width: 700px !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  min-height: 220px !important;
  display: block !important;
}
.pr-wrapper .pr-quote-slide {
  position: absolute !important;
  inset: 0 !important;
}
.pr-wrapper .pr-quote-text {
  font-size: 20px !important;
  color: rgba(255,255,255,.8) !important;
  font-style: italic !important;
  text-align: center !important;
}
.pr-wrapper .pr-quote-name {
  font-size: 14px !important;
  color: rgba(255,255,255,.6) !important;
}
.pr-wrapper .pr-quote-role {
  font-size: 12px !important;
  color: rgba(255,255,255,.3) !important;
}
.pr-wrapper .pr-quote-mark {
  font-size: 48px !important;
  color: var(--accent) !important;
  opacity: .2 !important;
}
.pr-wrapper .pr-quotes-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
}
/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) {
  .pr-wrapper .pr-hero h1 { font-size:32px }
  .pr-wrapper .pr-cards { grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; gap:20px }
  .pr-wrapper .pr-cards .pr-card.featured { order:-1 }
  .pr-wrapper .pr-quote-text { font-size:17px }
  .pr-wrapper .pr-value-grid { grid-template-columns:repeat(2,1fr) }
  .pr-wrapper .pr-h2 { font-size:28px }
  .pr-wrapper .pr-guarantee { flex-direction:column; text-align:center }
  .pr-wrapper .pr-guarantee h3, .pr-wrapper .pr-guarantee p { text-align:center }
}
@media(max-width:500px) {
  .pr-wrapper .pr-value-grid { grid-template-columns:1fr }
}