/* ================================================================
   CheMentor.in — AI for Teachers  ·  styles.css  v5.8

   v5.8 HERO REDESIGN (dark navy + pink→peach gradient reference):
   The hero now matches the supplied reference banner — a deep
   navy → indigo-purple background with a subtle repeating plus (+)
   pattern, a dark semi-transparent "PREMIUM EDUCATOR EDITION" pill,
   a Playfair Display serif headline, a pink→peach gradient on the
   punchline ("Finish them in 2 minutes."), a golden ₹199 with a
   struck-through ₹699 + vivid green SAVE 71% pill, and a soft cream
   social-proof card. Fonts remain unchanged (Playfair Display for
   headings, Plus Jakarta Sans for body).

   Design: Slate-Indigo Navy + Raspberry Rose + Amber Gold + White

   v5.5 COLOR-SCHEME REFRESH (professional / modern / attractive pass):
   Reconciled the local design-token source with the palette that was
   already live in production (a calmer, desaturated "v6.0" rose/indigo
   refresh applied directly on the server, never committed here) and
   pushed it further: a cooler slate-navy neutral, a richer raspberry
   rose (replacing the older neon electric-pink) and an indigo secondary
   in place of the older violet — all still exposed through the exact
   same --c-x / --grad-x variable names used everywhere (styles.css,
   dashboard, portal, admin, API email/PDF templates), so this one edit
   re-themes the whole product with zero structural/markup changes.

   DEFENSIVE RENDERING: several rules below now set a plain hex
   `background-color` *before* the var()-based gradient/color
   declaration (`background-color:#0f172a; background:var(--grad-hero)`)
   so that key surfaces (hero, pricing timer, footer, CTA stripe) always
   have a solid, correctly-tinted background even in the rare case a
   browser fails to resolve a custom property or only partially applies
   the stylesheet (e.g. a slow/interrupted network fetch on flaky
   hosting) — this prevents the "light text on white background"
   invisible-text failure mode reported by users on the live site.

   Mobile-first · Modern Cards · Glassmorphism Elements
================================================================ */
:root{
  /* Brand palette — v5.8: deep navy hero + raspberry rose + amber gold */
  --c-pink:#be185d;   --c-pink-2:#9d174d;  --c-pink-bg:#fdf2f8;
  --c-violet:#4338ca; --c-violet-2:#3730a3;--c-violet-bg:#eef2ff;
  --c-violet-light:#6366f1;
  --c-gold:#d97706;   --c-gold-bg:#fffbeb;
  --c-green:#15803d;  --c-green-bg:#dcfce7;
  --c-blue:#1e63bf;   --c-blue-bg:#dbeafe;

  /* Homepage hero background palette — sampled directly from the
     reference banner: deep navy → indigo-purple gradient with a
     subtle plus-sign texture. */
  --c-hero-1:#0b0f2e;   /* top-left navy */
  --c-hero-2:#141a4d;   /* mid indigo */
  --c-hero-3:#1e1b6b;   /* bottom-right violet-indigo */
  --c-brand-blue:#141a4d;
  --c-brand-blue-light:#1e1b6b;
  --c-brand-blue-dark:#0b0f2e;

  /* Hero accent colors from the reference image */
  --c-hero-pink:#f9a8d4;   /* soft pink for the gradient headline */
  --c-hero-peach:#fcd0a8;  /* warm peach for the gradient headline */
  --c-hero-gold:#fbbf24;   /* ₹199 golden yellow */
  --c-hero-cream:#fdf5e6;  /* soft cream enrollment card */
  --c-hero-cream-2:#fbeed2;

  --c-red:#dc2626;    --c-red-bg:#fee2e2;
  --c-teal:#0f766e;   --c-teal-bg:#ccfbf1;

  /* Neutrals */
  --c-navy:#141a4d;   --c-navy-2:#0b0f2e;
  --c-ink:#1e293b;
  --c-muted:#64748b;  --c-line:#e2e8f0;
  --c-bg:#ffffff;     --c-bg-soft:#f8fafc;  --c-bg-card:#fff;

  /* Gradients */
  --grad-hero:linear-gradient(135deg,#0b0f2e 0%,#141a4d 50%,#1e1b6b 100%);
  --grad-hero-title:linear-gradient(90deg,#f9a8d4 0%,#fbcfe8 35%,#fcd0a8 70%,#fbbf24 100%);
  --grad-pink:linear-gradient(135deg,#be185d,#9d174d);
  --grad-violet:linear-gradient(135deg,#4f46e5,#4338ca);
  --grad-gold:linear-gradient(135deg,#d97706,#b45309);
  --grad-rainbow:linear-gradient(135deg,#be185d,#4f46e5,#0f766e);
  /* v6.1: richer "premium" gold treatment for the pricing card / badges —
     a warmer, more metallic gold-to-amber sweep than the flat --c-gold. */
  --grad-premium-gold:linear-gradient(120deg,#fde68a 0%,#f59e0b 45%,#b45309 100%);
  --c-premium-gold-glow:rgba(245,158,11,.35);

  /* Typography */
  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Radii */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* Shadows */
  --shadow-xs:0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:0 2px 8px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
  --shadow:0 8px 24px rgba(15,23,42,.09),0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 20px 60px rgba(15,23,42,.13),0 6px 16px rgba(15,23,42,.07);
  --shadow-pink:0 10px 30px rgba(190,24,93,.28);
  --shadow-violet:0 10px 30px rgba(67,56,202,.24);
}

/* ===== RESET ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--c-ink);background:var(--c-bg);overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'kern' 1,'liga' 1,'calt' 1;font-kerning:normal}
/* Tabular numerals wherever prices/stats/countdowns render so digits don't
   jitter horizontally as they update (checkout total, countdown timer, etc). */
.hero-price-now,.hero-price-was,.pricing-amount,.pricing-amount .now,.pricing-amount .was,.price-row .now,.price-row .was,
.stat-strip-item b,.pricing-timer .countdown,#checkoutPrice,#coBaseline,#coTotal,
#coCouponVal,.co-total-row .val,.refer-reward-badge .amount,.price-mrp{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'kern' 1
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,h4,h5{line-height:1.2;font-family:var(--font-serif);letter-spacing:-.01em;text-wrap:balance;font-feature-settings:'kern' 1,'liga' 1}

/* ===== LAYOUT ===== */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section-sm{padding:48px 0}
@media(max-width:768px){.section{padding:52px 0}.section-sm{padding:36px 0}.container{padding:0 16px}}

/* ===== ANNOUNCEMENT BAR ===== */
.announce{background:var(--grad-pink);color:#fff;text-align:center;padding:10px 16px;font-size:14px;font-weight:600;letter-spacing:.01em;position:relative;z-index:60}
.announce a{color:#ffe4f7;text-decoration:underline}
.announce strong{color:#fff}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--c-line);transition:box-shadow .2s}
.nav.scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--c-navy);font-size:20px}
.logo-mark{width:36px;height:36px;border-radius:10px;background:var(--grad-pink);display:grid;place-items:center;font-size:18px;color:#fff;box-shadow:var(--shadow-pink);flex:none;overflow:hidden}
.logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-size:19px;font-weight:900;background:var(--grad-pink);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-sub{font-size:9px;letter-spacing:.14em;color:var(--c-muted);font-weight:700;-webkit-text-fill-color:var(--c-muted)}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{font-weight:600;color:var(--c-navy);font-size:14px;padding:8px 12px;border-radius:var(--r-sm);transition:background .15s,color .15s}
.nav-links a:hover{background:var(--c-pink-bg);color:var(--c-pink)}
.nav-toggle{display:none;font-size:22px;color:var(--c-navy);padding:8px;border-radius:var(--r-sm)}
.nav-cta{margin-left:4px}
.nav-login{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--c-line)!important;border-radius:var(--r-full)}
.nav-login:hover{border-color:var(--c-pink)!important}
/* v5.3 (item #6): "Download eBook" nav CTA — links to the distraction-free
   checkout page. Subtly accented (not a filled button like Buy) so it
   reads as a secondary-but-important action, not a third competing CTA. */
.nav-ebook-link{color:var(--c-violet-light)!important;font-weight:700!important}
.nav-ebook-link:hover{background:var(--c-violet-bg)!important}
/* BUGFIX: raise the nav's stacking context above the fixed cookie-consent
   banner (z-index:9998) whenever the mobile dropdown is open, so the
   banner can no longer visually cover the menu's Buy/Login links. */
.nav.menu-open{z-index:9999}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--r-full);font-weight:700;font-size:14px;transition:transform .15s,box-shadow .15s,background .15s,opacity .15s;white-space:nowrap;cursor:pointer;border:none;line-height:1.3}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad-pink);color:#fff;box-shadow:var(--shadow-pink)}
.btn-primary:hover{opacity:.92;box-shadow:0 14px 36px rgba(190,24,93,.40)}
.btn-violet{background:var(--grad-violet);color:#fff;box-shadow:var(--shadow-violet)}
.btn-violet:hover{opacity:.92}
.btn-gold{background:var(--grad-gold);color:#fff}
.btn-ghost{background:transparent;color:var(--c-navy);border:2px solid var(--c-line)}
.btn-ghost:hover{border-color:var(--c-pink);color:var(--c-pink)}
.btn-ghost-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.btn-wa:hover{background:#1ebe5d}
.btn-outline-pink{background:transparent;color:var(--c-pink);border:2px solid var(--c-pink)}
.btn-outline-pink:hover{background:var(--c-pink);color:#fff}
/* Distinct "Buy" nav CTA — a bright green so it visually pops against the
   pink/violet buttons used everywhere else on the page (higher-contrast, "go") */
.btn-nav-buy{background:linear-gradient(135deg,#be185d,#6366f1);color:#fff;box-shadow:0 8px 24px rgba(99,102,241,.35)}
.btn-nav-buy:hover{opacity:.92;box-shadow:0 10px 28px rgba(99,102,241,.45)}
/* BUGFIX: .nav-links a{color:var(--c-navy)} (line 100) has higher specificity
   (class+element) than .btn-nav-buy alone (single class), so the intended
   white CTA text was being silently overridden back to navy. Re-declaring
   with the descendant selector wins the specificity battle. */
.nav-links .btn-nav-buy{color:#fff}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-xl{padding:16px 32px;font-size:17px;font-weight:800}
.btn-block{width:100%;border-radius:var(--r)}

/* ===== PILLS / BADGES ===== */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.pill-pink{background:var(--c-pink-bg);color:var(--c-pink)}
.pill-violet{background:var(--c-violet-bg);color:var(--c-violet)}
.pill-gold{background:var(--c-gold-bg);color:#92400e}
.pill-green{background:var(--c-green-bg);color:var(--c-green)}
.pill-blue{background:var(--c-blue-bg);color:var(--c-blue)}
.pill-red{background:var(--c-red-bg);color:var(--c-red)}
.pill-teal{background:var(--c-teal-bg);color:var(--c-teal)}
.pill-dark{background:var(--c-navy);color:#fff}

/* ===== HERO — v5.8 reference-image redesign =====
   Deep navy → indigo-purple background with a repeating plus-sign
   texture, a dark translucent premium pill, a serif Playfair headline,
   a pink-to-peach-to-gold gradient on the punchline, a golden ₹199,
   a struck-through ₹699 and a vivid green SAVE 71% badge. */
.hero{
  background-color:var(--c-hero-1);
  background:var(--grad-hero);
  color:#fff;padding:64px 0 76px;position:relative;overflow:hidden;min-height:460px;
}
/* Subtle repeating plus-sign texture (matches the reference banner). */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a5b4fc' fill-opacity='0.08'%3E%3Cpath d='M20 17h-3v-3h-2v3h-3v2h3v3h2v-3h3z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:40px 40px;
}
/* Soft radial glow on the top-right for depth (like the reference). */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 85% 15%,rgba(139,92,246,.28),transparent 55%),
             radial-gradient(circle at 10% 90%,rgba(190,24,93,.18),transparent 50%);
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;position:relative;z-index:1}

/* PREMIUM EDUCATOR EDITION — dark translucent pill with subtle border */
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(11,15,46,.65);
  color:#e2e8f0;
  padding:10px 20px;border-radius:var(--r-full);
  font-size:12px;font-weight:800;letter-spacing:.11em;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  margin-bottom:24px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}

/* Playfair Display serif headline — kept exactly as before */
.hero-h1{
  font-family:var(--font-serif);
  font-size:56px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  margin-bottom:20px;color:#fff;
}
/* Pink → peach → gold gradient on the highlighted punchline ("in minutes, not hours."). */
.hero-h1 .grad{
  background:var(--grad-hero-title);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-style:italic; /* subtle Playfair italic touch, like the reference */
}

.hero-sub{font-size:17px;color:rgba(226,232,240,.85);max-width:560px;line-height:1.7;margin-bottom:26px}
.hero-sub strong{color:#fff}

/* Price row — golden ₹199, greyed-out struck ₹699, vivid green SAVE 71% */
.hero-price-row{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.hero-price-now{
  font-family:var(--font-serif);
  font-size:64px;color:var(--c-hero-gold);
  font-weight:800;line-height:1;
  text-shadow:0 4px 24px rgba(251,191,36,.25);
}
.hero-price-was{font-size:24px;color:rgba(226,232,240,.45);text-decoration:line-through;text-decoration-thickness:2px}
.hero-price-off{
  background:#16a34a;color:#fff;
  padding:6px 14px;border-radius:var(--r-full);
  font-size:12px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 4px 14px rgba(22,163,74,.35);
}

/* Cream social-proof card ("12,481+ teachers already enrolled") */
.hero-social-proof{
  background:var(--c-hero-cream);
  background:linear-gradient(90deg,var(--c-hero-cream) 0%,var(--c-hero-cream-2) 100%);
  color:#7c2d12;
  border:1px solid rgba(251,191,36,.35);
  border-radius:var(--r-full);
  padding:14px 24px;
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:700;
  margin:8px 0 22px;
  box-shadow:0 6px 20px rgba(11,15,46,.35);
  max-width:100%;
}
.hero-social-proof b{color:#9d174d;font-weight:800}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.hero-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px;color:rgba(226,232,240,.78)}
.hero-ticks li{display:flex;align-items:center;gap:6px}
.hero-ticks li::before{content:'✓';color:#4ade80;font-weight:800}
.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:20px;backdrop-filter:blur(4px)}
.hero-meta-item{text-align:center}
.hero-meta-item b{display:block;font-family:var(--font-serif);font-size:28px;color:var(--c-hero-gold);font-weight:800}
.hero-meta-item span{font-size:10px;color:rgba(226,232,240,.6);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* v5.8: lift the hero image so its top aligns with the PREMIUM EDUCATOR
   pill on the left, instead of sagging halfway down the block. */
.hero-visual{position:relative;margin-top:-8px;align-self:start}
.hero-img-wrap{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;transform:translateY(0)}
.hero-img{width:100%;border-radius:var(--r-xl);display:block}
.hero-mobile-cta{display:none} /* shown only ≤900px, see media query below */
.btn-mobile-buy{background:#dc2626;color:#fff;box-shadow:0 8px 24px rgba(220,38,38,.4)}
.btn-mobile-buy:hover{background:#b91c1c}
.btn-mobile-sample{background:#16a34a;color:#fff;box-shadow:0 8px 24px rgba(22,163,74,.4)}
.btn-mobile-sample:hover{background:#15803d}
/* hero-float badges removed — they used to overlap the hero ad image */

/* ===== TRUST BAR ===== */
.trust-bar{background-color:#0f172a;background:var(--c-navy);color:#fff;border-radius:var(--r-full);margin:28px 0;padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;font-size:13.5px;font-weight:600}
.trust-bar span{display:flex;align-items:center;gap:6px}
.trust-bar .sep{color:rgba(255,255,255,.2);font-size:18px}
.stars-gold{color:#fbbf24}

/* ===== REFER & EARN BANNER ===== */
.refer-banner{background:linear-gradient(135deg,#2b2454,#3b0764,#2b2454);border:1px solid rgba(139,92,246,.3);border-radius:var(--r-xl);padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px 0;position:relative;overflow:hidden}
.refer-banner::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(190,24,93,.2),transparent 70%);pointer-events:none}
.refer-banner::after{content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(251,191,36,.1),transparent 70%);pointer-events:none}
.refer-banner-content{flex:1}
.refer-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(251,191,36,.15);color:#fbbf24;padding:6px 14px;border-radius:var(--r-full);font-size:12px;font-weight:800;letter-spacing:.08em;border:1px solid rgba(251,191,36,.3);margin-bottom:12px}
.refer-banner h2{font-family:var(--font-serif);font-size:32px;color:#fff;margin-bottom:8px}
.refer-banner h2 span{color:#fbbf24}
.refer-banner p{color:rgba(255,255,255,.75);font-size:15px;max-width:480px}
.refer-steps{display:flex;gap:24px;margin-top:16px}
.refer-step{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:13px;font-weight:600}
.refer-step-num{width:26px;height:26px;border-radius:50%;background:rgba(190,24,93,.3);border:1px solid rgba(190,24,93,.5);color:#f9a8d4;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}

/* ===== SECTION HEADS ===== */
.section-head{margin-bottom:36px}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--c-pink-bg);color:var(--c-pink);padding:6px 14px;border-radius:var(--r-full);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.section-head h2{font-family:var(--font-serif);font-size:40px;color:var(--c-navy);letter-spacing:-.02em;margin-bottom:10px}
.section-head h2 .accent{color:var(--c-pink)}
.section-head p{color:var(--c-muted);font-size:16px;max-width:600px;line-height:1.7}
.section-head.center{text-align:center}
.section-head.center p{margin-left:auto;margin-right:auto}

/* ===== CATEGORY / FEATURE CARDS ===== */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}

.cat-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cat-img-wrap{height:160px;background:linear-gradient(135deg,var(--c-violet-bg),var(--c-pink-bg));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* Defensive sizing: if an image ever fails to load, its alt text must stay
   small and clipped instead of rendering huge and breaking the card layout. */
.cat-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;font-size:11px;line-height:1.3;color:var(--c-muted);text-align:center}
.cat-badge-top{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);color:var(--c-navy);padding:4px 10px;border-radius:var(--r-sm);font-size:10px;font-weight:800;letter-spacing:.06em}
.cat-badge-bottom{position:absolute;bottom:12px;left:12px;background:var(--c-gold);color:#fff;padding:4px 10px;border-radius:var(--r-sm);font-size:10px;font-weight:800}
.cat-body{padding:20px 22px 16px;flex:1}
.cat-body h3{font-family:var(--font-serif);font-size:20px;color:var(--c-navy);margin:10px 0 8px}
.cat-body p{color:var(--c-muted);font-size:14px;line-height:1.65;margin-bottom:10px}
.cat-body ul{list-style:none;padding:0}
.cat-body ul li{font-size:13.5px;color:#374151;padding:3px 0;display:flex;align-items:flex-start;gap:7px}
.cat-body ul li::before{content:'✓';color:var(--c-green);font-weight:800;flex:none;margin-top:1px}
.cat-foot{padding:0 22px 20px;border-top:1px dashed var(--c-line);padding-top:14px;display:flex;align-items:center;justify-content:space-between}
.price-row .now{font-family:var(--font-serif);font-size:24px;color:var(--c-pink);font-weight:800}
.price-row .was{color:var(--c-muted);font-size:14px;font-weight:600;text-decoration:line-through;margin-left:6px}
.price-row small{display:block;color:var(--c-muted);font-size:11px;font-weight:600;margin-top:2px}
/* v5.3: category cards no longer repeat ₹199/₹699 in every card (already
   shown once in hero + pricing section) — just a clean prompt-count badge */
.cat-count-badge{background:var(--c-pink-bg);color:var(--c-pink);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--r-full)}

/* ===== BENEFIT CARDS ===== */
.benefit-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);padding:28px 26px;transition:transform .2s,box-shadow .2s}
.benefit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.benefit-card .ic-wrap{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px}
.benefit-card .ic-wrap.pink{background:var(--c-pink-bg)}
.benefit-card .ic-wrap.violet{background:var(--c-violet-bg)}
.benefit-card .ic-wrap.gold{background:var(--c-gold-bg)}
.benefit-card .ic-wrap.green{background:var(--c-green-bg)}
.benefit-card .ic-wrap.blue{background:var(--c-blue-bg)}
.benefit-card .ic-wrap.teal{background:var(--c-teal-bg)}
.benefit-card h3{font-family:var(--font-serif);color:var(--c-navy);font-size:19px;margin-bottom:8px}
.benefit-card p{color:var(--c-muted);font-size:14px;line-height:1.7}
.benefit-card .link{display:inline-flex;align-items:center;gap:4px;color:var(--c-pink);font-weight:700;font-size:13px;margin-top:10px}
.benefit-card .link:hover{gap:8px}

/* ===== STAT STRIP ===== */
.stat-strip{background-color:#4338ca;background:var(--grad-violet);border-radius:var(--r-xl);padding:40px;margin:20px 0;color:#fff}
.stat-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-strip-item b{display:block;font-family:var(--font-serif);font-size:44px;color:#fbbf24;font-weight:800;line-height:1}
.stat-strip-item span{font-size:13px;color:rgba(255,255,255,.7);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;display:block}

/* ===== PRICING CARD ===== */
.pricing-section{background:var(--c-bg-soft);padding:80px 0}
/* BUGFIX: .buy-grid (pricing card + checkout form) was a hard-coded
   inline `grid-template-columns:1fr 1fr` with zero responsive override
   anywhere — on mobile this squeezed both columns side-by-side into
   half the screen width each, causing severe horizontal overflow/
   clipping of the checkout form. Stack to a single column below 860px. */
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:900px;margin:0 auto;align-items:start}
@media(max-width:860px){
  .buy-grid{grid-template-columns:1fr;gap:32px}
}
.pricing-card{background:#fff;border:2px solid transparent;background-image:linear-gradient(#fff,#fff),var(--grad-premium-gold);background-origin:border-box;background-clip:padding-box,border-box;border-radius:var(--r-xl);max-width:540px;margin:0 auto;padding:40px;position:relative;box-shadow:0 0 0 1px var(--c-premium-gold-glow),0 20px 50px var(--c-premium-gold-glow),var(--shadow-lg);overflow:hidden}
.pricing-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-premium-gold)}
.pricing-badge{position:absolute;top:-1px;right:28px;background:var(--grad-premium-gold);color:#fff;padding:6px 18px;border-radius:0 0 var(--r) var(--r);font-size:11px;font-weight:800;letter-spacing:.08em;box-shadow:0 4px 14px var(--c-premium-gold-glow)}
.pricing-eyebrow{text-align:center;margin-bottom:6px}
.pricing-name{font-family:var(--font-serif);font-size:26px;color:var(--c-navy);text-align:center;margin-bottom:16px}
.pricing-amount{text-align:center;margin:12px 0 6px}
.pricing-amount .now{font-family:var(--font-serif);font-size:72px;color:var(--c-pink);font-weight:800;line-height:1}
.pricing-amount .now small{font-size:28px}
.pricing-amount .was{color:var(--c-muted);font-size:18px;text-decoration:line-through}
.pricing-save{display:inline-flex;align-items:center;gap:6px;background:var(--c-green-bg);color:var(--c-green);padding:6px 14px;border-radius:var(--r-full);font-size:12px;font-weight:800;margin:6px auto 24px;display:flex;justify-content:center}
.pricing-features{list-style:none;padding:0;margin:0 0 28px;font-size:15px;color:#374151}
.pricing-features li{padding:10px 0;border-bottom:1px solid var(--c-line);display:flex;align-items:center;gap:10px}
.pricing-features li:last-child{border:none}
.pricing-features li::before{content:'✅';flex:none}
.pricing-timer{background-color:#0f172a;background:var(--c-navy);color:#fff;border-radius:var(--r);padding:14px 18px;text-align:center;margin-bottom:22px;font-size:14px;font-weight:700}
.pricing-timer .countdown{font-family:var(--font-serif);font-size:28px;color:#fbbf24;display:block;margin-top:4px}

/* ===== CHECKOUT FORM ===== */
.checkout-form{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:28px}
.checkout-form h3{font-family:var(--font-serif);font-size:22px;color:var(--c-navy);margin-bottom:16px;text-align:center}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:700;color:var(--c-ink);margin-bottom:6px}
.form-group input{width:100%;padding:12px 16px;border:1.5px solid var(--c-line);border-radius:var(--r);font-size:15px;transition:border-color .15s,box-shadow .15s;background:#fff;color:var(--c-ink)}
.form-group input:focus{outline:none;border-color:var(--c-pink);box-shadow:0 0 0 3px rgba(190,24,93,.12)}
.form-group input.has-ref{border-color:var(--c-green);background:var(--c-green-bg)}

/* Collapsible optional fields (referral / coupon code) */
.optional-toggle-group{margin-bottom:16px}
.optional-toggle-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;font-size:13.5px;font-weight:700;color:var(--c-pink,#be185d);cursor:pointer;transition:opacity .15s}
.optional-toggle-btn:hover{opacity:.75;text-decoration:underline}
.optional-toggle-field{overflow:hidden;max-height:0;opacity:0;transform:translateY(-4px);transition:max-height .3s ease,opacity .25s ease,transform .25s ease;margin-bottom:0}
.optional-toggle-field.open{max-height:160px;opacity:1;transform:translateY(0);margin-bottom:16px}
.ref-hint{font-size:12px;color:var(--c-green);font-weight:600;margin-top:4px;display:none}
.ref-hint.show{display:block}
.form-divider{text-align:center;color:var(--c-muted);font-size:13px;margin:18px 0;position:relative}
.form-divider::before,.form-divider::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--c-line)}
.form-divider::before{left:0}
.form-divider::after{right:0}

/* ===== REVIEWS ===== */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);padding:24px;transition:box-shadow .2s}
.review-card:hover{box-shadow:var(--shadow)}
.review-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.stars-row{color:#d97706;font-size:16px;letter-spacing:2px}
.verified-badge,.review-verified{font-size:10px;font-weight:800;color:var(--c-green);background:var(--c-green-bg);padding:3px 8px;border-radius:var(--r-full)}
.review-text{font-family:var(--font-serif);color:#2d3345;font-size:15.5px;font-weight:500;line-height:1.75;letter-spacing:.1px;margin-bottom:14px}
.review-text::before{content:'\201C';font-size:26px;color:var(--c-pink);line-height:0;vertical-align:-.6em;margin-right:2px;font-family:Georgia,serif}
.reviewer-name{font-weight:800;color:var(--c-navy);font-size:14.5px;font-family:var(--font-sans)}
.reviewer-role{font-size:12px;color:var(--c-muted);font-family:var(--font-sans)}
.review-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.reviewer-avatar{flex:none;width:42px;height:42px;border-radius:50%;background:var(--grad-pink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.reviewer-meta{font-size:12px;color:var(--c-muted);margin-top:2px}
.review-stars{margin-left:auto;color:#d97706;font-size:13px;letter-spacing:1px;white-space:nowrap}
.review-footer{display:flex;justify-content:flex-end;align-items:center;margin-top:6px}

/* ===== FAQ ===== */
.faq-wrap{max-width:780px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden;transition:box-shadow .2s}
.faq-item:hover{box-shadow:var(--shadow-sm)}
.faq-item summary{font-weight:700;color:var(--c-navy);cursor:pointer;padding:18px 22px;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:15px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;color:var(--c-pink);font-weight:300;flex:none;margin-left:16px;transition:transform .2s}
.faq-item[open] summary::after{content:'−'}
.faq-item p{padding:0 22px 18px;color:#374151;font-size:14.5px;line-height:1.75}
.faq-q{width:100%;background:none;border:none;font-weight:700;color:var(--c-navy);cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;font-size:15px;text-align:left;font-family:inherit}
.faq-ic{font-size:22px;color:var(--c-pink);font-weight:300;flex:none;margin-left:16px}
.faq-a{padding:0 22px 18px;color:#374151;font-size:14.5px;line-height:1.75}
.faq-a[hidden]{display:none}

/* ===== CTA STRIPE ===== */
.cta-stripe{background-color:#0f172a;background:var(--grad-hero);border-radius:var(--r-xl);padding:48px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:40px 0;position:relative;overflow:hidden}
.cta-stripe::after{content:'';position:absolute;right:-50px;top:-50px;width:300px;height:300px;background:radial-gradient(circle,rgba(190,24,93,.2),transparent 70%);pointer-events:none}
.cta-stripe h2{font-family:var(--font-serif);font-size:34px;color:#fff;margin-bottom:8px}
.cta-stripe p{color:rgba(255,255,255,.8);font-size:16px;max-width:500px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ===== CONTACT STRIP ===== */
.contact-strip{background-color:#0f172a;background:var(--c-navy);color:#fff;border-radius:var(--r-xl);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:32px 0}
.contact-strip-left{display:flex;align-items:center;gap:16px}
.contact-ic{width:52px;height:52px;border-radius:12px;background:rgba(190,24,93,.2);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.contact-strip h3{font-family:var(--font-serif);font-size:22px;margin-bottom:4px}
.contact-strip p{font-size:14px;opacity:.75}
.contact-strip .phone{font-size:20px;font-weight:800;color:#fbbf24;margin-top:4px;display:block}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ===== FOOTER ===== */
.footer{background-color:#0f172a;background:var(--c-navy);color:rgba(255,255,255,.8);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:32px;margin-bottom:40px}
.footer-contact-form{display:flex;flex-direction:column;gap:10px}
.footer-contact-form input,.footer-contact-form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;color:#fff;font:inherit;font-size:14px;resize:vertical}
.footer-contact-form input::placeholder,.footer-contact-form textarea::placeholder{color:rgba(255,255,255,.4)}
.footer-contact-form input:focus,.footer-contact-form textarea:focus{outline:none;border-color:var(--c-pink);background:rgba(255,255,255,.09)}
.footer-contact-form .ref-hint{font-size:13px}
.footer-contact-form .ref-hint-ok{color:#4ade80}
.footer-contact-form .ref-hint-err,.footer-contact-form .ref-hint-warn{color:#f87171}
.footer-brand .logo-name{font-size:22px}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.55);margin:12px 0 18px;line-height:1.7}
.footer-social{display:flex;gap:10px}
.social-btn{width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s}
.social-btn:hover{background:var(--c-pink)}
.footer h4{font-family:var(--font-serif);font-size:16px;color:#fff;margin-bottom:14px;font-weight:700}
.footer ul{list-style:none}
.footer li{padding:5px 0}
.footer a:hover{color:var(--c-pink)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(255,255,255,.45)}
.footer-bottom a:hover{color:#fff}

/* ===== WHATSAPP FLOAT ===== */
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 28px rgba(37,211,102,.45);z-index:70;transition:transform .2s;text-decoration:none;border:none;cursor:pointer}
.wa-float:hover{transform:scale(1.1)}
.wa-float-pulse{animation:waPulse 2.5s infinite}
.wa-widget{position:fixed;right:20px;bottom:20px;z-index:70}
.wa-widget .wa-float{position:static}
.wa-popup{position:absolute;right:0;bottom:72px;width:300px;max-width:calc(100vw - 40px);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(15,23,42,.25);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.wa-popup.wa-popup-open{opacity:1;visibility:visible;transform:translateY(0)}
.wa-popup-head{background:#075e54;color:#fff;padding:16px;display:flex;align-items:center;gap:10px}
.wa-popup-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.wa-popup-title{font-weight:700;font-size:14px}
.wa-popup-sub{font-size:11px;color:rgba(255,255,255,.75)}
.wa-popup-close{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;opacity:.85}
.wa-popup-close:hover{opacity:1}
.wa-popup-body{background:#e5ddd5;padding:14px}
.wa-popup-hint{font-size:12px;color:#4b5563;margin-bottom:10px;font-weight:600}
.wa-quick-msg{display:block;width:100%;text-align:left;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:10px 12px;font-size:13px;color:#1e293b;margin-bottom:8px;cursor:pointer;transition:transform .12s,box-shadow .12s;font-family:inherit}
.wa-quick-msg:last-child{margin-bottom:0}
.wa-quick-msg:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12);background:#f0fdf4}
@keyframes waPulse{0%,100%{box-shadow:0 8px 28px rgba(37,211,102,.45)}50%{box-shadow:0 8px 40px rgba(37,211,102,.7)}}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(110px);background-color:#0f172a;background:var(--c-navy);color:#fff;padding:13px 24px;border-radius:var(--r-full);font-size:14px;font-weight:600;z-index:80;transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-lg);max-width:360px;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--c-red)}
.toast.success{background:var(--c-green)}

/* ===== THANK YOU PAGE ===== */
.ty-hero{background-color:#0f172a;background:var(--grad-hero);color:#fff;padding:80px 0 56px;text-align:center;position:relative;overflow:hidden}
.ty-success-ic{width:80px;height:80px;background:var(--c-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 20px;box-shadow:0 10px 30px rgba(22,163,74,.4);animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes bounceIn{0%{transform:scale(0)}100%{transform:scale(1)}}
.ty-hero h1{font-family:var(--font-serif);font-size:52px;margin:0 0 10px}
.ty-sub{font-size:18px;color:rgba(255,255,255,.8);max-width:500px;margin:0 auto 32px}
.ty-download-btn{display:inline-flex;align-items:center;gap:10px;background:var(--grad-gold);color:#fff;padding:18px 36px;border-radius:var(--r-full);font-size:18px;font-weight:800;box-shadow:0 10px 30px rgba(245,158,11,.45);animation:pulse-gold 2s infinite}
@keyframes pulse-gold{0%,100%{box-shadow:0 10px 30px rgba(245,158,11,.45)}50%{box-shadow:0 10px 40px rgba(245,158,11,.7)}}
.ty-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ty-card{background:#fff;border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow);text-align:left}
.ty-card .tc-ic{font-size:28px;margin-bottom:12px}
.ty-card h3{font-family:var(--font-serif);color:var(--c-navy);font-size:20px;margin-bottom:6px}
.ty-card p{color:var(--c-muted);font-size:14px}

/* ===== REFER & EARN (FULL SECTION) ===== */
.refer-section{background:linear-gradient(135deg,#181430,#0f0a2e,#2b2454);padding:80px 0;position:relative;overflow:hidden}
.refer-section::before{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(190,24,93,.15),transparent 70%);top:-100px;right:-100px}
.refer-section::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(67,56,202,.15),transparent 70%);bottom:-100px;left:-100px}
.refer-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.refer-how-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:28px;text-align:center;backdrop-filter:blur(4px);transition:background .2s}
.refer-how-card:hover{background:rgba(255,255,255,.08)}
.refer-step-circle{width:56px;height:56px;border-radius:50%;background:var(--grad-pink);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;box-shadow:var(--shadow-pink)}
.refer-how-card h3{color:#fff;font-family:var(--font-serif);font-size:20px;margin-bottom:8px}
.refer-how-card p{color:rgba(255,255,255,.65);font-size:14px;line-height:1.7}
.refer-reward-badge{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);border-radius:var(--r-lg);padding:16px 24px;text-align:center;margin-top:16px}
.refer-reward-badge .amount{font-family:var(--font-serif);font-size:36px;color:#fbbf24;font-weight:800}
.refer-reward-badge .label{font-size:12px;color:rgba(255,255,255,.6);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.refer-input-wrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-xl);padding:32px;max-width:540px;margin:36px auto 0}
.refer-input-wrap h3{color:#fff;font-family:var(--font-serif);font-size:22px;margin-bottom:6px;text-align:center}
.refer-input-wrap p{color:rgba(255,255,255,.6);font-size:14px;text-align:center;margin-bottom:20px}
.refer-link-box{display:flex;gap:10px}
.refer-link-input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);color:#fff;padding:12px 16px;font-size:14px;font-weight:600}
.refer-link-input::placeholder{color:rgba(255,255,255,.35)}
.copy-btn{flex:none;background:var(--c-pink);color:#fff;border:none;border-radius:var(--r);padding:12px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s}
.copy-btn:hover{opacity:.9}

/* ================================================================
   v5.1 NEW FEATURE STYLES
================================================================ */

/* Feature #14: Dark Mode */
[data-theme="dark"] {
  --c-bg:#0f0f1a;       --c-bg-soft:#161628;  --c-bg-card:#1a1a2e;
  --c-ink:#e2e8f0;      --c-muted:#9ca3af;    --c-line:#2d2d48;
  --c-navy:#a5b4fc;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #0f0f1a; color: #e2e8f0; }
[data-theme="dark"] .cat-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .pricing-card { background: #1a1a2e; border-color: #2d2d48; }
[data-theme="dark"] .nav { background: rgba(15,15,26,.97); border-color: #2d2d48; }
[data-theme="dark"] .faq-item { border-color: #2d2d48; background: #1a1a2e; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #1a1a2e; color: #e2e8f0; border-color: #2d2d48; }
[data-theme="dark"] .stat-strip { background: #161628; }
[data-theme="dark"] .trust-bar { background: #1a1a2e; }
[data-theme="dark"] .footer { background: #080814; }

/* Feature #14: Dark mode toggle button */
.dark-toggle {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; transition: background .2s;
}
.dark-toggle:hover { background: rgba(255,255,255,.2); }

/* Feature #22: Reading Progress Bar */
#readingProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #6366f1, #db2777, #d97706);
  z-index: 9999; transition: width .1s linear;
}

/* Feature #15: Floating Buy Widget */
#floatBuy {
  position: fixed; bottom: 80px; right: 20px; z-index: 900;
  background: linear-gradient(135deg, #6366f1, #db2777);
  color: #fff; border-radius: 50px; padding: 12px 22px;
  font-weight: 700; font-size: 14px; box-shadow: 0 8px 30px rgba(99,102,241,.5);
  transform: translateY(100px); opacity: 0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  cursor: pointer; border: none; white-space: nowrap;
}
#floatBuy.visible { transform: translateY(0); opacity: 1; }
#floatBuy:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(99,102,241,.6); }

/* Feature #16: Skeleton Loading */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1a1a2e 25%, #252540 50%, #1a1a2e 75%);
  background-size: 200% 100%;
}

/* Feature #17: Confetti Canvas — handled in JS */

/* Feature #18: Exit Intent Popup */
#exitOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .3s;
}
#exitOverlay.exit-visible { opacity: 1; }
.exit-popup {
  background: #fff; border-radius: 24px; padding: 40px 36px; max-width: 440px; width: 100%;
  text-align: center; position: relative; transform: scale(.9); transition: transform .3s;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
#exitOverlay.exit-visible .exit-popup { transform: scale(1); }
.exit-close {
  position: absolute; top: 14px; right: 18px; font-size: 22px; cursor: pointer;
  color: #9ca3af; background: none; border: none; line-height: 1;
}
.exit-emoji { font-size: 56px; margin-bottom: 12px; }
.exit-popup h2 { font-size: 26px; font-weight: 800; color: #2b2454; margin-bottom: 10px; }
.exit-popup p  { color: #4b5563; margin-bottom: 20px; }
.exit-price-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.exit-price-row .now { font-size: 40px; font-weight: 900; color: #6366f1; }
.exit-price-row .was { font-size: 18px; color: #9ca3af; text-decoration: line-through; }
.exit-price-row .save-badge { background: #dcfce7; color: #166534; padding: 4px 10px; border-radius: 20px; font-weight: 700; font-size: 12px; }
.exit-dismiss { background: none; border: none; color: #9ca3af; font-size: 12px; cursor: pointer; margin-top: 12px; text-decoration: underline; display: block; margin: 12px auto 0; }

/* Feature #19: Social Proof Popup */
#socialProofWrap { position: fixed; bottom: 80px; left: 20px; z-index: 850; pointer-events: none; }
.social-proof-popup {
  background: #fff; border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px; max-width: 300px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15); border: 1px solid #e2e8f0;
  pointer-events: all; margin-bottom: 8px;
  transform: translateX(-110%); opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s;
}
.social-proof-popup.sp-show { transform: translateX(0); opacity: 1; }
.social-proof-popup .sp-ic { font-size: 22px; flex-shrink: 0; }
.social-proof-popup strong { color: #2b2454; font-size: 13px; }
.social-proof-popup small { color: #9ca3af; font-size: 11px; }
.sp-close { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 16px; margin-left: auto; padding: 0 4px; pointer-events: all; flex-shrink: 0; }
/* v5.3 (item #3): variant-specific tweaks for the 4 new social-proof
   event types (addon/review/viewers/milestone) added alongside the
   original purchase-only popup. */
.social-proof-popup.sp-review { max-width: 320px; align-items: flex-start; }
.social-proof-popup.sp-review .sp-ic { font-size: 12px; letter-spacing: 1px; color: #d97706; margin-top: 3px; }
.social-proof-popup.sp-addon .sp-ic { color: var(--c-violet-light); }
.social-proof-popup.sp-milestone { background: linear-gradient(135deg,#fdf2fb,#f5f0ff); }
.social-proof-popup.sp-viewers .sp-ic { font-size: 20px; }

/* Feature #20: Urgency Ticker */
.urgency-ticker {
  background: linear-gradient(135deg, #fef3c7, #fce7f3);
  border: 1px solid #fbbf24; border-radius: 10px;
  padding: 10px 20px; text-align: center; font-size: 14px;
  color: #92400e; margin: 16px 0;
  min-height: 38px; display: flex; align-items: center; justify-content: center;
}

/* Feature #21: FAQ Search */
.faq-search-wrap { max-width: 480px; margin: 0 auto 28px; position: relative; }
.faq-search-input {
  width: 100%; padding: 13px 20px 13px 44px;
  border: 2px solid var(--c-line); border-radius: 50px;
  font-size: 15px; outline: none; transition: border-color .2s;
  font-family: var(--font-sans); background: var(--c-bg); color: var(--c-ink);
}
.faq-search-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.faq-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; font-size: 16px; }

/* Feature #23: Coupon Row (v5.4: auto-applied polish) */
.coupon-row {
  display: flex; gap: 8px; margin: 12px 0;
}
.coupon-row input {
  flex: 1; padding: 11px 16px; border: 2px solid var(--c-line);
  border-radius: 10px; font-size: 14px; font-family: var(--font-sans);
  outline: none; text-transform: uppercase; letter-spacing: .05em;
  background: var(--c-bg); color: var(--c-ink); transition: border-color .2s, background .2s;
}
.coupon-row input:focus { border-color: #6366f1; }
.coupon-row input[readonly] {
  background: #ecfdf5 !important; border-color: #22c55e !important;
  color: #065f46 !important; font-weight: 800; cursor: default;
}
.coupon-row button {
  padding: 11px 18px; background: linear-gradient(135deg,#6366f1,#4338ca);
  color: #fff; border-radius: 10px; font-weight: 700; font-size: 13px;
  white-space: nowrap; transition: opacity .2s, background .2s, transform .15s;
  border: none; cursor: pointer;
}
.coupon-row button:hover:not(:disabled) { transform: translateY(-1px); }
.coupon-row button:disabled { opacity: 1; cursor: default; }

/* v5.4: Bigger, richer collapsible height so the coupon field never clips
   when it shows the auto-applied ✅ message + save-badge underneath. */
.optional-toggle-field.open { max-height: 260px !important; }

/* Feature #24: Bundle Selector */
.bundle-select-wrap { margin-bottom: 16px; }
.bundle-select-wrap select {
  width: 100%; padding: 12px 16px;
  border: 2px solid var(--c-line); border-radius: 12px;
  font-size: 14px; font-family: var(--font-sans); font-weight: 600;
  background: var(--c-bg); color: var(--c-ink); outline: none;
  cursor: pointer; transition: border-color .2s;
}
.bundle-select-wrap select:focus { border-color: #6366f1; }
.bundle-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg,#fbbf24,#d97706); color: #fff;
  padding: 2px 8px; border-radius: 4px; margin-left: 6px;
}

/* Feature #26: QR Code */
#referQRWrap { text-align: center; margin-top: 20px; }
#referQRWrap img { border: 2px solid rgba(255,255,255,.3); padding: 8px; background: #fff; border-radius: 12px; }

/* Feature #27: Bulk WA */
#bulkWAWrap pre { font-size: 12px; }

/* Checkout price display */
#checkoutPrice { font-size: 20px; font-weight: 800; color: var(--c-ink); }

/* ref-hint variants */
.ref-hint         { font-size: 12px; margin-top: 4px; min-height: 16px; }
.ref-hint-ok      { color: #15803d; }
.ref-hint-err     { color: #dc2626; }
.ref-hint-warn    { color: #d97706; }

/* ===== SAMPLE PAGE ===== */
.sample-hero{background-color:var(--c-brand-blue);background:var(--grad-hero);padding:60px 0 48px;color:#fff;text-align:center}
.sample-hero h1{font-family:var(--font-serif);font-size:44px;margin-bottom:12px}
.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.sample-card{background:#fff;border-radius:var(--r-xl);padding:26px;border:1px solid var(--c-line)}
.sample-card .sc-num{font-size:12px;font-weight:800;color:var(--c-pink);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.sample-card h3{font-family:var(--font-serif);color:var(--c-navy);font-size:19px;margin-bottom:10px}
.sample-card .prompt{background:var(--c-bg-soft);border-left:3px solid var(--c-pink);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px;font-size:13.5px;color:#374151;line-height:1.7;font-style:italic;margin-bottom:12px}
.sample-card p{font-size:13.5px;color:var(--c-muted)}

/* WhatsApp sample-download modal */
.sample-modal-backdrop{position:fixed;inset:0;background:rgba(10,16,32,.66);display:grid;place-items:center;padding:20px;z-index:10000;backdrop-filter:blur(6px);animation:sampleFadeIn .18s ease}
.sample-modal-backdrop[hidden]{display:none}
@keyframes sampleFadeIn{from{opacity:0}to{opacity:1}}
@keyframes sampleSlideUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.sample-modal{width:min(100%,460px);background:#fff;border-radius:var(--r-xl);padding:34px 32px 30px;box-shadow:0 24px 80px rgba(15,23,42,.32),0 4px 16px rgba(15,23,42,.12);position:relative;text-align:left;overflow:hidden;animation:sampleSlideUp .22s cubic-bezier(.16,1,.3,1)}
/* Brand-coloured top accent so the modal doesn't read as a bare white box */
.sample-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#25D366 0%,var(--c-brand-blue) 55%,var(--c-pink) 100%)}
.sample-modal-icon{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#25D366,#128C4A);display:grid;place-items:center;box-shadow:0 10px 24px rgba(37,211,102,.35);margin-bottom:16px}
.sample-modal-icon svg{width:26px;height:26px}
.sample-modal h2{font-family:var(--font-serif);font-weight:800;font-size:26px;letter-spacing:-.01em;color:var(--c-navy);margin-bottom:10px;line-height:1.15}
.sample-modal p{color:var(--c-muted);font-size:14.5px;line-height:1.6;margin-bottom:22px}
.sample-modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--c-muted);background:var(--c-bg-soft);transition:background .15s,color .15s,transform .15s}
.sample-modal-close:hover{background:var(--c-pink-bg);color:var(--c-pink);transform:rotate(90deg)}
.sample-modal label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-navy);margin-bottom:8px}
.sample-phone-row{display:flex;gap:10px;margin-bottom:8px}
.sample-phone-row select,.sample-phone-row input{border:1.5px solid var(--c-line);border-radius:var(--r);padding:13px 14px;font-size:15.5px;font-weight:600;color:var(--c-ink);background:var(--c-bg-soft);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.sample-phone-row select{width:104px;font-weight:700}
.sample-phone-row input{flex:1;min-width:0;letter-spacing:.02em}
.sample-phone-row input::placeholder{color:#9aa5b5;font-weight:500}
.sample-phone-row input:focus,.sample-phone-row select:focus{border-color:#25D366;background:#fff;box-shadow:0 0 0 4px rgba(37,211,102,.15)}
.sample-form-error{display:flex;align-items:center;gap:6px;min-height:20px;color:var(--c-red);font-size:12.5px;font-weight:600;margin:2px 0 12px}
.sample-form-error:not(:empty)::before{content:'⚠';font-size:13px}
.sample-modal .btn{width:100%;font-size:15.5px;padding:14px 22px;letter-spacing:.01em}
.sample-modal .btn-wa{background:linear-gradient(135deg,#25D366,#1ebe5d);box-shadow:0 10px 28px rgba(37,211,102,.4)}
.sample-modal .btn-wa:hover{background:linear-gradient(135deg,#22c55e,#189a4d);box-shadow:0 12px 32px rgba(37,211,102,.5)}
.sample-modal-status{font-size:13px;font-weight:600;color:var(--c-green);text-align:center;margin-top:12px;min-height:18px}


/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero-h1{font-size:42px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stat-strip-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero-h1{font-size:36px}
  .hero-price-now{font-size:52px}
  .hero-social-proof{margin-left:auto;margin-right:auto}
  .hero-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  /* v5.3: on mobile the hero image (with its "View Sample" CTA right below
     it) should appear FIRST — above the headline/price/Grab Now block —
     since the visual sells faster than text on small screens. Desktop
     layout (image on the right, side-by-side) is untouched. */
  .hero-text{order:2}
  .hero-visual{order:1}
  .hero-mobile-cta{display:flex;gap:10px;margin-top:14px}
  .hero-mobile-cta .btn{flex:1}
  .hero-sub{margin:0 auto 20px}
  .hero-price-row,.hero-ctas,.hero-ticks{justify-content:center}
  .hero-meta{grid-template-columns:repeat(4,1fr)}
  .grid-3,.reviews-grid,.sample-grid,.ty-cards,.refer-how-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 16px;border-bottom:1px solid var(--c-line);gap:0;border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 8px;border-radius:var(--r-sm)}
  .nav-toggle{display:block}
  .nav{position:sticky}
  .refer-banner{flex-direction:column;text-align:center}
  .refer-steps{justify-content:center;flex-wrap:wrap}
  .contact-strip{flex-direction:column;text-align:center}
  .cta-stripe{text-align:center;justify-content:center}
  .cta-actions{justify-content:center}
  .trust-bar{gap:14px 20px}
  .trust-bar .sep{display:none}
}
@media(max-width:620px){
  .hero-h1{font-size:30px}
  .hero-price-now{font-size:40px}
  .hero-sub{font-size:15.5px}
  .grid-3,.reviews-grid,.sample-grid,.ty-cards,.refer-how-grid,.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  /* BUGFIX (v5.5): stat-strip numbers ("10+", "12,481+"...) were shown in
     a fixed 2-col grid with large 44px numerals and no visual grouping —
     on very narrow phones (<380px) this reads as disconnected floating
     numbers with no label context nearby. Single column keeps each
     number directly above/below its own label with generous spacing. */
  .stat-strip{padding:28px 20px}
  .stat-strip-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  .stat-strip-item b{font-size:32px}
  .section-head h2{font-size:28px}
  .grid-auto{grid-template-columns:1fr}
  .cat-card{max-width:420px;margin:0 auto}
  .pricing-card{padding:26px 18px}
  .pricing-amount .now{font-size:52px}
  .cta-stripe{padding:32px 22px}
  .hero-meta{grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}
  .hero-meta-item b{font-size:22px}
  .refer-banner{padding:22px 18px}
  .refer-banner h2{font-size:22px}
  .checkout-form{padding:22px 18px}
  .buy-grid{gap:24px}
  /* BUGFIX: .cta-actions had flex:none so it kept its natural
     (unwrapped) content width — sum of both button widths + gap —
     even though the mobile viewport only had ~310px of usable
     space inside .cta-stripe. flex-wrap:wrap never triggered because
     nothing forced the container itself to shrink first, so the
     "Try Free Prompts" button visibly overflowed off the right edge.
     Fix: stack both CTA buttons full-width on narrow screens. */
  .cta-actions{flex-direction:column;width:100%}
  .cta-actions .btn{width:100%}
  /* BUGFIX (v5.5): .cat-foot used justify-content:space-between with a
     fixed-width "10 prompts" badge + "Grab Now" button — on ~360-390px
     phones this squeezed the button's label/padding and could push it
     slightly off-baseline vs the badge, reported as a "misaligned
     button" in the mobile screenshot. Let it wrap cleanly instead. */
  .cat-foot{flex-wrap:wrap;gap:10px}
  /* .btn-xl (hero "Grab Now", "Browse Free Prompts", sample-modal CTAs,
     thank-you page download button) full-width + slightly tighter padding
     below 620px so long labels ("🚀 Grab Now · ₹199") never get clipped
     or push a sibling button off-screen. */
  .btn-xl{width:100%;padding:14px 20px;font-size:16px}
  .hero-ctas .btn-xl,.cta-actions .btn-xl{flex:1 1 100%}
}
@media(max-width:400px){
  .hero-h1{font-size:26px}
  .hero-price-now{font-size:36px}
  .hero-meta{grid-template-columns:1fr 1fr}
  .pricing-amount .now{font-size:46px}
  .btn-xl{font-size:15px;padding:13px 16px}
}

/* ================================================================
   CheMentor v5.2 — New Feature Styles
================================================================ */

/* Feature #76: Search overlay */
#searchOverlay { backdrop-filter: blur(4px); }

/* Feature #77: Flash sale banner */
#flashSaleBanner { transition: all .3s; }

/* Feature #79: Cookie banner */
#cookieBanner a:hover { text-decoration: underline; }

/* Feature #80: Back to top */
#backToTop:hover { background: var(--c-pink) !important; transform: translateY(-2px); }

/* Feature #85: Scroll animations */
.anim-ready { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.anim-in    { opacity: 1; transform: translateY(0); }

/* Feature #98: PWA install button */
#installPWA { display: none; background: linear-gradient(135deg, var(--c-pink), #6366f1); color: #fff; border: none; padding: 10px 20px; border-radius: var(--r-full); cursor: pointer; font-weight: 700; font-size: 13px; align-items: center; gap: 6px; }

/* Feature #99: Personalized greeting */
#personalGreeting { font-weight: 700; color: var(--c-pink); }

/* Chatbot panel (homepage version) */
#chatbotToggle { cursor: pointer; }
#chatbotPanel.open { display: flex !important; }

/* Flash sale banner countdown */
#flashSaleTimer { font-variant-numeric: tabular-nums; }

/* fb-pulse animation */
.fb-pulse { animation: fbPulse 1s ease-in-out 3; }
@keyframes fbPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* Video popup */
#vidOverlay { animation: fadeIn .2s ease; }

/* Progress tracker buttons */
.progress-chapter-done { background: linear-gradient(135deg, #be185d, #6366f1) !important; color: #fff !important; border-color: #be185d !important; }

/* Timed offer */
#timedOffer { animation: slideUp .35s ease; }
@keyframes slideUp { from { transform: translate(-50%,-40%); opacity:0; } to { transform: translate(-50%,-50%); opacity:1; } }

/* Share buttons */
[data-share] { cursor: pointer; }
[data-share]:hover { transform: scale(1.05); }

/* Invoice page btn hover */
.invoice-print-btn:hover { transform: scale(1.02); }

/* NPS popup */
#npsPopup button:hover { background: linear-gradient(135deg, #fce7f3, #eef2ff) !important; }

/* Certificate */
.cert-download-btn:hover { transform: scale(1.02); }

/* Admin v5.2 enhancements — pill-teal already added */
.pill-violet { background: var(--c-violet-bg); color: var(--c-violet); }

/* Affiliate tier display */
#affiliateTierDisplay .pill { font-size: 13px; padding: 6px 14px; }

/* View count badge */
[data-viewcount] { display: none; }

/* Data copy code */
[data-copy-code] { cursor: pointer; transition: background .2s; border-radius: 4px; padding: 2px 6px; }
[data-copy-code]:hover { background: #fce7f3; }

/* Scroll depth bar (thin overlay) */
#scrollDepthBar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #be185d, #6366f1); z-index: 9999; width: 0; transition: width .1s linear; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   v5.3 — UNIFORM STYLES SYSTEM
   Ensures consistent design language across all pages:
   homepage, dashboard, portal, thank-you, admin
   ═══════════════════════════════════════════════════════════════ */

/* ─── v5.3 Global CSS Variables (extend base) ─── */
:root {
  /* Semantic color tokens */
  --c-success:        #15803d;
  --c-success-bg:     #dcfce7;
  --c-success-border: #bbf7d0;
  --c-warning:        #d97706;
  --c-warning-bg:     #fef3c7;
  --c-warning-border: #fde68a;
  --c-danger:         #dc2626;
  --c-danger-bg:      #fee2e2;
  --c-danger-border:  #fecaca;
  --c-info:           #0ea5e9;
  --c-info-bg:        #e0f2fe;
  --c-info-border:    #bae6fd;
  --c-locked:         #9ca3af;
  --c-locked-bg:      #f3f4f6;
  --c-locked-border:  #e2e8f0;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;

  /* Button sizing */
  --btn-h-sm:  36px;
  --btn-h-md:  46px;
  --btn-h-lg:  54px;
  --btn-h-xl:  60px;
  --btn-px-sm: 16px;
  --btn-px-md: 24px;
  --btn-px-lg: 32px;
  --btn-px-xl: 36px;

  /* Bridge aliases so the Uniform Button System below always tracks the
     live brand palette instead of silently falling back to hardcoded
     colors if these ever drift out of sync (was the root cause of the
     "wrong/invisible button color" reports). */
  --pink:       var(--c-pink);
  --pink-light: var(--c-pink-bg);
  --violet:     var(--c-violet);
  --navy:       var(--c-navy);
  --muted:      var(--c-muted);
  --line:       var(--c-line);
  --bg:         var(--c-bg-soft);
  --ink:        var(--c-ink);
  --sans:       'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Transition */
  --t-fast:  .15s ease;
  --t-base:  .25s ease;
  --t-slow:  .4s ease;

  /* Portal cross-link accent */
  --portal-cta-bg:    linear-gradient(135deg, #0f172a 0%, #181430 100%);
  --portal-cta-gold:  #d97706;
}

/* ─── Uniform Button System ─── */
/* Base button reset applied to ALL .btn elements site-wide */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h-md);
  padding: 0 var(--btn-px-md);
  border-radius: var(--r-full, 999px);
  border: none;
  font-family: var(--sans, system-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0);    box-shadow: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--pink, #be185d), var(--violet, #4338ca));
  color: #fff;
  box-shadow: 0 4px 14px rgba(190,24,93,.35);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(190,24,93,.45); }

.btn-secondary {
  background: #fff;
  color: var(--pink, #be185d);
  border: 2px solid var(--pink, #be185d);
}
.btn-secondary:hover { background: var(--pink-light, #fdf2f8); }

.btn-dark {
  background: var(--navy, #0f172a);
  color: #fff;
}
.btn-dark:hover { background: #1a2060; }

.btn-gold {
  background: linear-gradient(135deg, #d97706, #d97706);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-gold:hover { box-shadow: 0 6px 20px rgba(245,158,11,.45); }

.btn-ghost {
  background: transparent;
  color: var(--muted, #64748b);
  border: 1.5px solid var(--line, #e2e8f0);
}
.btn-ghost:hover { background: var(--bg, #f6f5f9); color: var(--ink, #1e293b); }

.btn-success {
  background: linear-gradient(135deg, #15803d, #15803d);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22,163,74,.3);
}

.btn-sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: 13px;
}
.btn-lg {
  height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  font-size: 16px;
}
/* .btn-xl previously had no rule in this later "Uniform Button System"
   block, so the earlier .btn-xl definition (padding:16px 32px; font-size:17px)
   was being silently overridden back down to the plain .btn default
   (46px / 14px) by cascade order — this is why hero/CTA buttons rendered
   undersized with cramped, sometimes-clipped text on small screens. */
.btn-xl {
  height: auto;
  min-height: var(--btn-h-xl);
  padding: 14px var(--btn-px-xl);
  font-size: 17px;
  font-weight: 800;
  white-space: normal;
  line-height: 1.25;
}
.btn-block { width: 100%; }

.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── Uniform Card System ─── */
.card-v53 {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15,23,42,.08);
  padding: 24px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.card-v53:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(15,23,42,.13);
}
.card-v53.card-dark {
  background: linear-gradient(135deg, #0f172a 0%, #181430 100%);
  color: #fff;
}
.card-v53.card-pink {
  background: linear-gradient(135deg, #fdf2f8 0%, #eef2ff 100%);
}
.card-v53.card-success {
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  border: 1px solid #bbf7d0;
}

/* ─── Uniform Badge / Pill System ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge-pink    { background: #fdf2f8; color: #9d174d; }
.badge-violet  { background: #eef2ff; color: #4338ca; }
.badge-green   { background: #dcfce7; color: #15803d; }
.badge-gold    { background: #fef3c7; color: #92400e; }
.badge-red     { background: #fee2e2; color: #b91c1c; }
.badge-navy    { background: #0f172a; color: #fff; }
.badge-gray    { background: #f3f4f6; color: #64748b; }
.badge-locked  { background: #f3f4f6; color: #9ca3af; }
.badge-free    { background: #dcfce7; color: #15803d; }

/* ─── Uniform Section Headings ─── */
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink, #be185d);
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: var(--ink, #1e293b);
  line-height: 1.25;
  margin-bottom: 12px;
}
.section-subtitle {
  font-size: 16px;
  color: var(--muted, #64748b);
  max-width: 600px;
  line-height: 1.65;
}

/* ─── Portal Cross-Link Block (homepage & thank-you) ─── */
.portal-crosslink {
  background: var(--portal-cta-bg);
  border-radius: 20px;
  padding: 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.portal-crosslink::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(190,24,93,.18) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(67,56,202,.22) 0%, transparent 50%);
  pointer-events: none;
}
.portal-crosslink h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  margin-bottom: 10px;
  position: relative;
}
.portal-crosslink p  {
  color: rgba(255,255,255,.75);
  margin-bottom: 20px;
  font-size: 15px;
  position: relative;
}
.portal-crosslink .portal-features-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  position: relative;
}
.portal-crosslink .pf-chip {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  color: #fff;
}
.portal-crosslink .portal-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

/* ─── Buyer-Only Gate Cards (dashboard referral / wallet) ─── */
.gate-card {
  background: #f9fafb;
  border: 2px dashed #e2e8f0;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
}
.gate-card .gate-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}
.gate-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink, #1e293b);
  margin-bottom: 8px;
}
.gate-card p {
  color: var(--muted, #64748b);
  margin-bottom: 24px;
  font-size: 14px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Uniform Form Elements ─── */
.form-group-v53 { margin-bottom: 18px; }
.form-group-v53 label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #1e293b);
  margin-bottom: 6px;
}
.form-control-v53 {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--sans, system-ui);
  color: var(--ink, #1e293b);
  background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.form-control-v53:focus {
  border-color: var(--pink, #be185d);
  box-shadow: 0 0 0 3px rgba(190,24,93,.12);
}
.form-control-v53.is-error {
  border-color: var(--c-danger, #dc2626);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
textarea.form-control-v53 {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 100px;
}

/* ─── Toast Notifications (uniform across portal + dashboard) ─── */
.toast-v53 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  background: var(--navy, #0f172a);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  animation: toastIn .25s ease forwards;
  pointer-events: auto;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast-item.success { border-left: 4px solid #15803d; }
.toast-item.error   { border-left: 4px solid #dc2626; }
.toast-item.info    { border-left: 4px solid #0ea5e9; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Price Display (uniform across all pages) ─── */
.price-display {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-display .price-main {
  font-size: 32px;
  font-weight: 900;
  color: var(--pink, #be185d);
  font-family: var(--serif, Georgia);
  line-height: 1;
}
.price-display .price-main.price-gold {
  color: var(--portal-cta-gold, #d97706);
}
.price-display .price-strike {
  font-size: 16px;
  color: var(--muted, #64748b);
  text-decoration: line-through;
}
.price-display .price-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
}

/* ─── Locked Content Overlay (uniform portal style) ─── */
.locked-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.locked-overlay .lock-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #be185d, #4338ca);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}
.locked-overlay .lock-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #1e293b);
  text-align: center;
}

/* ─── Session Bundle Selector (homepage) ─── */
.bundle-selector-saved::after {
  content: ' ✓ Saved';
  color: var(--c-success, #15803d);
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}

/* ─── Portal Navigation Tabs (uniform sticky tab bar) ─── */
.portal-tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
}
.portal-tab-bar .nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  border: none;
  background: transparent;
  white-space: nowrap;
}
.portal-tab-bar .nav-tab:hover  { background: rgba(255,255,255,.1); color: #fff; }
.portal-tab-bar .nav-tab.active { background: var(--pink, #be185d); color: #fff; }
.portal-tab-bar .nav-tab svg,
.portal-tab-bar .nav-tab .tab-icon { font-size: 16px; }

/* ─── Category Sidebar (uniform portal sidebar) ─── */
.cat-sidebar {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.cat-sidebar .cat-header {
  background: linear-gradient(135deg, #0f172a, #181430);
  color: #fff;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1e293b);
  border-left: 3px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cat-item:hover  { background: #f6f5f9; }
.cat-item.active {
  border-left-color: var(--pink, #be185d);
  background: #fdf2f8;
  color: var(--pink, #be185d);
}
.cat-item .cat-count {
  background: #f3f4f6;
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
}
.cat-item.active .cat-count {
  background: var(--pink-light, #fdf2f8);
  color: var(--pink, #be185d);
}

/* ─── Prompt Card (uniform portal card) ─── */
.prompt-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
  border: 1.5px solid #f3f4f6;
}
.prompt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(15,23,42,.12);
  border-color: var(--pink-light, #fdf2f8);
}
.prompt-card.is-locked {
  border-color: #e2e8f0;
}
.prompt-card .cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--pink-light, #fdf2f8);
  color: var(--pink, #be185d);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  align-self: flex-start;
}
.prompt-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #1e293b);
  line-height: 1.3;
}
.prompt-card p {
  font-size: 13px;
  color: var(--muted, #64748b);
  line-height: 1.55;
}
.prompt-card .card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.chatgpt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #10a37f;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.chatgpt-btn:hover { background: #0d8a6b; transform: scale(1.03); }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f3f4f6;
  color: var(--ink, #1e293b);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}
.copy-btn:hover { background: #e2e8f0; }
.copy-btn.copied { background: #dcfce7; color: #15803d; }

/* ─── OTP Login Panel (portal) ─── */
.otp-panel {
  background: #f9fafb;
  border-radius: 12px;
  padding: 20px;
  margin-top: 12px;
}
.otp-panel h4 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--ink, #1e293b);
}
.otp-input-row {
  display: flex;
  gap: 8px;
}
.otp-input-row input {
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast);
}
.otp-input-row input:focus { border-color: var(--pink, #be185d); }
.otp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.otp-divider::before,
.otp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ─── Buy Modal (uniform portal modal) ─── */
.modal-overlay-v53 {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.modal-box-v53 {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: slideUp .25s ease;
}
.modal-header-v53 {
  padding: 24px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.modal-body-v53 { padding: 20px 24px 28px; }
.modal-close-v53 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--muted, #64748b);
  transition: background var(--t-fast);
}
.modal-close-v53:hover { background: #e2e8f0; color: var(--ink, #1e293b); }

/* ─── Floating Buy Bar (portal) ─── */
.float-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy, #0f172a);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 90;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.float-bar.visible { transform: translateY(0); }
.float-bar .float-bar-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.float-bar .float-bar-price {
  color: var(--portal-cta-gold, #d97706);
  font-weight: 800;
}

/* ─── Portal Stats Bar ─── */
.portal-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.stat-chip {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 12px 18px;
  text-align: center;
  min-width: 80px;
}
.stat-chip .stat-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--portal-cta-gold, #d97706);
  line-height: 1;
  font-family: var(--serif, Georgia);
}
.stat-chip .stat-label {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin-top: 3px;
  font-weight: 600;
  letter-spacing: .05em;
}

/* ─── Admin Portal Manager Styles ─── */
.prompt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prompt-table th {
  background: #f3f4f6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: var(--ink, #1e293b);
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.prompt-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.prompt-table tr:hover td { background: #fafafa; }
.prompt-table .prompt-text-preview {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, #64748b);
}

/* ─── Referral & Wallet Tabs — buyer gate card ─── */
.buyer-gate-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  text-align: center;
  padding: 40px 20px;
}
.buyer-gate-tab .gate-emoji { font-size: 52px; margin-bottom: 18px; }
.buyer-gate-tab h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.buyer-gate-tab p  { font-size: 14px; color: var(--muted, #64748b); max-width: 380px; margin-bottom: 24px; }

/* ─── Responsive Utilities ─── */
@media (max-width: 768px) {
  .portal-crosslink { padding: 24px; }
  .portal-crosslink h2 { font-size: 20px; }
  .float-bar .float-bar-text { font-size: 13px; }
  .modal-box-v53 { border-radius: 16px 16px 0 0; max-height: 85vh; }
  .modal-overlay-v53 { align-items: flex-end; padding: 0; }
  .cat-sidebar { position: relative; top: auto; }
  .prompt-card .card-actions { flex-direction: column; }
  .chatgpt-btn, .copy-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .portal-stats { gap: 8px; }
  .stat-chip { min-width: 70px; padding: 10px 12px; }
  .stat-chip .stat-num { font-size: 22px; }
}

/* ─── Print styles (cheatsheet / invoice) ─── */
@media print {
  .float-bar, .portal-nav, .cat-sidebar, .modal-overlay-v53,
  #scrollDepthBar, .chatbot-panel { display: none !important; }
  .prompt-card { break-inside: avoid; }
}

/* ─── v5.3 End ─── */

/* ===== PORTAL PREVIEW (v5.7 — compact, premium re-theme) ===== */
.portal-preview-section{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 50% -10%,#241a4a 0%,#181430 45%,#0f172a 100%);
}
.portal-preview-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 15% 0%,rgba(190,24,93,.16),transparent 60%),
             radial-gradient(600px 300px at 85% 100%,rgba(251,191,36,.10),transparent 60%);
}
.portal-card-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:28px;max-width:980px;margin-left:auto;margin-right:auto;
}
@media(max-width:860px){.portal-card-grid{grid-template-columns:repeat(2,1fr)}}
.portal-card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:18px 16px;text-align:center;
  transition:transform .18s,border-color .18s,background .18s;
}
.portal-card:hover{transform:translateY(-3px);border-color:rgba(251,191,36,.35);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.portal-card-ic{
  width:44px;height:44px;margin:0 auto 10px;border-radius:12px;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(190,24,93,.35),rgba(99,102,241,.35));
}
.portal-card h3{color:#fff;font-size:14.5px;font-weight:800;margin-bottom:4px}
.portal-card p{color:rgba(255,255,255,.55);font-size:12.5px;line-height:1.55}

/* ===== FAQ presentation upgrade (v5.7) — category pills + tag badges ===== */
.faq-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:780px;margin:0 auto 22px}
.faq-cat-pill{background:#fff;border:1px solid var(--c-line);color:var(--c-muted);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:var(--r-full);cursor:pointer;transition:.15s}
.faq-cat-pill:hover{border-color:var(--c-pink);color:var(--c-pink)}
.faq-cat-pill.active{background:var(--grad-pink);border-color:transparent;color:#fff}
.faq-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--c-pink);background:var(--c-pink-bg);padding:2px 8px;border-radius:var(--r-full);margin-right:10px;vertical-align:middle}


/* ===== v6 FAQ PREMIUM REFRESH ===== */
.faq-premium{
  position:relative;
  background:
    radial-gradient(700px 260px at 10% 0%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(700px 260px at 90% 100%, rgba(190,24,93,.08), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #f7f3ff 100%);
}
.faq-premium::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.faq-premium .container{position:relative;z-index:1}
.faq-premium .section-head{max-width:760px;margin-left:auto;margin-right:auto}
.faq-search-wrap{
  max-width:620px;
  margin:18px auto 28px;
}
.faq-search-input{
  padding:16px 20px 16px 48px;
  border-radius:18px;
  border:1px solid rgba(99,102,241,.14);
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 40px rgba(15,23,42,.07);
}
.faq-search-input:focus{
  border-color:#8b5cf6;
  box-shadow:0 0 0 4px rgba(139,92,246,.10), 0 16px 42px rgba(15,23,42,.08);
}
.faq-cats{gap:10px;max-width:920px;margin:0 auto 24px}
.faq-cat-pill{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(99,102,241,.12);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  padding:9px 16px;
  font-size:12px;
  letter-spacing:.01em;
}
.faq-cat-pill:hover{
  transform:translateY(-1px);
  border-color:#8b5cf6;
}
.faq-cat-pill.active{
  background:linear-gradient(135deg,#6366f1,#db2777);
  color:#fff;
  box-shadow:0 14px 30px rgba(99,102,241,.22);
}
.faq-wrap{max-width:920px}
.faq-item{
  border:none;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:0 18px 44px rgba(15,23,42,.08);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.faq-item:hover{
  box-shadow:0 22px 52px rgba(15,23,42,.10);
  transform:translateY(-2px);
}
.faq-q{
  padding:20px 24px;
  font-size:15.5px;
  line-height:1.45;
  gap:16px;
}
.faq-ic{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(219,39,119,.08);
  color:#be185d;
  font-size:22px;
  margin-left:10px;
}
.faq-a{
  padding:0 24px 24px;
  color:#475569;
  font-size:14.5px;
  line-height:1.85;
}
.faq-tag{
  background:rgba(99,102,241,.09);
  color:#5b21b6;
  padding:4px 10px;
  font-size:10.5px;
  margin-right:12px;
}
@media (max-width: 640px){
  .faq-item{border-radius:18px}
  .faq-q{padding:18px 18px;font-size:15px}
  .faq-a{padding:0 18px 18px}
  .faq-search-input{padding:14px 16px 14px 42px;border-radius:16px}
}

/* Flash-offer popup animations */
@keyframes cmPopBounce {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#timedOffer { animation: cmPopIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes cmPopIn {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}