/* =================================================================
 * Pricing page — OUR PRICING hero + 3 tiers + compare table.
 * Password-gated (see template-pricing.php).
 * ================================================================= */

/* ========== HERO ========== */
.pricing-hero {
  padding-block: clamp(var(--vq-space-9), 9vw, var(--vq-space-12));
  background: var(--vq-color-bg);
}
.pricing-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--vq-space-7), 5vw, var(--vq-space-10));
  align-items: center;
}
.pricing-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vq-space-5); text-align: left; }
.pricing-hero__media { width: 100%; }
.pricing-hero__media img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .pricing-hero__inner { grid-template-columns: 1fr; }
  .pricing-hero__media { max-width: 480px; }
}
.pricing-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vq-space-2);
  padding: 0.45em 1.1em;
  background: var(--vq-color-bg-soft);
  border: 1px solid var(--vq-color-border);
  border-radius: var(--vq-radius-full);
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-xs);
  font-weight: var(--vq-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vq-tracking-eyebrow);
  color: var(--vq-color-muted);
  margin: 0;
}
.pricing-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vq-color-success); box-shadow: 0 0 0 4px rgba(22,163,74,0.15); }
.pricing-hero__title {
  font-size: clamp(2rem, 5vw, 3.375rem); /* 54px cap */
  font-weight: var(--vq-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: var(--vq-color-secondary);
  margin: 0;
}
.pricing-hero__lead {
  font-size: var(--vq-text-lg);
  color: var(--vq-color-muted);
  max-width: 56ch;
  margin: 0;
}

/* ========== TIERS ========== */
.pricing-tiers { padding-block: clamp(var(--vq-space-8), 8vw, var(--vq-space-10)); background: var(--vq-color-bg); }
.pricing-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vq-space-5);
  align-items: stretch;
}
@media (max-width: 1000px) { .pricing-tiers__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--vq-color-bg);
  border: 1px solid var(--vq-color-border);
  border-radius: var(--vq-radius-xl);
  padding: var(--vq-space-7);
  position: relative;
  transition: transform var(--vq-duration) var(--vq-ease), box-shadow var(--vq-duration) var(--vq-ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--vq-shadow-md); }
.pricing-card--popular {
  background: var(--vq-color-primary);
  border: 2px solid var(--vq-color-primary);
  box-shadow: var(--vq-shadow-lg);
}
.pricing-card--popular .pricing-card__title,
.pricing-card--popular .pricing-card__price-num { color: #fff; }
.pricing-card--popular .pricing-card__price-mo { color: rgba(255,255,255,0.75); }
.pricing-card--popular .pricing-card__list li { color: rgba(255,255,255,0.92); }
.pricing-card--popular .pricing-card__divider { border-top-color: rgba(255,255,255,0.28); }
.pricing-card--popular .pricing-card__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.pricing-card--popular .pricing-chip--popular { background: #fff; color: var(--vq-color-primary); border-color: #fff; }
.pricing-card--popular .btn--primary { background: #fff; border-color: #fff; color: var(--vq-color-primary); }
.pricing-card--popular .btn--primary:hover { background: var(--vq-color-bg-soft); border-color: var(--vq-color-bg-soft); color: var(--vq-color-primary-dark); }

/* Top chips */
.pricing-card__chips { display: flex; flex-wrap: wrap; gap: var(--vq-space-2); min-height: 26px; margin-bottom: var(--vq-space-4); }
.pricing-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-xs);
  font-weight: var(--vq-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--vq-color-primary);
  background: #EAF1FF;
  border: 1px solid rgba(0,78,235,0.16);
  border-radius: var(--vq-radius-full);
  padding: 0.3em 0.85em;
}
.pricing-chip--popular { background: var(--vq-color-primary); color: #fff; border-color: var(--vq-color-primary); }

.pricing-card__title {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: var(--vq-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--vq-color-secondary);
  margin: 0 0 var(--vq-space-3);
}
.pricing-card__price { display: flex; align-items: baseline; gap: var(--vq-space-2); margin: 0; font-family: var(--vq-font-display); }
.pricing-card__price-num {
  font-size: clamp(2.25rem, 3.2vw, 2.75rem);
  font-weight: var(--vq-weight-bold);
  letter-spacing: -0.02em;
  color: var(--vq-color-secondary);
  line-height: 1;
}
.pricing-card__price-mo { font-size: var(--vq-text-base); color: var(--vq-color-muted); }
.pricing-card__divider { border: 0; border-top: 1px solid var(--vq-color-border); margin: var(--vq-space-5) 0; }

.pricing-card__list {
  list-style: none;
  margin: 0 0 var(--vq-space-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vq-space-3);
  flex-grow: 1;
}
.pricing-card__list li {
  font-size: var(--vq-text-base);
  color: var(--vq-color-ink);
  padding-left: 28px;
  position: relative;
  line-height: var(--vq-leading-base);
}
.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23004EEB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.pricing-card__cta { width: 100%; margin-top: auto; }

/* ========== COMPARE TABLE ========== */
.pricing-compare { padding-block: clamp(var(--vq-space-8), 8vw, var(--vq-space-10)); }
.pricing-compare__header { text-align: center; margin-bottom: var(--vq-space-8); }
.pricing-compare__title {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: var(--vq-weight-bold);
  letter-spacing: -0.01em;
  color: var(--vq-color-secondary);
  margin: 0 0 var(--vq-space-2);
}
.pricing-compare__lead { font-size: var(--vq-text-lg); color: var(--vq-color-muted); margin: 0; }

.pricing-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-compare__table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}
.pricing-compare__table th,
.pricing-compare__table td {
  padding: var(--vq-space-4) var(--vq-space-5);
  text-align: center;
  border-bottom: 1px solid var(--vq-color-border);
  vertical-align: middle;
}
.pricing-compare__feature {
  text-align: left;
  font-family: var(--vq-font-body);
  font-size: var(--vq-text-base);
  font-weight: var(--vq-weight-medium);
  color: var(--vq-color-ink);
}
.pricing-compare__rowhead { border-bottom: 0; background: transparent; }

/* Column headers */
.pricing-compare__col { border-bottom: 1px solid var(--vq-color-border); }
.pricing-compare__col-kicker { display: block; font-family: var(--vq-font-display); font-size: var(--vq-text-xs); font-weight: var(--vq-weight-semibold); text-transform: uppercase; letter-spacing: var(--vq-tracking-eyebrow); color: var(--vq-color-subtle); margin-bottom: var(--vq-space-1); }
.pricing-compare__col-name { display: block; font-family: var(--vq-font-display); font-size: var(--vq-text-xl); font-weight: var(--vq-weight-bold); color: var(--vq-color-primary); line-height: 1.1; }
.pricing-compare__col-price { display: block; font-size: var(--vq-text-sm); color: var(--vq-color-muted); margin-top: var(--vq-space-1); }

.pricing-compare__col--popular { background: var(--vq-color-bg-soft); border-top: 3px solid var(--vq-color-primary); border-radius: var(--vq-radius-md) var(--vq-radius-md) 0 0; }
.pricing-compare__cell--popular { background: var(--vq-color-bg-soft); }
.pricing-compare__col--enterprise { background: var(--vq-color-secondary); border-radius: var(--vq-radius-md) var(--vq-radius-md) 0 0; }
.pricing-compare__col--enterprise .pricing-compare__col-kicker { color: rgba(255,255,255,0.6); }
.pricing-compare__col--enterprise .pricing-compare__col-name { color: #fff; }
.pricing-compare__col--enterprise .pricing-compare__col-price { color: rgba(255,255,255,0.7); }

/* Yes / No marks */
.pricing-compare__yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vq-color-success); color: #fff;
}
.pricing-compare__no { display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: var(--vq-color-border); }

.pricing-compare__table tfoot td { border-bottom: 0; padding-top: var(--vq-space-6); }
.pricing-compare__cta { width: 100%; }
.pricing-compare__note { text-align: center; color: var(--vq-color-subtle); font-size: var(--vq-text-sm); margin: var(--vq-space-7) 0 0; }

/* ========== PASSWORD GATE ========== */
.pricing-gate { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--vq-space-4); padding-block: clamp(var(--vq-space-8), 8vw, var(--vq-space-11)); }
.pricing-gate__title { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: var(--vq-weight-bold); color: var(--vq-color-secondary); margin: 0; }
.pricing-gate__lead { font-size: var(--vq-text-lg); color: var(--vq-color-muted); margin: 0; }
.pricing-gate .post-password-form { display: flex; flex-direction: column; gap: var(--vq-space-5); justify-content: center; align-items: center; margin-top: var(--vq-space-5); }
.pricing-gate .post-password-form input[type="submit"] { margin-top: var(--vq-space-2); }
.pricing-gate .post-password-form label { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vq-space-2); font-size: var(--vq-text-sm); color: var(--vq-color-muted); }
.pricing-gate .post-password-form input[type="password"] {
  width: 260px;
  padding: var(--vq-space-3) var(--vq-space-4);
  border: 1px solid var(--vq-color-border);
  border-radius: var(--vq-radius-md);
  font-size: var(--vq-text-base);
  background: var(--vq-color-bg);
  color: var(--vq-color-ink);
}
.pricing-gate .post-password-form input[type="password"]:focus { outline: none; border-color: var(--vq-color-primary); box-shadow: 0 0 0 3px rgba(0,78,235,0.12); }
.pricing-gate .post-password-form input[type="submit"] {
  padding: var(--vq-space-3) var(--vq-space-6);
  background: var(--vq-color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--vq-radius-md);
  font-family: var(--vq-font-display);
  font-weight: var(--vq-weight-semibold);
  cursor: pointer;
  transition: background var(--vq-duration) var(--vq-ease);
}
.pricing-gate .post-password-form input[type="submit"]:hover { background: var(--vq-color-primary-dark); }

/* ========== RESPONSIVE ========== */
@media (max-width: 560px) {
  .pricing-compare__table th, .pricing-compare__table td { padding: var(--vq-space-3); }
}