/* =========================================================================
   premium.css — premium-tips.php
   ========================================================================= */

.premium-hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(108, 140, 255, 0.14), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.lock-badge {
  font-size: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  margin-bottom: 18px;
}
.premium-hero h1 { color: var(--text); font-size: clamp(1.8rem, 4vw, 2.6rem); }

.premium-status-note {
  max-width: 46ch; margin-top: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 20px; font-size: 0.9rem; color: var(--text-muted);
}
.premium-status-note.is-premium { border-color: rgba(52,225,161,0.35); color: var(--accent); }

.premium-cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }

.premium-feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.premium-feature {
  border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  border-radius: 10px; padding: 22px 24px; background: var(--surface);
}
.premium-feature h3 { color: var(--text); font-size: 1.05rem; }
.premium-feature p { margin: 0; font-size: 0.9rem; }

@media (max-width: 700px) {
  .premium-feature-grid { grid-template-columns: 1fr; }
}