.course-page { background: #faf7ff; }
.course-page .course-header { border-bottom-color: rgba(255, 255, 255, .18); }
.course-page .course-header:not(.is-scrolled) .brand, .course-page .course-header:not(.is-scrolled) .brand b, .course-page .course-header:not(.is-scrolled) .brand small, .course-page .course-header:not(.is-scrolled) .site-nav > a:not(.nav-cta) { color: #fff; }
.course-page .course-header:not(.is-scrolled) .brand-company { border-color: rgba(255, 255, 255, .72); color: #fff; }
.course-page .course-header .site-nav .is-current { color: #f1dfff; }

.course-hero { position: relative; min-height: 790px; overflow: hidden; color: #fff; background: radial-gradient(circle at 78% 32%, rgba(189, 149, 255, .72), transparent 27%), radial-gradient(circle at 17% 76%, rgba(100, 71, 217, .9), transparent 35%), linear-gradient(135deg, #241148 0%, #36176a 50%, #26104e 100%); isolation: isolate; }
.course-hero::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 6, 45, .28), transparent 62%), url("/assets/gallery/cohort3-room.webp") center / cover; mix-blend-mode: soft-light; opacity: .28; content: ""; }
.course-hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg, #000, transparent 74%); }
.course-hero-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 390px); gap: clamp(48px, 7vw, 118px); align-items: center; width: min(100% - 2 * var(--pad), var(--max)); min-height: 790px; margin: 0 auto; padding: 150px 0 86px; }
.course-kicker, .course-section-heading > p:first-child, .employee-intro p, .bonus-strip > p { margin: 0; color: #e9d8ff; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.course-hero h1 { max-width: 760px; margin: 20px 0 0; font-family: var(--display); font-size: clamp(62px, 8vw, 114px); font-weight: 900; letter-spacing: -.075em; line-height: .82; }
.course-hero h1 span { color: transparent; -webkit-text-stroke: 1.6px rgba(255, 255, 255, .92); }
.course-lead { max-width: 620px; margin: 30px 0 0; color: rgba(250, 245, 255, .86); font-size: 17px; line-height: 1.8; }
.course-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 660px; margin: 36px 0 0; border-top: 1px solid rgba(255, 255, 255, .34); border-bottom: 1px solid rgba(255, 255, 255, .34); }
.course-meta div { min-height: 88px; padding: 17px 18px 13px 0; border-right: 1px solid rgba(255, 255, 255, .22); }
.course-meta div + div { padding-left: 18px; }
.course-meta div:last-child { border-right: 0; }
.course-meta dt { color: #d9bfff; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.course-meta dd { margin: 9px 0 0; color: #fff; font-size: 13px; font-weight: 800; }
.course-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 34px; }
.course-poster-link { color: #fff; font-size: 13px; font-weight: 800; text-underline-offset: 6px; }
.course-poster-frame { position: relative; justify-self: end; width: min(100%, 360px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .62); border-radius: 24px; background: #f8f4ff; box-shadow: 24px 28px 0 rgba(15, 4, 42, .22), 0 35px 80px rgba(11, 2, 32, .45); transform: rotate(3deg); }
.course-poster-frame img { width: 100%; height: 490px; object-fit: cover; object-position: center top; }
.course-poster-frame p { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: 14px 16px; color: #fff; background: linear-gradient(90deg, rgba(44, 19, 96, .96), rgba(109, 74, 214, .96)); font-size: 10px; font-weight: 850; letter-spacing: .04em; }

.course-jump-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100% - 2 * var(--pad), var(--max)); margin: 28px auto 0; border: 1px solid #decff3; border-radius: 20px; background: #fff; box-shadow: 0 22px 55px rgba(77, 42, 143, .14); overflow: hidden; }
.course-jump-nav a { display: grid; align-content: center; gap: 10px; min-height: 118px; padding: 22px 24px; border-right: 1px solid var(--line); color: var(--blue-deep); font-family: var(--body); text-decoration: none; transition: color 180ms ease, background 180ms ease; }
.course-jump-nav a:last-child { border-right: 0; }
.course-jump-nav a:hover { color: #fff; background: var(--blue); }
.course-jump-nav span { color: var(--coral); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.course-jump-nav b { font-size: 16px; font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.course-jump-nav a:hover span { color: #ffd4e8; }

.course-section { padding: clamp(100px, 12vw, 160px) var(--pad); }
.course-section-heading { max-width: 760px; }
.course-section-heading h2, .course-final-cta h2 { margin: 18px 0 0; font-family: var(--body); font-size: clamp(42px, 5.2vw, 76px); font-weight: 700; letter-spacing: -.055em; line-height: 1.04; }
.course-section-heading > p:first-child { color: var(--blue); }
.course-section-lead { margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.course-morning { width: min(100%, 1540px); margin: 0 auto; }
.foundation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 58px; }
.foundation-card { min-height: 255px; padding: clamp(28px, 4vw, 50px); border-radius: 24px; color: #fff; background: linear-gradient(135deg, #341468, #6f4ce8); box-shadow: 0 24px 55px rgba(70, 38, 140, .18); }
.foundation-card-light { color: var(--blue-deep); background: #eee3ff; }
.foundation-card > span, .deep-dive-card > span { font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.foundation-card-light > span { color: var(--blue); }
.foundation-card h3 { margin: 34px 0 0; font-family: var(--body); font-size: clamp(31px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.foundation-card p { max-width: 410px; margin: 18px 0 0; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.75; }
.foundation-card-light p { color: var(--muted); }
.employee-intro { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-top: 76px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.employee-intro p { color: var(--blue); }
.employee-intro span { max-width: 525px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.employee-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.employee-card { position: relative; min-height: 250px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 16px 34px rgba(76, 47, 132, .08); }
.employee-card > span { position: absolute; top: 19px; right: 20px; color: #c9b9de; font-family: var(--display); font-size: 30px; letter-spacing: -.07em; }
.employee-card > b { color: var(--blue); font-size: 10px; letter-spacing: .11em; }
.employee-card h3 { margin: 41px 0 0; color: var(--blue-deep); font-family: var(--body); font-size: 25px; font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.employee-card p { margin: 17px 0 0; color: var(--muted); font-size: 13px; line-height: 1.72; }

.course-afternoon { color: #fff; background: radial-gradient(circle at 92% 14%, rgba(203, 165, 255, .48), transparent 28%), #271050; }
.course-afternoon .course-section-heading { width: min(100%, var(--max)); margin: 0 auto; }
.course-section-heading-light > p:first-child { color: #dcc9ff; }
.course-section-heading-light .course-section-lead { color: rgba(244, 237, 255, .78); }
.deep-dive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: min(100%, var(--max)); margin: 64px auto 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); border-radius: 26px; background: rgba(255, 255, 255, .22); }
.deep-dive-card { min-height: 260px; padding: clamp(28px, 4vw, 52px); background: rgba(54, 24, 107, .84); }
.deep-dive-card > span { color: #d9c5ff; }
.deep-dive-card h3 { margin: 34px 0 0; color: #fff; font-family: var(--body); font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.deep-dive-card p { max-width: 450px; margin: 18px 0 0; color: rgba(248, 243, 255, .76); font-size: 14px; line-height: 1.75; }
.deep-dive-card-workbuddy { background: linear-gradient(135deg, #8864ed, #b5a0f8); }
.deep-dive-card-workbuddy > span, .deep-dive-card-workbuddy p { color: #28144d; }
.deep-dive-card-workbuddy h3 { color: #28144d; }

.course-evening { width: min(100%, 1540px); margin: 0 auto; }
.project-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 64px 0 0; padding: 0; list-style: none; }
.project-steps li { padding: 30px 30px 34px; border-top: 3px solid var(--blue); background: #fff; box-shadow: 0 16px 40px rgba(72, 44, 129, .08); }
.project-steps span { display: block; color: #c4adf4; font-family: var(--display); font-size: 52px; line-height: 1; letter-spacing: -.08em; }
.project-steps b { display: block; margin-top: 36px; color: var(--blue-deep); font-size: 22px; }
.project-steps p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

.course-benefits { padding: clamp(94px, 10vw, 140px) var(--pad); background: #f0e8ff; }
.course-benefits > .course-section-heading, .benefit-grid, .bonus-strip { width: min(100%, var(--max)); margin-right: auto; margin-left: auto; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 52px; }
.benefit-card { min-height: 170px; padding: 26px; border-radius: 16px; background: #fff; box-shadow: 0 14px 32px rgba(81, 50, 143, .08); }
.benefit-card b { display: block; color: var(--blue-deep); font-family: var(--body); font-size: 25px; font-weight: 700; letter-spacing: -.04em; }
.benefit-card span { display: block; margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.bonus-strip { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; margin-top: 18px; padding: 27px 30px; border-radius: 18px; color: #fff; background: #2a1256; }
.bonus-strip > p { color: #ddc5ff; }
.bonus-strip ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bonus-strip li { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; font-size: 12px; font-weight: 700; }

.course-final-cta { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: clamp(72px, 9vw, 130px) var(--pad); color: #fff; background: linear-gradient(118deg, #240d4b, #5e3dc7); }
.course-final-cta > div { width: min(100%, var(--max)); margin-left: max(0px, calc((100% - var(--max)) / 2)); }
.course-final-cta p { margin: 0; color: #e5d2ff; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.course-final-cta h2 { max-width: 770px; margin-top: 18px; }
.course-final-cta .button { flex: 0 0 auto; margin-right: max(0px, calc((100% - var(--max)) / 2)); }

@media (max-width: 1040px) {
  .course-hero-shell { grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: 44px; }
  .employee-grid, .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-final-cta { align-items: center; }
}

@media (max-width: 820px) {
  .course-page .course-header:not(.is-scrolled) .site-nav > a:not(.nav-cta) { color: #243652; }
  .course-page .course-header .site-nav .is-current { color: var(--blue); }
  .course-hero { min-height: 860px; }
  .course-hero-shell { grid-template-columns: 1fr; min-height: 860px; padding-top: 122px; }
  .course-poster-frame { display: none; }
  .course-jump-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
  .course-jump-nav a:nth-child(2) { border-right: 0; }
  .course-jump-nav a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-final-cta { display: block; }
  .course-final-cta .button { margin: 34px 0 0; }
}

@media (max-width: 620px) {
  .course-hero { min-height: 795px; }
  .course-hero-shell { min-height: 795px; padding: 110px 0 74px; }
  .course-kicker { font-size: 9px; }
  .course-hero h1 { font-size: clamp(42px, 13.4vw, 62px); line-height: 1.1; }
  .course-lead { margin-top: 24px; font-size: 14px; line-height: 1.75; }
  .course-meta { margin-top: 26px; }
  .course-meta div { min-height: 78px; padding: 14px 10px 10px 0; }
  .course-meta div + div { padding-left: 10px; }
  .course-meta dd { font-size: 11px; line-height: 1.35; }
  .course-hero-actions { gap: 16px; margin-top: 26px; }
  .course-hero-actions .button { width: 100%; }
  .course-poster-link { margin-left: 2px; }
  .course-jump-nav { width: calc(100% - 28px); }
  .course-jump-nav a { min-height: 96px; padding: 18px 16px; }
  .course-jump-nav b { font-size: 14px; }
  .course-section { padding: 88px var(--pad); }
  .course-section-heading h2, .course-final-cta h2 { font-size: clamp(40px, 12vw, 58px); line-height: .97; }
  .course-section-lead { margin-top: 20px; font-size: 14px; line-height: 1.75; }
  .foundation-grid, .deep-dive-grid { grid-template-columns: 1fr; margin-top: 38px; }
  .foundation-card { min-height: 230px; padding: 30px; }
  .foundation-card h3 { margin-top: 28px; font-size: 36px; }
  .employee-intro { display: block; margin-top: 58px; }
  .employee-intro span { display: block; margin-top: 16px; }
  .employee-grid, .benefit-grid { grid-template-columns: 1fr; }
  .employee-card { min-height: 210px; }
  .deep-dive-card { min-height: 230px; padding: 30px; }
  .deep-dive-card h3 { margin-top: 27px; font-size: 35px; }
  .project-steps { grid-template-columns: 1fr; margin-top: 40px; }
  .project-steps li { padding: 26px; }
  .project-steps b { margin-top: 24px; }
  .benefit-grid { margin-top: 38px; }
  .benefit-card { min-height: 126px; }
  .bonus-strip { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .course-final-cta { padding-top: 78px; padding-bottom: 100px; }
}