/* ═══════════════════════════════════════════════════════════════
   LUNARA — CAREGIVER SYNC FEATURE PAGE (page-specific styles)
   Route: /features/caregiver-sync
   Depends on global tokens from assets/frontend/css/lunara.css:
   --ink, --ink-dark, --cream, --cream-warm, --lavender, --lav-deep,
   --gold, --gold-light, --text-dark, --glass-bg, --glass-border,
   --sh-soft, --sh-card, --r-card, --r-pill
   Page-local tokens/classes are prefixed --cs- / .cs- to avoid
   clashing with globals or other feature pages.
   Mobile-first: base rules target the smallest viewport; @media
   (min-width: 640px) etc. layer on desktop layout, so nothing needs
   an override just to "become" mobile-friendly.
═══════════════════════════════════════════════════════════════ */

body.page-features-caregiver-sync 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(200,191,231,0.12);
  box-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
body.page-features-caregiver-sync .nav-links a:hover,
body.page-features-caregiver-sync .nav-links a.active { color: #fdf9f4; }
body.page-features-caregiver-sync .nav-links a { color: rgba(253,249,244,0.65); }
body.page-features-caregiver-sync .nav-cta {
  background: linear-gradient(135deg, #8b7cba, #c98472);
  color: #fff; 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(139,124,186,0.40);
}
body.page-features-caregiver-sync .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,124,186,0.45); }

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

/* ── Reveal animation (shared pattern) ── */
.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 (reuses global .orb, page-local color tuning) ── */
.cs-orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.cs-orb-1 { width: 480px; height: 480px; top: -140px; left: -120px; background: rgba(139,124,186,0.20); animation: csOrbFloat 26s ease-in-out infinite; }
.cs-orb-2 { width: 380px; height: 380px; top: 20%; right: -140px; background: rgba(217,188,148,0.14); animation: csOrbFloat 22s ease-in-out infinite reverse; }
.cs-orb-3 { width: 420px; height: 420px; bottom: -160px; left: 10%; background: rgba(200,191,231,0.14); animation: csOrbFloat 30s ease-in-out infinite; }
@keyframes csOrbFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-22px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .cs-orb { animation: none; } .reveal { transition: none; } }

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

/* ══════════════════════════ HERO ══════════════════════════ */
.cs-hero { padding: 44px 20px 56px; }
.cs-hero-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.cs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(200,191,231,0.12);
  border: 1px solid rgba(200,191,231,0.30);
  border-radius: var(--r-pill);
  padding: 8px 18px; font-size: 12px;
  color: #c8bfe7; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 22px;
  position: relative; overflow: hidden;
}
.cs-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: csShimmer 4.5s ease-in-out infinite 1.8s;
}
@keyframes csShimmer { 0% { left: -100%; } 100% { left: 210%; } }

.cs-hero-h1 { font-size: clamp(36px, 8vw, 60px); color: rgba(253,249,244,0.96); margin-bottom: 20px; }
.cs-hero-answer { font-size: 16px; line-height: 1.75; color: rgba(253,249,244,0.68); max-width: 560px; margin-bottom: 22px; }
.cs-hero-answer strong { color: rgba(253,249,244,0.92); font-weight: 500; }

.cs-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;
}

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

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

/* ── Hero visual: 3-phone mockup cluster ── */
.cs-hero-visual { position: relative; display: flex; justify-content: center; padding: 20px 0 8px; }
.cs-hero-visual-glow {
  position: absolute; inset: -30px;
  background: radial-gradient(circle at 50% 40%, rgba(139,124,186,0.28), transparent 65%);
  filter: blur(30px); z-index: 0; animation: csGlowPulse 8s ease-in-out infinite;
}
@keyframes csGlowPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

.cs-phone-cluster { position: relative; z-index: 1; width: 100%; max-width: 300px; display: flex; align-items: center; justify-content: center; height: 380px; }
.cs-phone {
  position: absolute;
  background: linear-gradient(160deg, rgba(30,24,40,0.94), rgba(20,16,28,0.97));
  border: 1.5px solid rgba(200,191,231,0.20);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(20px) saturate(1.4);
  padding: 16px 14px;
}
.cs-phone-main { width: 190px; z-index: 3; animation: csPhoneFloat 7s ease-in-out infinite; }
.cs-phone-notif {
  width: 150px; left: -6px; top: 10px; z-index: 2;
  transform: rotate(-6deg); animation: csPhoneFloat 7s ease-in-out infinite -2s;
}
.cs-phone-team {
  width: 150px; right: -6px; bottom: 6px; z-index: 2;
  transform: rotate(6deg); animation: csPhoneFloat 7s ease-in-out infinite -4s;
}
@keyframes csPhoneFloat { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-9px) rotate(var(--r, 0deg)); } }
.cs-phone-notif { --r: -6deg; } .cs-phone-team { --r: 6deg; }

.cs-phone-title { font-size: 11px; color: rgba(253,249,244,0.55); margin-bottom: 10px; display: flex; justify-content: space-between; }
.cs-phone-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 6px;
}
.cs-phone-row-icon { font-size: 14px; }
.cs-phone-row-text { font-size: 10px; color: rgba(253,249,244,0.80); flex: 1; }
.cs-phone-row-time { font-size: 9px; color: rgba(253,249,244,0.40); }

.cs-notif-banner {
  background: rgba(217,188,148,0.14);
  border: 1px solid rgba(217,188,148,0.35);
  border-radius: 12px; padding: 10px;
}
.cs-notif-banner-title { font-size: 10px; color: var(--gold); font-weight: 500; margin-bottom: 4px; }
.cs-notif-banner-body { font-size: 10px; color: rgba(253,249,244,0.75); line-height: 1.4; }

.cs-team-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-team-row:last-child { border-bottom: none; }
.cs-team-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lav-deep), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #1c1624; font-weight: 600; flex-shrink: 0;
}
.cs-team-name { font-size: 10px; color: rgba(253,249,244,0.85); flex: 1; }
.cs-team-status { font-size: 8px; color: #c3e0d4; }

@media (min-width: 900px) {
  .cs-hero { padding: 60px 40px 90px; }
  .cs-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .cs-hero-answer { font-size: 17px; }
  .cs-hero-ctas { flex-direction: row; width: auto; }
  .cs-hero-ctas .btn-primary,
  .cs-hero-ctas .btn-ghost { width: auto; }
  .cs-phone-cluster { max-width: 380px; height: 460px; }
  .cs-phone-main { width: 230px; }
  .cs-phone-notif { width: 180px; left: -20px; top: 10px; }
  .cs-phone-team { width: 180px; right: -20px; bottom: 10px; }
}

/* ══════════════════════════ QUICK FACT STRIP ══════════════════════════ */
.cs-fact-strip {
  max-width: 1100px; margin: 0 auto;
  padding: 0 20px 8px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cs-fact-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,191,231,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;
}
.cs-fact-chip strong { color: var(--gold); font-weight: 500; }
@media (min-width: 640px) { .cs-fact-chip { font-size: 13px; } }

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

.cs-steps-grid { display: flex; flex-direction: column; gap: 18px; }
.cs-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;
}
.cs-step-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18); }
.cs-step-num { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 10px; }
.cs-step-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.cs-step-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: rgba(253,249,244,0.95); margin-bottom: 10px; }
.cs-step-body { font-size: 14.5px; line-height: 1.7; color: rgba(253,249,244,0.62); }

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

/* ══════════════════════════ FEATURE DETAIL ROWS ══════════════════════════ */
.cs-detail-section { background: var(--cream); padding: 60px 20px; }
.cs-detail-row {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 28px;
  padding: 40px 0;
}
.cs-detail-row + .cs-detail-row { border-top: 1px solid rgba(46,37,53,0.08); }
.cs-detail-visual-slot { order: -1; }
.cs-detail-text .section-label { display: block; margin-bottom: 12px; }
.cs-detail-text h2 { font-size: clamp(26px, 6vw, 38px); color: var(--text-dark); margin-bottom: 16px; }
.cs-detail-text h2 em { font-style: italic; color: var(--peach-deep, #c98472); }
.cs-detail-body { font-size: 15.5px; line-height: 1.8; color: var(--ink-mid); }
.cs-detail-body a { color: var(--lav-deep); border-bottom: 1px solid rgba(139,124,186,0.35); text-decoration: none; }
.cs-detail-body a:hover { border-color: var(--lav-deep); }

/* Detail mockup — timeline card */
.cs-timeline-card, .cs-notif-card, .cs-team-card {
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: var(--r-card); padding: 24px;
  box-shadow: var(--sh-card); backdrop-filter: blur(20px) saturate(1.4);
  max-width: 420px; margin: 0 auto;
}
.cs-timeline-title, .cs-notif-card-title, .cs-team-card-title {
  font-size: 13px; font-weight: 500; color: var(--ink-soft, #7b6e8f);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px;
}
.cs-timeline-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: rgba(255,255,255,0.55);
  border-radius: 14px; margin-bottom: 8px;
}
.cs-timeline-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
}
.cs-timeline-avatar.p { background: linear-gradient(135deg, var(--lav-deep), #c8bfe7); }
.cs-timeline-avatar.a { background: linear-gradient(135deg, var(--peach-deep, #c98472), #f0c9b8); }
.cs-timeline-avatar.g { background: linear-gradient(135deg, var(--gold), #efe2cc); color: #7b6220; }
.cs-timeline-detail { flex: 1; min-width: 0; }
.cs-timeline-what { font-size: 13.5px; color: var(--text-dark); font-weight: 400; }
.cs-timeline-who { font-size: 11.5px; color: var(--ink-soft, #7b6e8f); }
.cs-timeline-time { font-size: 11px; color: var(--ink-soft, #7b6e8f); flex-shrink: 0; }

.cs-notif-card-banner {
  background: linear-gradient(135deg, rgba(217,188,148,0.16), rgba(200,191,231,0.14));
  border: 1px solid rgba(217,188,148,0.35);
  border-radius: 16px; padding: 16px;
  display: flex; align-items: flex-start; gap: 12px;
}
.cs-notif-card-icon { font-size: 22px; flex-shrink: 0; }
.cs-notif-card-text { font-size: 14px; color: var(--text-dark); line-height: 1.6; }
.cs-notif-card-text strong { color: var(--peach-deep, #c98472); }
.cs-notif-card-meta { font-size: 11px; color: var(--ink-soft, #7b6e8f); margin-top: 6px; }

.cs-team-member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid rgba(46,37,53,0.06);
}
.cs-team-member-row:last-child { border-bottom: none; }
.cs-team-member-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.cs-team-member-info { flex: 1; min-width: 0; }
.cs-team-member-name { font-size: 14px; color: var(--text-dark); font-weight: 500; }
.cs-team-member-role { font-size: 11.5px; color: var(--ink-soft, #7b6e8f); }
.cs-team-member-badge {
  font-size: 10px; padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(184,207,196,0.35); color: #3a6a53; font-weight: 500;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .cs-detail-section { padding: 100px 40px; }
  .cs-detail-row {
    flex-direction: row; align-items: center; gap: 72px; padding: 56px 0;
  }
  .cs-detail-row > * { flex: 1; }
  .cs-detail-row.cs-flip { flex-direction: row-reverse; }
  .cs-detail-visual-slot { order: 0; }
}

/* ══════════════════════════ COMPARISON TABLE ══════════════════════════ */
.cs-compare-section { background: var(--cream-warm); padding: 60px 20px; }
.cs-compare-inner { max-width: 1080px; margin: 0 auto; }
.cs-compare-header { text-align: center; margin-bottom: 36px; }
.cs-compare-header h2 { font-size: clamp(26px, 6vw, 40px); color: var(--text-dark); margin-bottom: 12px; }
.cs-compare-header h2 em { font-style: italic; color: var(--lav-deep); }
.cs-compare-header p { font-size: 15px; color: var(--ink-soft, #7b6e8f); max-width: 560px; margin: 0 auto; }

.cs-compare-wrap {
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card);
  backdrop-filter: blur(20px) saturate(1.4);
  margin-top: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cs-compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.cs-compare-table caption { font-size: 12px; color: var(--ink-soft, #7b6e8f); padding: 14px 18px; text-align: left; font-style: italic; }
.cs-compare-table thead th {
  padding: 16px 14px; font-size: 13px; font-weight: 500; text-align: center;
  color: var(--ink-soft, #7b6e8f); border-bottom: 1px solid rgba(139,124,186,0.14);
}
.cs-compare-table thead th:first-child { text-align: left; }
.cs-compare-table thead th.cs-col-lunara {
  background: linear-gradient(180deg, rgba(200,191,231,0.24), rgba(217,188,148,0.12));
  color: var(--lav-deep);
}
.cs-compare-table tbody td {
  padding: 13px 14px; font-size: 13.5px; text-align: center;
  color: var(--ink-mid); border-bottom: 1px solid rgba(139,124,186,0.08);
}
.cs-compare-table tbody td:first-child { text-align: left; }
.cs-compare-table tbody td.cs-col-lunara { color: var(--lav-deep); font-weight: 500; background: rgba(200,191,231,0.06); }
.cs-check { color: var(--lav-deep); font-weight: 600; }
.cs-cross { color: rgba(46,37,53,0.28); }
.cs-compare-note { font-size: 12px; color: var(--ink-soft, #7b6e8f); font-style: italic; text-align: center; margin-top: 18px; }
.cs-compare-cta { text-align: center; margin-top: 28px; }

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

/* ══════════════════════════ TESTIMONIALS ══════════════════════════ */
.cs-testi-section { background: var(--cream); padding: 60px 20px; }
.cs-testi-inner { max-width: 1080px; margin: 0 auto; }
.cs-testi-header { text-align: center; margin-bottom: 36px; }
.cs-testi-header h2 { font-size: clamp(28px, 6vw, 44px); color: var(--text-dark); }
.cs-testi-header h2 em { font-style: italic; color: var(--lav-deep); }

.cs-testi-grid { display: flex; flex-direction: column; gap: 18px; }
.cs-testi-card {
  position: relative; overflow: hidden;
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  border-radius: var(--r-card); padding: 28px 24px;
  box-shadow: var(--sh-card); backdrop-filter: blur(20px) saturate(1.4);
  border-left: 3px solid var(--gold);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.cs-testi-card:hover { transform: translateY(-6px); box-shadow: 0 32px 80px rgba(46,37,53,0.16); }
.cs-testi-card::before {
  content: '\201C'; position: absolute; top: -14px; right: 18px;
  font-family: 'Cormorant Garamond', serif; font-size: 100px; font-weight: 300;
  color: rgba(139,124,186,0.10); line-height: 1; pointer-events: none;
}
.cs-testi-quote { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; font-weight: 300; color: var(--text-dark); line-height: 1.65; margin-bottom: 18px; }
.cs-testi-author { font-size: 13.5px; font-weight: 500; color: var(--text-dark); }
.cs-testi-role { font-size: 12px; color: var(--ink-soft, #7b6e8f); margin-top: 2px; }

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

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

.cs-pricing-grid { display: flex; flex-direction: column; gap: 18px; }
.cs-pricing-card {
  border-radius: var(--r-card); padding: 28px 24px;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.10);
}
.cs-pricing-card.cs-pro { background: rgba(217,188,148,0.08); border-color: rgba(217,188,148,0.35); }
.cs-pricing-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: rgba(253,249,244,0.95); margin-bottom: 18px; }
.cs-pricing-card.cs-pro .cs-pricing-title { color: var(--gold); }
.cs-pricing-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cs-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; }
.cs-pricing-check { color: var(--gold); flex-shrink: 0; font-weight: 600; }
.cs-pricing-card .btn-primary { margin-top: 18px; width: 100%; justify-content: center; }

@media (min-width: 700px) {
  .cs-pricing-section { padding: 96px 40px; }
  .cs-pricing-grid { flex-direction: row; gap: 24px; }
  .cs-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). 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. ── */
.cs-faq-section { background: var(--cream-warm); padding: 60px 20px; }
.cs-faq-inner { max-width: 720px; margin: 0 auto; }
.cs-faq-header { text-align: center; margin-bottom: 36px; }
.cs-faq-header h2 { font-size: clamp(26px, 6vw, 40px); color: var(--text-dark); }
.cs-faq-header h2 em { font-style: italic; color: var(--lav-deep); }

.cs-faq-section .faq-list { display: flex; flex-direction: column; gap: 12px; }
.cs-faq-section .faq-item {
  background: var(--glass-bg, rgba(255,255,255,0.55));
  border: 1.5px solid var(--glass-border, rgba(255,255,255,0.75));
  border-radius: 18px; overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--sh-soft, 0 8px 40px rgba(140,120,180,0.10));
}
.cs-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: var(--text-dark, #2a2230); background: transparent; border: none;
  text-align: left; gap: 16px; font-family: 'DM Sans', sans-serif;
  transition: background 0.25s ease;
}
.cs-faq-section .faq-q:hover { background: rgba(139,124,186,0.06); }
.cs-faq-section .faq-icon { font-size: 18px; color: var(--lav-deep); flex-shrink: 0; transition: transform 0.3s ease; }
.cs-faq-section .faq-item.open .faq-icon { transform: rotate(45deg); }
.cs-faq-section .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.cs-faq-section .faq-item.open .faq-a { max-height: 500px; }
.cs-faq-section .faq-a-inner { padding: 0 26px 24px; font-size: 15px; color: #3d3250; line-height: 1.75; }

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

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

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

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