/* ===========================================================
   Shared plan card (pcard) — used on plans index, homepage
   featured, and "also worth seeing". Single source of truth.
   =========================================================== */
.pcard{
  position:relative; background:var(--ward-cloud); border-radius:16px; overflow:hidden;
  border:1px solid rgba(var(--ward-emerald-rgb),.08);
  transition:transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.pcard:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -28px rgba(var(--ward-emerald-rgb),.34); }
.pcard__link{ display:block; color:inherit; text-decoration:none; }
.pcard__media{ position:relative; margin:0; aspect-ratio:4/3; background:rgba(var(--ward-sage-rgb),.20); overflow:hidden; }
.pcard__img{ width:100%; height:100%; object-fit:cover; transition:transform 800ms var(--ease-out); will-change:transform; }
.pcard:hover .pcard__img{ transform:scale(1.06); }
.pcard__price{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:var(--fs-18); color:var(--ward-cloud);
  background:rgba(var(--ward-emerald-rgb),.86); backdrop-filter:blur(6px);
  padding:7px 14px; border-radius:999px; letter-spacing:-.01em;
}
.pcard__price sup{ font-size:.6em; top:-.5em; }
.pcard__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(var(--ward-emerald-rgb),.28),transparent 42%); pointer-events:none; }
.pcard__body{ padding:var(--space-24); display:flex; flex-direction:column; gap:var(--space-16); }
.pcard__name{ font-family:'Montserrat',sans-serif; font-size:var(--fs-24); font-weight:600; color:var(--ward-emerald); letter-spacing:-.01em; }
.pcard__tag{ font-family:'Open Sans',sans-serif; font-size:var(--fs-14); line-height:1.5; color:var(--ward-pebble); margin:-6px 0 0; }
.pcard__specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-8);
  margin:0; padding:var(--space-16) 0;
  border-block:1px solid rgba(var(--ward-emerald-rgb),.10);
}
.pcard__specs > div, .pcard__spec{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
}
.pcard__spec-ic{ display:block; line-height:0; }
.pcard__spec-ic .spec-ic,
.pcard__spec-ic .spec-ic--ward{ width:36px; height:auto; transition:transform 200ms var(--ease-out); }
.pcard:hover .pcard__spec-ic .spec-ic{ transform:translateY(-2px) scale(1.06); }
.pcard__specs dt{ font:600 10px/1.2 'Open Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ward-pebble,#555); margin:0; }
.pcard__specs dd{ font:600 var(--fs-14)/1.1 'Montserrat',sans-serif; color:var(--ward-emerald); margin:0; }
.pcard__cta{ font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ward-emerald); position:relative; align-self:flex-start; padding-bottom:4px; }
.pcard__cta::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--ward-citrus); transform:scaleX(.4); transform-origin:left; transition:transform 300ms var(--ease-out); }
.pcard:hover .pcard__cta::after{ transform:scaleX(1); }
/* Compare button — only rendered on the plans index page */
.pcard__compare{
  position:absolute; top:12px; right:12px; z-index:3; cursor:pointer;
  font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.02em;
  border:0; border-radius:999px; padding:8px 14px;
  background:rgba(255,255,255,.92); color:var(--ward-emerald); backdrop-filter:blur(6px);
  box-shadow:0 4px 14px -4px rgba(var(--ward-emerald-rgb),.4);
  transition:all 300ms var(--ease-out);
}
.pcard__compare:hover{ background:#fff; transform:translateY(-1px); }
.pcard__compare-on{ display:none; }
.pcard.is-comparing .pcard__compare{ background:var(--ward-emerald); color:var(--ward-cloud); }
.pcard.is-comparing .pcard__compare-add{ display:none; }
.pcard.is-comparing .pcard__compare-on{ display:inline; }
.pcard.is-comparing{ box-shadow:0 0 0 2px var(--ward-citrus), 0 30px 60px -28px rgba(var(--ward-emerald-rgb),.34); }
@media (max-width:600px){
  .pcard__spec-ic .spec-ic,
  .pcard__spec-ic .spec-ic--ward{ width:30px; height:auto; }
  .pcard__specs dd{ font-size:13px; }
}