/* =========================
   Plans (page specific)
   ========================= */

.section.plans{
  position:relative;
  overflow:hidden;
}

.section.plans::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--accent-2), color-mix(in oklab, var(--accent) 70%, transparent) 60%, transparent);
  opacity:.85;
}

/* ---------- Tabs ---------- */
.plan-tabs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:.6rem 0 1rem;
}

.plan-tabs .tab{
  appearance:none; border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  color: var(--text);
  font-weight:700; font-size:.95rem;
  padding:.5rem .9rem; border-radius:999px; cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.plan-tabs .tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  background: color-mix(in oklab, var(--bg) 97%, transparent);
}
.plan-tabs .tab.is-active{
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent-2) 65%, var(--bg)), color-mix(in oklab, var(--accent) 20%, var(--bg)));
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* hide via [hidden] for a11y */
.tab-panel[hidden]{ display:none !important; }
.tab-panel{ animation: tabFade .28s var(--ease); }
@keyframes tabFade{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none;} }

/* ---------- Grid ---------- */
.plans-grid{
  display:grid; gap:14px;
  grid-template-columns: 1fr;
}
@media (min-width:780px){
  .plans-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1100px){
  .plans-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---------- Plan Card ---------- */
.card.plan{
  display:flex; flex-direction:column; gap:.6rem;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  padding:14px; border-radius:14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card.plan:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border-color: color-mix(in oklab, var(--accent) 22%, var(--line));
}

.card.plan.highlight{
  position:relative;
  border-width:2px;
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, transparent), transparent 45%),
    color-mix(in oklab, var(--bg) 95%, transparent);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
}

.plan-head{ display:flex; flex-direction:column; gap:.1rem; }
.plan-title{ margin:.15rem 0 0; font-size:1.15rem; line-height:1.25; }
.plan-head .sub{ margin:0; color:var(--muted); font-size:.9rem; }

.plan-desc{ margin:.2rem 0 0; color:var(--text); }

.plan-features{
  margin:.3rem 0 .2rem; padding-left:1.1rem; display:grid; gap:.32rem;
}
.plan-features li{
  list-style:"✦  ";
  color: var(--text);
}

/* Pills */
.pill{
  align-self:flex-start;
  display:inline-block;
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:999px;
  color:#111; /* light default */
  background: linear-gradient(90deg, var(--accent-2), color-mix(in oklab, var(--accent) 45%, var(--accent-2)));
  border:1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.pill.free{
  background: linear-gradient(90deg, #d9f99d, #a7f3d0);
  border-color: color-mix(in oklab, #10b981 40%, var(--line));
}
.pill.new{
  background: linear-gradient(90deg, #fde68a, #fca5a5);
  border-color: color-mix(in oklab, #f59e0b 45%, var(--line));
}
.pill.best{
  background: linear-gradient(90deg, var(--accent-2), color-mix(in oklab, var(--accent) 40%, var(--accent-2)));
}
.pill.pro{
  background: linear-gradient(90deg, #c7d2fe, #93c5fd);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
}

/* Price & actions */
.plan-bottom{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap;
  padding-top:.4rem; border-top:1px dashed var(--line);
}
.plan-bottom .price{
  font-weight:800;
}

/* CTA row below grid */
.plans-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:1.1rem 0 .1rem;
}

/* Note card */
.note.card{
  margin-top:.9rem;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  border:1px dashed var(--line);
}

/* ---------- Dark adjustments ---------- */
body.dark .plan-tabs .tab{
  background: rgba(255,255,255,.06);
}
body.dark .plan-tabs .tab:hover{
  background: rgba(255,255,255,.10);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
body.dark .plan-tabs .tab.is-active{
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent-2) 55%, transparent), color-mix(in oklab, var(--accent) 35%, transparent));
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  color: #fff;
}

body.dark .card.plan{
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
body.dark .card.plan.highlight{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, transparent), transparent 45%),
    color-mix(in oklab, var(--bg) 88%, transparent);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
}

body.dark .pill{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
body.dark .note.card{
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-color: rgba(255,255,255,.16);
}

/* ---------- Small tweaks ---------- */
.plan-features li strong{ font-weight:800; }
.plan-title + .sub{ opacity:.9; }