/* ════════════════════════════════════════════════════════════════════════
   PRICING PAGE (pr-*)
   Design system: reuses the app's existing dark palette (--bg, --text,
   Neue Machina/Syne display + DM Sans body) but gives each tier its own
   "stage light" accent, Free is cool house-light blue, Small is warm
   amber (matching the app's existing amber), Mid is the violet already
   established as the subscription brand color throughout the admin
   side. Ties directly to the Cue name's lighting/stage-cue metaphor
   rather than a generic checkmark-list pricing page.
   ════════════════════════════════════════════════════════════════════════ */

.pr-page {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 100px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pr-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.pr-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(237, 232, 255, 0.55);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s ease;
}
.pr-back:hover { color: #ede8ff; }
.pr-back svg { width: 16px; height: 16px; }

.pr-title {
  font-family: 'Neue Machina', 'Syne', sans-serif;
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 18px;
}

.pr-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(237, 232, 255, 0.6);
  margin: 0 0 32px;
}

.pr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.pr-toggle-opt {
  padding: 9px 20px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: rgba(237, 232, 255, 0.55);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pr-toggle-opt.is-active {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  color: #1e0a4a;
}
.pr-toggle-save {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
}
.pr-toggle-opt:not(.is-active) .pr-toggle-save {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.pr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}
.pr-card:hover { transform: translateY(-6px); }

/* Signature element: a soft stage-light glow bleeding down from the
   top of each card, colored per tier — the "spotlight" the Cue mark
   itself is standing under. */
.pr-card-glow {
  position: absolute;
  top: -60%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.pr-card:hover .pr-card-glow { opacity: 0.55; }

.pr-card--free { border-color: rgba(91, 141, 239, 0.18); }
.pr-card--free .pr-card-glow { background: #5b8def; }
.pr-card--free:hover { border-color: rgba(91, 141, 239, 0.4); }
.pr-card--free .pr-mark-stop-a { stop-color: #8fb4ff; }
.pr-card--free .pr-mark-stop-b { stop-color: #3d6fd6; }

.pr-card--small { border-color: rgba(245, 166, 35, 0.18); }
.pr-card--small .pr-card-glow { background: #f5a623; }
.pr-card--small:hover { border-color: rgba(245, 166, 35, 0.4); }
.pr-card--small .pr-mark-stop-a { stop-color: #ffcf7a; }
.pr-card--small .pr-mark-stop-b { stop-color: #d9860f; }

.pr-card--mid {
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(167, 139, 250, 0.035);
}
.pr-card--mid .pr-card-glow { background: #a78bfa; opacity: 0.45; }
.pr-card--mid:hover { border-color: rgba(167, 139, 250, 0.55); }
.pr-card--mid .pr-mark-stop-a { stop-color: #c4b5fd; }
.pr-card--mid .pr-mark-stop-b { stop-color: #7c3aed; }

.pr-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.pr-card-mark { display: block; }

.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 50px;
  background: rgba(167, 139, 250, 0.14);
  border: 0.5px solid rgba(167, 139, 250, 0.35);
  color: #c4b5fd;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pr-badge svg { width: 11px; height: 11px; }

.pr-card-name {
  position: relative;
  z-index: 1;
  font-family: 'Neue Machina', 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}

.pr-card-price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  min-height: 40px;
}
.pr-price-amount {
  font-family: 'Neue Machina', 'Syne', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}
.pr-price-period {
  font-size: 13px;
  color: rgba(237, 232, 255, 0.45);
}
.pr-price-annual-note {
  width: 100%;
  font-size: 11px;
  color: rgba(237, 232, 255, 0.35);
}
.pr-fee-note {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  color: rgba(237, 232, 255, 0.4);
  margin: -12px 0 20px;
  line-height: 1.5;
}

.pr-card-cta {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.pr-card-cta:active { transform: scale(0.97); }

.pr-cta-note {
  position: relative;
  z-index: 1;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(237, 232, 255, 0.4);
  text-align: center;
  margin: 8px 0 0;
}

.pr-card--free .pr-card-cta {
  background: rgba(91, 141, 239, 0.12);
  border: 0.5px solid rgba(91, 141, 239, 0.35);
  color: #8fb4ff;
}
.pr-card--free .pr-card-cta:hover { box-shadow: 0 6px 20px rgba(91, 141, 239, 0.25); }

.pr-card--small .pr-card-cta {
  background: rgba(245, 166, 35, 0.12);
  border: 0.5px solid rgba(245, 166, 35, 0.35);
  color: #ffcf7a;
}
.pr-card--small .pr-card-cta:hover { box-shadow: 0 6px 20px rgba(245, 166, 35, 0.25); }

.pr-card--mid .pr-card-cta {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  border: none;
  color: #1e0a4a;
}
.pr-card--mid .pr-card-cta:hover { box-shadow: 0 8px 26px rgba(167, 139, 250, 0.4); }

.pr-features {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pr-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.pr-feature svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

.pr-feature--on { color: rgba(237, 232, 255, 0.85); }
.pr-card--free .pr-feature--on svg { color: #5b8def; }
.pr-card--small .pr-feature--on svg { color: #f5a623; }
.pr-card--mid .pr-feature--on svg { color: #a78bfa; }

.pr-feature--off { color: rgba(237, 232, 255, 0.3); }
.pr-feature--off svg { color: rgba(237, 232, 255, 0.25); }

/* ── Guidance section ─────────────────────────────────────────────────── */
.pr-guidance {
  margin-top: 64px;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid rgba(255, 255, 255, 0.06);
}

.pr-guidance-title {
  font-family: 'Neue Machina', 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  text-align: center;
}

.pr-guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.pr-guidance-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(237, 232, 255, 0.65);
}
.pr-guidance-item strong { color: #fff; }

.pr-guidance-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.pr-guidance-dot--free { background: #5b8def; }
.pr-guidance-dot--small { background: #f5a623; }
.pr-guidance-dot--mid { background: #a78bfa; }

.pr-guidance-note {
  text-align: center;
  font-size: 12px;
  color: rgba(237, 232, 255, 0.4);
  margin: 0;
  padding-top: 18px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
}
.pr-guidance-note a { color: #c4b5fd; text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pr-cards { grid-template-columns: 1fr; }
  .pr-guidance-grid { grid-template-columns: 1fr; }
  .pr-card--mid { order: -1; }
}

@media (max-width: 480px) {
  .pr-page { padding: 32px 16px 70px; }
  .pr-title { font-size: 24px; }
}