*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7f7f5;--surface:#ffffff;--border:#eaeae4;
  --text:#1c1c1c;--text-2:#52525b;--muted:#71717a;--subtle:#a1a1aa;--alt:#f4f4f5;
  --coral:#D96C4A;--coral-dim:rgba(217,108,74,0.12);
  --green:#2E4D3A;--navy:#2C3A47;--tan:#8B7355;--gold:#C9960C;--dark:#1c1c1c;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(217,108,74,0.18)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-white{background:var(--surface)}

/* NUMBERED SECTION HEADER */
.sh{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.sh-num{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--coral);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sh-rule{flex:1;height:1px;background:var(--border)}

/* URGENCY BAR */
.urgency-bar{background:var(--dark);color:rgba(255,255,255,.6);font-size:13px;font-weight:500;text-align:center;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:10px}
.urgency-dot{width:6px;height:6px;background:var(--coral);border-radius:50%;animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.urgency-bar strong{color:#fff}
.urgency-bar a{color:var(--coral);font-weight:600;transition:opacity .15s}
.urgency-bar a:hover{opacity:.8}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.04)}
.nav-inner{display:flex;align-items:center;gap:32px;height:64px}
.nav-logo{font-size:18px;font-weight:900;color:var(--text);letter-spacing:-.5px;flex-shrink:0}
.nav-logo span{color:var(--coral)}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);padding:6px 10px;border-radius:8px;transition:all .15s}
.nav-links a:hover{color:var(--text);background:var(--alt)}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-login{font-size:14px;font-weight:600;color:var(--text-2);padding:8px 16px;border-radius:8px;transition:all .15s}
.nav-login:hover{background:var(--alt);color:var(--text)}

/* BUTTONS */
.btn-coral{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;font-size:14px;font-weight:700;padding:10px 20px;border-radius:10px;border:none;cursor:pointer;transition:all .15s var(--ease);white-space:nowrap;font-family:inherit}
.btn-coral:hover{background:#c45e3c;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.btn-coral-lg{font-size:16px;padding:16px 32px;border-radius:12px}
.btn-outline{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--text-2);font-size:14px;font-weight:600;padding:10px 20px;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.btn-outline:hover{background:var(--alt);color:var(--text)}
.btn-outline-lg{font-size:15px;padding:14px 24px;border-radius:12px}
.btn-ghost-light{display:inline-flex;align-items:center;gap:6px;background:transparent;color:rgba(255,255,255,.6);font-size:15px;font-weight:600;padding:14px 24px;border-radius:10px;border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .15s;font-family:inherit}
.btn-ghost-light:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}

/* HERO */
/* Minus the announcement bar and nav above it. The hero sits 106px down the page, so a flat 100vh made it overflow the viewport by exactly that much and pushed the stats bar out of sight. */
.hero{position:relative;background:var(--dark);min-height:calc(100vh - 106px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:64px;padding-bottom:34px;overflow:hidden}
.hero-meta{display:flex;align-items:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.hero-tag{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.hero-tag-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0}
.hero-tag-coral{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral)}
.hero-heading{font-size:clamp(44px,7.5vw,88px);font-weight:900;letter-spacing:-2.5px;line-height:1.02;color:#fff;margin-bottom:32px}
.hero-heading em{font-style:normal;color:var(--coral)}
.hero-rule{height:1px;background:rgba(255,255,255,.08);margin-bottom:32px}
.hero-bottom{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero-sub{font-size:17px;color:rgba(255,255,255,.45);line-height:1.65;max-width:480px}
.hero-ctas{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);margin-top:56px;padding-top:32px}
.hero-stat{padding-right:32px}
.hero-stat+.hero-stat{padding-left:32px;border-left:1px solid rgba(255,255,255,.08)}
.hero-stat-val{font-size:32px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.hero-stat-val em{font-style:normal;color:var(--coral)}
.hero-stat-val small{font-size:16px;font-weight:600;color:rgba(255,255,255,.25);letter-spacing:0}
.hero-stat-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.3);margin-top:6px}

/* STAT PILLS:exact .lx-stat-pill from dashboard */
.pills-strip{background:var(--bg);padding:56px 0}
.pills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-pill{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.02);transition:all .3s var(--ease);display:flex;align-items:center;gap:14px}
.stat-pill:hover{box-shadow:0 8px 24px rgba(0,0,0,.04);transform:translateY(-2px)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.si-coral{background:rgba(217,108,74,.12)}
.si-green{background:rgba(46,77,58,.12)}
.si-navy{background:rgba(44,58,71,.12)}
.si-tan{background:rgba(139,115,85,.12)}
.stat-val{font-size:24px;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.stat-suffix{font-size:13px;font-weight:600;color:var(--subtle)}
.stat-label{font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}

/* WHY SECTION */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.why-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--alt)}
.why-img img{width:100%;height:100%;object-fit:cover}
.why-points{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.why-point{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--surface);border-radius:12px;border:1px solid var(--border);transition:all .3s var(--ease)}
.why-point:hover{box-shadow:0 4px 20px rgba(0,0,0,.04);transform:translateY(-1px)}
.why-point-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-point h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.why-point p{font-size:13px;color:var(--muted);line-height:1.5}

/* TICKER */
.ticker{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;overflow:hidden}
.ticker-track{display:flex;animation:marquee 28s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:10px;padding:0 24px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.ticker-dot{width:4px;height:4px;border-radius:50%;background:var(--border);flex-shrink:0}
.ticker-item span{color:var(--text)}

/* CURRICULUM:dashboard .lx-hc style */



.session-block{display:grid;grid-template-columns:300px 1fr;gap:48px;margin-top:56px;padding-top:40px;border-top:1px solid var(--border)}
.session-kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.session-title{font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px}
.session-sub{font-size:14px;color:var(--muted);line-height:1.6}
.session-row{display:flex;gap:28px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--border)}
.session-row:first-child{padding-top:0}
.session-row:last-child{border-bottom:none;padding-bottom:0}
.session-mins{font-size:13px;font-weight:700;color:var(--coral);font-variant-numeric:tabular-nums;min-width:60px;white-space:nowrap}
.session-activity{font-size:14px;color:var(--text-2)}
.wc-dark{background:var(--dark)}
.wc-green{background:var(--green)}
.wc-navy{background:var(--navy)}
.wc-coral{background:#8B3A1F}







/* OUTCOMES */
.outcomes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.outcome-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .3s var(--ease)}
.outcome-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.04);transform:translateY(-2px)}
.outcome-num{font-size:44px;font-weight:900;letter-spacing:-2px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:10px}
.outcome-num em{font-style:normal;color:var(--coral)}
.outcome-label{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.outcome-sub{font-size:13px;color:var(--muted);line-height:1.55}

/* IMAGE STRIP */
.img-strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:48px;border-radius:16px;overflow:hidden}
.img-strip-item{overflow:hidden;background:var(--alt)}
.img-strip-item:first-child{aspect-ratio:16/9}
.img-strip-item:not(:first-child){aspect-ratio:4/3}
.img-strip-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.img-strip-item:hover img{transform:scale(1.03)}

/* TESTIMONIALS */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s var(--ease);display:flex;flex-direction:column}
.testimonial-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.04);transform:translateY(-2px)}
.stars{display:flex;gap:3px;margin-bottom:16px}
.star{width:12px;height:12px;background:var(--coral);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.testimonial-quote{font-size:14px;color:var(--text-2);line-height:1.65;flex:1;margin-bottom:20px}
.testimonial-footer{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border);margin-top:auto}
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.5px}
.testimonial-name{font-size:13px;font-weight:700;color:var(--text)}
.testimonial-role{font-size:12px;color:var(--muted)}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px}
.pricing-card-featured{margin-top:-16px;padding:36px 28px;border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.pricing-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--coral-dim);color:var(--coral);padding:5px 10px;border-radius:6px;margin-bottom:20px}
.pricing-tier{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pricing-amount{font-size:44px;font-weight:900;letter-spacing:-2px;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.pricing-amount small{font-size:20px;font-weight:600;letter-spacing:0;color:var(--muted)}
.pricing-note{font-size:12px;color:var(--muted);margin-bottom:24px;line-height:1.5}
.pricing-savings{font-size:12px;font-weight:700;color:var(--green);margin-bottom:24px}
.pricing-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pricing-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.pricing-check{width:18px;height:18px;border-radius:50%;background:rgba(46,77,58,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green);font-size:10px;font-weight:800}
.pricing-btn{width:100%;justify-content:center}
.pricing-badge-navy{background:rgba(44,58,71,.1);color:var(--navy)}
.pricing-badge-tan{background:rgba(201,150,12,.12);color:var(--gold)}
.pricing-plan-name{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text);margin-bottom:10px}
.pricing-schedule{display:flex;flex-direction:column;gap:5px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pricing-schedule-item{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.pricing-schedule-item::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--border);flex-shrink:0}
.fee-rows{border-top:1px solid var(--border);margin-top:20px;padding-top:4px}
.fee-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border)}
.fee-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0}
.fee-total-label{font-size:15px;font-weight:800;color:var(--text)}
.fee-total-val{font-size:26px;font-weight:900;color:var(--gold);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.fee-was{text-decoration:line-through;color:var(--subtle);margin-right:6px}
.pricing-installment{font-size:12px;color:#777777;text-align:center;margin-top:16px;line-height:1.4}
.pricing-urgency{font-size:11px;font-weight:600;color:var(--coral);text-align:center;margin-top:12px;letter-spacing:.3px}

/* FAQ */
.faq-list{border:1px solid var(--border);border-radius:16px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--border);background:var(--surface)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 24px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .15s;font-family:inherit}
.faq-q:hover,.faq-q.open{background:var(--alt)}
.faq-icon{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);flex-shrink:0;transition:all .2s var(--ease)}
.faq-q.open .faq-icon{background:var(--dark);border-color:var(--dark);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a-inner{padding:0 24px 22px;font-size:14px;color:var(--text-2);line-height:1.65}

/* FINAL CTA */
.final-cta{background:var(--dark);padding:112px 0;text-align:center}
.final-cta-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coral);margin-bottom:24px}
.final-cta h2{font-size:clamp(32px,5vw,60px);font-weight:900;letter-spacing:-2px;color:#fff;max-width:640px;margin:0 auto 16px;line-height:1.08}
.final-cta p{font-size:16px;color:rgba(255,255,255,.4);max-width:420px;margin:0 auto 40px;line-height:1.6}
.final-ctas{display:flex;align-items:center;justify-content:center;gap:14px}
.final-note{font-size:12px;color:rgba(255,255,255,.25);margin-top:20px}

/* FOOTER */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:48px 0 32px}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-logo{font-size:16px;font-weight:900;letter-spacing:-.5px;margin-bottom:10px}
.footer-logo span{color:var(--coral)}
.footer-tagline{font-size:13px;color:var(--muted);line-height:1.5;max-width:200px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.footer-col a{display:block;font-size:13px;color:var(--text-2);margin-bottom:10px;transition:color .15s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--subtle)}

/* ANIMATIONS */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
[data-reveal]{opacity:0;transform:translateY(12px)}
[data-reveal].revealed{animation:fadeSlideUp .6s var(--ease) forwards}

/* BREADCRUMB */
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--subtle);padding:16px 0;flex-wrap:wrap}
.crumb a{color:var(--muted);transition:color .15s}
.crumb a:hover{color:var(--text)}
.crumb-sep{color:var(--border)}
.crumb [aria-current]{color:var(--text-2);font-weight:600}

/* COMPACT HERO:course pages sit below the fold-filling homepage hero */
.hero-compact{min-height:auto;padding-top:64px;padding-bottom:56px;justify-content:flex-start}
.hero-compact .hero-heading{font-size:clamp(38px,5.6vw,68px);letter-spacing:-2px;margin-bottom:28px}
.hero-compact .hero-meta{margin-bottom:28px}

/* COURSE CARDS:gap-trick grid, one divider line between cards */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.course-card{position:relative;background:var(--surface);padding:32px 28px 28px;display:flex;flex-direction:column;transition:background .18s var(--ease);overflow:hidden}
.course-card:hover{background:var(--alt)}
.course-ghost{position:absolute;right:16px;bottom:-14px;font-size:96px;font-weight:900;color:rgba(28,28,28,.035);font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;user-select:none}
.course-kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
.course-name{font-size:23px;font-weight:800;letter-spacing:-.6px;color:var(--text);margin-bottom:10px;line-height:1.15}
.course-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.course-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.course-tool{font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;background:var(--alt);color:var(--text-2);border:1px solid var(--border)}
.course-facts{display:flex;flex-direction:column;gap:7px;margin-bottom:22px;padding-top:18px;border-top:1px solid var(--border)}
.course-fact{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.course-fact strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.course-fact .course-fee{color:var(--gold);font-weight:800;font-size:15px}
.course-cta{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--text);transition:gap .15s var(--ease)}
.course-card:hover .course-cta{gap:10px}
.course-cta svg{flex-shrink:0}

/* COURSE MEDIA:photo above the card body on the course index */
.course-thumb{aspect-ratio:16/10;margin:-32px -28px 22px;overflow:hidden;background:var(--alt)}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.course-card:hover .course-thumb img{transform:scale(1.04)}

/* FORMAT STRIP:the single class format, explained once */
.format-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:40px}
.format-item{background:var(--surface);padding:22px}
.format-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.format-val{font-size:15px;font-weight:700;color:var(--text);line-height:1.4}

/* SINGLE PRICING CARD:one class format, so the card pairs with a note beside it */
.pricing-one{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
.pricing-one .pricing-card{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.pricing-aside{padding-top:8px}
.pricing-aside h3{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text);margin-bottom:10px}
.pricing-aside p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:28px;max-width:420px}
.pricing-aside-row{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border)}
.pricing-aside-row:last-child{border-bottom:none}
.pricing-aside-key{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--coral);min-width:104px;flex-shrink:0}
.pricing-aside-val{font-size:14px;color:var(--text-2);line-height:1.55}

/* RELATED COURSES */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.related-card{background:var(--surface);padding:26px;transition:background .18s var(--ease);display:block}
.related-card:hover{background:var(--alt)}
.related-kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.related-name{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text);margin-bottom:8px}
.related-desc{font-size:13px;color:var(--muted);line-height:1.55}

/* RESPONSIVE */
@media(max-width:960px){
  .pills-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr;gap:40px}
  
  .session-block{grid-template-columns:1fr;gap:24px}
  .outcomes-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card-featured{margin-top:0}
  .hero-bottom{grid-template-columns:1fr;gap:24px}
  .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .hero-stat+.hero-stat{border-left:none}
  .hero-stat{padding-left:0}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .img-strip{grid-template-columns:1fr 1fr}
  .img-strip-item:first-child{grid-column:span 2}
  .course-grid{grid-template-columns:1fr}
  .format-strip{grid-template-columns:repeat(2,1fr)}
  .pricing-one{grid-template-columns:1fr;gap:32px}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:600px){

  .container{padding:0 16px}
  .section{padding:64px 0}
  .nav-links{display:none}
  .pills-grid,.outcomes-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .final-ctas{flex-direction:column}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .img-strip{grid-template-columns:1fr}
  .img-strip-item:first-child{grid-column:auto}
  .urgency-bar{font-size:12px}
  .format-strip{grid-template-columns:1fr}
  .course-thumb{margin:-32px -20px 20px}
  .course-card{padding:28px 20px 24px}
}

/* WHATSAPP FLOATING BUTTON */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:transform .15s var(--ease),box-shadow .15s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,.2)}

/* FOOTER LINK COLOUR PARITY:the bottom row used inline handlers before */
.footer-bottom a{color:var(--muted);transition:color .15s}
.footer-bottom a:hover{color:var(--text)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* The headline number in the fee table, now that there is only one of them. */
.fee-emph{font-weight:800;color:var(--text)}


/* the road itself: one continuous rail, inset so it stops at the first and
   last marker rather than running off into the section padding */



/* square marker, never a circle. The --bg ring masks the rail behind it. */

.wk:hover 




.wk:hover 




@media(max-width:600px){
  
  
  
  
}

/* 10-WEEK CURRICULUM ROADMAP */
/* A centre rail with the weeks alternating either side of it. Odd weeks sit
   left, even weeks right, each joined back to the rail by a short stub, so the
   eye zig-zags down the route in teaching order. Collapses to a single left
   rail on narrow screens, where two columns would leave the cards too tight to
   read. */
.roadmap{list-style:none;position:relative}
.roadmap::before{content:"";position:absolute;left:50%;margin-left:-1px;top:28px;bottom:28px;width:2px;background:var(--border)}
.wk-step{position:relative;width:calc(50% - 34px);margin-bottom:18px}
.wk-step:nth-child(odd){margin-right:auto}
.wk-step:nth-child(even){margin-left:auto}
.wk-step:last-child{margin-bottom:0}
/* stub joining card to rail */
.wk-step::before{content:"";position:absolute;top:32px;width:28px;height:1px;background:var(--border)}
.wk-step:nth-child(odd)::before{right:-28px}
.wk-step:nth-child(even)::before{left:-28px}
/* square marker, centred on the rail */
.wk-node{position:absolute;top:27px;width:12px;height:12px;box-shadow:0 0 0 4px var(--bg);transition:transform .16s var(--ease)}
.wk-step:nth-child(odd) .wk-node{right:-40px}
.wk-step:nth-child(even) .wk-node{left:-40px}
.wk-step:hover .wk-node{transform:scale(1.25)}

.curriculum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.week-card{border-radius:16px;padding:24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.week-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.15)}
/* Flat, per the house rule against decorative gradients. These were gradients
   until now, which also made the cards translucent enough to pick up whatever
   sat behind them. */
.wc-dark{background:var(--dark)}
.wc-green{background:var(--green)}
.wc-navy{background:var(--navy)}
.wc-coral{background:#8B3A1F}
.week-num{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:8px;font-variant-numeric:tabular-nums}
.week-title{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:12px}
/* the week's topics, as an actual list rather than one bullet-run sentence */
/* CSS columns, not grid: a grid fills row-major, so reading down the first
   column would give every other topic. Columns flow down then across, which
   is the order the weeks actually teach in. */
.week-list{list-style:none;column-count:1}
.week-list li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:3px}
.week-list li{position:relative;padding-left:14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}
.week-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:rgba(255,255,255,.35)}
.week-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.week-tool{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
.week-ghost{position:absolute;right:18px;bottom:-8px;font-size:80px;font-weight:900;color:rgba(255,255,255,.04);font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;user-select:none}

@media(max-width:900px){
  .roadmap::before{left:5px;margin-left:0}
  .wk-step{width:auto;margin-left:38px!important;margin-right:0!important}
  .wk-step::before,
  .wk-step:nth-child(odd)::before,
  .wk-step:nth-child(even)::before{left:-26px;right:auto;width:26px}
  .wk-node,
  .wk-step:nth-child(odd) .wk-node,
  .wk-step:nth-child(even) .wk-node{left:-38px;right:auto}
}
@media(max-width:600px){
  .wk-step{margin-left:26px!important}
  .wk-step::before,
  .wk-step:nth-child(odd)::before,
  .wk-step:nth-child(even)::before{left:-18px;width:18px}
  .wk-node,
  .wk-step:nth-child(odd) .wk-node,
  .wk-step:nth-child(even) .wk-node{left:-26px;width:10px;height:10px}
  .week-card{padding:20px}
}

/* HERO PHOTOGRAPH + ENTRANCE */
/* The photograph fills what used to be roughly 250px of empty space above the
   headline: the hero is anchored to the bottom of the viewport, so on a laptop
   the top half was simply blank. */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* A flat scrim, not a gradient. The house rules forbid gradient overlays on
   hero backgrounds, and a single opacity reads cleaner behind large type. */
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(16,16,16,.80)}
.hero-inner{position:relative;z-index:1;width:100%}

.hero-heading .hero-line{display:block}

@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Runs on load rather than on scroll: the hero is above the fold, and gating
   the h1 behind an IntersectionObserver would leave it invisible if the script
   fails. "both" holds the start frame through the delay and the end frame
   after, so the final state is what persists. */
.hero-anim{animation:heroRise .75s var(--ease) both}

@media(prefers-reduced-motion:reduce){
  .hero-anim{animation:none}
}

/* Short viewports: on a 900px laptop the stats bar fell below the fold, which
   put the page's only proof out of sight at the moment it matters most.
   Keyed to viewport height rather than width, because that is the actual
   constraint. */
@media(max-height:940px){
  .hero{padding-top:76px;padding-bottom:26px}
  .hero-heading{font-size:clamp(40px,6.4vw,68px);margin-bottom:24px}
  .hero-meta{margin-bottom:26px}
  .hero-rule{margin-bottom:24px}
  .hero-sub{font-size:14px}
}

/* ── MOTION LAYER ──────────────────────────────────────────────────────────
   CSS only, per the house rule against animation libraries, and hung off the
   reveal observer that already exists rather than a second one. Durations stay
   in the documented 150-180ms band for interactions; the one exception is the
   section rule, which is a slower deliberate gesture rather than a response to
   a pointer. */

/* The numbered section rule draws itself in from the left as the header
   reveals. .sh already carries data-reveal, so this needs no new markup. */
.sh-rule{transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease) .12s}
.sh.revealed .sh-rule{transform:scaleX(1)}

/* Nav: an underline growing from the left reads as more considered than a
   background swap, and it points along the reading direction. */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:1px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* The arrow leads the eye out of the control it sits in. */
.btn-coral svg,.course-cta svg,.related-card svg,.btn-ghost-light svg{transition:transform .18s var(--ease)}
.btn-coral:hover svg,.course-cta:hover svg,.related-card:hover svg,.btn-ghost-light:hover svg{transform:translateX(3px)}

/* Course cards previously changed only their background on hover, which left
   the card feeling inert. Colouring the title makes the whole card read as one
   target. */
.course-card{transition:background .16s var(--ease)}
.course-name{transition:color .16s var(--ease)}
.course-card:hover .course-name{color:var(--coral)}

@media(prefers-reduced-motion:reduce){
  /* Without this the rule would stay at scaleX(0) and simply never appear. */
  .sh-rule{transform:none}
  .nav-links a::after{transition:none}
}