/* PREMIUM VAULT — overrides layered on top of archive-vault.css
   Scope with .premium-page to keep it tidy. */

html.premium-dark, body.premium-dark,
.premium-page { background:#000 !important; }

/* Palette: lilac → brass (overrides the shared accent vars) */
.premium-page{
  --accent-start:#9F7AEA;   /* lilac */
  --accent-end:#EACB8F;     /* brass */
  --maxw:1200px;
  --card-bg:#0f0f13;
  --card-bd:#1d1d22;
  --card-bd-hover:#2a2a33;
  --copy:#cfcfd2;
  --wash: rgba(168,130,227,.12);
  --wash-hover: rgba(168,130,227,.18);
}

/* Hero: brass/lilac header + slim divider */
.premium-page .landing-header{
  background:linear-gradient(92deg,#CDAFE6 0%,#E9CDAF 52%,#F3C74B 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  letter-spacing:.02em;
}
.premium-page .landing-divider{
  height:2px; width:92%; max-width:880px; margin:8px auto 10px; border-radius:4px;
  background:linear-gradient(90deg,#9F7AEA 0%,#CDAFE6 35%,#EACB8F 72%,#F6C453 100%);
  box-shadow:none;
}

/* Cards: keep the AV feel; optional fixed lines for titles/descriptions */
.premium-page .card h3{
  line-height:1.3;
  min-height:calc(1.3em * 2);
  max-height:calc(1.3em * 2);
  overflow:hidden;
}
.premium-page .card .desc{
  line-height:1.65;
  min-height:calc(1.65em * 3);
  max-height:calc(1.65em * 3);
  overflow:hidden;
}

/* Buttons — reuse shared .btn but nudge primary toward premium gradient */
.premium-page .btn.primary{
  color:#111;
  background:linear-gradient(135deg, #6c49a7, #b8943d);
  border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.45),
             0 0 14px rgba(234,203,143,.30),
             0 0 18px rgba(159,122,234,.28);
}
.premium-page .btn.secondary{
  color:#f2f2f2;
  background:#17171b;
  border:1px solid var(--accent-start);
}
.premium-page .btn.secondary:hover{
  border-color:var(--accent-end);
  background:#1b1b20;
}

/* Pills: just inherit shared; border intensifies with our lilac */
.premium-page .pill:hover{ border-color:var(--accent-start); }

/* Price accent */
.premium-page .price{
  font-weight:900; color:#E8D7A3; letter-spacing:.2px; margin-bottom:10px;
}

/* FAQ (optional, if page uses it) */
.premium-page #faq .cards{ grid-template-columns:minmax(280px, 740px) !important; }
.premium-page #faq .card{ text-align:left; padding:24px 20px; }
.premium-page .faq-item{ border-top:1px solid #232329; }
.premium-page .faq-item:first-child{ border-top:0; }
.premium-page .faq-q{
  background:transparent;border:0;outline:none;width:100%;text-align:left;cursor:pointer;
  padding:14px 0;color:#f2f2f2;font-weight:900;font-size:clamp(1.0rem,2.2vw,1.08rem);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.premium-page .faq-q .caret{
  flex:0 0 auto;width:18px;height:18px;border:1px solid #2b2b33;border-radius:6px;
  display:grid;place-items:center;background:#141418;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.premium-page .faq-q .caret:before{ content:'+'; font-weight:900; line-height:1; transform:translateY(-1px); }
.premium-page .faq-item.open .faq-q .caret{ background:#1a1a21; border-color:#3a3a46; transform:rotate(45deg); }
.premium-page .faq-a{ overflow:hidden; max-height:0; transition:max-height .26s ease; }
.premium-page .faq-item.open .faq-a{ max-height:500px; }

/* Premium card layout — restores the old premium look */
.premium-page .cards{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
  justify-content:center;
}

/* Premium card visuals */
.premium-page .card{
  text-align:center;
  padding:22px 18px 18px;
  min-height:300px;
  border-radius:18px;
  background:
    radial-gradient(140% 120% at 100% 100%, var(--wash), transparent 58%),
    var(--card-bg);
  border:1px solid var(--card-bd);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.premium-page .card:hover{
  transform:translateY(-3px);
  border-color:var(--card-bd-hover);
  background: radial-gradient(150% 130% at 100% 100%, var(--wash-hover), transparent 60%), var(--card-bg);
}

/* Title/description: fixed lines, no underline bar */
.premium-page .card h3{
  margin:4px auto 8px;
  font-weight:800;
  font-size:clamp(1.02rem,2.3vw,1.18rem);
  line-height:1.3;
  max-width:26ch;
  min-height:calc(1.3em * 2);
  max-height:calc(1.3em * 2);
  overflow:hidden;
}
.premium-page .card h3::after{ content:none !important; } /* kill archive underline */

.premium-page .card .desc{
  margin:0 auto 12px;
  color:var(--copy);
  font-size:1rem;
  line-height:1.65;
  max-width:42ch;
  min-height:calc(1.65em * 3);
  max-height:calc(1.65em * 3);
  overflow:hidden;
}
@supports (mask-image: linear-gradient(#000,#000)) {
  .premium-page .card .desc{
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 82%, rgba(0,0,0,0) 100%);
  }
}

/* Buttons: premium gradient + secondary outline */
.premium-page .btn.primary{
  color:#111;
  background:linear-gradient(135deg,#6c49a7,#b8943d);
  border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.45),
             0 0 14px rgba(234,203,143,.30),
             0 0 18px rgba(159,122,234,.28);
}
.premium-page .btn.secondary{
  background:#17171b;
  border:1px solid var(--accent-start);
  color:#f2f2f2;
}
.premium-page .btn.secondary:hover{
  border-color:var(--accent-end);
  background:#1b1b20;
}

/* FAQ base */
.faq-item{ border-top:1px solid #232329; }
.faq-item:first-child{ border-top:0; }
.faq-q{
  -webkit-appearance:none;appearance:none;background:transparent;border:0;outline:none;
  width:100%; text-align:left; cursor:pointer;
  padding:14px 0; color:#f2f2f2; font-weight:900; font-size:clamp(1.0rem,2.2vw,1.08rem);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq-q:focus-visible{ outline:2px solid #8F7BE0; outline-offset:4px; border-radius:6px; }
.faq-q.no-focus-ring:focus{ outline:none !important; }
.faq-q .caret{
  flex:0 0 auto; width:18px; height:18px; border:1px solid #2b2b33; border-radius:6px;
  display:grid; place-items:center; transition: transform .18s ease, background .18s ease, border-color .18s ease;
  background:#141418;
}
.faq-q .caret:before{ content:'+'; font-weight:900; line-height:1; transform: translateY(-1px); }
.faq-item.open .faq-q .caret{ background:#1a1a21; border-color:#3a3a46; transform: rotate(45deg); }

.faq-a{
  overflow:hidden;
  max-height:0;                      /* JS animates this to scrollHeight */
  transition:max-height .26s ease;   /* smooth open/close */
}