/*
  Career Guidance — local overrides
  ------------------------------------------------------------------
  Reuses global ../styles.css for tokens (:root), .container, .button,
  .nav, .lang-switch, .mobile-menu, .hero, .trust, and .site-footer.
  Only page-specific tweaks live here. Keep minimal — prefer global classes.

  Scoped to .cg-page so other pages stay untouched.
*/
.cg-page .hero__background {
  background:
    linear-gradient(90deg, rgba(8, 18, 30, 0.68), rgba(8, 18, 30, 0.1)),
    url("../assets/guidance.jpg") right center / cover no-repeat;
}

/* === Hero: badges, price, urgency === */

/* Badge pills — "Intensive 2-Month Program" / "Limited to 7 Participants/Month" */
.cg-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}
.cg-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid rgba(126, 196, 240, 0.28);
  border-radius: 999px;
  background: rgba(126, 196, 240, 0.08);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Price highlight — current + strikethrough normal */
.cg-hero__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 26px;
}
.cg-hero__price-current {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.cg-hero__price-normal {
  font-size: 1.1rem;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 231, 221, 0.4);
}

/* Urgency line — warm amber for scarcity */
.cg-hero__urgency {
  margin: 12px 0 0;
  max-width: 560px;
  color: #f0b87e;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Badges + price + urgency stack makes the hero copy taller than the base
   template (which relies on 100vh centering with no bottom padding), so the
   CTA buttons end up flush against Section 2's edge. Give it room to breathe. */
.cg-page .hero__content {
  padding-bottom: 96px;
}

@media (max-width: 860px) {
  .cg-page .hero__content {
    padding-bottom: 56px;
  }
}

/* === Section 3: Big Promise (dark) === */
/* Dark section between the light Problem (Section 2) and Program Includes (Section 4).
   Cards lift off the base --bg via a slightly raised matte panel + hairline border. */

.cg-promise {
  padding: 104px 0 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 196, 240, 0.08), rgba(126, 196, 240, 0) 52%),
    var(--bg);
}

.cg-promise__inner {
  display: grid;
  gap: 52px;
}

.cg-promise__header {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.cg-promise__eyebrow,
.cg-promise__title,
.cg-promise__card h3,
.cg-promise__card p {
  margin: 0;
}

.cg-promise__eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cg-promise__title {
  font-size: clamp(2.35rem, 4.8vw, 4.75rem);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: 0;
}

.cg-promise__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.cg-promise__card {
  display: grid;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.cg-promise__card:hover {
  border-color: rgba(126, 196, 240, 0.45);
  background: rgba(126, 196, 240, 0.06);
  transform: translateY(-2px);
}

.cg-promise__card h3 {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cg-promise__card p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .cg-promise {
    padding: 76px 0 84px;
  }

  .cg-promise__inner {
    gap: 36px;
  }

  .cg-promise__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cg-promise__card {
    padding: 22px;
  }

  .cg-promise__card h3 {
    font-size: 1.08rem;
  }

  .cg-promise__card p {
    font-size: 0.92rem;
  }
}

/* Mobile (≤720px) — keep WhatsApp CTA visible (global hides .button--ghost),
   scale down badges / price / urgency */
@media (max-width: 720px) {
  .cg-page .hero__actions .button--ghost {
    display: inline-flex;
  }

  .cg-hero__badges {
    margin-top: 18px;
    gap: 8px;
  }
  .cg-hero__badge {
    font-size: 0.72rem;
    padding: 5px 13px;
  }

  .cg-hero__price {
    margin-top: 20px;
    gap: 10px;
  }
  .cg-hero__price-current {
    font-size: 1.6rem;
  }
  .cg-hero__price-normal {
    font-size: 0.95rem;
  }

  .cg-hero__urgency {
    font-size: 0.8rem;
    margin-top: 10px;
  }
}

/* === Section 3: Big Promise (dark) ======================================
   Dark section sitting between the light Problem section and the next
   light section. Four benefit cards lift slightly off --bg so the
   promise reads as a focal block. Reuses global tokens + .container.
   Scoped to .cg-page so other pages stay untouched.
*/
.cg-page .cg-promise {
  padding: 104px 0 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 196, 240, 0.10), rgba(126, 196, 240, 0) 46%),
    var(--bg);
}

.cg-promise__inner {
  display: grid;
  gap: 56px;
}

.cg-promise__header {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.cg-promise__eyebrow,
.cg-promise__title,
.cg-promise__card h3,
.cg-promise__card p {
  margin: 0;
}

.cg-promise__eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cg-promise__title {
  max-width: 820px;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}

/* 2 × 2 grid of benefit cards */
.cg-promise__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
}

.cg-promise__card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 28px 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.cg-promise__card:hover {
  border-color: rgba(126, 196, 240, 0.45);
  background: rgba(126, 196, 240, 0.06);
  transform: translateY(-2px);
}

.cg-promise__card h3 {
  font-size: 1.16rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.005em;
}

.cg-promise__card p {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--muted);
}

@media (max-width: 720px) {
  .cg-promise {
    padding: 84px 0 92px;
  }
  .cg-promise__inner {
    gap: 44px;
  }
  .cg-promise__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cg-promise__card {
    padding: 22px 22px 24px;
  }
  .cg-promise__card h3 {
    font-size: 1.08rem;
  }
  .cg-promise__card p {
    font-size: 0.92rem;
  }
}

/* === Section 4: Program Includes (light) ================================
   Light section sitting between the dark Promise (Section 3) and the next
   dark section. A two-column checklist of everything the participant gets.
   Light palette mirrors the .audience light section (Section 2): warm-white
   surface, dark slate text, amber eyebrow. Checkmark uses amber to keep the
   palette tight. Scoped to .cg-page so other pages stay untouched.
*/
.cg-page .cg-program {
  padding: 104px 0 112px;
  background: #fffdf9;
  color: #111827;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.cg-program__inner {
  display: grid;
  gap: 56px;
  max-width: 1040px;
  margin: 0 auto;
}

.cg-program__header {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.cg-program__eyebrow,
.cg-program__title,
.cg-program__item,
.cg-program__label {
  margin: 0;
}

.cg-program__eyebrow {
  color: #b7791f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cg-program__title {
  max-width: 760px;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: 0;
  color: #111827;
}

/* Two-column checklist; collapses to one column on small screens */
.cg-program__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

.cg-program__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.cg-program__item:hover {
  border-color: rgba(183, 121, 31, 0.35);
  background: #fffaf0;
  transform: translateY(-1px);
}

/* Checkmark chip — amber circle with white tick */
.cg-program__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #b7791f;
  color: #ffffff;
  margin-top: 1px;
}

.cg-program__check svg {
  width: 15px;
  height: 15px;
  display: block;
}

.cg-program__label {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 550;
  color: #111827;
  letter-spacing: -0.002em;
}

@media (max-width: 720px) {
  .cg-program {
    padding: 84px 0 92px;
  }
  .cg-program__inner {
    gap: 44px;
  }
  .cg-program__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cg-program__item {
    padding: 14px 16px;
  }
  .cg-program__title {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }
}

/* === Section 5: How It Works (dark) === */
/* Dark section after the light Program Includes (Section 4).
   Six numbered steps in a 3-col grid (desktop) -> 2-col (tablet) -> 1-col (mobile).
   Mirrors .cg-promise dark treatment + .cg-program card lift. */

.cg-works {
  padding: 104px 0 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 196, 240, 0.08), rgba(126, 196, 240, 0) 52%),
    var(--bg);
}

.cg-works__inner {
  display: grid;
  gap: 52px;
}

.cg-works__header {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.cg-works__eyebrow,
.cg-works__title,
.cg-works__step h3,
.cg-works__step p {
  margin: 0;
}

.cg-works__eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cg-works__title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--text);
}

.cg-works__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cg-works__step {
  display: grid;
  gap: 10px;
  padding: 28px 26px 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cg-works__num {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
  letter-spacing: -0.02em;
}

.cg-works__step h3 {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.cg-works__step p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(247, 242, 235, 0.72);
}

@media (max-width: 900px) {
  .cg-works__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cg-works {
    padding: 84px 0 92px;
  }
  .cg-works__inner {
    gap: 44px;
  }
  .cg-works__steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cg-works__step {
    padding: 20px 18px 22px;
  }
  .cg-works__title {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }
}

/* === Section 6: Who Is This For (light) ===
   Light section between How It Works (dark, Section 5) and Pricing (dark, Section 7).
   Reuses the cg-program light palette so the page keeps a consistent warm/cream tone
   on light sections. Audience cards lift off the cream base with a white panel + hairline border,
   same hover treatment as the program checklist. */

.cg-who {
  padding: 104px 0 112px;
  background: #fffdf9;
  color: #111827;
}

.cg-who__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  text-align: center;
}

.cg-who__header {
  max-width: 720px;
}

.cg-who__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b7791f;
}

.cg-who__title {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: #111827;
}

.cg-who__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  text-align: left;
}

.cg-who__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.cg-who__item:hover {
  border-color: rgba(183, 121, 31, 0.35);
  background: #fffaf0;
  transform: translateY(-1px);
}

.cg-who__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #b7791f;
  color: #ffffff;
}

.cg-who__icon svg {
  width: 14px;
  height: 14px;
}

.cg-who__label {
  font-size: 0.96rem;
  line-height: 1.5;
  color: #1f2937;
  padding-top: 3px;
}

@media (max-width: 900px) {
  .cg-who__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cg-who {
    padding: 84px 0 92px;
  }
  .cg-who__inner {
    gap: 36px;
  }
  .cg-who__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cg-who__item {
    padding: 14px 16px;
  }
  .cg-who__title {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }
}

/* === Section 7: Program Investment / Pricing (dark) ======================
   Dark section sitting between the light Who Is This For (Section 6) and
   the Final CTA (Section 9). A single raised matte card carries the price,
   scarcity/urgency notes, and two CTAs. Reuses global tokens + .container.
   Scoped to .cg-page so other pages stay untouched.
*/

.cg-pricing {
  padding: 104px 0 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 196, 240, 0.08), rgba(126, 196, 240, 0) 52%),
    var(--bg);
}

.cg-pricing__inner {
  display: grid;
  gap: 52px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.cg-pricing__header {
  display: grid;
  gap: 18px;
}

.cg-pricing__eyebrow,
.cg-pricing__title,
.cg-pricing__copy {
  margin: 0;
}

.cg-pricing__eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cg-pricing__title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--text);
}

.cg-pricing__copy {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Pricing card — raised matte panel */
.cg-pricing__card {
  display: grid;
  gap: 28px;
  padding: 40px 36px 44px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-pricing__price {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.cg-pricing__price-current {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.cg-pricing__price-normal {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.cg-pricing__price-label {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.cg-pricing__price-strike {
  font-size: 1.05rem;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 231, 221, 0.4);
}

.cg-pricing__notes {
  display: grid;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
}

.cg-pricing__scarcity,
.cg-pricing__urgency {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.cg-pricing__scarcity {
  color: var(--muted);
}

.cg-pricing__urgency {
  color: #f0b87e;
}

.cg-pricing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 720px) {
  .cg-pricing {
    padding: 76px 0 84px;
  }

  .cg-pricing__inner {
    gap: 36px;
  }

  .cg-pricing__card {
    padding: 30px 22px 34px;
    gap: 24px;
  }

  .cg-pricing__copy {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .cg-pricing__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cg-pricing__actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Section 8: Disclaimer / Important Note (light)
   ========================================================================== */
.cg-disclaimer {
  padding: 80px 0 92px;
  background: #fffdf9;
  color: #111827;
}

.cg-disclaimer__inner {
  display: flex;
  justify-content: center;
}

.cg-disclaimer__card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 760px;
  padding: 26px 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 3px solid #b7791f;
  border-radius: 14px;
  background: #ffffff;
}

.cg-disclaimer__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(183, 121, 31, 0.12);
  color: #b7791f;
}

.cg-disclaimer__icon svg {
  width: 16px;
  height: 16px;
}

.cg-disclaimer__body {
  flex: 1 1 auto;
}

.cg-disclaimer__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
}

.cg-disclaimer__copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4b5563;
}

@media (max-width: 720px) {
  .cg-disclaimer {
    padding: 68px 0 76px;
  }

  .cg-disclaimer__card {
    padding: 22px 20px;
    gap: 14px;
  }

  .cg-disclaimer__title {
    font-size: 1.02rem;
  }

  .cg-disclaimer__copy {
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .cg-disclaimer__card {
    flex-direction: column;
    gap: 12px;
  }
}