/* package.css — page-specific styling for the ces_package archive (/packages/).
 * Layers on global.css + inner.css (which hold the shared hero, breadcrumb, and
 * final-CTA band). Holds only what this template introduces: the pricing-card
 * grid and its emphasized "popular" tier. Reuses the warm-section, .btn, and
 * .eyebrow systems from global.css. */

/* ── Pricing-card grid ────────────────────────────────────────────────── */
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch;
  max-width:1120px; margin:0 auto;}

.pkg{position:relative; display:flex; flex-direction:column; background:var(--parch-raised);
  border:1px solid var(--parch-border); border-radius:20px; padding:34px 30px 32px;
  box-shadow:0 18px 44px -30px rgba(40,28,14,.45); transition:transform .18s, box-shadow .18s, border-color .18s;}
.pkg:hover{transform:translateY(-6px); box-shadow:0 26px 52px -26px rgba(58,39,22,.5); border-color:var(--gold-base);}

/* Emphasized / popular tier */
.pkg--popular{border-color:var(--gold-base); border-width:2px;
  box-shadow:0 28px 60px -26px rgba(176,133,46,.55);
  background:linear-gradient(180deg,var(--gold-50),var(--parch-raised) 64%);}
.pkg--popular:hover{transform:translateY(-8px);}

.pkg-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold-base); color:#3A2A0C; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(176,133,46,.7); white-space:nowrap;}

/* ── Card header ──────────────────────────────────────────────────────── */
.pkg-head{margin-bottom:18px;}
.pkg-tier{font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-hover); margin:0 0 8px;}
.pkg-name{font-size:23px; line-height:1.2; margin:0;}
.pkg-tagline{margin:8px 0 0; font-size:14px; color:var(--text-muted); line-height:1.5;}

/* ── Price block ──────────────────────────────────────────────────────── */
.pkg-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  padding:16px 0 18px; margin-bottom:18px; border-bottom:1px solid var(--parch-border);}
.pkg-price-from{font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em;}
.pkg-price-amt{font-family:"DM Serif Display",Georgia,serif; font-size:38px; font-weight:700;
  line-height:1; color:var(--green-base);}
.pkg-price-amt--quote{font-size:28px; color:var(--gold-hover);}
.pkg-price-note{flex-basis:100%; font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-top:2px;}

/* ── Summary + includes checklist ─────────────────────────────────────── */
.pkg-summary{margin:0 0 18px; font-size:15px; line-height:1.6; color:var(--text-base);}
.pkg-includes{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px;}
.pkg-includes li{position:relative; padding-left:30px; font-size:14.5px; color:var(--text-base); line-height:1.45;}
.pkg-includes li::before{content:"\2713"; position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:50%; background:var(--green-base); color:#fff;
  font-size:12px; font-weight:700; display:grid; place-items:center;}

/* ── Card CTA ─────────────────────────────────────────────────────────── */
.pkg-cta{margin-top:auto;}
.pkg-cta .btn{width:100%; justify-content:center;}
/* Non-popular cards sit on a light section, so recolor the ghost button for
 * contrast (global .btn-ghost is tuned for dark sections). */
.pkg .btn-ghost{color:var(--green-base); border-color:var(--parch-border); background:#fff;}
.pkg .btn-ghost:hover{border-color:var(--gold-base); color:var(--gold-hover);}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:920px){
  .pkg-grid{grid-template-columns:1fr; max-width:480px;}
  .pkg--popular{order:-1;}
}