/* BossPrompts page — gold accent layered over toolvein dark theme */
:root {
  --gold: #fbbf24;
  --gold-2: #f59e0b;
  --gold-bright: #fde68a;
  --gold-glow: rgba(251, 191, 36, 0.35);
  --purple: #c084fc;
  --purple-2: #9333ea;
}

.bp-page .pulse-dot.gold { background: var(--gold); box-shadow: 0 0 0 0 var(--gold-glow); }
@keyframes gold-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .7); }
  70% { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.bp-page .pulse-dot.gold { animation: gold-dot-pulse 1.6s ease-in-out infinite; }

.bp-page .gold-eyebrow {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--gold);
}

.bp-page .strike-gold {
  position: relative; display: inline-block; color: #89a39a;
}
.bp-page .strike-gold::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 50%;
  height: 6px; background: var(--gold);
  transform-origin: left;
  transform: scaleX(0) rotate(-1.5deg);
  animation: strike 1.2s cubic-bezier(.6,.1,.3,1) 0.6s forwards;
  border-radius: 3px;
  box-shadow: 0 0 14px var(--gold-glow);
}
.bp-page .gradient-gold {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 5s ease-in-out infinite;
  display: inline-block;
}

.bp-page .gold-btn,
.bp-page .btn-primary.gold-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  box-shadow: 0 6px 30px -8px var(--gold-glow);
}
.bp-page .gold-btn:hover { box-shadow: 0 10px 40px -6px var(--gold-glow); }
.bp-page .glow.gold-btn { animation: gold-cta-pulse 2.2s ease-in-out infinite; }
@keyframes gold-cta-pulse {
  0%, 100% { box-shadow: 0 6px 30px -8px var(--gold-glow); }
  50%      { box-shadow: 0 6px 45px 0 var(--gold-glow); }
}

.bp-page .trust-num.gold { color: var(--gold); }

/* ============================================================
   Hero demo — fake ChatGPT with sidebar
   ============================================================ */
.bp-demo .browser-frame { max-width: 540px; }
.bp-mock-body {
  display: grid;
  grid-template-columns: 1fr 200px;
  height: 320px;
  background: #1a1a1a;
  position: relative;
}
.bp-mock-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #212121;
  overflow: hidden;
  font-size: 11px;
}
.bp-mock-msg {
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 90%;
  line-height: 1.4;
  color: #e5e5e5;
}
.bp-mock-msg.user { background: #2f2f2f; align-self: flex-end; }
.bp-mock-msg.ai { background: transparent; align-self: flex-start; padding-left: 4px; }
.bp-mock-input {
  margin-top: auto;
  background: #2a2a2a;
  border: 1px solid #404040;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 11px;
  color: #888;
  height: 40px;
  display: flex;
  align-items: center;
}
.bp-cursor-blink {
  width: 1.5px;
  height: 14px;
  background: #fbbf24;
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
  to { visibility: hidden; }
}

.bp-mock-sidebar {
  background: #14100a;
  border-left: 1px solid #2a1f12;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.bp-mock-sidebar-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}
.bp-mock-search {
  background: #1a1410;
  border: 1px solid #2a1f12;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  color: #fef3c7;
}
.bp-mock-list { display: flex; flex-direction: column; gap: 6px; }
.bp-mock-card {
  background: #1a1410;
  border: 1px solid #2a1f12;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 10px;
  color: #fef3c7;
  position: relative;
}
.bp-mock-card.premium { opacity: 0.78; }
.bp-mock-card-title { line-height: 1.3; padding-right: 32px; }
.bp-mock-tag {
  position: absolute; top: 6px; right: 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 4px;
  border-radius: 3px;
}
.bp-mock-tag.free {
  background: rgba(110, 231, 183, 0.15);
  color: #6ee7b7;
}
.bp-mock-tag.premium {
  background: rgba(251, 191, 36, 0.12);
  color: var(--gold);
}
.bp-mock-fab {
  position: absolute;
  bottom: 12px; right: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  animation: pulse-glow 1.8s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}

/* ============================================================
   Categories grid
   ============================================================ */
.bp-cat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 36px;
  max-width: 1080px;
  margin-left: auto; margin-right: auto;
}
@media (max-width: 1100px) {
  .bp-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
.bp-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  font-size: 14px;
  color: var(--text);
  transition: border-color 200ms, transform 200ms;
}
.bp-cat:hover {
  border-color: rgba(251, 191, 36, 0.35);
  transform: translateY(-2px);
}

/* ============================================================
   Pricing grid
   ============================================================ */
.bp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.bp-tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 220ms, border-color 220ms;
}
.bp-tier-card:hover { transform: translateY(-4px); }

.bp-tier-card.bp-tier-featured {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 20px 60px -20px rgba(251, 191, 36, 0.25);
}
.bp-tier-card.bp-tier-max {
  border-color: rgba(196, 132, 252, 0.4);
}

.bp-tier-tag {
  position: absolute;
  top: -12px; right: 20px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  font-size: 11px; font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.bp-tier-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.bp-tier-price {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.bp-tier-price.gold { color: var(--gold); }
.bp-tier-price.purple { color: var(--purple); }
.bp-tier-once {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
}

.bp-tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.bp-tier-card li {
  font-size: 13.5px;
  padding-left: 22px;
  position: relative;
  color: var(--text);
  line-height: 1.5;
}
.bp-tier-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.bp-tier-card.bp-tier-max li::before { color: var(--purple); }
.bp-tier-card li b { color: var(--text); font-weight: 700; }

.btn-tier {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 180ms;
}
.btn-tier:hover { transform: translateY(-1px); }
.btn-tier:not(.btn-tier-gold):not(.btn-tier-purple) {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-tier-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1410;
  box-shadow: 0 8px 24px -8px var(--gold-glow);
}
.btn-tier-purple {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff;
}

/* Responsive */
@media (max-width: 860px) {
  .bp-pricing-grid { grid-template-columns: 1fr; }
  .bp-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-mock-body { grid-template-columns: 1fr; height: auto; }
  .bp-mock-sidebar { display: none; }
}

/* iPad portrait + landscape — pricing tier stacks earlier so it breathes */
@media (min-width: 760px) and (max-width: 1100px) {
  .bp-pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .bp-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .bp-demo .browser-frame { max-width: 100%; }
}

/* Touch devices — kill hover effects that get stuck */
@media (hover: none) and (pointer: coarse) {
  .bp-tier-card:hover { transform: none !important; }
  .bp-cat:hover { transform: none !important; }
}