/* ==========================================================================
   premium.css — /premium only. Pricing cards, feature grid, FAQ accordion.
   Shares tokens, .btn, .card, section shell and footer with base.css.
   ========================================================================== */

/* ---------- hero ---------- */
#premium-hero{
  padding-top:150px;
  position:relative;
}
#premium-hero::before{
  content:'';
  position:absolute; top:-10%; right:-10%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,34,63,.16), transparent 70%);
  pointer-events:none; z-index:-1;
}
.prem-hero-head{ max-width:56ch; }
.kicker svg{ vertical-align:-1px; margin-right:6px; }
.prem-h1{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  font-weight:300;
  line-height:1.08;
}
.prem-h1 em{ font-style:italic; font-weight:400; color:var(--red-soft); }
.prem-sub{ max-width:56ch; font-size:16px; }
.prem-hero-actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- plan cards ---------- */
.plan-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  align-items:stretch;
}
@media (max-width:780px){ .plan-grid{ grid-template-columns:1fr; } }

.plan-card{
  padding:38px; display:flex; flex-direction:column;
  position:relative;
}
.plan-card.is-featured{
  border-color:rgba(255,34,63,.45);
  background:linear-gradient(160deg, rgba(255,34,63,.08), var(--panel) 55%);
  box-shadow:var(--shadow-lift);
}
.plan-ribbon{
  position:absolute; top:-13px; left:38px;
  background:var(--red); color:#0a0303;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:5px 14px; border-radius:100px;
}
.plan-card-head h3{
  font-family:'Fraunces',serif; font-weight:400; font-size:1.6rem; color:var(--ink);
}
.plan-card-head p{ margin-top:6px; color:var(--dim); font-size:.9rem; }

.plan-price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:26px 0 28px;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}
.plan-price .amount{ font-family:'Fraunces',serif; font-weight:400; font-size:2.6rem; color:var(--ink); }
.plan-price .period{ color:var(--dim); font-size:.85rem; max-width:22ch; line-height:1.4; }

.plan-features{ list-style:none; display:flex; flex-direction:column; gap:14px; flex:1; margin-bottom:32px; }
.plan-features li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.9rem; line-height:1.55; color:var(--body);
}
.plan-features li svg{
  width:16px; height:16px; flex:none; margin-top:2px;
  color:var(--red-soft);
}
.plan-card:not(.is-featured) .plan-features li svg{ color:var(--dim); }

.plan-cta{ justify-content:center; width:100%; }
.plan-card:not(.is-featured) .plan-cta{ pointer-events:none; opacity:.6; }

/* ---------- feature stack (scroll-in-from-right, overlapping cards) ---------- */
.highlight-stack{
  display:flex; flex-direction:column; gap:22px;
  max-width:760px;
}
.stack-card{
  border-radius:16px; border:1px solid var(--line); background:var(--panel);
  padding:30px 34px;
  /* base transform for the "settled" state — each card sits slightly offset
     from the one above it so the stack reads as layered, not just a list */
  transform:translateX(0);
}
.highlight-stack .stack-card:nth-child(1){ margin-right:0; }
.highlight-stack .stack-card:nth-child(2){ margin-right:16px; }
.highlight-stack .stack-card:nth-child(3){ margin-right:32px; }
.highlight-stack .stack-card:nth-child(4){ margin-right:48px; }
.highlight-stack .stack-card:nth-child(5){ margin-right:32px; }
.highlight-stack .stack-card:nth-child(6){ margin-right:16px; }
.highlight-stack .stack-card:nth-child(7){ margin-right:0; }

/* entry state: off to the right and faded, before it scrolls into view.
   JS toggles .in-view, which animates it to its resting transform above. */
.stack-card.reveal{
  opacity:0;
  transform:translateX(72px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.stack-card.reveal.in{ opacity:1; transform:translateX(0); }

.stack-card:hover{ border-color:rgba(255,34,63,.4); background:var(--panel-soft); }

.highlight-num{
  font-family:'Fraunces',serif; font-style:italic; color:var(--red-soft);
  font-size:.85rem; display:block; margin-bottom:14px;
}
.highlight h3{
  font-family:'Fraunces',serif; font-weight:400; font-size:1.15rem; color:var(--ink);
  margin-bottom:10px;
}
.highlight p{ font-size:.9rem; line-height:1.65; color:var(--dim); max-width:56ch; }
.highlight p a{ color:var(--red-soft); border-bottom:1px solid rgba(255,84,104,.35); transition:color .2s ease; }
.highlight p a:hover{ color:var(--ink); }
.highlight p code{
  font-family:monospace; font-size:.85em;
  background:var(--line-soft); color:var(--red-soft);
  padding:.1rem .4rem; border-radius:4px;
}

@media (max-width:700px){
  .highlight-stack .stack-card{ margin-right:0 !important; }
  .stack-card{ padding:26px; }
}

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; }
.faq-item{ background:var(--panel); padding:6px 26px; }
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:18px 0; font-size:15px; color:var(--ink); font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-family:'Fraunces',serif; font-size:20px; color:var(--dim); flex:none;
  transition:transform .3s ease, color .3s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); color:var(--red-soft); }
.faq-item p{ padding:0 0 20px; color:var(--dim); font-size:.9rem; line-height:1.7; max-width:64ch; }
.faq-item p a{ color:var(--red-soft); }

@media (max-width:640px){
  .plan-card{ padding:28px; }
  .plan-price .amount{ font-size:2.1rem; }
}