:root {
  --color-primary:    #1A56DB;
  --color-secondary:  #00C896;
  --color-dark:       #0F1B3C;
  --color-surface:    #F0F4FF;
  --color-white:      #FFFFFF;
  --color-text:       #1A202C;
  --color-text-muted: #6B7280;
  --color-success:    #00C896;
  --color-error:      #EF4444;
  --color-border:     #E2E8F0;
  --color-star:       #F59E0B;

  --font-heading: "Plus Jakarta Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Stop iOS inflating body text when the phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A long email address or URL wraps instead of widening the page. */
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; }
p { margin: 0; }
ul { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .container { padding: 0 1.25rem; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-primary); color: #fff; padding: .7rem 1.1rem;
  font-family: var(--font-heading); font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ══ ANNOUNCEMENT BAR ══ */
.announce {
  background: var(--color-dark); color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .25rem .75rem; padding: .6rem 1.25rem; text-align: center;
  font-family: var(--font-heading); font-size: .8125rem; font-weight: 600;
}
.announce .hl { color: var(--color-secondary); font-weight: 800; }
.announce .sep { color: rgba(255,255,255,0.25); }
@media (max-width: 640px) { .announce { font-size: .75rem; } .announce .sep { display: none; } }

/* ══ HEADER — one bar: logo, on-page section nav, enroll CTA ══ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(15,27,60,0.09); }
.header-row {
  max-width: 1280px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; height: 72px; gap: 1.5rem;
}
.brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand img { height: 34px; width: auto; }
.section-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.section-nav a {
  position: relative; font-family: var(--font-heading); font-size: .875rem; font-weight: 600;
  color: var(--color-text); padding: .55rem .8rem; text-decoration: none;
  white-space: nowrap; transition: color .2s;
}
.section-nav a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .1rem; height: 2px;
  background: var(--color-secondary); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .22s;
}
.section-nav a:hover { color: var(--color-primary); }
.section-nav a.active { color: var(--color-primary); }
.section-nav a.active::after { transform: scaleX(1); }
.header-cta {
  flex-shrink: 0; padding: .55rem 1.4rem; background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px; font-family: var(--font-heading); font-weight: 700;
  font-size: .875rem; cursor: pointer; transition: all .2s;
}
.header-cta:hover { background: #1648C0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,86,219,0.3); }
.hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none;
  border: 1.5px solid var(--color-border); border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.mobile-drawer {
  display: none; background: var(--color-white); border-top: 1px solid var(--color-border);
  padding: 1rem 1.5rem 1.5rem; flex-direction: column; gap: .15rem;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer a {
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  color: var(--color-text); padding: .7rem .75rem; border-radius: 8px; text-decoration: none;
}
.mobile-drawer a.active { color: var(--color-primary); background: var(--color-surface); }
.drawer-cta { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--color-border); }
.drawer-cta button {
  width: 100%; padding: .8rem 1.5rem; background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px; font-family: var(--font-heading); font-weight: 700;
  font-size: .9375rem; cursor: pointer;
}
@media (max-width: 1080px) { .section-nav { display: none; } .hamburger { display: flex; } .header-row { margin-left: auto; } }
@media (max-width: 640px) {
  .header-row { padding: 0 1.25rem; gap: 1rem; }
  .brand img { height: 28px; }
  .header-cta { padding: .5rem 1rem; font-size: .8125rem; }
}

/* ══ HERO ══ */
.hero { position: relative; min-height: 82vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg    { position: absolute; inset: 0; background: linear-gradient(135deg, #071525 0%, #0C2040 40%, #0A2E50 65%, #071D3A 100%); }
.hero-veil  { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,21,37,0.9) 0%, rgba(7,21,37,0.7) 42%, rgba(7,21,37,0.4) 68%, rgba(7,21,37,0.15) 100%); }
.hero-dots  { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.hero-glow1 { position: absolute; top: -20%; right: 15%; width: 560px; height: 560px; background: radial-gradient(ellipse, rgba(26,86,219,0.13) 0%, transparent 65%); pointer-events: none; }
.hero-glow2 { position: absolute; bottom: -10%; right: -5%; width: 400px; height: 400px; background: radial-gradient(ellipse, rgba(0,200,150,0.07) 0%, transparent 65%); pointer-events: none; }
.hero-grid {
  position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 5rem 2rem; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,200,150,0.12); border: 1px solid rgba(0,200,150,0.3);
  color: var(--color-secondary); font-family: var(--font-heading); font-size: .75rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .875rem; border-radius: 100px; margin-bottom: 1.5rem;
}
.hero-pill span.dot { width: 6px; height: 6px; background: var(--color-secondary); border-radius: 50%; display: inline-block; }
.hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1rem;
}
.grad-text {
  background: linear-gradient(90deg, #4F8EFF, #00C896);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-desc { font-size: clamp(.9375rem, 1.5vw, 1.0625rem); color: rgba(255,255,255,0.68); line-height: 1.65; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.btn-enroll-lg {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-primary); color: #fff; border: none; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  padding: .875rem 2rem; cursor: pointer; transition: all .2s;
}
.btn-enroll-lg:hover { background: #1648C0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,86,219,0.3); }
.hero-meta { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; font-size: .8125rem; color: rgba(255,255,255,0.6); }
.hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta svg { flex-shrink: 0; color: var(--color-secondary); opacity: .9; }
.hero-card-wrap { display: flex; align-items: center; justify-content: center; }
.hero-card {
  position: relative; width: 100%; max-width: 520px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.3), 0 32px 80px rgba(0,0,0,0.55);
  transform: translateY(-10px);
}
.hero-card-inner {
  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden;
  background: linear-gradient(130deg, #0C1C35 0%, #163568 40%, #0C4558 80%);
  display: flex; align-items: center; justify-content: center;
}
.hero-card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%); }
.hero-card-tag {
  position: absolute; top: .875rem; left: .875rem; background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.8); font-family: var(--font-heading); font-size: .6875rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 100px; backdrop-filter: blur(4px);
}
/* video facade — poster is pure CSS, the YouTube iframe loads only on click */
.video-facade {
  display: block; width: 100%; padding: 0; margin: 0; border: none;
  background: none; color: inherit; cursor: pointer; text-align: center;
}
.video-body {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: .875rem; padding: 1.5rem;
}
.play-btn {
  width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,0.95);
  display: grid; place-items: center; color: var(--color-primary);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35); transition: transform .25s, background .25s;
}
.play-btn svg { margin-left: 4px; }
/* Shown while no video is attached: the mark is decorative, so it must not
   look clickable — no pointer cursor, no hover lift, slightly receded. */
.play-btn-idle { cursor: default; background: rgba(255,255,255,0.82); }
.video-facade:hover .play-btn,
.video-facade:focus-visible .play-btn { transform: scale(1.09); background: #fff; }
.video-caption {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.video-price {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary);
}
.hero-video-frame { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; }
  .hero-card { transform: none; }
}

/* ══ STATS BAR ══ */
.stats-bar { background: var(--color-dark); border-top: 1px solid rgba(255,255,255,0.06); }
.stats-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.stat-cell {
  padding: 1.5rem 1.25rem; border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: .25rem;
}
.stat-cell:last-child { border-right: none; }
.stat-icon { color: var(--color-secondary); margin-bottom: .25rem; display: flex; }
.stat-label {
  font-size: .75rem; color: rgba(255,255,255,0.4); font-family: var(--font-heading);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.stat-value { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #fff; }
.stat-value.hl { color: var(--color-secondary); }
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .stat-cell:nth-child(2n) { border-right: none; }
  .stat-cell:last-child { grid-column: span 2; border-right: none; border-bottom: none; }
}

/* ══ SECTIONS ══ */
.section { padding: 5rem 0; }
.section-white   { background: var(--color-white); }
.section-surface { background: var(--color-surface); }
.section-dark    { background: var(--color-dark); }
.section-head { margin-bottom: 3rem; }
.section-head.center { text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: .75rem;
}
.section-head h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; color: var(--color-dark); line-height: 1.2;
}
.section-dark .section-head h2 { color: #fff; }
@media (max-width: 640px) { .section { padding: 3.5rem 0; } .section-head { margin-bottom: 2rem; } }

.section-head .section-lead {
  max-width: 620px; margin: .875rem auto 0; font-size: .9375rem;
  color: var(--color-text-muted); line-height: 1.65;
}
.section-head:not(.center) .section-lead { margin-left: 0; }

/* ══ BENEFITS ══ */
/* min() keeps the 280px track from forcing the page wider than a 320px phone. */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1.25rem; }
.benefit-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 1.75rem; display: flex; gap: 1rem; transition: transform .2s, box-shadow .2s;
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.07); }
.benefit-icon {
  width: 44px; height: 44px; background: rgba(26,86,219,0.08); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary);
}
.benefit-title { font-family: var(--font-heading); font-size: .9375rem; font-weight: 700; color: var(--color-dark); margin-bottom: .35rem; }
.benefit-desc { font-size: .875rem; color: var(--color-text-muted); line-height: 1.6; }
.section-cta { text-align: center; margin-top: 2.5rem; }
.btn-enroll-md {
  padding: .875rem 2rem; background: var(--color-primary); color: #fff; border: none;
  border-radius: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all .2s;
}
.btn-enroll-md:hover { background: #1648C0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,86,219,0.3); }
.cta-note { font-size: .8125rem; color: var(--color-text-muted); margin-top: .75rem; }

/* ══ CURRICULUM ══ */
.phase-label {
  display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1rem;
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary);
}
.phase-label:first-of-type { margin-top: 0; }
.phase-label::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.module-list { display: flex; flex-direction: column; gap: 1rem; }
.module {
  border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.module.open { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,86,219,0.06); }
.module-head {
  width: 100%; display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem;
  background: none; border: none; cursor: pointer; text-align: left;
}
.module-num {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-primary);
  opacity: .25; line-height: 1; flex-shrink: 0; width: 2.5rem; text-align: right;
}
.module.open .module-num { opacity: .6; }
.module-main { flex: 1; }
.module-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-dark); margin-bottom: .35rem; }
.module.open .module-title { color: var(--color-primary); }
.module-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
.module-meta span {
  font-size: .75rem; font-family: var(--font-heading); font-weight: 600;
  color: var(--color-text-muted); display: flex; align-items: center; gap: .3rem;
}
.module-chevron {
  width: 24px; height: 24px; border: 1.5px solid var(--color-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--color-text-muted); font-size: 1.125rem; line-height: 1; transition: all .2s; margin-top: .1rem;
}
.module.open .module-chevron { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.module-body { display: none; padding: 0 1.5rem 1.5rem 4.75rem; }
.module.open .module-body { display: block; }
.module-body ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.module-body li { font-size: .875rem; color: var(--color-text-muted); line-height: 1.6; }
.module-body li::marker { color: var(--color-secondary); }
.outcome-box {
  background: rgba(0,200,150,0.07); border-left: 3px solid var(--color-secondary);
  border-radius: 0 8px 8px 0; padding: .875rem 1.125rem;
}
.outcome-box .lbl {
  font-family: var(--font-heading); font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #00A87D; display: block; margin-bottom: .3rem;
}
.outcome-box p { font-size: .875rem; color: var(--color-text-muted); line-height: 1.65; }
@media (max-width: 640px) {
  .module-head { padding: 1.25rem 1rem; gap: .875rem; }
  .module-num { width: 1.75rem; font-size: 1.25rem; }
  .module-body { padding: 0 1rem 1.25rem 1rem; }
}
.curriculum-tools { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.btn-outline {
  padding: .55rem 1.25rem; background: none; border: 1.5px solid var(--color-border);
  border-radius: 8px; font-family: var(--font-heading); font-weight: 700; font-size: .8125rem;
  color: var(--color-dark); cursor: pointer; transition: all .2s;
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.inline-cta {
  margin-top: 2.5rem; background: linear-gradient(135deg, var(--color-surface), #E8F0FE);
  border: 1px solid rgba(26,86,219,0.15); border-radius: 14px; padding: 1.75rem 2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.inline-cta-title { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; color: var(--color-dark); }
.inline-cta-sub { font-size: .875rem; color: var(--color-text-muted); margin-top: .25rem; }
.btn-enroll-sm {
  padding: .65rem 1.5rem; background: var(--color-primary); color: #fff; border: none;
  border-radius: 8px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; transition: background .2s;
}
.btn-enroll-sm:hover { background: #1648C0; }

/* ══ INSTRUCTOR ══ */
/* Two trainers sit side by side from 900px up, and stack below it. Each card
   is photo-on-top rather than photo-beside, so a pair still fits comfortably. */
.instructor-wrap {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  max-width: 1080px; margin: 0 auto;
}
@media (min-width: 760px) { .instructor-wrap { grid-template-columns: repeat(2, 1fr); } }
.instructor-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.instructor-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
/* A 5:4 panel rather than a fixed height. The old 520x280 box was a 1.86:1
   letterbox, which showed barely 40% of a portrait photo's height — enough to
   cut off the top of a head and all of the shoulders. Tying height to width
   also means the crop stays consistent at every screen size. */
.instructor-photo {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-dark), var(--color-primary));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 5 / 4; min-height: 240px; gap: .5rem;
}
/* Sits on top of the initials; if the file is missing, onerror hides it and the initials show through. */
/* 8% from the top keeps headroom above the subject in both portrait and
   square source photos, instead of cropping into the hairline. */
.instructor-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 8%;
}
.instructor-initials { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: rgba(255,255,255,0.25); }
.instructor-photo small {
  font-family: var(--font-heading); font-size: .625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,0.3); text-align: center; padding: 0 1rem; line-height: 1.5;
}
/* Grows to fill, so the LinkedIn link lines up across cards of unequal text. */
.instructor-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.instructor-body .instructor-link { margin-top: auto; align-self: flex-start; }
.instructor-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--color-dark); margin-bottom: .25rem; }
.instructor-role { font-size: .875rem; color: var(--color-primary); font-weight: 600; margin-bottom: .875rem; }
.instructor-body p { font-size: .875rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: .875rem; }
.cred-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.cred-chip {
  font-family: var(--font-heading); font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  background: var(--color-surface); color: var(--color-primary);
  border-radius: 100px; padding: .3rem .75rem;
}
.instructor-link {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-heading);
  font-size: .8125rem; font-weight: 700; color: var(--color-primary); text-decoration: none;
}
.instructor-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .instructor-body { padding: 1.5rem 1.25rem; }
}

/* ══ NUMBERS ══ */
.numbers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden;
}
.number-cell { background: rgba(255,255,255,0.03); padding: 2.5rem 1.5rem; text-align: center; }
.number-value {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800;
  color: #fff; line-height: 1; margin-bottom: .625rem;
}
.number-value em { font-style: normal; color: var(--color-secondary); }
.number-label { font-size: .875rem; color: rgba(255,255,255,0.5); line-height: 1.45; }
@media (max-width: 720px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }

/* ══ PRICING ══ */
.offer {
  max-width: 720px; margin: 0 auto; background: #fff; overflow: hidden;
  border: 1.5px solid var(--color-primary); border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(26,86,219,0.07), 0 16px 44px rgba(15,27,60,0.08);
}
.offer-flag {
  background: linear-gradient(90deg, var(--color-primary), #0D3DB8);
  color: #fff; text-align: center; padding: .65rem 1rem;
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.offer-main { padding: 2.25rem 2rem; text-align: center; }
.price-label {
  font-size: .75rem; font-family: var(--font-heading); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem;
}
.offer-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .25rem .875rem; }
.offer-was {
  font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700;
  color: var(--color-text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.offer-now {
  font-family: var(--font-heading); font-size: clamp(2.75rem, 7vw, 3.75rem); font-weight: 800;
  color: var(--color-primary); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.offer-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: .625rem; margin-top: 1.125rem; }
.badge-off {
  display: inline-flex; align-items: center; gap: .3rem; background: var(--color-error); color: #fff;
  font-family: var(--font-heading); font-size: .875rem; font-weight: 800; letter-spacing: .03em;
  padding: .375rem 1rem; border-radius: 100px;
}
.price-save {
  display: inline-flex; align-items: center; gap: .25rem; background: rgba(0,200,150,0.12);
  color: #00A87D; font-family: var(--font-heading); font-size: .875rem; font-weight: 700;
  padding: .375rem 1rem; border-radius: 100px;
}
.offer-note { font-size: .9375rem; color: var(--color-text-muted); line-height: 1.65; margin-top: 1.25rem; }
.offer-note strong { font-family: var(--font-heading); color: var(--color-dark); font-weight: 700; }

/* countdown to cohort start */
.countdown { background: var(--color-surface); border-top: 1px dashed var(--color-border); padding: 1.5rem 2rem; text-align: center; }
.countdown-label {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .875rem;
}
.countdown-cells { display: flex; justify-content: center; flex-wrap: wrap; gap: .625rem; }
.cd-cell { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: .625rem .5rem; min-width: 72px; }
.cd-num {
  font-family: var(--font-heading); font-size: 1.625rem; font-weight: 800; color: var(--color-dark);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cd-unit {
  font-size: .625rem; font-family: var(--font-heading); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-muted); margin-top: .35rem;
}
.countdown.started .countdown-cells { display: none; }
@media (max-width: 640px) {
  .offer-main { padding: 1.75rem 1.25rem; }
  .countdown { padding: 1.25rem; }
  .cd-cell { min-width: 62px; padding: .5rem .375rem; }
  .cd-num { font-size: 1.25rem; }
}
.inclusions { max-width: 860px; margin: 2rem auto 0; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; justify-content: center; }
.inclusion { display: flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--color-text-muted); }
.inclusion svg { color: var(--color-secondary); flex-shrink: 0; }

/* ══ REVIEWS ══ */
.written-reviews { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 660px)  { .written-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .written-reviews { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  padding: 1.5rem; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.review-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.07); }
.stars { display: flex; gap: .2rem; margin-bottom: .75rem; }
/* Optional — only reviews that came with their own headline carry one. */
.review-title {
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 800;
  color: var(--color-dark); line-height: 1.4; margin-bottom: .5rem;
}
.review-text {
  font-size: .9375rem; color: var(--color-text-muted); line-height: 1.7;
  font-style: italic; margin-bottom: 1.25rem; flex: 1;
}
.reviewer { display: flex; align-items: center; gap: .75rem; }
.reviewer-avatar {
  position: relative; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: grid; place-items: center; color: rgba(255,255,255,0.85);
}
/* Photo sits on top; if the file is missing, onerror drops it and the silhouette shows. */
.reviewer-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reviewer-name { font-family: var(--font-heading); font-size: .875rem; font-weight: 700; color: var(--color-dark); }
.reviewer-role { font-size: .8125rem; color: var(--color-text-muted); }

/* ══ FAQ ══ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item { border: 1.5px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.faq-item.open { border-color: var(--color-primary); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  color: var(--color-dark); transition: color .2s;
}
.faq-item.open .faq-q { color: var(--color-primary); }
.faq-icon {
  width: 24px; height: 24px; border: 1.5px solid var(--color-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--color-text-muted); font-size: 1.125rem; line-height: 1; transition: all .2s;
}
.faq-item.open .faq-icon { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.faq-a { display: none; padding: 0 1.5rem 1.25rem; font-size: .9375rem; color: var(--color-text-muted); line-height: 1.7; }
.faq-item.open .faq-a { display: block; }

/* ══ FINAL CTA ══ */
.final-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0D3DB8 50%, #0B2E8A 100%);
  padding: 5rem 0; position: relative; overflow: hidden;
}
.final-cta .blob1 { position: absolute; bottom: -30%; right: -10%; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; }
.final-cta .blob2 { position: absolute; top: -20%; left: -5%; width: 300px; height: 300px; border-radius: 50%; background: rgba(0,200,150,0.07); pointer-events: none; }
.final-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 2rem; text-align: center; }
.final-cta h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 1rem; }
.final-cta p { font-size: 1.0625rem; color: rgba(255,255,255,0.72); line-height: 1.65; margin-bottom: 2rem; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.btn-white {
  padding: .875rem 2.5rem; background: #fff; color: var(--color-primary); border: none;
  border-radius: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all .2s;
}
.btn-white:hover { background: var(--color-surface); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn-outline-white {
  padding: .875rem 2rem; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.4);
  border-radius: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  text-decoration: none; display: inline-flex; align-items: center; transition: all .2s;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-outline-white svg { margin-right: .5rem; }
.final-cta-contact { margin-top: 1.75rem; font-size: .9375rem; color: rgba(255,255,255,0.72); }
.final-cta-contact a { color: #fff; font-family: var(--font-heading); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); }
.final-cta-contact a:hover { border-bottom-color: #fff; }

/* ══ FOOTER — lean, single-page ══ */
/* ══ FOOTER ══
   Matches the website footer (.wsite-footer in web.css): dark ground, columns
   with uppercase headings, social row, bottom bar. Deliberately a separate
   set of rules rather than a shared class — the two footers hold different
   things. The site's links go to other PAGES; a landing page's go to sections
   of itself, and it has an enrollment funnel to protect. Sharing one class
   would mean every future change to one silently altering the other. What is
   shared is the look, and that comes from the same brand variables. */
.footer { background: var(--color-dark); color: rgba(255,255,255,.62); padding: 3.25rem 0 1.5rem; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

/* The page-section column is widened at the expense of the brand column, so
   the links have room to sit two or three to a row. Given a narrow column they
   wrap one per line and the footer is as tall as it ever was. */
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.25fr 1.35fr 1.15fr;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h3 {
  font-size: .875rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.1rem;
}
/* The stacked logo already carries the tagline in the artwork, so repeating it
   as text below cost a line for nothing. Dropped from the markup; the brand
   colour it used now lives on nothing, which is why .footer-tagline is gone. */
.footer-brand img { height: 74px; width: auto; margin-bottom: .9rem; }
.footer-blurb { font-size: .9375rem; line-height: 1.65; max-width: 21rem; }

.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.72);
  transition: background .18s, color .18s;
}
.footer-social a:hover { background: var(--color-primary); color: #fff; }

/* Wraps across the column rather than stacking one per line — seven links in a
   single file was most of the footer's height on its own. */
.footer-links { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; }
.footer-links a {
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 500;
  color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s;
  white-space: nowrap;
}
.footer-links a:hover { color: var(--color-secondary); }

.footer-contact { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.footer-contact span, .footer-contact a {
  display: inline-flex; align-items: flex-start; gap: .55rem;
  font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.62); text-decoration: none;
}
.footer-contact a { transition: color .2s; }
.footer-contact a:hover { color: var(--color-secondary); }
/* The icons ship with a hard-coded green stroke/fill from before the footer
   went dark. currentColor cannot be used without editing every one, so they
   are simply left green — which still reads correctly on the navy. */
.footer-contact svg { flex-shrink: 0; margin-top: .15rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .75rem; margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-bottom p { font-size: .875rem; color: rgba(255,255,255,.55); }

@media (max-width: 640px) {
  .footer-inner { padding: 0 1.25rem; }
  .footer-brand img { height: 78px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ══ MODAL ══ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(15,27,60,0.7);
  backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 20px; width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  -webkit-overflow-scrolling: touch;
}
/* On phones, vh ignores the browser chrome, so a 92vh modal can run off the
   bottom of what you can actually see. dvh measures the visible area. */
@supports (max-height: 92dvh) { .modal { max-height: 92dvh; } }
.modal-header {
  padding: 1.75rem 1.75rem 1rem; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.modal-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--color-dark); }
.modal-sub { font-size: .875rem; color: var(--color-text-muted); margin-top: .25rem; }
.modal-close {
  width: 36px; height: 36px; border: none; background: var(--color-surface); border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; color: var(--color-text-muted); flex-shrink: 0;
}
.modal-close:hover { background: #E2E8F0; }
.modal-form { padding: 1.5rem 1.75rem 1.75rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-family: var(--font-heading); font-size: .875rem; font-weight: 600;
  color: var(--color-dark); margin-bottom: .5rem;
}
.form-group label .opt { color: var(--color-text-muted); font-weight: 400; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: .6875rem .875rem; border: 1.5px solid var(--color-border);
  border-radius: 8px; font-family: var(--font-body); font-size: .9375rem;
  color: var(--color-text); outline: none; background: #fff; transition: border-color .15s;
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); }
.form-error { font-size: .8125rem; color: var(--color-error); margin-top: .375rem; display: none; }
.form-group.invalid input, .form-group.invalid select { border-color: var(--color-error); }
.form-group.invalid .form-error { display: block; }
.payment-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.pay-option {
  display: flex; align-items: center; gap: 10px; cursor: pointer; padding: .625rem .875rem;
  border: 1.5px solid var(--color-border); border-radius: 8px; background: #fff; transition: all .15s;
}
.pay-option:has(input:checked) { border-color: var(--color-primary); background: rgba(26,86,219,0.04); }
.pay-option input { width: auto; accent-color: var(--color-primary); }
.pay-option span { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-dark); }
.pay-details {
  background: var(--color-surface); border-radius: 10px; padding: .875rem 1rem;
  margin-bottom: 1rem; font-size: 13px; display: none;
}
.pay-details.show { display: block; }
.pay-details .head {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.divider { border-top: 1px solid var(--color-border); padding-top: 1.25rem; margin-top: .5rem; }
.btn-submit {
  width: 100%; padding: .875rem 2rem; background: var(--color-primary); color: #fff; border: none;
  border-radius: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background .2s;
}
.btn-submit:hover:not(:disabled) { background: #1648C0; }
.btn-submit:disabled { opacity: .7; cursor: not-allowed; }
.modal-success { text-align: center; padding: 2.5rem 2rem; display: none; }
.modal-success.show { display: block; }
.success-icon {
  width: 64px; height: 64px; background: rgba(0,200,150,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--color-secondary);
}
.success-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--color-dark); margin-bottom: .5rem; }
.modal-success p { font-size: .9375rem; color: var(--color-text-muted); line-height: 1.65; }
.success-ref { font-family: var(--font-heading); font-size: .875rem; color: var(--color-dark); margin-top: .75rem; font-weight: 700; }
/* ══ FORM ALERT (server-side errors) ══ */
.form-alert {
  display: none;
  background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 8px;
  color: #991B1B; font-size: .875rem; line-height: 1.5;
  padding: .75rem 1rem; margin-bottom: 1.25rem;
}
.form-alert.show { display: block; }

/* ══ MOBILE REFINEMENTS ══
   Section-level breakpoints live with their sections above. What follows is
   the cross-cutting phone behaviour that does not belong to any one block. */

/* Touch targets. The WCAG 2.1 AA floor is 44x44; several controls sat under
   it because they were sized for a mouse pointer. */
@media (pointer: coarse) {
  .hamburger      { width: 44px; height: 44px; }
  .modal-close    { width: 44px; height: 44px; }
  .mobile-drawer a { padding: .8rem .75rem; }
  .footer-links a { padding: .35rem 0; }
}

@media (max-width: 640px) {
  /* iOS zooms the whole page when you focus an input whose text is under
     16px. Bumping to exactly 16px keeps the form usable one-handed. */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; }

  /* Full-width buttons: easier to hit, and they stop looking stranded once
     the surrounding flex row has wrapped. */
  .inline-cta { padding: 1.5rem 1.25rem; }
  .inline-cta .btn-enroll-sm,
  .final-cta-actions .btn-white,
  .final-cta-actions .btn-outline-white { width: 100%; justify-content: center; text-align: center; }
  .final-cta-actions { flex-direction: column; }

  .modal-header { padding: 1.25rem 1.25rem .875rem; }
  .modal-form   { padding: 1.25rem; }
  .modal-success { padding: 2rem 1.25rem; }

  /* Sized by width as well as by pointer type: pointer detection is not
     reliable everywhere, and these are the two controls small enough to
     miss on a phone. */
  .modal-close { width: 44px; height: 44px; }
  .hamburger   { width: 44px; height: 44px; }

  /* The curriculum "expand all" control reads better centred once it is the
     only thing on its row. */
  .curriculum-tools { justify-content: center; }

  .faq-q { padding: 1rem 1.125rem; }
  .faq-a { padding: 0 1.125rem 1.125rem; }
}

/* Very narrow phones (320–360px), where fixed minimums start to bite.
   At 320px the header's three fixed-width children (logo 153, CTA 98,
   hamburger 40) plus two 16px gaps came to 323px against 288px of usable
   width — the one place the page actually overflowed. Trimming all three
   brings it to roughly 270px with room to spare. */
@media (max-width: 380px) {
  .container      { padding: 0 1rem; }
  .footer-inner   { padding: 0 1rem; }
  .header-row     { padding: 0 .75rem; gap: .625rem; }
  .brand img      { height: 24px; }
  .header-cta     { padding: .45rem .7rem; font-size: .75rem; }
  .cd-cell        { min-width: 56px; }
  .cred-chip      { font-size: .625rem; padding: .25rem .625rem; }
  .reviewer-name  { font-size: .8125rem; }
}

/* Landscape phones: the hero and final CTA waste most of a short screen on
   vertical padding, pushing the actual content out of view. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-grid { padding: 2.5rem 1.25rem; }
  .final-cta { padding: 3rem 0; }
  .modal     { max-height: 96vh; }
}
@supports (max-height: 96dvh) {
  @media (max-height: 480px) and (orientation: landscape) {
    .modal { max-height: 96dvh; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PMP BOOTCAMP ADDITIONS
   Blocks the fellowship page has no use for. Everything else on the PMP page
   reuses the components above, so the two pages stay visually identical.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ CURRICULUM: two classes inside one week ══
   Each module is a week, and a week is two sessions. Without a label the
   twenty-two classes read as one undifferentiated list of topics. */
.class-block { margin-bottom: 1.25rem; }
.class-block:last-of-type { margin-bottom: 1.1rem; }
.class-label {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  font-family: var(--font-heading); font-size: .8125rem; font-weight: 700;
  color: var(--color-dark);
}
.class-label .n {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: 6px;
  background: var(--color-surface); color: var(--color-primary);
  font-size: .6875rem; font-weight: 800; letter-spacing: .02em;
}
.module-body .class-block ul { margin-bottom: 0; }

/* ══ SINGLE INSTRUCTOR ══
   The two-column grid above is right for a pair. One card stretched across it
   gives a 1080px-wide photo panel, so cap the width and centre instead. */
.instructor-wrap.single { max-width: 720px; }
@media (min-width: 760px) { .instructor-wrap.single { grid-template-columns: 1fr; } }

/* ══ CREDENTIAL STRIP ══
   Stands in for testimonials while the first PMP batch has not run yet.
   Verifiable facts only — no invented quotes. */
.trust-strip {
  max-width: 1080px; margin: 2.5rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
}
.trust-cell { background: #fff; padding: 1.5rem 1.25rem; text-align: center; }
.trust-value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.trust-label { font-size: .8125rem; color: var(--color-text-muted); margin-top: .45rem; line-height: 1.5; }

/* ══ TRADEMARK NOTICE ══
   PMI requires attribution wherever their marks appear. */
.legal-note {
  max-width: 720px; margin: 1.5rem auto 0; text-align: center;
  font-size: .75rem; color: var(--color-text-muted); line-height: 1.6;
}
/* .footer-legal is gone — the PMI trademark notice it styled was removed from
   the PMP footer. Left as a note rather than a dead rule so the next person
   does not wonder where the class went. */

/* The inline-CTA button is an <a> on the PMP page (it opens WhatsApp rather
   than the modal), so the button styling has to work on a link too. */
a.btn-enroll-sm { display: inline-flex; align-items: center; text-decoration: none; }

/* ══ INSTRUCTOR — PHOTO BESIDE THE TEXT ══
   The stacked card above is right for a pair of trainers. A single instructor
   carrying the whole course gets a wider portrait next to the bio, so the
   photo is not a 720px-wide letterbox above three paragraphs. Below 760px it
   falls back to photo-on-top, because side-by-side on a phone leaves neither
   half readable. */
.instructor-card.side { flex-direction: column; }
.instructor-card.side .instructor-photo { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .instructor-card.side { display: grid; grid-template-columns: 300px 1fr; align-items: stretch; }
  .instructor-card.side .instructor-photo { aspect-ratio: auto; height: 100%; min-height: 100%; }
}
@media (min-width: 1000px) {
  .instructor-card.side { grid-template-columns: 360px 1fr; }
}
/* The single card is wider than the stacked pair, so it needs the room. */
.instructor-wrap.wide { max-width: 1080px; }
@media (min-width: 760px) { .instructor-wrap.wide { grid-template-columns: 1fr; } }

/* ══ INSTALLMENT NOTE ══
   Sits under the headline price in the offer card. Deliberately quieter than
   the price itself — it is an option, not the offer. */
.installment {
  margin-top: 1.125rem; padding: .875rem 1rem; border-radius: 10px;
  background: rgba(0,200,150,0.07); border: 1px dashed rgba(0,200,150,0.45);
}
.installment-head {
  font-family: var(--font-heading); font-size: .875rem; font-weight: 700; color: var(--color-dark);
}
.installment-sub { font-size: .8125rem; color: var(--color-text-muted); margin-top: .25rem; line-height: 1.55; }

/* Payment-plan chooser in the enrollment modal. */
.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .plan-options { grid-template-columns: 1fr; } }
.plan-option {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: .6875rem .8125rem;
  border: 1.5px solid var(--color-border); border-radius: 8px; background: #fff; transition: all .15s;
}
.plan-option:has(input:checked) { border-color: var(--color-primary); background: rgba(26,86,219,0.04); }
.plan-option input { width: auto; margin-top: 2px; accent-color: var(--color-primary); flex-shrink: 0; }
.plan-option b { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-dark); display: block; }
.plan-option small { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; display: block; margin-top: 1px; }