.hero-item{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(83,109,254,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.hero-slim{ padding:8px 0 22px; }

.hero-inner-override{ display:block !important; }
.hero-inner-slim{ padding-top:18px; }

.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; color:#cfe2ff }
.crumbs a{ color:#cfe2ff; text-decoration:none; border-bottom:1px dashed transparent }
.crumbs a:hover{ border-bottom-color:rgba(255,255,255,.2) }
.crumbs li::after{ content:"/"; opacity:.4; margin:0 6px }
.crumbs li:last-child::after{ content:"" }

.hero-top{
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px; /* smaller, fixed right column */
  gap: 26px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width:1100px){ .hero-top{ grid-template-columns:1fr } }

.intro{ display:grid; gap:10px; min-width:0; }
.title{ margin:0; font-size:clamp(28px,3.4vw,40px); line-height:1.15; max-width: 28ch; }
.sub{ margin:2px 0 4px; color:#cfe2ff; max-width: 62ch; }

.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.86rem;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#cfe2ff;
}
.chip.lvl{ border-color:rgba(0,214,200,.35); color:#76ffea; background:rgba(0,214,200,.10) }
.chip.mod{ border-color:rgba(83,109,254,.35) }
.chip.dur{ border-color:rgba(255,255,255,.18) }
.chip.lang{ border-color:rgba(140,170,210,.45); background:rgba(140,170,210,.10); color:#dbe8ff }
.chip.inc{ border-color:rgba(0,214,200,.28); background:rgba(0,214,200,.08) }

.buy-card{
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow); padding:12px; display:grid; gap:10px;
}
.price-line{ display:flex; align-items:center; justify-content:space-between; }
.price-line span{ color:#c3d5f9; font-size:.82rem; font-weight:700; letter-spacing:.2px; text-transform:uppercase }
.price{ color:#9af6e6; font-weight:900; font-size:1.06rem }
.btn-wide{ width:100%; justify-content:center }

.course-content .panel + .panel{ margin-top:16px; } 
.panel{ border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow:var(--shadow); padding:16px; }
.eyebrow{ margin:0 0 8px; font-size:.96rem; letter-spacing:.3px; text-transform:uppercase; color:#dbe8ff }

.panel-outcomes .bullets{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.panel-outcomes li{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.03) }
.panel-outcomes i{ display:grid; place-items:center; min-width:28px; height:28px; border-radius:8px; font-size:16px; color:#eaf4ff; background:rgba(83,109,254,.18); border:1px solid rgba(83,109,254,.35) }

.panel-who .twocol{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:900px){ .panel-who .twocol{ grid-template-columns:1fr } }
.panel-who .list{ margin:6px 0 0; padding-left:18px }

.syll{ border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); padding:10px 12px; margin-top:8px }
.syll summary{ cursor:pointer; font-weight:800 }
.syll summary::marker{ content:"" }
.syll summary span{ position:relative; padding-left:20px }
.syll summary span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(0deg);
  width:12px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E9F4FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/12px 12px;
  transition:transform .2s ease;
}
.syll[open] summary span::before{ transform:translateY(-50%) rotate(180deg) }
.syll ul{ margin:8px 0 0 16px }

.panel-schedule .slots{ display:grid; gap:10px }
.slot{
  display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.03)
}
@media (max-width:980px){ .slot{ grid-template-columns:1fr 1fr } .slot-cta{ grid-column:1/-1 } }
.slot i{ margin-right:6px; opacity:.9 }

.panel-instructors .inst-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

/* If odd number of instructors, make the last card full width (e.g., 1, 3, 5...) */
@media (min-width:901px){
  .panel-instructors .inst-grid > .inst-card:last-child:nth-child(odd){
    grid-column: 1 / -1;
  }
}

@media (max-width:900px){
  .panel-instructors .inst-grid{
    grid-template-columns:1fr;
  }
}

.inst-card{
  border:1px solid var(--line); border-radius:14px; padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.inst-head{ display:flex; gap:12px; align-items:center }
.avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)
}
.inst-name{ margin:0; font-size:1.06rem }
.inst-role{ margin:.5px 0 0; color:#cfe2ff }
.inst-bio{ margin:8px 0 8px }
.inst-highlights{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.inst-highlights li{ display:flex; gap:8px; align-items:center; color:#cfe2ff }
.inst-highlights i{ color:#9af6e6 }

.panel-cta .cta-flex{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.panel-cta .cta-copy h3{ margin:0 }
.panel-cta .cta-buttons{ display:flex; gap:10px; flex-wrap:wrap }

.reveal{ opacity:1 !important; transform:none !important }

#year::after{ content:""; }