/* ═══════════════════════════════════════════════════════════════
   LUNARA — WEEKLY BABY REPORT FEATURE PAGE (page-specific styles)
   Route: /features/weekly-baby-report
   Depends on global tokens from assets/frontend/css/lunara.css:
   --ink, --ink-dark, --cream, --cream-warm, --gold, --gold-light,
   --lavender, --lav-deep, --text-dark, --glass-bg, --glass-border,
   --sh-soft, --sh-card, --r-card, --r-pill
   Page-local classes are prefixed .wr- to avoid clashing with
   globals or other feature pages. Mobile-first: base rules target
   the smallest viewport; @media (min-width: ...) layers on desktop.
═══════════════════════════════════════════════════════════════ */

body.page-features-weekly-report nav.site-nav.scrolled {
  padding: 16px 48px;
  background: rgba(28,22,36,0.92);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid rgba(217,188,148,0.12);
  box-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
body.page-features-weekly-report .nav-links a:hover,
body.page-features-weekly-report .nav-links a.active { color: #fdf9f4; }
body.page-features-weekly-report .nav-links a { color: rgba(253,249,244,0.65); }
body.page-features-weekly-report .nav-cta {
  background: linear-gradient(135deg, #d9bc94, #8b7cba);
  color: #1c1624; border: none; padding: 10px 24px;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 20px rgba(217,188,148,0.35);
}
body.page-features-weekly-report .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217,188,148,0.42); }

body.page-features-weekly-report { background: var(--ink); color: rgba(253,249,244,0.90); }
body.page-features-weekly-report h1,
body.page-features-weekly-report h2,
body.page-features-weekly-report h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.15;
}
body.page-features-weekly-report em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--lavender));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; }

/* ── Ambient orbs ── */
.wr-orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.wr-orb-1 { width: 480px; height: 480px; top: -140px; left: -120px; background: rgba(217,188,148,0.16); animation: wrOrbFloat 26s ease-in-out infinite; }
.wr-orb-2 { width: 380px; height: 380px; top: 20%; right: -140px; background: rgba(139,124,186,0.14); animation: wrOrbFloat 22s ease-in-out infinite reverse; }
.wr-orb-3 { width: 420px; height: 420px; bottom: -160px; left: 10%; background: rgba(217,188,148,0.10); animation: wrOrbFloat 30s ease-in-out infinite; }
@keyframes wrOrbFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-20px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .wr-orb { animation: none; } .reveal { transition: none; } }

section { position: relative; z-index: 1; }

/* ══════════════════════════ HERO ══════════════════════════ */
.wr-hero { padding: 44px 20px 56px; }
.wr-hero-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.wr-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(217,188,148,0.12); border: 1px solid rgba(217,188,148,0.32);
  border-radius: var(--r-pill); padding: 8px 18px; font-size: 12px;
  color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 22px; position: relative; overflow: hidden;
}
.wr-hero-eyebrow::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: wrShimmer 4.5s ease-in-out infinite 1.8s;
}
@keyframes wrShimmer { 0% { left: -100%; } 100% { left: 210%; } }

.wr-hero-h1 { font-size: clamp(34px, 8vw, 58px); color: rgba(253,249,244,0.96); margin-bottom: 20px; }
.wr-hero-answer { font-size: 16px; line-height: 1.75; color: rgba(253,249,244,0.68); max-width: 580px; margin-bottom: 22px; }
.wr-hero-answer strong { color: rgba(253,249,244,0.92); font-weight: 500; }
.wr-hero-trust-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(253,249,244,0.50); margin-bottom: 26px; flex-wrap: wrap; }

.wr-hero-ctas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; width: 100%; }
.wr-hero-ctas .btn-primary, .wr-hero-ctas .btn-ghost { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; height: 54px; display: inline-flex; align-items: center; gap: 8px; }

.wr-hero-social { font-size: 13px; color: rgba(253,249,244,0.55); display: flex; align-items: center; gap: 8px; }
.wr-hero-social strong { color: var(--gold); font-weight: 500; }

/* ── Report card mockup ── */
.wr-hero-visual { position: relative; display: flex; justify-content: center; padding: 20px 0 8px; }
.wr-hero-visual-glow {
  position: absolute; inset: -30px;
  background: radial-gradient(circle at 50% 40%, rgba(217,188,148,0.24), transparent 65%);
  filter: blur(30px); z-index: 0; animation: wrGlowPulse 8s ease-in-out infinite;
}
@keyframes wrGlowPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

.wr-report-phone {
  position: relative; z-index: 1; width: 100%; max-width: 320px;
  background: linear-gradient(160deg, rgba(30,24,40,0.94), rgba(20,16,28,0.97));
  border: 1.5px solid rgba(217,188,148,0.24);
  border-radius: 28px; padding: 22px 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(20px) saturate(1.4);
  animation: wrPhoneFloat 7s ease-in-out infinite;
}
@keyframes wrPhoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.wr-report-title { font-size: 12px; color: rgba(253,249,244,0.55); margin-bottom: 16px; text-align: center; }
.wr-report-title strong { color: rgba(253,249,244,0.90); font-weight: 500; }

.wr-report-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wr-report-tile { background: rgba(255,255,255,0.05); border-radius: 14px; padding: 12px; }
.wr-tile-icon { font-size: 16px; margin-bottom: 6px; display: block; }
.wr-tile-val { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: rgba(253,249,244,0.95); }
.wr-tile-label { font-size: 10px; color: rgba(253,249,244,0.50); margin-top: 2px; }

.wr-report-insight {
  background: rgba(217,188,148,0.12); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.wr-report-insight-text { font-size: 11.5px; color: rgba(253,249,244,0.82); line-height: 1.55; font-style: italic; }

.wr-report-share-btn {
  display: block; width: 100%; text-align: center; padding: 11px;
  background: var(--gold); color: #1c1624; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
}

@media (min-width: 900px) {
  .wr-hero { padding: 60px 40px 90px; }
  .wr-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .wr-hero-answer { font-size: 17px; }
  .wr-hero-ctas { flex-direction: row; width: auto; }
  .wr-hero-ctas .btn-primary, .wr-hero-ctas .btn-ghost { width: auto; }
  .wr-report-phone { max-width: 360px; padding: 28px 24px; }
}

/* ══════════════════════════ QUICK FACT STRIP ══════════════════════════ */
.wr-fact-strip { max-width: 1100px; margin: 0 auto; padding: 0 20px 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.wr-fact-chip {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(217,188,148,0.20);
  border-radius: var(--r-pill); padding: 9px 16px; font-size: 12px;
  color: rgba(253,249,244,0.75); display: inline-flex; align-items: center; gap: 6px;
}
.wr-fact-chip strong { color: var(--gold); font-weight: 500; }
@media (min-width: 640px) { .wr-fact-chip { font-size: 13px; } }

/* ══════════════════════════ WHAT'S INSIDE — 7 CATEGORY CARDS ══════════════════════════ */
.wr-inside-section { background: var(--ink-dark); padding: 64px 20px; }
.wr-inside-inner { max-width: 1100px; margin: 0 auto; }
.wr-inside-header { text-align: center; margin-bottom: 40px; }
.wr-eyebrow { font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gold); font-weight: 500; display: block; margin-bottom: 14px; }
.wr-inside-header h2 { font-size: clamp(28px, 6vw, 44px); color: rgba(253,249,244,0.96); }
.wr-inside-header h2 em { font-style: italic; }

.wr-cat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.wr-cat-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-card); padding: 24px;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
}
.wr-cat-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.16); }
.wr-cat-icon-wrap {
  width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 14px;
}
.wr-cat-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; color: rgba(253,249,244,0.95); margin-bottom: 12px; }
.wr-cat-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.wr-cat-list li { font-size: 13.5px; color: rgba(253,249,244,0.62); line-height: 1.5; padding-left: 14px; position: relative; }
.wr-cat-list li::before { content: '·'; position: absolute; left: 0; color: var(--gold); }

@media (min-width: 720px) {
  .wr-inside-section { padding: 96px 40px; }
  .wr-cat-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ══════════════════════════ HOW IT WORKS — 3 STEPS ══════════════════════════ */
.wr-steps-section { background: var(--ink); padding: 60px 20px; }
.wr-steps-inner { max-width: 1100px; margin: 0 auto; }
.wr-steps-header { text-align: center; margin-bottom: 36px; }
.wr-steps-header h2 { font-size: clamp(28px, 6vw, 42px); color: rgba(253,249,244,0.96); }

.wr-steps-grid { display: flex; flex-direction: column; gap: 18px; }
.wr-step-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-card); padding: 28px 24px;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
}
.wr-step-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18); }
.wr-step-num { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 10px; }
.wr-step-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.wr-step-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: rgba(253,249,244,0.95); margin-bottom: 10px; }
.wr-step-body { font-size: 14.5px; line-height: 1.7; color: rgba(253,249,244,0.62); }
.wr-step-body a { color: var(--gold); border-bottom: 1px solid rgba(217,188,148,0.35); text-decoration: none; }
.wr-step-body a:hover { border-color: var(--gold); }

@media (min-width: 860px) {
  .wr-steps-section { padding: 96px 40px; }
  .wr-steps-grid { flex-direction: row; gap: 24px; }
  .wr-step-card { flex: 1; }
}

/* ══════════════════════════ PDF MOCKUP SECTION ══════════════════════════ */
.wr-pdf-section { background: var(--ink-dark); padding: 60px 20px; }
.wr-pdf-grid { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.wr-pdf-text .section-label { display: block; margin-bottom: 12px; color: var(--gold); }
.wr-pdf-text h2 { font-size: clamp(26px, 6vw, 38px); color: rgba(253,249,244,0.96); margin-bottom: 16px; }
.wr-pdf-text h2 em { font-style: italic; }
.wr-pdf-body { font-size: 15.5px; line-height: 1.8; color: rgba(253,249,244,0.68); margin-bottom: 16px; }
.wr-pdf-body a { color: var(--gold); border-bottom: 1px solid rgba(217,188,148,0.35); text-decoration: none; }
.wr-pdf-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wr-pdf-list li { font-size: 14.5px; color: rgba(253,249,244,0.70); display: flex; align-items: flex-start; gap: 10px; }
.wr-pdf-check { color: var(--gold); flex-shrink: 0; font-weight: 600; }

.wr-pdf-visual { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.wr-pdf-doc {
  position: relative; z-index: 2; width: 100%; max-width: 300px;
  background: var(--cream); border-radius: 14px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.40); transform: rotate(3deg);
  color: var(--text-dark);
}
.wr-pdf-doc-header { font-size: 11px; color: var(--ink-soft, #7b6e8f); margin-bottom: 12px; border-bottom: 1px solid rgba(46,37,53,0.10); padding-bottom: 10px; }
.wr-pdf-doc-header strong { color: var(--text-dark); }
.wr-pdf-mini-charts { display: flex; gap: 8px; margin-bottom: 12px; }
.wr-pdf-mini-chart { flex: 1; height: 44px; border-radius: 8px; background: linear-gradient(180deg, rgba(217,188,148,0.35), rgba(217,188,148,0.08)); }
.wr-pdf-mini-chart.lav { background: linear-gradient(180deg, rgba(200,191,231,0.40), rgba(200,191,231,0.10)); }
.wr-pdf-insight-strip { border-left: 3px solid var(--gold); padding-left: 10px; margin-bottom: 12px; }
.wr-pdf-insight-strip p { font-size: 11.5px; font-style: italic; color: var(--ink-mid); line-height: 1.5; }
.wr-pdf-doc-footer { font-size: 9.5px; color: var(--ink-soft, #7b6e8f); text-align: right; }

.wr-pdf-phone-behind {
  position: absolute; z-index: 1; width: 220px; height: 300px;
  background: linear-gradient(160deg, rgba(30,24,40,0.9), rgba(20,16,28,0.94));
  border: 1.5px solid rgba(217,188,148,0.18); border-radius: 22px;
  transform: rotate(-6deg) translateX(-30px);
  top: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

@media (min-width: 900px) {
  .wr-pdf-section { padding: 96px 40px; }
  .wr-pdf-grid { flex-direction: row; align-items: center; gap: 64px; }
  .wr-pdf-grid > * { flex: 1; }
}

/* ══════════════════════════ COMPARISON TABLE ══════════════════════════ */
.wr-compare-section { background: var(--ink); padding: 60px 20px; }
.wr-compare-inner { max-width: 1080px; margin: 0 auto; }
.wr-compare-header { text-align: center; margin-bottom: 36px; }
.wr-compare-header h2 { font-size: clamp(26px, 6vw, 40px); color: rgba(253,249,244,0.96); }

.wr-compare-wrap {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-card); overflow: hidden; margin-top: 28px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.wr-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.wr-compare-table caption { font-size: 12px; color: rgba(253,249,244,0.45); padding: 14px 18px; text-align: left; font-style: italic; }
.wr-compare-table thead th {
  padding: 16px 14px; font-size: 13px; font-weight: 500; text-align: center;
  color: rgba(253,249,244,0.60); border-bottom: 1px solid rgba(217,188,148,0.14);
}
.wr-compare-table thead th:first-child { text-align: left; }
.wr-compare-table thead th.wr-col-lunara { background: rgba(217,188,148,0.10); color: var(--gold); }
.wr-compare-table tbody td { padding: 13px 14px; font-size: 13.5px; text-align: center; color: rgba(253,249,244,0.75); border-bottom: 1px solid rgba(255,255,255,0.06); }
.wr-compare-table tbody td:first-child { text-align: left; }
.wr-compare-table tbody td.wr-col-lunara { color: var(--gold); font-weight: 500; background: rgba(217,188,148,0.06); }
.wr-check { color: var(--gold); font-weight: 600; }
.wr-cross { color: rgba(253,249,244,0.25); }
.wr-warn { color: #f0c9b8; font-weight: 600; }
.wr-compare-note { font-size: 12px; color: rgba(253,249,244,0.40); font-style: italic; text-align: center; margin-top: 18px; }
.wr-compare-cta { text-align: center; margin-top: 28px; }

@media (min-width: 860px) { .wr-compare-section { padding: 100px 40px; } }

/* ══════════════════════════ AI INSIGHT SECTION ══════════════════════════ */
.wr-ai-section { background: var(--ink-dark); padding: 60px 20px; }
.wr-ai-inner { max-width: 820px; margin: 0 auto; }
.wr-ai-header { text-align: center; margin-bottom: 32px; }
.wr-ai-header h2 { font-size: clamp(26px, 6vw, 40px); color: rgba(253,249,244,0.96); }

.wr-ai-card {
  background: linear-gradient(160deg, #2a1f3d, #1c1624);
  border: 1px solid rgba(217,188,148,0.20); border-left: 3px solid var(--gold);
  border-radius: var(--r-card); padding: 28px 24px;
}
.wr-ai-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: block; }
.wr-ai-quote { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; font-weight: 300; color: rgba(253,249,244,0.92); line-height: 1.6; margin-bottom: 16px; }
.wr-ai-meta { font-size: 12.5px; color: rgba(253,249,244,0.50); display: flex; flex-wrap: wrap; gap: 14px; }
.wr-ai-meta strong { color: #c3e0d4; }
.wr-ai-below { font-size: 14.5px; color: rgba(253,249,244,0.60); line-height: 1.7; margin-top: 22px; text-align: center; }
.wr-ai-below a { color: var(--gold); border-bottom: 1px solid rgba(217,188,148,0.35); text-decoration: none; }

@media (min-width: 640px) { .wr-ai-section { padding: 96px 40px; } }

/* ══════════════════════════ TESTIMONIALS ══════════════════════════ */
.wr-testi-section { background: var(--ink); padding: 60px 20px; }
.wr-testi-inner { max-width: 1080px; margin: 0 auto; }
.wr-testi-header { text-align: center; margin-bottom: 36px; }
.wr-testi-header h2 { font-size: clamp(28px, 6vw, 44px); color: rgba(253,249,244,0.96); }
.wr-testi-header h2 em { font-style: italic; }

.wr-testi-grid { display: flex; flex-direction: column; gap: 18px; }
.wr-testi-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--gold); border-radius: var(--r-card); padding: 28px 24px;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.wr-testi-card:hover { transform: translateY(-6px); box-shadow: 0 32px 80px rgba(0,0,0,0.30); }
.wr-testi-card::before {
  content: '\201C'; position: absolute; top: -14px; right: 18px;
  font-family: 'Cormorant Garamond', serif; font-size: 100px; font-weight: 300;
  color: rgba(217,188,148,0.08); line-height: 1; pointer-events: none;
}
.wr-testi-quote { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; font-weight: 300; color: rgba(253,249,244,0.92); line-height: 1.65; margin-bottom: 18px; }
.wr-testi-author { font-size: 13.5px; font-weight: 500; color: rgba(253,249,244,0.92); }
.wr-testi-role { font-size: 12px; color: rgba(253,249,244,0.50); margin-top: 2px; }

@media (min-width: 860px) {
  .wr-testi-section { padding: 100px 40px; }
  .wr-testi-grid { flex-direction: row; gap: 24px; }
  .wr-testi-card { flex: 1; }
}

/* ══════════════════════════ FREE VS PRO ══════════════════════════ */
.wr-pricing-section { background: var(--ink-dark); padding: 60px 20px; }
.wr-pricing-inner { max-width: 900px; margin: 0 auto; }
.wr-pricing-header { text-align: center; margin-bottom: 36px; }
.wr-pricing-header h2 { font-size: clamp(26px, 6vw, 40px); color: rgba(253,249,244,0.96); }

.wr-pricing-grid { display: flex; flex-direction: column; gap: 18px; }
.wr-pricing-card { border-radius: var(--r-card); padding: 28px 24px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.10); }
.wr-pricing-card.wr-pro { background: rgba(217,188,148,0.08); border-color: rgba(217,188,148,0.35); }
.wr-pricing-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: rgba(253,249,244,0.95); margin-bottom: 18px; }
.wr-pricing-card.wr-pro .wr-pricing-title { color: var(--gold); }
.wr-pricing-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.wr-pricing-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(253,249,244,0.75); line-height: 1.5; }
.wr-pricing-check { color: var(--gold); flex-shrink: 0; font-weight: 600; }
.wr-pricing-card .btn-primary { margin-top: 18px; width: 100%; justify-content: center; }

@media (min-width: 700px) {
  .wr-pricing-section { padding: 96px 40px; }
  .wr-pricing-grid { flex-direction: row; gap: 24px; }
  .wr-pricing-card { flex: 1; }
}

/* ══════════════════════════ FAQ ══════════════════════════
   Glassmorphism card pattern — matches the established look on
   diaper-tracker.css / pumping-log.css: each question is its own
   frosted glass card (not a flat bordered row). Adapted to a
   dark-glass surface (rgba(255,255,255,0.05) tint) to match this
   page's own dark cards (.wr-cat-card / .wr-step-card /
   .wr-testi-card), rather than diaper/pumping's light glass.
   The open/close mechanism deliberately keys off .faq-item.open
   (toggled by the SHARED accordion handler in lunara.js, which runs
   on every page) rather than binding a second page-local click
   handler — two handlers on the same .faq-q race each other and
   silently break the toggle. ── */
.wr-faq-section { background: var(--ink); padding: 60px 20px; }
.wr-faq-inner { max-width: 720px; margin: 0 auto; }
.wr-faq-header { text-align: center; margin-bottom: 36px; }
.wr-faq-header h2 { font-size: clamp(26px, 6vw, 40px); color: rgba(253,249,244,0.96); }

.wr-faq-section .faq-list { display: flex; flex-direction: column; gap: 12px; }
.wr-faq-section .faq-item {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 18px; overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.wr-faq-section .faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 20px 26px; cursor: pointer; font-size: 16px; font-weight: 400;
  color: rgba(253,249,244,0.90); background: transparent; border: none;
  text-align: left; gap: 16px; font-family: 'DM Sans', sans-serif;
  transition: background 0.25s ease, color 0.25s ease;
}
.wr-faq-section .faq-q:hover { background: rgba(217,188,148,0.06); color: var(--gold); }
.wr-faq-section .faq-icon {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: rgba(217,188,148,0.14); display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--gold); transition: transform 0.3s ease;
}
.wr-faq-section .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--gold); color: #1c1624; }
.wr-faq-section .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.wr-faq-section .faq-item.open .faq-a { max-height: 500px; }
.wr-faq-section .faq-a-inner { padding: 0 26px 24px; font-size: 14.5px; color: rgba(253,249,244,0.62); line-height: 1.75; }

@media (min-width: 860px) { .wr-faq-section { padding: 96px 40px; } }

/* ══════════════════════════ FINAL CTA ══════════════════════════ */
.wr-final-cta { background: linear-gradient(160deg, #1c1624 0%, #2a2216 100%); padding: 72px 20px; text-align: center; position: relative; overflow: hidden; }
.wr-final-cta-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 30%, rgba(217,188,148,0.16), transparent 60%); }
.wr-final-cta-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.wr-final-cta h2 { font-size: clamp(32px, 8vw, 56px); color: rgba(253,249,244,0.97); margin-bottom: 16px; }
.wr-final-cta h2 em { font-style: italic; }
.wr-final-cta-sub { font-size: 16px; color: rgba(253,249,244,0.62); margin-bottom: 32px; line-height: 1.7; }
.wr-final-cta-btns { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.wr-final-cta-btns .btn-primary, .wr-final-cta-btns .store-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.wr-final-cta-trust { font-size: 13px; color: rgba(253,249,244,0.50); margin-bottom: 10px; }

@media (min-width: 640px) {
  .wr-final-cta { padding: 100px 40px; }
  .wr-final-cta-btns { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .wr-final-cta-btns .btn-primary, .wr-final-cta-btns .store-btn { width: auto; }
}

/* ══════════════════════════ 480px small-phone tightening ══════════════════════════ */
@media (max-width: 480px) {
  .wr-hero { padding: 32px 16px 44px; }
  .wr-hero-h1 { font-size: clamp(30px, 9.5vw, 42px); }
  .wr-hero-answer { font-size: 15px; }
  .wr-inside-section, .wr-steps-section, .wr-pdf-section, .wr-compare-section,
  .wr-ai-section, .wr-testi-section, .wr-pricing-section, .wr-faq-section { padding-left: 16px; padding-right: 16px; }
  .wr-cat-card, .wr-step-card, .wr-testi-card, .wr-pricing-card { padding: 20px 18px; }
  .wr-final-cta { padding: 56px 16px; }
}
