/* =========================================================
   PER DESIGN PRICING — page-specific styles
   Loaded AFTER social-media-v2.css, reusing its form, hero,
   FAQ, glance and WhatsApp components. Only the per-design
   service cards and a couple of small bits are new.

   Used by: Per_Design_Pricing.php
   ========================================================= */

/* =========================
   HOW IT WORKS — numbered step badges
   Reuses .create-card; only the badge changes.
========================= */
.how-grid { grid-template-columns:repeat(4,1fr); }
.step-badge {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem;
  background:linear-gradient(135deg, #0098ff, #073E81); color:#fff;
}
.create-card:hover .step-badge { transform:scale(1.08) rotate(-4deg); }

/* =========================
   PER-DESIGN SERVICE CARDS
========================= */
.pd-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  max-width:1160px; margin:0 auto; align-items:stretch;
}
.pd-grid-2    { grid-template-columns:repeat(2,1fr); max-width:820px; }
.pd-grid-wide { grid-template-columns:1fr; max-width:560px; }

.pd-card {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(7,62,129,.12);
  border-radius:24px; padding:34px 30px;
  transition:transform .4s var(--ease-premium, ease), box-shadow .4s ease, border-color .3s ease;
}
.pd-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(0,152,255,.14);
  border-color:rgba(0,152,255,.4);
}

.pd-card-top { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid rgba(0,0,0,.08); }
.pd-name {
  display:block; font-family:'Manrope',sans-serif; font-weight:800;
  font-size:1.08rem; letter-spacing:-.02em; color:#22293a; line-height:1.3;
  margin-bottom:14px; min-height:2.6em;
}
.pd-price {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:2.1rem;
  letter-spacing:-.03em; line-height:1; color:var(--primary, #134882);
}
.pd-price span { font-size:.9rem; font-weight:600; color:#888; letter-spacing:0; }
.pd-price-custom { font-size:1.5rem; }
.pd-gst { font-size:.82rem; color:#999; margin-top:8px; }

.pd-formats {
  font-size:.86rem; color:#666; line-height:1.6;
  padding:12px 14px; margin-bottom:20px;
  background:var(--bg-soft, #F7F8FA); border-radius:12px;
}

.pd-includes {
  list-style:none; padding:0; margin:0 0 22px;
  display:flex; flex-direction:column; gap:11px; flex-grow:1;
}
.pd-includes li {
  font-size:.92rem; color:#444; line-height:1.5;
  padding-left:25px; position:relative;
}
.pd-includes li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--primary, #134882); font-weight:700; font-size:.82rem;
}

.pd-delivery {
  font-size:.82rem; font-weight:600; color:var(--primary, #134882);
  background:rgba(19,72,130,.06); border-radius:10px;
  padding:9px 12px; margin-bottom:20px; text-align:center;
}

.pd-btn {
  display:block; text-align:center; margin-top:auto;
  padding:13px 20px; border-radius:12px;
  font-size:.92rem; font-weight:700;
  background:var(--primary, #134882); color:#fff;
  transition:transform .45s var(--ease-premium, ease), box-shadow .45s ease, background .3s ease;
}
.pd-btn:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(19,72,130,.26); }

/* =========================
   GOOD TO KNOW
========================= */
.gtk-card {
  max-width:820px; margin:0 auto;
  background:var(--bg-soft, #F7F8FA);
  border:1px solid rgba(0,0,0,.06); border-radius:28px;
  padding:44px 46px;
}
.gtk-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.gtk-list li {
  font-size:.98rem; color:#444; line-height:1.6;
  padding-left:30px; position:relative;
}
.gtk-list li::before {
  content:'●'; position:absolute; left:0; top:1px;
  color:#FF0033; font-size:.6rem; line-height:1.9;
}
.gtk-list strong { color:#22293a; font-weight:700; }

/* =========================
   CROSS-LINK (near final CTA)
========================= */
.cross-link {
  margin-top:32px; font-size:.95rem; color:#666;
}
.cross-link a { color:var(--primary, #134882); font-weight:700; }
.cross-link a:hover { text-decoration:underline; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px) {
  .pd-grid, .how-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .pd-grid, .how-grid, .pd-grid-2 { grid-template-columns:1fr; }
  .pd-card { padding:30px 24px; }
  .pd-name { min-height:0; }
  .gtk-card { padding:34px 26px; }
}

/* =========================================================
   8D SERVICE FRAMEWORK card — outcome-first, consistent rows
   (supersedes .pd-card-top / .pd-delivery layout)
   ========================================================= */
.pd-card .pd-name {
  min-height:0; margin-bottom:6px;
}
.pd-fw { display:flex; flex-direction:column; flex-grow:1; margin-top:14px; }
.pd-fw-row { padding:14px 0; border-top:1px solid rgba(0,0,0,.07); }
.pd-fw-row:first-child { border-top:none; padding-top:4px; }
.pd-fw-receive { flex-grow:1; }

.pd-fw-label {
  display:block; font-size:.64rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--secondary, #E11931); margin-bottom:8px;
}
.pd-fw-row p { font-size:.94rem; color:#444; line-height:1.6; }

/* You'll Receive list keeps the tick styling */
.pd-fw-receive .pd-includes { margin:0; }

/* delivery + investment meta block, pinned near the bottom */
.pd-meta {
  display:grid; grid-template-columns:1fr auto; gap:14px 20px;
  align-items:end;
  padding:18px 0 22px; margin-top:6px;
  border-top:1px solid rgba(0,0,0,.10);
}
.pd-meta-row:last-child { text-align:right; }
.pd-meta .pd-fw-label { margin-bottom:5px; }
.pd-meta strong {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:1rem; letter-spacing:-.01em; color:#22293a;
}
.pd-inv { color:var(--primary, #134882) !important; font-size:1.35rem !important; }
.pd-inv span { font-size:.8rem; font-weight:600; color:#888; letter-spacing:0; }
.pd-meta .pd-gst { display:block; font-size:.72rem; color:#999; margin-top:3px; }

.pd-formats {
  font-size:.84rem; color:#666; line-height:1.55;
  padding:11px 13px; margin:2px 0 0;
  background:var(--bg-soft, #F7F8FA); border-radius:12px;
}

@media (max-width:520px) {
  .pd-meta { grid-template-columns:1fr; gap:12px; }
  .pd-meta-row:last-child { text-align:left; }
}

/* =========================================================
   8D SERVICE CARD SYSTEM — badge, name row, "why" bullets
   ========================================================= */
.pd-card-name-row {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.pd-card-name-row .pd-name { margin-bottom:0; }
.pd-badge2 {
  flex-shrink:0; white-space:nowrap;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary, #134882); background:rgba(19,72,130,.09);
  padding:5px 10px; border-radius:100px; margin-top:2px;
}

/* "Why Businesses Choose This" — short, benefit-led ticks */
.pd-why { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.pd-why li {
  font-size:.92rem; font-weight:600; color:#22293a; line-height:1.45;
  padding-left:25px; position:relative;
}
.pd-why li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:#2e9e5b; font-weight:800; font-size:.85rem;
}