/* ============================================================
   POONJEE — pricing.css
   Loads AFTER style.css. Uses the same tokens throughout.
   ============================================================ */

.plans{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;max-width:960px;margin:0 auto}

.plan{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--rad);
  padding:38px 34px 34px;
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.plan::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.5;transition:opacity .3s;
}
.plan:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.plan:hover::before{opacity:1}

/* featured */
.plan.featured{border-color:rgba(232,180,52,.35);background:rgba(232,180,52,.04)}
.plan.featured::before{background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:1}

.plan-badge{
  position:absolute;top:0;right:26px;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:#0B1220;
  padding:6px 14px;border-radius:0 0 8px 8px;font-weight:600;
}

.plan-name{
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin:0 0 6px;
}
.plan.featured .plan-name{color:var(--gold)}

.plan h3{font-family:var(--font-d);font-size:1.42rem;color:var(--ink);margin:0 0 6px;line-height:1.3}
.plan .tag{color:var(--mut);font-size:.94rem;margin:0 0 26px}

.price{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.price .amt{font-family:var(--font-m);font-size:2.9rem;font-weight:600;color:var(--ink);line-height:1}
.plan.featured .price .amt{color:var(--gold)}
.price .per{color:var(--mut);font-size:.9rem}
.price-note{font-family:var(--font-m);font-size:.76rem;color:var(--mut);margin:0 0 28px;letter-spacing:.04em}

.plan-meta{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.plan-meta span{
  font-family:var(--font-m);font-size:.72rem;letter-spacing:.06em;
  border:1px solid var(--line-soft);border-radius:999px;
  padding:6px 13px;color:var(--mut);
}
.plan.featured .plan-meta span{border-color:rgba(232,180,52,.22)}

.plan ul{list-style:none;padding:0;margin:0 0 30px;flex:1}
.plan li{
  color:var(--mut);font-size:.95rem;line-height:1.6;
  padding-left:30px;margin-bottom:13px;position:relative;
}
.plan li svg{
  position:absolute;left:0;top:4px;width:17px;height:17px;
  stroke:var(--green);fill:none;stroke-width:2.4;
}
.plan.featured li svg{stroke:var(--gold)}
.plan li b{color:var(--ink);font-weight:600}
.plan li.muted{color:var(--mut);opacity:.55}
.plan li.muted svg{stroke:var(--mut);opacity:.6}

.plan .btn{width:100%;justify-content:center;text-align:center}
.plan-foot{
  font-family:var(--font-m);font-size:.73rem;color:var(--mut);
  text-align:center;margin:14px 0 0;letter-spacing:.03em;
}

/* comparison table */
.cmp{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--rad);max-width:860px;margin:0 auto}
.cmp table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px;background:var(--panel)}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
.cmp thead th{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);background:rgba(5,10,22,.55);font-weight:500;
}
.cmp td{color:var(--mut)}
.cmp td:first-child{color:var(--ink);font-weight:500}
.cmp td.yes{color:var(--green);font-family:var(--font-m)}
.cmp td.no{color:var(--mut);opacity:.5;font-family:var(--font-m)}
.cmp tbody tr:last-child td{border-bottom:none}

/* honest note */
.honest{
  max-width:760px;margin:0 auto;
  border:1px solid var(--line-soft);border-left:2px solid var(--gold);
  border-radius:var(--rad);padding:28px 32px;background:var(--panel);
}
.honest h3{font-family:var(--font-d);font-size:1.1rem;color:var(--ink);margin:0 0 12px}
.honest p{color:var(--mut);font-size:.96rem;margin:0 0 12px}
.honest p:last-child{margin-bottom:0}

@media (max-width:860px){
  .plans{grid-template-columns:1fr;max-width:520px}
  .plan{padding:32px 26px 28px}
  .price .amt{font-size:2.5rem}
}