/* ==========================================================
   THE PROCESS — numbered steps, per-service
   ========================================================== */
.process { max-width: 1240px; margin: 0 auto; padding: 20px 44px 110px; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.process-step {
  background: var(--card-gray);
  border-radius: 20px;
  padding: 30px 26px 32px;
}

.process-num {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--purple);
  margin-bottom: 20px;
}

.process-step h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.process-step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
  font-weight: 500;
}

@media (max-width: 1080px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .process { padding: 8px 20px 80px; }
  .process-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================
   SERVICE PRICING — additions on top of assets/css/pricing.css
   (plan-card, pricing-grid, plan-name, plan-price-row, plan-desc,
   plan-features etc. already exist there; this file only adds the
   bits specific to the individual service pages)
   ========================================================== */

/* Now the first section on the service page (right under the sticky navbar),
   so it needs the same breathing room .hero gets, not the tight 8px it used
   when pricing came after the hero/process sections. */
.service-pricing { padding-top: 90px; }

@media (max-width: 640px) {
  .service-pricing { padding-top: 56px; }
}

.service-pricing .pricing-grid.auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
}

.service-section-heading {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 1240px;
  margin: 0 auto 28px;
}

.pricing-grid + .service-section-heading { margin-top: 64px; }

.plan-meta {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--purple);
  margin-bottom: 14px;
}

.plan-fits {
  padding: 14px 16px;
  background: var(--card-gray);
  border-radius: 12px;
  margin-bottom: 18px;
}

.plan-fits p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
  font-weight: 500;
}

.plan-fits p + p { margin-top: 8px; }

.plan-fits strong { color: var(--text-dark); }

.plan-platforms {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
  font-weight: 500;
  margin-bottom: 18px;
}

.plan-note {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 16px;
}

/* ---- flat price list (A La Carte, Ad Creative add-ons) ---- */
.price-list {
  max-width: 760px;
  margin: 0 auto 40px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.price-list-item {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}

.price-list-item:last-child { border-bottom: none; }

.price-list-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.price-list-name {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.price-list-price {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--purple);
  white-space: nowrap;
}

.price-list-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-body);
  font-weight: 500;
  margin-top: 6px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  .service-section-heading { font-size: 19px; }
  .price-list-item { padding: 16px 20px; }
  .price-list-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}