/* PRICING PAGE */
.pricing-hero { padding: calc(var(--nav-h) + 80px) 24px 50px; text-align: center; position: relative; }
.pricing-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
.pricing-hero p { font-size: 1.05rem; color: var(--text-2); max-width: 540px; margin: 0 auto; }

.tab-switch { display: inline-flex; gap: 4px; margin-top: 36px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
.tab-switch button { padding: 9px 24px; border-radius: 999px; font-size: 0.85rem; color: var(--text-2); transition: all var(--t); font-weight: 500; }
.tab-switch button.active { background: #fff; color: #000; }

.pricing-section { padding: 50px 24px 100px; }
.price-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.price-grid.business-grid { grid-template-columns: repeat(2, 1fr); max-width: 800px; }

.price-card { padding: 28px 22px; display: flex; flex-direction: column; position: relative; }
.price-card.gold { border-color: var(--border-gold); background: linear-gradient(180deg, rgba(245,200,66,0.06), rgba(245,200,66,0.01)); }
.price-card.gold::before { content: ''; position: absolute; inset: -1px; border-radius: var(--r-lg); padding: 1px; background: linear-gradient(135deg, var(--gold), transparent 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.price-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: 0.65rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; white-space: nowrap; z-index: 2; }
.price-tag.gold { background: linear-gradient(135deg, #f5c842, #e0a800); color: #000; box-shadow: 0 4px 16px rgba(245,200,66,0.3); }

.price-tier { font-size: 0.7rem; font-family: var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-4); margin-bottom: 8px; }
.price-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; }
.price-amount { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.price-curr { font-size: 1.1rem; color: var(--text-2); }
.price-num { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price-period { font-size: 0.72rem; font-family: var(--font-mono); color: var(--text-4); margin-bottom: 22px; }

.price-features { list-style: none; flex: 1; margin-bottom: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.price-features li { display: flex; gap: 8px; font-size: 0.82rem; color: var(--text-2); padding: 6px 0; line-height: 1.5; }
.price-features li svg { flex-shrink: 0; margin-top: 2px; }

/* Silver-glass buy buttons (matches global .btn aesthetic) */
.buy-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 11px 20px; border-radius: var(--r);
  font-size: 0.86rem; font-weight: 500;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer; text-align: center;
  font-family: var(--font);
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.06) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 3px rgba(0,0,0,0.3);
}
.buy-btn::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(225,230,245,0.45) 0%, rgba(180,190,210,0.10) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.7; transition: opacity 0.25s ease;
}
.buy-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.25);
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.10) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 22px rgba(0,0,0,0.45);
}
.buy-btn:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(245,248,255,0.65) 0%, rgba(190,200,220,0.25) 35%, rgba(255,255,255,0.10) 50%, rgba(190,200,220,0.25) 70%, rgba(245,248,255,0.65) 100%);
  background-size: 200% 200%;
  animation: btn-shimmer 2.8s ease-in-out infinite;
}

.buy-outline { /* same as base .buy-btn — gentle silver */ }

.buy-white {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(235,238,245,0.85) 50%, rgba(245,248,255,0.92) 100%);
  border-color: rgba(255,255,255,0.4);
  color: #0a0a0a; font-weight: 600;
}
.buy-white::before {
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.4) 35%, rgba(255,255,255,0.1) 70%);
}
.buy-white:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,248,255,0.92) 50%, rgba(255,255,255,0.98) 100%);
  color: #000;
}

.buy-gold {
  background: linear-gradient(180deg, rgba(245,200,66,0.95) 0%, rgba(224,168,0,0.85) 100%);
  border-color: rgba(245,200,66,0.5);
  color: #0a0a0a; font-weight: 600;
}
.buy-gold::before {
  background: linear-gradient(135deg, rgba(255,235,180,0.7) 0%, rgba(245,200,66,0.2) 35%, transparent 70%);
}
.buy-gold:hover {
  box-shadow: inset 0 1px 0 rgba(255,235,180,0.4), 0 6px 24px rgba(245,200,66,0.35);
}

.discount-banner { max-width: 1100px; margin: 60px auto 0; padding: 36px 40px; border: 1px solid var(--border); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); position: relative; overflow: hidden; }
.discount-banner::before { content: ''; position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(88,101,242,0.15), transparent 70%); top: -100px; right: -50px; pointer-events: none; }
.discount-banner h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 4px; position: relative; }
.discount-banner p { font-size: 0.85rem; color: var(--text-2); position: relative; }

.faq-section { max-width: 800px; margin: 80px auto 0; }
.faq-item { padding: 20px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 0.95rem; }
.faq-a { font-size: 0.85rem; color: var(--text-2); margin-top: 12px; line-height: 1.7; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-q svg { transition: transform 0.2s; }

@media (max-width: 1000px) { .price-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .price-grid, .price-grid.business-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .price-grid, .price-grid.business-grid { grid-template-columns: 1fr; } }

/* Yearly tab "save big" pill */
.yr-tag {
  display: inline-block;
  font-size: 0.62rem; font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #0F0F10;
  margin-left: 4px;
  vertical-align: middle;
}
.tab-switch button.active .yr-tag { /* keep visible when active */ }