/* =========================================================
   ResearchWize Homepage (scoped)
   - Pixel-clean, responsive, app-parity styling
   - All selectors prefixed with .home-* (and rw-* for the reveal)
   ========================================================= */

/* --------- Theme tokens --------- */
:root{
  --home-bg-1:#0a0f1e;
  --home-bg-2:#141935;
  --home-text:#e8ecff;
  --home-soft:#b9c3ff;
  --home-accent:#7f5cff;      /* primary purple */
  --home-mint:#70ffe1;        /* accent mint   */
  --home-pink:#ff4fd8;        /* accent pink   */
  --home-ink:#1c2144;         /* dark text     */

  --card-bg:rgba(255,255,255,.06);
  --card-bd:rgba(255,255,255,.12);
  --hairline:rgba(255,255,255,.08);
  --shadow-lg:0 18px 50px rgba(20,40,80,.18);

  --pill-bd:#ccc;
  --pill-bg:#f7f7f7;
  --pill-tx:#333;
  --pill-hover:#eaeaea;
  --pill-active-grad:linear-gradient(135deg,#7aa6ff,#9b7cff);

  --chip-bd:#e7dff4;
  --chip-bg:#fff;
  --chip-tx:#334155;

  --price-bg:#fff;
  --price-tx:#20233f;

  --max-w:1200px;
}

/* --------- Global container + body --------- */
.home-body{
  background:linear-gradient(180deg,var(--home-bg-1),var(--home-bg-2));
  color:var(--home-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{ max-width:var(--max-w); margin:0 auto; padding:0 16px; }

/* --------- Navbar --------- */
.home-navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,15,30,.55);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline);
}
.home-nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:10px 16px; max-width:var(--max-w); margin:0 auto;
}
.home-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.home-logo span{ font-family:Poppins,system-ui,sans-serif; font-weight:800; font-size:1.2rem; color:#fff; }
.home-navmenu{ display:flex; gap:1rem; align-items:center; }
.home-navmenu a{
  color:var(--home-soft); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px;
}
.home-navmenu a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.home-link-install{
  color:#121530; background:linear-gradient(90deg,#9f50ff,#50fff9);
  padding:8px 14px; border-radius:999px; font-weight:800;
}
.home-burger{ display:none; background:transparent; border:0; width:40px; height:40px; border-radius:8px; position:relative; }
.home-burger span{
  position:absolute; left:8px; right:8px; height:3px; background:#fff; border-radius:2px; transition:.2s;
}
.home-burger span:nth-child(1){ top:12px;} .home-burger span:nth-child(2){ top:19px;} .home-burger span:nth-child(3){ top:26px;}

/* --------- Hero --------- */
.home-hero{ padding:80px 16px 40px; position:relative; overflow:hidden; }
.home-hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(60% 60% at 15% 10%, rgba(127,92,255,.5), transparent 60%);
  pointer-events:none;
}
.home-hero-grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:46px;
  max-width:var(--max-w); margin:0 auto; align-items:center;
}
.home-hero-title{
  font-family:Poppins,system-ui,sans-serif; font-weight:800;
  font-size:clamp(2rem,5vw,3.2rem); line-height:1.15; color:#fff;
}
.home-gradient{
  background:linear-gradient(90deg,#9f50ff,#50fff9,#ff8adf,#84ffd8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-hero-sub{ margin:.75rem 0 1.25rem; color:var(--home-soft); max-width:60ch; }
.home-store-ctas{ display:flex; gap:.75rem; flex-wrap:wrap; margin:12px 0 14px;}
.home-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:var(--home-ink); padding:10px 14px; border-radius:999px; font-weight:800; text-decoration:none;
}
.home-cta.primary{ background:linear-gradient(180deg,#fff,#f3f6ff); }
.home-cta.ghost{ background:transparent; border:2px solid var(--home-soft); color:var(--home-soft); }
.home-cta.block{ display:block; text-align:center; width:100%; }
.home-cta.alt{ background:linear-gradient(180deg,#ffe6f8,#fff); color:#6a1a58; }
.home-benefits{ list-style:none; padding:0; margin:12px 0 0; }
.home-benefits li{ padding-left:1.25rem; position:relative; margin:.35rem 0; color:#d8deff; }
.home-benefits li::before{ content:"✔"; position:absolute; left:0; color:var(--home-mint); }

.home-hero-visual{ align-self:stretch; }
.home-hero-mock{
  background:#0b0f22; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:12px; box-shadow:0 16px 60px rgba(0,0,0,.35);
}
.home-hero-mock video{ display:block; width:100%; border-radius:10px; }
.home-hero-mock figcaption{ color:#aeb6ff; font-size:.9rem; margin-top:.5rem; text-align:center; }

/* Featured pill */
/* ===== Chrome Web Store Featured pill ===== */
.home-featured-pill {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .9rem;
  margin:.75rem 0;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  color:#0e1433;

  background:
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,248,255,.92)) padding-box,
    linear-gradient(90deg,#7a6bff,#00d4ff) border-box;
  border:2px solid transparent;
  box-shadow:0 12px 26px rgba(14,16,40,.22), inset 0 2px 0 rgba(255,255,255,.65);
  transition:transform .15s ease, box-shadow .15s ease;
}
.home-featured-pill:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(14,16,40,.28), inset 0 2px 0 rgba(255,255,255,.7);
}
.home-featured-pill:active {
  transform:none;
  box-shadow:0 8px 18px rgba(14,16,40,.2), inset 0 1px 0 rgba(255,255,255,.6);
}

/* inner icon */
.home-featured-pill .home-cws-icon {
  width:20px; height:20px; flex:0 0 20px;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* badge */
.home-featured-pill .home-featured-label {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.1rem .45rem;
  background:linear-gradient(180deg,#e8ecff,#d0d8ff);
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  color:#1b2340;
  letter-spacing:.03em;
}


/* --------- Features --------- */
.home-features{ padding:48px 16px; }
.home-features h2{ text-align:center; font-family:Poppins,sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,2.2rem); }
.home-kicker{ text-align:center; color:var(--home-soft); margin:8px auto 24px; max-width:680px; }
.home-feature-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px; max-width:var(--max-w); margin:0 auto;
}
.home-card{
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:14px; padding:18px; box-shadow:0 8px 28px rgba(0,0,0,.22);
}
.home-card h3{ margin:8px 0 6px; font-size:1.05rem; }
.home-card p{ color:#d6dcff; font-size:.98rem; }
.home-card img{ filter:drop-shadow(0 0 8px rgba(159,80,255,.6)); }

/* --------- Summary Styles (Before → After Reveal) --------- */
.home-styles{
  padding:60px 16px;
  background:linear-gradient(180deg, rgba(127,92,255,.12), rgba(112,255,225,.06));
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.home-styles-head{ text-align:center; max-width:820px; margin:0 auto 18px; }

/* Reveal card */
.rw-compare{ max-width:1000px; margin:0 auto; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; padding:16px; }
.rw-compare-track{
  position:relative; isolation:isolate; height:360px; border-radius:12px; overflow:hidden; background:#0b0f22;
}
.rw-before,.rw-after{
  position:absolute; inset:0; padding:16px 18px 48px; overflow:auto;
}
.rw-before h4,.rw-after h4{ margin:0 0 10px; font-weight:800; color:#eaf0ff; }
.rw-before p{ color:#cfe2ff; }

/* Proper split (no overlaying) — default at 50/50 */
.rw-before{ clip-path:inset(0 50% 0 0); }
.rw-after { clip-path:inset(0 0 0 50%); }

#rw-slider{
  position:absolute; left:50%; transform:translateX(-50%); bottom:8px; margin:0; width:84%;
}

/* Controls */
.rw-controls{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.rw-controls button{
  border:2px solid var(--pill-bd); border-radius:24px; background:var(--pill-bg); color:var(--pill-tx);
  padding:8px 12px; font-weight:700; cursor:pointer;
}
.rw-controls button:hover{ background:var(--pill-hover); }
.rw-controls .is-active{ background:var(--pill-active-grad); color:#fff; border:none; box-shadow:0 8px 18px rgba(122,166,255,.25) }
.rw-length{ display:flex; gap:8px; }
.rw-pills{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.rw-keyterms{ display:inline-flex; align-items:center; gap:.5rem; color:#d7deff; font-weight:600; }

/* Key terms (chips + glossary) */
.rw-terms-wrap{ margin-top:12px }
.home-terms{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.home-term{
  background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--chip-tx);
  font-weight:700; font-size:12px; padding:6px 10px; border-radius:999px;
}
.home-glossary{
  display:grid; grid-template-columns:1fr 2.5fr; gap:10px 16px; margin-top:10px; padding:12px;
  border-radius:12px; background:#fff; border:1px solid #e0e0e0; color:#333;
}
.home-gloss-row{ display:contents; }
.home-gloss-row .g-term{ font-weight:800; color:#1f2a44; }
.home-gloss-row .g-def{ color:#334; line-height:1.5; }

/* --------- Pricing --------- */
.home-pricing{ padding:64px 16px; }
.home-price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:920px; margin:0 auto; }
.home-price-card{
  background:var(--price-bg); color:var(--price-tx);
  border-radius:16px; padding:24px 20px; box-shadow:var(--shadow-lg); border:1px solid rgba(0,0,0,.06);
}
.home-pro{ background:linear-gradient(180deg,#fff7fd,#ffffff); }
.home-price-card h3{ margin:4px 0 4px; font-size:1.2rem; }
.home-price{ font-size:1.9rem; margin:6px 0 10px; }
.home-price span{ font-size:.9rem; color:#667; margin-left:.25rem; }
.home-chip{ display:inline-block; background:#eef2ff; color:#334; padding:.25rem .6rem; border-radius:999px; font-weight:800; font-size:.8rem; margin:0 .35rem .35rem 0; }
.home-chip.hot{ background:#ffe6f6; color:#8a2b6f; }
.home-small{ color:#667; font-size:.92rem; margin-top:8px; }
.home-trial-note{ text-align:center; margin-top:16px; color:#bcd0ff; }

/* --------- SEO blurb --------- */
.home-seo{ padding:50px 16px; border-top:1px solid var(--hairline); }
.home-seo h2{ text-align:center; font-family:Poppins,sans-serif; font-weight:800; font-size:clamp(1.4rem,3.5vw,2rem); }
.home-seo-text{ max-width:880px; margin:8px auto 0; color:#cfe2ff; text-align:center; }
.home-seo-text a{ color:#84ffd8; text-decoration:none; }
.home-seo-text a:hover{ text-decoration:underline; }

/* --------- Responsive --------- */
@media (max-width:1100px){
  .home-feature-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:920px){
  .home-hero-grid{ grid-template-columns:1fr; }
  .home-hero-visual{ order:2; }
  .home-hero-copy{ order:1; }
  .home-price-grid{ grid-template-columns:1fr; }
  .home-navmenu{ display:none; }
  .home-burger{ display:inline-block; }
}
@media (max-width:640px){
  .home-feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:540px){
  .home-cta{ width:100%; justify-content:center; }
}

/* ===== Reveal card: never grow to article height ===== */
.rw-compare { 
  max-width: 1000px; 
  margin: 0 auto; 
  background: var(--card-bg); 
  border: 1px solid var(--card-bd); 
  border-radius: 16px; 
  padding: 12px; 
  overflow: hidden;              /* guard: parent never expands */
}

/* Base height on desktop/tablet */
.rw-compare-track{
  position: relative;
  isolation: isolate;
  height: 420px;                 /* taller base looks better */
  border-radius: 12px;
  overflow: hidden;              /* clamp children */
  background: #0b0f22;
}

/* Two panes are scrollable inside the fixed viewport */
.rw-before, .rw-after{
  position: absolute;
  inset: 0;
  padding: 14px 16px 56px;  /* bottom padding for the slider */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Let the panes scroll vertically, even when a swipe handler exists */
.rw-before, .rw-after {
  touch-action: pan-y;                 /* allow vertical scroll */
  -webkit-overflow-scrolling: touch;
}

/* Allow horizontal swipes on the track but not vertical capture */
.rw-compare-track {
  touch-action: pan-x;                 /* hint: horizontal drags allowed */
}

/* ===== Chrome Web Store "Featured" pill (hard override) ===== */
#featured-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:.55rem !important;
  padding:.55rem .9rem !important;
  margin:.75rem 0 !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-weight:800 !important;
  color:#0e1433 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,248,255,.92)) padding-box,
    linear-gradient(90deg,#7a6bff,#00d4ff) border-box !important;
  border:2px solid transparent !important;
  box-shadow:0 12px 26px rgba(14,16,40,.22), inset 0 2px 0 rgba(255,255,255,.65) !important;
}

/* inner bits */
#featured-pill .featured-icon{
  width:20px; height:20px; flex:0 0 20px;
  border-radius:50%; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
#featured-pill .featured-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.1rem .45rem; border-radius:999px;
  background:rgba(255,255,255,.86) !important;
  font-size:.7rem; color:#1b2340 !important;
}

/* nice feel on hover/tap */
#featured-pill:hover{ transform:translateY(-1px); box-shadow:0 16px 32px rgba(14,16,40,.28), inset 0 2px 0 rgba(255,255,255,.68) !important; }
#featured-pill:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(14,16,40,.22), inset 0 1px 0 rgba(255,255,255,.6) !important; }

/* ===== FIX: Chrome Web Store Featured pill (conflict-proof) ===== */

/* Pill container (keeps your gradient border + soft white fill) */
#featured-pill.home-featured-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:.55rem !important;
  padding:.55rem .9rem !important;
  margin:.75rem 0 !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-weight:800 !important;
  color:#0e1433 !important;

  /* white fill + cyan→indigo border gradient */
  background:
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,250,255,.94)) padding-box,
    linear-gradient(90deg,#7a6bff,#00d4ff) border-box !important;
  border:2px solid transparent !important;
  box-shadow:0 12px 26px rgba(14,16,40,.22), inset 0 2px 0 rgba(255,255,255,.65) !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
#featured-pill.home-featured-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(14,16,40,.28), inset 0 2px 0 rgba(255,255,255,.70) !important;
}
#featured-pill.home-featured-pill:active{
  transform:none;
  box-shadow:0 8px 18px rgba(14,16,40,.20), inset 0 1px 0 rgba(255,255,255,.60) !important;
}

/* Left circular icon */
#featured-pill.home-featured-pill .home-cws-icon{
  width:20px !important; height:20px !important; flex:0 0 20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* >>> The badge: make it visibly bluish (capsule inside the pill) */
#featured-pill.home-featured-pill .home-featured-label{
  display:inline-flex !important;
  align-items:center !important;
  padding:.1rem .45rem !important;
  border-radius:999px !important;
  font-size:.7rem !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;

  /* light blue capsule + subtle inner border so it pops */
  background:linear-gradient(180deg,#dfe7ff,#c8d4ff) !important;
  color:#1b2340 !important;
  box-shadow:inset 0 0 0 1px rgba(80,110,200,.18) !important;
}

/* ===== FINAL LOCK: Chrome Web Store Featured pill ===== */

/* Pill container (gradient border + soft white fill) */
#featured-pill.home-featured-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:.55rem !important;
  padding:.55rem .9rem !important;
  margin:.75rem 0 !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-weight:800 !important;
  color:#0e1433 !important;

  background:
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,250,255,.94)) padding-box,
    linear-gradient(90deg,#7a6bff,#00d4ff) border-box !important;
  border:2px solid transparent !important;
  box-shadow:0 12px 26px rgba(14,16,40,.22), inset 0 2px 0 rgba(255,255,255,.65) !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}

/* Left circular icon */
#featured-pill.home-featured-pill .home-cws-icon{
  width:20px !important; height:20px !important; flex:0 0 20px !important;
  border-radius:50% !important; background:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* >>> The “FEATURED” capsule (use the actual class from your HTML) */
#featured-pill.home-featured-pill .home-featured-label{
  display:inline-flex !important; align-items:center !important;
  padding:.20rem .60rem !important;             /* larger than before so it reads like a badge */
  border-radius:999px !important;
  font-size:.72rem !important; font-weight:800 !important; letter-spacing:.03em !important;

  /* bluish capsule + slight inner border so it pops */
  background:linear-gradient(180deg,#dbe5ff,#c6d3ff) !important;
  color:#1b2340 !important;
  box-shadow:
    inset 0 0 0 1px rgba(72,105,200,.22),
    0 1px 0 rgba(255,255,255,.45) !important;

  /* nuke any framework badge/label resets */
  border:none !important;
  text-transform:none !important;
  filter:none !important;
}

/* ===== Featured Pill (Chrome Web Store) ===== */
#featured-pill.featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  margin: 1rem 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  color: #0e1433;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,248,255,.92)) padding-box,
    linear-gradient(90deg, #7a6bff, #00d4ff) border-box;
  border: 2px solid transparent;
  box-shadow:
    0 12px 26px rgba(14, 16, 40, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#featured-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(14, 16, 40, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.75);
}

#featured-pill .pill-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

#featured-pill .pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: #1b2340;
  background: linear-gradient(180deg, #e8ecff, #d0d8ff);
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Remove bullets in Pricing lists */
.home-price-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-price-card ul li {
  margin: 0.35rem 0;       /* space between lines */
  padding-left: 0;         /* no indent */
  font-size: 0.95rem;
  color: #333;             /* adjust to your brand */
}


/* Mobile dropdown styles for the header */
@media (max-width: 920px){
  .home-navbar { position: sticky; top: 0; z-index: 1000; }

  .home-nav { position: relative; }

  .home-navmenu{
    display: none;                 /* hidden by default on mobile */
    position: absolute;
    top: 100%; left: 16px; right: 16px;
    background: rgba(15,20,50,.94);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 14px 36px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    flex-direction: column;
    gap: 8px;
  }
  .home-navbar.is-open .home-navmenu{
    display: flex !important;      /* show when header has is-open */
  }

  .home-navmenu a{
    color:#e8ecff; text-decoration:none; font-weight:700;
    padding:10px 12px; border-radius:8px;
  }
  .home-navmenu a:hover{ background: rgba(255,255,255,.08); }

  .home-burger{ cursor:pointer; z-index: 1001; } /* on top of dropdown */
}


/* Homepage header dropdown */
.home-navmenu .has-dropdown { position: relative; }
.home-navmenu .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: rgba(15,20,50,.96);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  list-style: none;
  z-index: 1000;
}
.home-navmenu .dropdown li a {
  display: block;
  padding: 8px 10px;
  color: #e8ecff;
  text-decoration: none;
  border-radius: 8px;
}
.home-navmenu .dropdown li a:hover { background: rgba(255,255,255,.08); }

/* Show on hover (desktop) */
@media (min-width: 921px){
  .home-navmenu .has-dropdown:hover > .dropdown { display: block; }
}

/* Shown by JS on mobile */
.home-navmenu .dropdown.active { display: block; }