/* Shared pricing card styles: the price ladder + Early Access plan card.
   Rendered by src/views/pricing.js and loaded by both the marketing home page
   (alongside landing.css) and the onboarding paywall (alongside app.css).

   landing.css and app.css name the brand red differently (--brand vs --red);
   the aliases below let this file stand alone on the onboarding page, which
   loads only app.css. The keyframes and .pulse are duplicated from landing.css
   for the same reason (onboarding doesn't load landing.css). */
:root {
  --brand: #FF0000;
  --brand-hover: #CC0000;
  --brand-light: #FFE5E5;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); }
}
.pulse {
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Pricing section header (home page only) */
#pricing .section-label,
#pricing h2 {
  text-align: center;
}
.pricing-intro {
  max-width: 540px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
}

/* Price ladder (scarcity: current batch is capped, each rung up is the
   price after it fills). Column count comes from the view (--ladder-tiers),
   so adding a tier in PRICING_TIERS never breaks the layout; the track inset
   is half a column so it spans dot-center to dot-center. */
.price-ladder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ladder-tiers, 3), 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 36px auto 0;
}
.ladder-track {
  position: absolute;
  top: 7px;
  left: calc(100% / (2 * var(--ladder-tiers, 3)));
  right: calc(100% / (2 * var(--ladder-tiers, 3)));
  height: 2px;
  background: var(--border);
}
.ladder-tier { position: relative; text-align: center; }
.ladder-dot {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd0d6;
}
.ladder-tier-active .ladder-dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.16), 0 0 20px rgba(255, 0, 0, 0.35);
}
.ladder-price {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--muted);
  opacity: 0.6;
}
.ladder-tier-active .ladder-price { color: var(--text); opacity: 1; }
.ladder-tag {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--muted);
}
.ladder-tier-active .ladder-tag { color: var(--brand); }
.ladder-count {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.billing-toggle {
  display: flex;
  justify-content: center;
  margin: 32px 0 8px;
}
.plan-price .billing-toggle {
  justify-content: flex-start;
  margin: 0 0 20px;
}
.billing-switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 100px;
}
.billing-opt {
  position: relative;
  padding: 9px 22px;
  border: none;
  border-radius: 100px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.billing-opt.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(255, 0, 0, 0.25);
}
.billing-save-badge {
  position: absolute;
  top: -11px;
  right: -10px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  animation: badgeFloat 1.8s ease-in-out infinite;
}
.pricing-grid {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.plan-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--brand);
  border-radius: 18px;
  padding: 36px 34px;
  box-shadow: 0 18px 50px rgba(255, 0, 0, 0.12);
}
.plan-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 100px;
}
.plan-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.plan-tagline {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.plan-price-row {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
}
.plan-currency {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.plan-amount {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text);
}
.plan-cents {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  align-self: flex-start;
  margin-top: 6px;
}
.plan-per {
  font-size: 18px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 8px 4px;
}
.plan-billing-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.plan-save {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}
.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.plan-features li strong {
  color: var(--text);
  font-weight: 700;
}
.plan-check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--green);
}
.plan-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-cta {
  display: block;
  width: 100%;
  text-align: center;
}
.plan-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.plan-guarantee svg {
  color: var(--brand);
  flex-shrink: 0;
}
.plan-perdomain {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* Onboarding caps its content column at 520px (.ob-fullscreen-main), but the
   plan card is 640px on the home page. Let the card break out of that column so
   its width matches the marketing page. Centered on the viewport; never wider
   than the screen. The ladder keeps its own 480px max-width either way. */
.ob-fullscreen-main .pricing-grid {
  width: 640px;
  max-width: calc(100vw - 40px);
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 600px) {
  .plan-card { padding: 28px 22px; }
  .plan-amount { font-size: 52px; }
  .price-ladder { gap: 8px; margin-top: 28px; }
  .ladder-price { font-size: 24px; }
  .billing-opt { padding: 8px 16px; font-size: 13px; }
}