/* ============================================================
   SCIENTIFIC ASTROLOGY WORKSHOP — landing page
   Everything is scoped under body.wk / .wk-* so this palette
   never leaks into the rest of the site.
   ============================================================ */
body.wk {
  --wk-navy:    #3D0101;
  --wk-navy-2:  #3a2463;
  --wk-orange:  #f26522;
  --wk-orange-2:#e05513;
  --wk-cream:   #fdeee4;
  --wk-grey:    #f7f7f8;
  --wk-lilac:   #f4eefb;
  --wk-text:    #3d3d4e;
  --wk-border:  #e9e6f0;

  margin: 0;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--wk-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
body.wk * { box-sizing: border-box; }
/* The resets are wrapped in :where() so they carry element-level specificity
   only. Written as `body.wk p` they scored 0,1,1 and silently beat every
   single-class component rule below — which is why headings and paragraph
   spacing were being ignored. */
:where(body.wk) img { max-width: 100%; display: block; }
:where(body.wk) h1,
:where(body.wk) h2,
:where(body.wk) h3 { color: var(--wk-navy); margin: 0; }
:where(body.wk) p  { margin: 0; }

.wk-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wk-center { text-align: center; }

/* Dotted background used by the hero and closing block */
.wk-dots {
  background-image: radial-gradient(rgba(45,27,78,.13) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ── Shared section shell ── */
.wk-sec { padding: 70px 0; }
.wk-sec-grey    { background: var(--wk-grey); }
.wk-sec-pattern { background: #fbfbfc; }
body.wk .wk-h2 {
  font-size: 30px; font-weight: 800; text-align: center;
  letter-spacing: .2px;
  margin-bottom: 40px; line-height: 1.35;
}
body.wk .wk-h2 span { color: var(--wk-orange); }
body.wk .wk-h2-light { color: #fff; }
body.wk .wk-h2-light span { color: var(--wk-orange); }
.wk-sec-foot {
  text-align: center; font-size: 17px; color: var(--wk-navy);
  margin: 34px 0 26px;
}

/* ── CTA button ── */
.wk-cta {
  display: inline-block;
  background: linear-gradient(180deg, #f6742c 0%, var(--wk-orange-2) 100%);
  color: #fff; font-weight: 700; font-size: 17px;
  letter-spacing: .3px; text-transform: uppercase;
  padding: 18px 44px; border-radius: 8px;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(224,85,19,.32);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.wk-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(224,85,19,.42); filter: brightness(1.05); }
.wk-cta:active { transform: translateY(0); }
.wk-cta-block { display: block; width: 100%; text-align: center; margin-top: 22px; }

/* ═══════════ 1. HERO ═══════════ */
.wk-hero {
  background: var(--wk-cream);
  background-image: radial-gradient(rgba(45,27,78,.13) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  padding: 40px 0 46px;
  text-align: center;
}
.wk-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--wk-navy); color: #fff;
  border-radius: 50px; padding: 7px 26px 7px 7px;
  margin-bottom: 30px;
}
.wk-badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wk-orange); color: #fff;
  font-weight: 600; font-size: 15px;
  padding: 9px 20px; border-radius: 50px;
}
.wk-badge-text { font-size: 15.5px; font-weight: 600; }
.wk-headline {
  font-size: 44px; font-weight: 800; line-height: 1.24;
  max-width: 1050px; margin: 0 auto;
}
.wk-headline span { color: var(--wk-orange); }
.wk-subline {
  font-size: 15.5px; color: var(--wk-navy); font-weight: 500;
  max-width: 880px; margin: 26px auto 0; line-height: 1.8;
}
.wk-dot { color: #d8a64a; margin: 0 9px; font-size: 13px; }

/* ═══════════ 2. VIDEO + DETAILS ═══════════ */
.wk-intro { background: var(--wk-cream); padding: 0 0 60px; }
.wk-video-frame {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--wk-navy);
  box-shadow: 0 10px 30px rgba(45,27,78,.18);
}
.wk-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.wk-video-static img { width: 100%; height: 100%; object-fit: cover; }
.wk-play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 52px; border-radius: 10px;
  background: #2f4bd8; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; pointer-events: none;
}
.wk-refund {
  text-align: center; font-size: 15.5px; font-weight: 600;
  color: var(--wk-navy); margin-top: 16px; line-height: 1.6;
}

/* Fact tiles */
.wk-fact {
  background: var(--wk-navy); color: #fff;
  border-radius: 12px; padding: 18px;
  display: flex; align-items: center; gap: 14px; height: 100%;
}
.wk-fact-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--wk-orange); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.wk-fact-label { display: block; font-size: 14px; font-weight: 600; opacity: .95; }
.wk-fact-value { display: block; font-size: 15px; font-weight: 500; opacity: .9; margin-top: 2px; }

/* Instructor card */
.wk-instructor {
  background: var(--wk-navy); border-radius: 12px;
  margin-top: 30px; padding: 30px 22px 22px;
  position: relative; text-align: left;
}
.wk-instructor-tag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--wk-orange); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 6px 20px; border-radius: 50px; white-space: nowrap;
}
.wk-instructor-body { display: flex; gap: 16px; align-items: flex-start; }
.wk-instructor-body img {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
}
.wk-instructor-body strong { color: #fff; font-size: 17px; font-weight: 700; display: block; margin-bottom: 6px; }
.wk-instructor-body p { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.65; }

/* ═══════════ 3. FEATURED IN ═══════════ */
.wk-featured { padding: 46px 0 34px; }
.wk-featured-box {
  background: var(--wk-lilac); border: 1px solid #e6dcf5;
  border-radius: 14px; padding: 40px 30px 32px;
  position: relative;
}
.wk-featured-label {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #7b3fb5, #6a2fa3);
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 8px 24px; border-radius: 7px; white-space: nowrap;
}
.wk-logos {
  display: flex; align-items: center; justify-content: space-around;
  gap: 30px; flex-wrap: wrap;
}
.wk-logos img { max-height: 54px; width: auto; object-fit: contain; }

/* ═══════════ 4. PERFECT FOR YOU IF ═══════════ */
.wk-num-card {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: 10px; padding: 20px 18px;
  display: flex; gap: 12px; height: 100%;
}
.wk-num {
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--wk-orange); color: #fff;
  border-radius: 50%; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.wk-num-card p { font-size: 15.5px; line-height: 1.6; color: var(--wk-navy); }
.wk-num-card b { font-weight: 700; }

/* ═══════════ 5. WHAT YOU WILL LEARN ═══════════ */
.wk-learn-card {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: 12px; padding: 26px 24px 28px; height: 100%;
  transition: transform .25s, box-shadow .25s;
}
.wk-learn-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(45,27,78,.10); }
.wk-emoji { font-size: 34px; line-height: 1; display: block; margin-bottom: 18px; }
.wk-learn-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.wk-learn-card p { font-size: 14.5px; line-height: 1.65; color: #5c5c6e; }

/* ═══════════ 6. WHO IS THIS FOR ═══════════ */
.wk-who-card {
  background: var(--wk-lilac); border: 1px solid #ece4f8;
  border-radius: 10px; padding: 20px 18px;
  display: flex; gap: 15px; height: 100%;
}
.wk-who-icon {
  font-size: 28px; color: var(--wk-navy);
  flex-shrink: 0; line-height: 1; margin-top: 3px;
}
.wk-who-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.wk-who-card p { font-size: 14px; line-height: 1.6; color: #5c5c6e; }

/* ═══════════ 7. MEET YOUR MENTOR ═══════════ */
.wk-mentor { background: var(--wk-navy); padding: 66px 0; }
.wk-mentor-p { color: rgba(255,255,255,.88); font-size: 15.5px; line-height: 1.8; margin-bottom: 18px; }
.wk-mentor-list { list-style: none; padding: 0; margin: 26px 0 30px; }
.wk-mentor-list li {
  display: flex; gap: 12px; align-items: flex-start;
  color: #fff; font-size: 15px; font-weight: 600;
  line-height: 1.65; margin-bottom: 16px;
}
.wk-mentor-list i { color: var(--wk-orange); font-size: 17px; margin-top: 2px; flex-shrink: 0; }
.wk-mentor-photo { position: relative; border-radius: 12px; overflow: hidden; }
.wk-mentor-photo img { width: 100%; height: 100%; object-fit: cover; }
.wk-mentor-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(107,73,158,.92); color: #fff;
  font-size: 17px; font-weight: 700; text-align: center;
  padding: 12px 10px;
}

/* ═══════════ 8. REAL STORIES ═══════════ */
.wk-story {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 3 / 4; background: #ddd;
  box-shadow: 0 6px 20px rgba(45,27,78,.12);
}
.wk-story img, .wk-story iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

/* ═══════════ 9. BONUSES ═══════════ */
.wk-bonus {
  background: #fff; border: 1px solid var(--wk-border);
  border-radius: 12px; padding: 14px 14px 26px;
  text-align: center; height: 100%;
  display: flex; flex-direction: column;
}
.wk-bonus > img { border-radius: 8px; width: 100%; }
.wk-bonus-pill {
  display: block; width: 100%;
  background: linear-gradient(180deg, #f6742c 0%, var(--wk-orange-2) 100%);
  color: #fff; font-size: 17px; font-weight: 700;
  padding: 11px 10px; border-radius: 8px; margin: 14px 0 18px;
}
.wk-bonus h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; line-height: 1.5; }
.wk-bonus p { font-size: 15px; color: #5c5c6e; margin-top: auto; }

/* ═══════════ 10. CLOSING ═══════════ */
.wk-close {
  background-image: radial-gradient(rgba(45,27,78,.10) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  text-align: center;
}
.wk-close-copy { margin-bottom: 26px; }
.wk-close-copy p { font-size: 16px; line-height: 1.9; color: var(--wk-navy); }
.wk-close-price { font-size: 17px; font-weight: 700; color: var(--wk-navy); margin-bottom: 32px; }

/* ── Footer ── */
.wk-footer {
  background: var(--wk-navy); color: rgba(255,255,255,.7);
  text-align: center; font-size: 13.5px; padding: 22px 0;
}
.wk-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.wk-footer a:hover { color: var(--wk-orange); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 991px) {
  .wk-headline { font-size: 32px; }
  .wk-h2 { font-size: 25px; }
  .wk-mentor-photo { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .wk-sec { padding: 50px 0; }
  .wk-headline { font-size: 26px; }
  .wk-h2 { font-size: 21px; margin-bottom: 30px; }
  .wk-badge { flex-direction: column; gap: 8px; padding: 8px 8px 14px; border-radius: 16px; }
  .wk-badge-text { font-size: 14px; text-align: center; padding: 0 8px; }
  .wk-cta { font-size: 15px; padding: 16px 26px; width: 100%; }
  .wk-logos { gap: 22px; justify-content: center; }
  .wk-logos img { max-height: 40px; }
  .wk-featured-box { padding: 34px 18px 26px; }
  .wk-instructor-body { flex-direction: column; }
  .wk-instructor-body img { width: 100%; height: 180px; }
  .wk-subline { font-size: 14.5px; }
  .wk-dot { display: block; height: 0; overflow: hidden; margin: 0; }
}