/* ============================================================
   COLLECTORS CERTIFIED GRADING — programs.css
   Shared styles for the program pages (vip.html,
   collectors-club.html). Loaded after style.css.
   ============================================================ */

/* ---------------- Page hero ---------------- */
.page-hero { padding: 176px 0 30px; text-align: center; }
.page-hero h1 {
  font-family: var(--font-display); font-size: clamp(44px, 6vw, 76px);
  font-weight: 700; letter-spacing: .5px; line-height: 1.02;
  text-transform: uppercase; margin: 14px 0 18px;
}
.page-hero .sub { color: var(--muted); font-size: 17px; max-width: 680px; margin: 0 auto; }

/* ---------------- Big offer callout ---------------- */
.mega-callout { text-align: center; max-width: 800px; margin: 0 auto; }
.mega-callout .mega {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(88px, 13vw, 170px); line-height: .95; letter-spacing: 1px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mega-callout .mega-sub {
  display: block; font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 3px; text-transform: uppercase; color: var(--text); margin-top: 4px;
}
.mega-callout p { color: var(--muted); font-size: 17px; margin-top: 20px; }

/* ---------------- Rules / details panels ---------------- */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.rules-grid .program-card { margin: 0; }
.rules-grid .program-card p { margin-bottom: 0; }
.rules-grid .check-list { margin-top: 14px; }
.rules-grid .check-list li { font-size: 14.5px; }

/* ---------------- Callout banners ---------------- */
.note-banner {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,122,26,.08); border: 1px solid rgba(255,122,26,.35);
  border-radius: var(--radius); padding: 18px 22px;
  color: var(--muted); font-size: 15px;
  max-width: 880px; margin: 40px auto 0;
}
.note-banner.cyan { background: rgba(54,212,249,.07); border-color: rgba(54,212,249,.3); }
.note-banner .note-ico { font-size: 20px; line-height: 1.5; flex-shrink: 0; }
.note-banner b { color: var(--text); }

/* ---------------- Solo pricing card ---------------- */
.solo-card { max-width: 430px; margin: 0 auto; }
.solo-card .price-card { display: flex; flex-direction: column; }

/* ---------------- Welcome kit visual ---------------- */
.kit-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 400px; margin: 0 auto; }
.kit-item {
  background: linear-gradient(170deg, rgba(166,196,224,.07), rgba(166,196,224,.02));
  border: 1px solid rgba(166,196,224,.15); border-radius: 16px;
  padding: 24px 16px; text-align: center;
  transition: transform .3s, border-color .3s;
}
.kit-item:hover { transform: translateY(-4px); border-color: rgba(54,212,249,.45); }
.kit-item span { font-size: 30px; display: block; margin-bottom: 10px; }
.kit-item small { color: var(--muted); font-size: 13.5px; line-height: 1.4; display: block; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .rules-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .page-hero { padding: 140px 0 16px; }
}