/* Pricing page styles – separated from inline for maintainability */
.sub-page { min-height: 100vh; }
.sub-page * { box-sizing: border-box; }
.sub-header {
  margin-top: 9rem;
  padding: 4rem 1rem 3rem;
  text-align: center;
}
.sub-header h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}
.sub-header p {
  font-size: 1.125rem;
  color: #9ca3af;
  margin-bottom: 2rem;
}
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.billing-toggle button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}
.billing-toggle button.active {
  background: var(--gg-primary, #06ffac);
  color: #000;
  box-shadow: 0 10px 15px -3px rgba(6, 255, 172, 0.5);
}
.billing-toggle button:not(.active) {
  background: #111827;
  color: #9ca3af;
}
.billing-toggle button:not(.active):hover {
  color: #fff;
}
.billing-toggle .yearly-wrap {
  position: relative;
}
.billing-toggle .save-badge {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gg-primary, #06ffac);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.sub-container { max-width: 80rem; margin: 0 auto; padding: 0 1rem 5rem; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.tier-card {
  color: white;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s;
  background: linear-gradient(to bottom right, #111827, #030712, #000);
  border: 1px solid #1f2937;
}
.tier-card:hover { border-color: #374151; }
.tier-card.highlighted {
  border: 2px solid var(--gg-primary, #06ffac);
  box-shadow: 0 25px 50px -12px rgba(6, 255, 172, 0.3);
  transform: scale(1.02);
}
.tier-card.highlighted::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--gg-primary, #06ffac), transparent);
}
.tier-card-inner { position: relative; padding: 2rem; height: 100%; display: flex; flex-direction: column; }
.tier-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.tier-card .tier-desc { color: #9ca3af; font-size: 0.875rem; margin-bottom: 1.5rem; }
.tier-price-wrap { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 2rem; }
.tier-price-wrap .price { font-size: 3rem; font-weight: 700; }
.tier-price-wrap .period { color: #9ca3af; font-size: 0.875rem; }
.tier-cta {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.tier-card.highlighted .tier-cta {
  background: var(--gg-primary, #06ffac);
  color: #000;
  box-shadow: 0 10px 15px -3px rgba(6, 255, 172, 0.5);
}
.tier-card.highlighted .tier-cta:hover { background: var(--gg-primary-hover, #2dd4bf); }
.tier-card:not(.highlighted) .tier-cta {
  background: #1f2937;
  color: #fff;
  border: 1px solid #374151;
}
.tier-card:not(.highlighted) .tier-cta:hover { background: #374151; }
.tier-features { list-style: none; flex: 1; }
.tier-features li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  color: #d1d5db;
  font-size: 0.875rem;
}
.tier-features li::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2306ffac'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat;
  background-size: contain;
}
.faq-section {
  color: white;
  max-width: 48rem;
  margin: 0 auto;
  padding: 5rem 1rem;
  border-top: 1px solid #1f2937;
}
.faq-section h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 3rem; text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 1.5rem; }
.faq-item {
  border: 1px solid #1f2937;
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.faq-item h3 { font-weight: 600; margin-bottom: 0.5rem; }
.faq-item p { color: #9ca3af; }
.alert {
  max-width: 80rem;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}
.alert-success { background: color-mix(in srgb, var(--gg-success, #22c55e) 20%, transparent); color: var(--gg-success, #22c55e); }
.alert-error { background: color-mix(in srgb, var(--gg-error, #ef4444) 20%, transparent); color: var(--gg-error, #ef4444); }
.guest-msg {
  text-align: center;
  margin-bottom: 2rem;
  color: #9ca3af;
}
.guest-msg a { color: var(--gg-primary, #06ffac); text-decoration: none; }
.guest-msg a:hover { text-decoration: underline; }
.coupon-section {
  max-width: 32rem;
  margin: 2rem auto 0;
  padding: 1.5rem;
  border: 1px solid #1f2937;
  border-radius: 0.75rem;
}
.coupon-section h2 { color: white;font-size: 1.125rem; margin-bottom: 0.75rem; }
.coupon-input { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.coupon-input input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  background: #111827;
  color: #fff;
}
.coupon-input button {
  padding: 0.75rem 1rem;
  background: var(--gg-primary, #06ffac);
  color: #000;
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}
#coupon_message { margin-top: 0.5rem; font-size: 0.875rem; }