.bg-primary{background:var(--primary)} .text-primary{color:var(--primary)}
    .bg-dark{background:var(--dark)} .text-dark{color:var(--dark)}
    .bg-accent{background:var(--accent)} .text-accent{color:var(--accent)}
    .bg-secondary{background:var(--secondary)} .text-secondary{color:var(--secondary)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:.6rem;font-weight:600}
    .btn-primary{background:var(--primary);color:#fff} 
    .btn-primary:hover{filter:brightness(.95);color: #fff;}
    .btn-accent{background:var(--accent);color:#fff} 
    .btn-accent:hover{filter:brightness(.95);color: #fff;}
    .btn-ghost{border:1px solid #e2e8f0;color:var(--ink)} 
    .btn-ghost:hover{background:#f8fafc}
    .trust-star{width:16px;height:16px;color:var(--accent)}
    .trust-star--partial{position:relative;width:16px;height:16px}
    .trust-star--partial svg:first-child{position:absolute;inset:0;color:#d1d5db} /* gray base */
    .trust-star--partial svg:last-child{position:absolute;inset:0;color:var(--accent);clip-path:inset(0 40% 0 0)} /* 60% fill for 4.6/5 */
    .badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:9999px;padding:.25rem .55rem;font-size:.72rem;font-weight:600}
    .badge-slate{background:#f1f5f9;color:#334155}
    .badge-orange{background:#ffedd5;color:#c2410c}
    .badge-green{background:#ecfccb;color:#3f6212}
    .card{background:#fff;border:1px solid #e5e7eb;border-radius:.9rem;padding:1rem}
    .tabs button{border-bottom:2px solid transparent;padding:.75rem 1rem;font-weight:600;color:#e2e8f0}
    .tabs button[aria-selected="true"]{color:#fff;border-color:var(--accent)}
    .nav-shadow{box-shadow:0 8px 20px rgba(2, 6, 23, .06)}
    .hero-shadow{box-shadow:0 30px 60px -20px rgba(2, 6, 23, .12)}
    /* Lite accordion container (smooth open/close) */
    #lite-roadmap-accordion{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
    #lite-roadmap-accordion.open{grid-template-rows:1fr}
    #lite-roadmap-accordion>div{overflow:hidden}

    /* ===== FIX 1: Premium Hover for Elite Cards ===== */
    /* Base card on the dark section */
    .elite-card{
      position:relative;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      padding:16px;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      will-change: transform, box-shadow, border-color;
    }
    /* Subtle sheen layer that appears on hover */
    .elite-card::before{
      content:"";
      position:absolute; inset:0;
      border-radius:inherit;
      background:radial-gradient(120% 120% at 10% -10%, rgba(255,255,255,.14), transparent 40%),
                 radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.06), transparent 45%);
      opacity:0; pointer-events:none; transition:opacity .18s ease;
    }
    /* Hover/Focus premium effect */
    .elite-card:hover,
    .elite-card:focus-within{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.35);
      box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    .elite-card:hover::before,
    .elite-card:focus-within::before{ opacity:1; }
    /* Accent “glow” on hover */
    .elite-card:hover{ outline:2px solid var(--accent); outline-offset:0; }
    /* Motion‑safe */
    @media (prefers-reduced-motion: reduce){
      .elite-card, .elite-card::before{ transition:none; }
    }

    /* ===== FIX 2: Unified Pill System ===== */
    .pill{
      display:inline-flex; align-items:center; white-space:nowrap;
      padding:.25rem .6rem; border-radius:9999px; font-size:.75rem; font-weight:700; line-height:1;
    }
    .pill--uc{  /* Under consideration */
      background:#1f2937; color:#e5e7eb;  /* slate-800 / slate-200 on dark */
      border:1px solid rgba(255,255,255,.08);
    }
    .pill--dev{ /* In development – same as legend */
      background:#e0f2fe; color:#075985;  /* sky-100 / sky-800 */
      border:1px solid #bae6fd;           /* sky-200 */
    }

    /* 19 aug */
    .roadmap-banner h1 {
      color: #1e293b;
    }

    #lite-roadmap h2,
    #lite-roadmap h3 {
      color:#1e293b;
    }

    #lite-roadmap p.text-\[15px\].mt-1.text-slate-600 {
      line-height: 22.5px;
    }

    #lite-roadmap span.badge.badge-green {
      line-height: 17.28px;
    }

    #lite-roadmap #toggle-roadmap:hover {
      text-decoration: underline !important;
    }

    #elite-backlog p.text-\[15px\].mt-2.text-slate-300 {
      line-height: 22.5px;
    }

    #elite-backlog .vote-req:hover {
      text-decoration: underline !important;
      color: #ff5722 !important;
    }

    #elite-backlog .rounded-md,
    #elite-backlog #elite-search,
    #elite-backlog .span-text,
    #elite-backlog header .tab-header { 
      line-height: 22.5px;
    }

    #unlock-elite-and-pricing header p,
    #unlock-elite-and-pricing aside .span-item {
      line-height: 22.5px;
    }

    .page-template-roadmap #unlock-elite-and-pricing li.flex.gap-2 svg {
      flex: 0 0 20px;
    }

    .pricing-section article a,
    .roadmap-faq summary {
      line-height: 22.5px;
    }

    .roadmap-faq h3,
    .roadmap-faq summary {
      color: #1e293b !important;
    }

    .roadmap-faq summary svg {
      flex: 0 0 9px;
      transition: .3s ease;
    }

    .roadmap-faq summary p {
      line-height: 22.5px;
    }

    .roadmap-faq details[open] summary svg {
      transform: rotate(90deg);
  }

  #lite-full-list .dropdown {
    line-height: 22.5px;
    color: #1e293b;
  }

  @media (max-width: 991px) {
    .roadmap-banner h1 {
      font-size: 36px !important;
    }

    #lite-roadmap #lite-cards,
    #elite-backlog #elite-cards {
      grid-template-columns: 1fr !important;
    }
  }


  @media (max-width: 767px) {
  .roadmap-faq summary svg {
    position: relative;
    top: 2px;
    flex: 0 0 9px;
  }
}