/* ═══════════════════════════════════════════════════════════
   edBuddy Pro — global.css
   Design tokens, page grid, logo lockup, navbar, footer and the
   sticky bottom bar. Loaded by every page. Page-specific styles
   stay in that page's own <style> block.
   ═══════════════════════════════════════════════════════════ */


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



  :root {
    /* spatial hero tokens */
    --c1: #5CDCE5;
    --c3: #0559B3;
    --brand: var(--c3);
    --ink: #0B1220;
    --muted: #5A6B82;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --e2: 0 1px 2px rgba(11,30,58,0.05),
          0 8px 20px rgba(11,30,58,0.07),
          0 2px 6px rgba(11,30,58,0.04);
    --e3: 0 2px 4px rgba(11,30,58,0.05),
          0 14px 34px rgba(11,30,58,0.09),
          0 4px 10px rgba(11,30,58,0.05);
    --e4: 0 4px 8px rgba(11,30,58,0.06),
          0 24px 56px rgba(11,30,58,0.13),
          0 8px 18px rgba(11,30,58,0.06);
    --rim: rgba(255,255,255,0.45);
    --spec: rgba(255,255,255,0.85);
    --faint: #8A99AE;
    --hair: rgba(11,18,32,0.08);
    --glass-3: rgba(255,255,255,0.80);

    --white: #ffffff;
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --black: #0a0a0a;
    --font: 'Figtree', -apple-system, sans-serif;
    --font-display: 'Figtree', -apple-system, sans-serif;
    --tracking-tight: -0.02em;
    --nav-h: 64px;
    --grid-size: 48px;
  }



  /* ─── GLOBAL GRID — the brand signature, carried across the whole page ─── */
  .page-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: center top;
  }


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


  :root {
    --white: #ffffff;
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --black: #0a0a0a;
    --font: 'Figtree', -apple-system, sans-serif;
    --font-display: 'Figtree', -apple-system, sans-serif;
    --tracking-tight: -0.02em;
    --nav-h: 64px;
    --grid-size: 48px;
  }


  html { scroll-behavior: smooth; }


  body {
    font-family: var(--font);
    letter-spacing: var(--tracking-tight);
    background: var(--white);
    color: var(--black);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    position: relative;
  }

  /* Every band sits above the lattice; light bands are transparent so it shows through */
  .co-hero, .co-bar, .co-out, .co-fit, .co-curr, .co-proj,
  .co-tools, .co-inst, .co-cert, .co-voices, .co-faq, .co-cta,
  footer {
    position: relative;
    z-index: 1;
  }


  /* ─── NAVBAR (shared with index.html — keep in sync) ─── */
  /* ─── NAVBAR ─── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 32px;
    background: #ffffff;
    transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
    border-bottom: 1px solid transparent;
  }


  nav.scrolled {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: rgba(10,10,10,0.08);
  }


  .nav-logo img {
    height: 40px;
    width: auto;
    display: block;
  }


  /* Mega menu */
  .mega-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.045), 0 1px 3px rgba(0,0,0,0.042);
    padding: 20px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    z-index: 200;
  }


  .mega-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: var(--white);
    border-left: 1px solid var(--neutral-200);
    border-top: 1px solid var(--neutral-200);
    transform: translateX(-50%) rotate(45deg);
  }


  .nav-dropdown-wrapper.open .mega-menu {
    display: grid;
  }


  .mega-menu-header {
    grid-column: 1 / -1;
    padding: 4px 8px 12px;
    border-bottom: 1px solid var(--neutral-100);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }


  .mega-menu-header span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5F6670;
  }


  .mega-menu-header a {
    font-size: 12px;
    color: #5F6670;
    text-decoration: none;
    font-weight: 500;
  }


  .mega-menu-header a:hover { color: var(--black); }


  .course-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
  }


  .course-item:hover { background: var(--neutral-50); }


  .course-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }


  .course-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--neutral-600);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .course-item:hover .course-icon { background: var(--neutral-200); }


  .course-item-text { display: flex; flex-direction: column; gap: 2px; }


  .course-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.3;
  }


  .course-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 100px;
    background: var(--black);
    color: var(--white);
    margin-left: 6px;
    letter-spacing: 0.04em;
    vertical-align: middle;
    text-transform: uppercase;
  }


  .btn-ghost {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-600);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    font-family: var(--font);
    letter-spacing: var(--tracking-tight);
  }


  .btn-ghost:hover { color: var(--black); background: var(--neutral-100); }


  .btn-primary {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #0559B3;
    color: #ffffff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    font-family: var(--font);
    letter-spacing: var(--tracking-tight);
    display: flex;
    align-items: center;
    gap: 6px;
  }


  .btn-primary:hover { opacity: 0.85; }

  .btn-primary:active { transform: scale(0.98); }


  /* ─── SHARED BUTTONS ─── */
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; animation: fadeUp 0.5s 0.18s ease both; }

  .hero-cta-primary {
    padding: 14px 26px; border-radius: 8px; font-size: 15px; font-weight: 600;
    background: #0559B3; color: #ffffff; border: none; cursor: pointer; text-decoration: none;
    font-family: var(--font); letter-spacing: var(--tracking-tight); display: inline-flex; align-items: center; gap: 8px;
    transition: opacity 0.15s, transform 0.1s;
  }

  .hero-cta-primary:hover { opacity: 0.85; }

  .hero-cta-primary:active { transform: scale(0.98); }

  .hero-ghost {
    padding: 14px 26px; border-radius: 8px; font-size: 15px; font-weight: 500;
    background: #fff; color: var(--black); border: 1px solid var(--neutral-300);
    cursor: pointer; text-decoration: none; font-family: var(--font); letter-spacing: var(--tracking-tight);
    transition: border-color 0.15s, background 0.15s;
  }

  .hero-ghost:hover { border-color: var(--neutral-400); background: var(--neutral-50); }

  /* ─── SHARED SECTION TYPE ─── */
  .section-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5F6670;
    margin-bottom: 14px;
  }


  .section-title {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--black);
    max-width: 640px;
    margin: 0 auto 16px;
    text-align: center;
  }


  .section-sub {
    font-size: 16px;
    color: #5F6670;
    max-width: none;
    line-height: 1.6;
    margin: 0 auto 52px;
    text-align: center;
    white-space: nowrap;
  }
@media (max-width: 1000px) {
    .section-sub { white-space: normal; max-width: 540px; }
  }


  /* Accent word in a heading: upright + lime, never italic.
     index.html defines this ~1050 lines away from .section-title — keep in sync. */
  .section-title em, .lead-h em { font-style: normal; color: #0559B3; }


  /* Safety net: no heading accent ever falls back to browser italic.
     Colour still comes from the specific rules above / per-section. */
  h1 em, h2 em, h3 em, h4 em { font-style: normal; }

  /* ─── SHARED FAQ ACCORDION ─── */

  .faq-inner { max-width: 1160px; margin: 0 auto; }  /* matches .cx-inner */


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









  .faq-icon::before,






    from { opacity: 0; transform: translateY(16px); }

    to { opacity: 1; transform: translateY(0); }

  /* ─── GLOBAL FOOTER (shared with index.html — keep in sync) ─── */
  /* ─── GLOBAL FOOTER (dark, layout B) ─── */
  .sf { background:#0F0F0F; color:rgba(255,255,255,0.7); overflow:hidden; }

  .sf-cta { background:#0559B3; }

  .sf-cta-inner { max-width:1180px; margin:0 auto; padding:42px 28px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }

  .sf-cta-h { font-size:28px; font-weight:600; letter-spacing:-0.02em; color:#0a0a0a; line-height:1.15; }

  .sf-cta-s { font-size:14px; color:rgba(10,10,10,0.62); margin-top:6px; }

  .sf-cta-btn { background:#0559B3; color:#fff; font-size:15px; font-weight:600; padding:13px 24px; border-radius: 8px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:transform 0.15s; font-family:var(--font); letter-spacing:var(--tracking-tight); }

  .sf-cta-btn:hover {  }

  .sf-cta-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

  .sf-inner { max-width:1180px; margin:0 auto; padding:56px 28px 0; }

  .sf-strip { display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:38px; border-bottom:0.5px solid rgba(255,255,255,0.1); }

  .sf-brand { max-width:320px; }

  .sf-logo { display:inline-flex; align-items:center; text-decoration:none; }

  .sf-logo img { height:40px; width:auto; display:block; }

  .sf-tile { width:34px; height:34px; border-radius: 9px; background:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; letter-spacing:-1.2px; line-height:1; }

  .sf-brandname { font-size:21px; font-weight:600; letter-spacing:-0.5px; color:#fff; }

  .sf-tag { font-size:14px; color:rgba(255,255,255,0.5); line-height:1.55; margin:16px 0; }

  .sf-trust { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:rgba(255,255,255,0.55); margin-bottom:18px; }

  .sf-trust svg { width:14px; height:14px; fill:none; stroke:#0559B3; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  .sf-soc { display:flex; gap:14px; }

  .sf-soc a { color:#0559B3; transition:color 0.15s; }

  .sf-soc a:hover { color:#5CDCE5; }

  .sf-soc svg { width:19px; height:19px; fill:currentColor; }

  .sf-nl { min-width:280px; }

  .sf-nl-lbl { font-size:13px; font-weight:500; color:rgba(255,255,255,0.85); margin-bottom:10px; }

  .sf-nl-input { display:flex; gap:8px; max-width:340px; }

  .sf-nl-input input { flex:1; background:rgba(255,255,255,0.06); border:0.5px solid rgba(255,255,255,0.2); border-radius: 8px; padding:10px 12px; color:#fff; font-size:13px; font-family:var(--font); }

  .sf-nl-input input::placeholder { color:rgba(255,255,255,0.4); }

  .sf-nl-input button { background:#fff; color:#0a0a0a; border:none; border-radius: 8px; padding:0 18px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); }

  .sf-nl-input button:hover { opacity:0.9; }

  .sf-contact { font-size:13px; color:rgba(255,255,255,0.5); margin-top:18px; line-height:1.7; }

  .sf-contact a { color:rgba(255,255,255,0.72); text-decoration:none; }

  .sf-contact a:hover { color:#fff; }

  .sf-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; padding:40px 0; }

  .sf-col h4 { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.4); margin-bottom:14px; }

  .sf-col a { display:block; font-size:13px; color:rgba(255,255,255,0.62); text-decoration:none; padding:5px 0; transition:color 0.15s; }

  .sf-col a:hover { color:#fff; }

  .sf-col a.more { color:#0559B3; font-weight:500; margin-top:6px; display:inline-flex; align-items:center; gap:6px; }

  .sf-col a.more svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  .sf-trend { padding:30px 0; border-top:0.5px solid rgba(255,255,255,0.1); }

  .sf-trend-lbl { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.4); margin-bottom:15px; }

  .sf-pills { display:flex; flex-wrap:wrap; gap:9px; }

  .sf-pills a { font-size:13px; color:rgba(255,255,255,0.7); border:0.5px solid rgba(255,255,255,0.18); border-radius: 999px; padding:7px 15px; text-decoration:none; transition:0.15s; }

  .sf-pills a:hover { border-color:rgba(255,255,255,0.55); color:#fff; }

  .sf-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:22px 0 44px; border-top:0.5px solid rgba(255,255,255,0.1); font-size:13px; color:rgba(255,255,255,0.4); }

  .sf-bb-left { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

  .sf-bb-legal { display:flex; gap:18px; flex-wrap:wrap; }

  .sf-bb-legal a { color:rgba(255,255,255,0.4); text-decoration:none; }

  .sf-bb-legal a:hover { color:#fff; }

  .sf-bb-right { display:flex; align-items:center; gap:12px; }

  .sf-region, .sf-totop { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:rgba(255,255,255,0.72); background:transparent; border:0.5px solid rgba(255,255,255,0.2); border-radius: 8px; padding:8px 13px; cursor:pointer; text-decoration:none; font-family:var(--font); }

  .sf-region:hover, .sf-totop:hover { border-color:rgba(255,255,255,0.45); color:#fff; }

  .sf-totop { font-weight:600; color:#fff; }

  .sf-region svg, .sf-totop svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

  .sf-region .chev { width:11px; height:11px; }
@media (max-width:980px) { .sf-cols { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .sf-cols { grid-template-columns:repeat(2,1fr); } .sf-cta-h { font-size:23px; } }


  /* ═══════════════════════════════════════════════════════════
     COURSE DETAIL PAGE — reusable template
     Drives all 5 course pages. Nothing per-course lives in CSS;
     swap the markup content only.
     Tokens, nav, footer, buttons, section type & the FAQ
     accordion are inherited verbatim from index.html above.
     ═══════════════════════════════════════════════════════════ */

  .co-hero, .co-bar, .co-out, .co-fit, .co-curr, .co-proj,
  .co-tools, .co-inst, .co-cert, .co-voices, .co-faq, .co-cta {
    position: relative;
    z-index: 1;
  }

  .co-out, .co-fit, .co-curr, .co-proj,
  .co-inst, .co-cert, .co-voices { padding: 88px 32px; }

  .co-faq { padding: 72px 0; background: transparent; }

  .co-cta { padding: 88px 32px 96px; background: transparent; }

  .co-inner { max-width: 1160px; margin: 0 auto; }


  /* ─── 1 · HERO ─── */
  .co-hero { padding: calc(var(--nav-h) + 40px) 32px 52px; }

  .co-hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 392px;
    gap: 56px;
    align-items: start;
  }


  .co-crumb {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #5F6670;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }

  .co-crumb a { color: #5F6670; text-decoration: none; transition: color 0.15s; }

  .co-crumb a:hover { color: var(--black); }

  .co-crumb svg { width: 12px; height: 12px; stroke: var(--neutral-300); fill: none; stroke-width: 2; }


  .co-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #043E7D;
    background: rgba(5,89,179,0.14);
    border-radius: 100px;
    padding: 7px 14px;
    margin-bottom: 20px;
  }

  .co-eyebrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


  .co-h1 {
    font-size: clamp(32px, 3.9vw, 50px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--black);
  }

  .co-h1 em { font-style: normal; color: #0559B3; }


  .co-sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--neutral-600);
    margin-top: 20px;
    max-width: 560px;
  }


  .co-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }

  .co-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-600);
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 8px;   /* matches .co-btn / .btn-primary */
    padding: 7px 14px;
  }

  .co-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .co-chip.rate svg { fill: #0559B3; stroke: none; }

  .co-chip b { color: var(--black); font-weight: 600; }


  .co-hero-pts { list-style: none; margin-top: 30px; display: grid; gap: 11px; }

  .co-hero-pts li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    color: var(--neutral-600);
    line-height: 1.5;
  }

  .co-hero-pts b { color: var(--black); font-weight: 600; }

  .co-tick {
    width: 17px; height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    color: #0559B3;
  }

  .co-tick svg { width: 17px; height: 17px; fill: none; stroke: #0559B3; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }


  /* ─── ENROL CARD ─── */
  .co-card {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
    background: var(--white);
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(10,10,10,0.041);
    overflow: hidden;
  }

  .co-card-img { aspect-ratio: 16 / 10; background: var(--neutral-100); position: relative; }

  .co-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .co-card-tag {
    position: absolute;
    top: 12px; left: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #0559B3;
    color: #fff;
    padding: 5px 12px;
    border-radius: 100px;
  }

  .co-card-body { padding: 24px 24px 26px; }


  .co-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

  .co-price-now {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--black);
    line-height: 1;
  }

  .co-price-was { font-size: 17px; color: #5F6670; text-decoration: line-through; }

  .co-price-off {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #043E7D;
    background: rgba(5,89,179,0.18);
    border-radius: 100px;
    padding: 4px 10px;
  }

  .co-price-note { font-size: 13px; color: #5F6670; margin-top: 8px; }


  .co-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 22px;
    border-radius: 8px;
    background: #0559B3;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    letter-spacing: var(--tracking-tight);
    margin-top: 20px;
    transition: opacity 0.15s, transform 0.1s;
  }

  .co-btn:hover { opacity: 0.85; }

  .co-btn:active { transform: scale(0.99); }

  .co-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .co-btn-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 22px;
    border-radius: 8px;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--neutral-300);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font);
    letter-spacing: var(--tracking-tight);
    margin-top: 10px;
    transition: border-color 0.15s, background 0.15s;
  }

  .co-btn-2:hover { border-color: var(--neutral-400); background: var(--neutral-50); }


  .co-incl {
    list-style: none;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-200);
    display: grid;
    gap: 11px;
  }

  .co-incl li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--neutral-600);
    line-height: 1.45;
  }

  .co-incl b { color: var(--black); font-weight: 600; }

  .co-incl svg {
    width: 17px; height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    fill: none;
    stroke: #0559B3;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .co-guar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--neutral-200);
    font-size: 13px;
    color: #5F6670;
    line-height: 1.45;
  }

  .co-guar svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--neutral-400); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  .co-guar b { color: var(--black); font-weight: 600; }


  /* ─── 2 · STICKY SUB-NAV ─── */
  .co-bar {
    position: sticky;
    top: var(--nav-h);
    z-index: 90;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--neutral-200);
    border-bottom: 1px solid var(--neutral-200);
  }

  .co-bar-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .co-bar-links { display: flex; gap: 24px; list-style: none; flex: 1; }

  .co-bar-links a {
    font-size: 14px;
    font-weight: 500;
    color: #5F6670;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }

  .co-bar-links a:hover { color: var(--black); border-bottom-color: #0559B3; }

  .co-bar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

  .co-bar-price { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--black); }

  .co-bar-price s { color: #5F6670; font-weight: 400; font-size: 13px; margin-left: 5px; }

  .co-bar-btn {
    padding: 9px 20px;
    border-radius: 8px;
    background: #0559B3;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
    transition: opacity 0.15s;
    white-space: nowrap;
  }

  .co-bar-btn:hover { opacity: 0.85; }


  /* ─── 3 · OUTCOMES ─── */
  .co-out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .co-o {
    background: var(--white);
    border: 1px solid #EAEEF4;
    border-radius: 12px;
    padding: 28px 26px;
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 8px 20px rgba(11,30,58,0.032), 0 2px 6px rgba(11,30,58,0.028);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1),
                box-shadow 0.28s cubic-bezier(.22,1,.36,1),
                border-color 0.28s ease;
    cursor: default;
  }

  .co-o:hover {
    
    border-color: rgba(5,89,179,0.28);
    box-shadow: 0 4px 8px rgba(11,30,58,0.035), 0 20px 44px rgba(11,30,58,0.063), 0 6px 14px rgba(11,30,58,0.032);
  }

  /* icon reacts too */
  .co-o .co-o-ic { transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s cubic-bezier(.22,1,.36,1); }

  .co-o:hover .co-o-ic {
    border-color: rgba(5,89,179,0.55);
    background: rgba(5,89,179,0.06);
    
    animation-play-state: paused;
  }

  .co-o:hover .co-o-t { color: #0559B3; }

  .co-o-t { transition: color 0.28s ease; }

  .co-o-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  .co-o-t { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.3; }

  .co-o-d { font-size: 14px; color: #5F6670; line-height: 1.55; }


  /* ─── 4 · FIT / NOT FIT ─── */
  .co-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

  .co-fit-c { border-radius: 12px; padding: 36px 34px; }

  .co-fit-c.yes {
    background: var(--white);
    border: 1px solid #ececec;
    border-top: 3px solid #0559B3;
    box-shadow: 0 4px 16px rgba(10,10,10,0.023);
  }

  .co-fit-c.no {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-top: 3px solid var(--neutral-300);
  }

  .co-fit-h { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 20px; }

  .co-fit-l { list-style: none; display: grid; gap: 13px; }

  .co-fit-l li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--neutral-600);
    line-height: 1.5;
  }

  .co-fit-l svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .co-fit-c.yes svg { stroke: #043E7D; }

  .co-fit-c.no svg { stroke: var(--neutral-400); }


  /* ─── 5 · CURRICULUM ─── */
  .co-curr-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }

  .co-curr-h { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }

  .co-curr-h em { font-style: normal; color: #0559B3; }

  .co-curr-sum { font-size: 14px; color: #5F6670; }

  .co-curr-sum b { color: var(--black); font-weight: 600; }

  .co-mods { display: grid; gap: 10px; }

  .co-mod {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(10,10,10,0.028);
    transition: border-color 0.15s;
  }

  .co-mod[open] { border-color: var(--neutral-300); }

  .co-mod summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .co-mod summary::-webkit-details-marker { display: none; }

  .co-mod-n {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #043E7D;
    background: rgba(5,89,179,0.14);
    border-radius: 6px;
    padding: 5px 9px;
    flex-shrink: 0;
  }

  .co-mod-t { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; flex: 1; line-height: 1.35; }

  .co-mod-meta { font-size: 13px; color: #5F6670; flex-shrink: 0; white-space: nowrap; }

  .co-mod-body { padding: 0 22px 20px 22px; }

  .co-mod-d { font-size: 14px; color: var(--neutral-600); line-height: 1.6; margin-bottom: 16px; }

  .co-les { list-style: none; display: grid; gap: 9px; border-top: 1px solid var(--neutral-200); padding-top: 16px; }

  .co-les li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--neutral-600); }

  .co-les svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--neutral-300); stroke-width: 1.8; }

  .co-les .free {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #043E7D;
    background: rgba(5,89,179,0.16);
    border-radius: 100px;
    padding: 2px 8px;
    margin-left: auto;
  }


  /* ─── 6 · PROJECTS ─── */
  .co-proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }

  .co-proj-img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--neutral-200); }

  .co-proj-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .co-proj-h { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 16px; }

  .co-proj-h em { font-style: normal; color: #0559B3; }

  .co-proj-d { font-size: 16px; line-height: 1.65; color: var(--neutral-600); }

  .co-proj-d b { color: var(--black); font-weight: 600; }

  .co-proj-l { list-style: none; display: grid; gap: 10px; margin-top: 26px; }

  .co-proj-l li {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
  }

  .co-proj-l .n { font-size: 12px; font-weight: 600; color: #0559B3; flex-shrink: 0; }


  /* ─── 7 · TOOLS ─── */
  .co-tools { padding: 0 32px 88px; }

  .co-tools-inner {
    max-width: 1160px;
    margin: 0 auto;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    padding: 40px 44px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .co-tools-l { flex-shrink: 0; }

  .co-tools-t { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 6px; }

  .co-tools-d { font-size: 14px; color: #5F6670; line-height: 1.5; max-width: 280px; }

  .co-tools-row { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }

  .co-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-800);
    letter-spacing: -0.01em;
  }

  .co-tool i { width: 7px; height: 7px; border-radius: 50%; background: #0559B3; flex-shrink: 0; }


  /* ─── 8 · INSTRUCTOR ─── */
  .co-inst-inner {
    max-width: 1160px;
    margin: 0 auto;
    background: var(--black);
    border-radius: 14px;
    padding: 52px 48px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  

  .co-inst-inner > * { position: relative; z-index: 1; }

  .co-inst-av {
    width: 240px; height: 240px;
    border-radius: 12px;
    background: rgba(5,89,179,0.14);
    color: #0559B3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
    font-weight: 600;
    letter-spacing: -0.03em;
    overflow: hidden;
  }

  .co-inst-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .co-inst-l {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 16px;
  }

  .co-inst-n { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }

  .co-inst-r { font-size: 15px; font-weight: 500; color: #0559B3; margin-top: 6px; }

  .co-inst-b { font-size: 15.5px; color: rgba(255,255,255,0.62); line-height: 1.65; margin-top: 18px; max-width: 620px; }

  .co-inst-cred { display: flex; gap: 32px; margin-top: 26px; flex-wrap: wrap; }

  .co-inst-cred div span { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }

  .co-inst-cred div small { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-top: 3px; display: block; }


  /* ─── 9 · CERTIFICATE ─── */



  .co-cert-h { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 16px; }

  .co-cert-h em { font-style: normal; color: #0559B3; }

  .co-cert-d { font-size: 16px; line-height: 1.65; color: var(--neutral-600); }





  /* ─── 10 · VOICES ─── */
  .co-voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .co-v {
    background: var(--white);
    border: 1px solid #ececec;
    border-top: 3px solid #0559B3;
    border-radius: 12px;
    padding: 28px 26px 24px;
    box-shadow: 0 4px 16px rgba(10,10,10,0.023);
    display: flex;
    flex-direction: column;
  }

  .co-v-stars { display: inline-flex; gap: 2px; margin-bottom: 16px; }

  .co-v-stars svg { width: 14px; height: 14px; fill: #0559B3; }

  .co-v-q { font-size: 15px; line-height: 1.6; color: var(--neutral-800); letter-spacing: -0.01em; flex: 1; }

  .co-v-w { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--neutral-200); display: flex; align-items: center; gap: 11px; }

  .co-v-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--neutral-100);
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .co-v-n { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }

  .co-v-r { font-size: 12px; color: #5F6670; margin-top: 2px; }


  /* ─── 12 · FINAL CTA ─── */
  .co-cta-inner {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    background: var(--black);
    border-radius: 14px;
    overflow: hidden;
    padding: 60px 48px;
    text-align: center;
  }

  

  .co-cta-inner > * { position: relative; z-index: 1; }

  .co-cta-t {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    max-width: 680px;
    margin: 0 auto 16px;
  }

  .co-cta-t em { font-style: normal; color: #0559B3; }

  .co-cta-s { font-size: 16px; color: rgba(255,255,255,0.62); line-height: 1.6; max-width: 520px; margin: 0 auto 26px; }

  .co-cta-price { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }

  .co-cta-price b { font-size: 32px; font-weight: 600; letter-spacing: -0.04em; color: #fff; }

  .co-cta-price s { font-size: 16px; color: rgba(255,255,255,0.62); }

  .co-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  .co-lime {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 8px;
    background: #0559B3;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
    transition: opacity 0.15s, transform 0.1s;
  }

  .co-lime:hover { opacity: 0.88; }

  .co-lime:active { transform: scale(0.98); }

  .co-ghost-d {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
    transition: border-color 0.15s, background 0.15s;
  }

  .co-ghost-d:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }

  .co-cta-guar { font-size: 13px; color: rgba(255,255,255,0.68); margin-top: 22px; }


  /* ─── 13 · MOBILE STICKY BUY BAR ─── */
  .co-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--neutral-200);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }

  .co-mobile.show { transform: translateY(0); }

  .co-mobile-p { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; color: var(--black); }

  .co-mobile-p s { font-size: 13px; color: #5F6670; font-weight: 400; margin-left: 6px; }

  .co-mobile-p small { display: block; font-size: 11.5px; color: #5F6670; font-weight: 400; margin-top: 1px; letter-spacing: 0; }

  .co-mobile-b {
    padding: 12px 26px;
    border-radius: 8px;
    background: #0559B3;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
  }


  /* long subs on this page must wrap — index.html's default is nowrap */
  .co-out .section-sub,
  .co-fit .section-sub,
  .co-voices .section-sub { white-space: normal; max-width: 640px; }

  .co-eyebrow-c { text-align: center; }

  .co-out .section-title,
  .co-fit .section-title,
  .co-voices .section-title,
  .co-faq .section-title { max-width: none; }


  /* body-copy emphasis stays at 600 */
  .co-v-q b, .co-mod-d b, .co-o-d b { font-weight: 600; }
/* ═══════════ RESPONSIVE ═══════════ */
  @media (max-width: 1080px) {
    .co-hero-inner { grid-template-columns: 1fr 350px; gap: 40px; }
    .co-inst-inner { grid-template-columns: 180px 1fr; gap: 36px; padding: 44px 36px; }
    .co-inst-av { width: 180px; height: 180px; font-size: 48px; }
  }
@media (max-width: 940px) {
    .co-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .co-card { position: static; max-width: 480px; }
    .co-sub { max-width: none; }
    .co-out-grid { grid-template-columns: 1fr 1fr; }
    .co-proj-grid, .co-cert-grid { grid-template-columns: 1fr; gap: 34px; }
    .co-proj-img, .co-cert-img { max-width: 520px; }
    .co-voices-grid { grid-template-columns: 1fr; }
    .co-bar-links { gap: 18px; overflow-x: auto; scrollbar-width: none; }
    .co-bar-links::-webkit-scrollbar { display: none; }
  }
@media (max-width: 820px) {
    .co-fit-grid { grid-template-columns: 1fr; }
    .co-inst-inner { grid-template-columns: 1fr; padding: 40px 28px; }
    .co-inst-av { width: 120px; height: 120px; font-size: 34px; border-radius: 12px; }
  }
@media (max-width: 760px) {
    body { padding-bottom: 74px; }
    .co-mobile { display: flex; }
    .co-hero { padding: calc(var(--nav-h) + 28px) 16px 40px; }
    .co-out, .co-fit, .co-curr, .co-proj, .co-inst,
    .co-cert, .co-voices, .co-faq { padding: 60px 16px; }
    .co-tools { padding: 0 16px 60px; }
    .co-cta { padding: 60px 16px 72px; }
    .co-bar-inner { padding: 0 16px; height: 54px; }
    .co-bar-price { display: none; }
    .co-tools-inner, .co-fit-c { padding: 28px 22px; }
    .co-cta-inner { padding: 44px 22px; border-radius: 12px; }
    .co-inst-inner { border-radius: 12px; }
    .co-card-body { padding: 20px 20px 22px; }
  }
@media (max-width: 620px) {
    .co-out-grid { grid-template-columns: 1fr; }
    .co-mod summary { gap: 12px; padding: 16px; flex-wrap: wrap; }
    .co-mod-t { flex-basis: 100%; order: 3; }
    .co-mod-body { padding: 0 16px 18px; }
    .co-curr-head { align-items: flex-start; }
    .co-inst-cred { gap: 22px; }
  }
@media (prefers-reduced-motion: reduce) {
    .co-mobile { transition: none; }
  }


  /* ═══ added CRO sections ═══ */
  .cx-sec { padding: 72px 0; }

  .cx-sec.alt { background: transparent; }

  .cx-inner { max-width: 1160px; margin: 0 auto; }

  .cx-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0559B3;
    margin-bottom: 14px;
  }

  .cx-h {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--black);
    margin-bottom: 14px;
  }

  .cx-h em { font-style: normal; color: #0559B3; }

  .cx-sub {
    font-size: 16px;
    color: #5F6670;
    line-height: 1.6;
    max-width: 640px;
    margin-bottom: 34px;
  }


  /* skills chips */
  .cx-skills { display: flex; flex-wrap: wrap; gap: 10px; }

  .cx-skill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--neutral-800); background: #fff; border: 1px solid var(--neutral-200); border-radius: 100px; padding: 9px 16px; box-shadow: 0 1px 2px rgba(11,30,58,0.028); }

  .cx-skill svg { width: 15px; height: 15px; stroke: #0559B3; fill: none; stroke-width: 2.2; }


  /* tools grid */
  .cx-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

  .cx-tool { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--neutral-200); border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 6px 14px rgba(11,30,58,0.023); }

  .cx-tool-ic { width: 38px; height: 38px; border-radius: 9px; background: rgba(5,89,179,0.09); display: flex; align-items: center; justify-content: center; flex: none; }

  .cx-tool-ic svg { width: 20px; height: 20px; stroke: #0559B3; fill: none; stroke-width: 1.7; }

  .cx-tool b { font-size: 14px; font-weight: 600; display: block; }

  .cx-tool span { font-size: 12px; color: #5F6670; }


  /* requirements list */
  .cx-reqs { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

  .cx-req { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; color: var(--neutral-800); line-height: 1.5; }

  .cx-req svg { width: 20px; height: 20px; stroke: #0559B3; fill: none; stroke-width: 2; flex: none; margin-top: 1px; }


  /* career outcomes stats */
  .cx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }

  .cx-stat { background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 24px 20px; text-align: center; box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 8px 20px rgba(11,30,58,0.027); }

  .cx-stat-n { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: #0559B3; line-height: 1; }

  .cx-stat-l { font-size: 13px; color: var(--neutral-600); margin-top: 8px; line-height: 1.4; }

  .cx-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; opacity: 0.75; }

  .cx-logos span { font-size: 17px; font-weight: 700; color: #5F6670; letter-spacing: -0.02em; }


  /* instructor */
  .cx-inst { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start; background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 32px; box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 10px 26px rgba(11,30,58,0.032); }

  .cx-inst-av { width: 150px; height: 150px; border-radius: 12px; background: #0559B3; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 44px; font-weight: 800; }

  .cx-inst h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

  .cx-inst .cx-inst-role { font-size: 14px; color: #0559B3; font-weight: 600; margin: 3px 0 14px; }

  .cx-inst p { font-size: 14.5px; color: var(--neutral-600); line-height: 1.6; margin-bottom: 10px; }

  .cx-inst-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }

  .cx-inst-meta div { font-size: 13px; color: var(--neutral-600); }

  .cx-inst-meta b { display: block; font-size: 19px; font-weight: 800; color: var(--black); letter-spacing: -0.02em; }


  /* ratings breakdown */
  .cx-rate { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 32px; box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 8px 20px rgba(11,30,58,0.027); }

  .cx-rate-big { text-align: center; }

  .cx-rate-num { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

  .cx-rate-stars { color: #F59E0B; font-size: 18px; letter-spacing: 2px; margin: 8px 0 4px; }

  .cx-rate-cnt { font-size: 13px; color: #5F6670; }

  .cx-rate-bars { display: flex; flex-direction: column; gap: 9px; }

  .cx-rate-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--neutral-600); }

  .cx-rate-row .rl { width: 42px; white-space: nowrap; }

  .cx-rate-track { flex: 1; height: 8px; border-radius: 100px; background: var(--neutral-200); overflow: hidden; }

  .cx-rate-fill { height: 100%; background: #0559B3; border-radius: 100px; }

  .cx-rate-pct { width: 36px; text-align: right; }


  /* comparison table */
  .cx-cmp { background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 10px 26px rgba(11,30,58,0.032); }

  .cx-cmp-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; }

  .cx-cmp-row + .cx-cmp-row { border-top: 1px solid var(--neutral-200); }

  .cx-cmp-row > div { padding: 16px 22px; font-size: 14.5px; display: flex; align-items: center; gap: 9px; }

  .cx-cmp-head > div { font-weight: 700; font-size: 13px; background: var(--neutral-50); }

  .cx-cmp-head .cx-cmp-us { background: #0559B3; color: #fff; }

  .cx-cmp-feat { color: var(--neutral-700); font-weight: 500; }

  .cx-cmp-us { background: rgba(5,89,179,0.04); font-weight: 600; }

  .cx-cmp svg { width: 18px; height: 18px; flex: none; }

  .cx-yes svg { stroke: #0F9F6E; fill: none; stroke-width: 2.4; }

  .cx-no svg { stroke: var(--neutral-400); fill: none; stroke-width: 2.4; }
@media (max-width: 860px) {
    .cx-stats { grid-template-columns: 1fr 1fr; }
    .cx-inst, .cx-rate { grid-template-columns: 1fr; text-align: center; }
    .cx-inst-av { margin: 0 auto; }
    .cx-cmp-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
    .cx-cmp-row > div { padding: 13px 12px; font-size: 13px; }
  }



  /* hero-left image card */
  .co-hero-fig {
    margin-top: 30px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px rgba(11,30,58,0.035), 0 22px 50px rgba(11,30,58,0.068);
    border: 1px solid rgba(11,18,32,0.06);
    background: #fff;
    width: 100%;
  }

  .co-hero-fig img {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  }
@media (max-width: 900px) { .co-hero-fig { max-width: 100%; margin-top: 26px; } }



  /* ═══ skills covered — borderless ═══ */
  .sk-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    column-gap: 40px; row-gap: 6px;
    margin-top: 30px;
    max-width: 1040px; margin-left: auto; margin-right: auto;
  }

  .sk-item {
    display: flex; align-items: center; gap: 12px;
    font-size: 16px; color: var(--neutral-800); line-height: 1.4;
    padding: 13px 0;
  }

  .sk-item svg { width: 17px; height: 17px; flex: none; stroke: #0559B3; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  .sk-chk { width: 17px; height: 17px; flex: none; stroke: #0559B3; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }


  .sk-toolsec { margin-top: 46px; }


  .sk-tools {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    column-gap: 40px; row-gap: 16px;
    max-width: 1040px; margin-left: auto; margin-right: auto;
  }

  .sk-tool {
    display: flex; align-items: center; gap: 16px;
    padding: 15px 6px; border-radius: 10px;
    background: transparent;
    transition: background 0.18s;
  }

  .sk-tool:hover { background: #F6F9FD; }

  .sk-tlogo {
    width: 40px; height: 40px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: none;
    color: var(--tc);
  }

  .sk-tlogo svg { width: 34px; height: 34px; display: block; }

  .sk-tool b { font-size: 14.5px; font-weight: 600; display: block; letter-spacing: -0.01em; }

  .sk-tool > div > span { font-size: 12.5px; color: #5F6670; }
@media (max-width: 900px) {
    .sk-grid, .sk-tools { grid-template-columns: 1fr 1fr; }
  }
@media (max-width: 600px) {
    .sk-grid, .sk-tools { grid-template-columns: 1fr; }
  }



  .sk-center { text-align: center; }

  .sk-center-sub { text-align: center; margin-left: auto; margin-right: auto; }



  /* optical balancing — each brand mark fills its viewBox differently */
  .sk-tlogo svg { width: 32px; height: 32px; display: block; }

  .sk-tool[data-t="gemini"]     .sk-tlogo svg { width: 36px; height: 36px; }
  /* thin star, needs more */
  .sk-tool[data-t="perplexity"] .sk-tlogo svg { width: 34px; height: 34px; }

  .sk-tool[data-t="copilot"]    .sk-tlogo svg { width: 34px; height: 34px; }

  .sk-tool[data-t="notion"]     .sk-tlogo svg { width: 28px; height: 28px; }
  /* solid block, reads heavy */
  .sk-tool[data-t="claude"]     .sk-tlogo svg { width: 33px; height: 33px; }

  .sk-tool[data-t="chatgpt"]    .sk-tlogo svg { width: 32px; height: 32px; }



  /* ═══ curriculum — full-screen stacking cards ═══ */









  .stk-lbl-on { color: #0559B3; }









@media (max-width: 900px) {
    /* keep the stacking effect — just fit the card to the viewport */
  }
@media (max-width: 600px) {
  }


  /* ═══ tools covered — logo wall in motion ═══ */
  .tw { margin-top: 8px; }

  .tw-mq { position: relative; overflow: hidden; padding: 10px 0; }

  .tw-mq + .tw-mq { margin-top: 38px; }

  .tw-mq::before, .tw-mq::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 170px; z-index: 2; pointer-events: none;
  }

  .tw-mq::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }

  .tw-mq::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

  .tw-tr {
    display: flex; gap: 76px; width: max-content; align-items: flex-start;
    animation: twL 42s linear infinite;
  }

  .tw-tr.rev { animation: twR 42s linear infinite; }

  .tw-mq:hover .tw-tr { animation-play-state: paused; }
 from { transform: translateX(0); }
 to { transform: translateX(-33.333%); }
 from { transform: translateX(-33.333%); }
 to { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .tw-tr, .tw-tr.rev { animation: none; } }

  .tw-i {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 13px; text-align: center;
  }

  .tw-i svg { width: 42px; height: 42px; display: block; }

  .tw-i b {
    display: block; font-family: var(--font-display,'Figtree',sans-serif);
    font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--black);
  }

  .tw-i em { display: block; font-style: normal; font-size: 11.5px; color: #5F6670; margin-top: 3px; }
@media (max-width: 700px) {
    .tw-tr { gap: 48px; }
    .tw-i svg { width: 34px; height: 34px; }
  }

  /* outcome icons — thin circle ring, floating */
  .co-o-ic {
    width: 76px; height: 76px; border-radius: 50%;
    border: 1.5px solid rgba(5,89,179,0.22);
    display: flex; align-items: center; justify-content: center;
    color: #0559B3; margin-bottom: 22px;
    animation: coFloat 5.5s ease-in-out infinite;
  }

  .co-o:nth-child(2) .co-o-ic{animation-delay:.7s}
 .co-o:nth-child(3) .co-o-ic{animation-delay:1.4s}

  .co-o:nth-child(4) .co-o-ic{animation-delay:2.1s}
 .co-o:nth-child(5) .co-o-ic{animation-delay:2.8s}

  .co-o:nth-child(6) .co-o-ic{animation-delay:3.5s}
0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
@media (prefers-reduced-motion: reduce){.co-o-ic{animation:none}}



  /* tools strip inside the pricing card */
  .pc-tools { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--neutral-200); }

  .pc-tools-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #5F6670; margin-bottom: 14px; }

  .pc-tools-row { display: flex; flex-wrap: wrap; gap: 12px 13px; align-items: center; }

  .pc-tool { display: inline-flex; }

  .pc-tool svg { width: 24px; height: 24px; display: block;
    transition: transform 0.22s cubic-bezier(.22,1,.36,1); }

  .pc-tool:hover svg {  }

  .pc-tools-note { font-size: 12px; color: #5F6670; margin-top: 14px; }



  .pc-more { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600;
    color: #0559B3; background: rgba(5,89,179,0.08); padding: 5px 10px; border-radius: 100px;
    white-space: nowrap; }


  /* ═══ course overview — sticky advisor rail ═══ */
  .ovl-split { display: grid; grid-template-columns: 1fr 358px; gap: 52px; align-items: start; }

  .ovl-h { font-family: var(--font-display,'Figtree',sans-serif); font-size: clamp(26px,3vw,34px);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--black); }

  .ovl-h em { font-style: normal; color: #0559B3; }

  .ovl-p { font-size: 16px; color: #5F6670; line-height: 1.68; margin-top: 16px; }

  .ovl-p b { color: var(--black); font-weight: 600; }

  .ovl-sub { font-family: var(--font-display,'Figtree',sans-serif); font-size: 20px; font-weight: 700;
    letter-spacing: -0.02em; margin: 34px 0 16px; color: var(--black); }

  .ovl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; }

  .ovl-li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--neutral-800); }

  .ovl-li svg { color: #0559B3; flex: none; margin-top: 2px; }

  /* same check as Skills covered — 17px, brand blue, no circle */
  .ovl-ck { width: 17px; height: 17px; flex: none; fill: none; stroke: #0559B3;
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }


  .ovl-rail { position: sticky; top: 20px; }

  .ovl-card { background: #FAFBFD; border: 1px solid var(--neutral-200); border-radius: 12px;
    padding: 26px 24px; box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 10px 26px rgba(11,30,58,0.027); }

  .ovl-card + .ovl-card { margin-top: 16px; }

  .ovl-card h4 { font-family: var(--font-display,'Figtree',sans-serif); font-size: 17px;
    font-weight: 700; letter-spacing: -0.02em; text-align: center; color: var(--black); }

  .ovl-cs { font-size: 13px; color: #5F6670; text-align: center; margin-top: 5px; }

  .ovl-form { display: block; }

  .ovl-fld { width: 100%; border: 0; border-bottom: 1px solid var(--neutral-200); background: none;
    padding: 12px 2px; font-size: 14px; font-family: inherit; color: var(--black); margin-top: 8px; }

  .ovl-fld:focus { outline: none; border-bottom-color: #0559B3; }

  .ovl-fld::placeholder { color: #5F6670; }

  .ovl-b1 { display: block; width: 100%; background: #0559B3; color: #fff; font-size: 14.5px; font-weight: 600;
    padding: 13px; border-radius: 8px; border: 0; margin-top: 20px; cursor: pointer; font-family: inherit; }

  .ovl-b2 { display: block; width: 100%; text-align: center; color: #0559B3; background: #fff;
    border: 1.5px solid rgba(5,89,179,0.3); font-size: 14.5px; font-weight: 600; padding: 12px;
    border-radius: 8px; text-decoration: none; margin-top: 10px; }

  .ovl-trust { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px;
    color: #5F6670; margin-top: 14px; }

  .ovl-trust svg { color: #5F6670; }
@media (max-width: 980px) {
    .ovl-split { grid-template-columns: 1fr; gap: 34px; }
    .ovl-rail { position: static; }
    .ovl-two { grid-template-columns: 1fr; }
  }

  /* ═══ from theory to practical ═══ */
  .pr-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 38px 0 0; }

  .pr-s {
    padding: 34px 26px; text-align: center;
    background: #fff;
    border: 1px solid rgba(11,18,32,0.32);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 8px 20px rgba(11,30,58,0.032), 0 2px 6px rgba(11,30,58,0.028);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1),
                box-shadow 0.28s cubic-bezier(.22,1,.36,1),
                border-color 0.28s ease;
  }

  .pr-s:hover {
    
    border-color: rgba(5,89,179,0.28);
    box-shadow: 0 4px 8px rgba(11,30,58,0.035), 0 20px 44px rgba(11,30,58,0.063), 0 6px 14px rgba(11,30,58,0.032);
  }

  .pr-s b { transition: transform 0.28s cubic-bezier(.22,1,.36,1); }

  .pr-s:hover b {  }

  .pr-s span { font-size: 13.5px; color: #5F6670; display: block; }

  .pr-s b { font-family: var(--font-display,'Figtree',sans-serif); font-size: 40px; font-weight: 800;
    color: #0559B3; letter-spacing: -0.03em; display: block; margin-top: 5px; line-height: 1; }

  .pr-s em { font-style: normal; font-size: 12.5px; color: #5F6670; display: block; margin-top: 7px; }


  .pr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

  .pr-ch { font-family: var(--font-display,'Figtree',sans-serif); font-size: 17px; font-weight: 700;
    letter-spacing: -0.02em; margin-bottom: 18px; color: var(--black); text-align: center; }

  .pr-arts { display: flex; flex-direction: column; gap: 13px; width: max-content; max-width: 100%; margin: 0 auto; }

  .pr-a { display: flex; gap: 12px; align-items: center; font-size: 14.5px; color: var(--neutral-800); }

  .pr-a svg { color: #0559B3; flex: none; }


  .pr-panel { background: #FAFBFD; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 28px 24px; }

  .pr-tools { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px 10px; justify-items: center; }

  .pr-t { display: flex; flex-direction: column; align-items: center; min-width: 0; }

  .pr-t svg { width: 28px; height: 28px; display: block; }

  .pr-tn { font-size: 11px; color: #5F6670; text-align: center; margin-top: 7px; line-height: 1.3;
    max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 1040px) {
    .pr-split { grid-template-columns: 1fr; gap: 36px; }
    .pr-tools { grid-template-columns: repeat(5, minmax(0,1fr)); }
  }
@media (max-width: 760px) {
    .pr-band { grid-template-columns: 1fr; gap: 14px; }
    .pr-s { padding: 26px 20px; }
    .pr-s b { font-size: 34px; }
  }
@media (max-width: 420px) {
    .pr-tools { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
@media (max-width: 1208px) {
    .cx-inner, .co-inner, .faq-inner { padding-left: 24px; padding-right: 24px; }
  }



  /* ═══ key features ═══ */
  .kf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }

  .kf-c {
    background: #fff; border: 1px solid #EAEEF4; border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 8px 20px rgba(11,30,58,0.032), 0 2px 6px rgba(11,30,58,0.028);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1), box-shadow 0.28s cubic-bezier(.22,1,.36,1), border-color 0.28s ease;
  }

  .kf-c:hover {
     border-color: rgba(5,89,179,0.28);
    box-shadow: 0 4px 8px rgba(11,30,58,0.035), 0 20px 44px rgba(11,30,58,0.063), 0 6px 14px rgba(11,30,58,0.032);
  }

  .kf-ic { color: #0559B3; margin-bottom: 18px; transition: transform 0.28s cubic-bezier(.22,1,.36,1); }

  .kf-c:hover .kf-ic {  }

  .kf-c b { display: block; font-family: var(--font-display,'Figtree',sans-serif);
    font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--black);
    transition: color 0.28s ease; }

  .kf-c:hover b { color: #0559B3; }

  .kf-c p { font-size: 13.5px; color: #5F6670; line-height: 1.55; }


  .kf-logos-wrap { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--neutral-200); }

  .kf-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #64748B; text-align: center; margin-bottom: 26px; }

  .kf-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; align-items: center; }

  .kf-l { display: inline-flex; align-items: center; gap: 10px;
    transition: transform 0.24s cubic-bezier(.22,1,.36,1); }

  .kf-l:hover {  }

  .kf-l span { color: #334155; }

  .kf-l svg { width: 26px; height: 26px; display: block; flex: none; }

  .kf-l span { font-family: var(--font-display,'Figtree',sans-serif);
    font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 1040px) { .kf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .kf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .kf-c { padding: 20px 16px; }
    .kf-c b { font-size: 14px; }
    .kf-c p { font-size: 12px; }
    .kf-ic svg { width: 24px !important; height: 24px !important; }
    .kf-logos { gap: 20px 24px; }
    .kf-l span { font-size: 13.5px; }
  }


  /* ═══ projects — 3D coverflow carousel ═══ */
          /* extra breathing room under the header */



  .pj-tile { width: 70px; height: 70px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; background: var(--c3); margin-bottom: 18px; }

  .pj-cat { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #0559B3; background: rgba(5,89,179,.08);
    padding: 5px 10px; border-radius: 6px; margin-bottom: 11px; }

  .pj-t { font-family: var(--font-display,'Figtree',sans-serif); font-size: 21px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.22; margin-bottom: 12px; color: var(--black); }

  .pj-d { font-size: 15px; color: #5F6670; line-height: 1.6; margin-bottom: 18px; }

  .pj-gets { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }

  .pj-gets li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--black); }

  .pj-gets svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--c1);
    fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  .pj-m { display: flex; align-items: center; gap: 14px; padding-top: 14px;
    border-top: 1px solid var(--neutral-200); margin-top: auto; font-size: 12.5px; color: #5F6670; }

  .pj-tools { display: flex; gap: 6px; margin-left: auto; }

  .pj-tools svg { width: 19px; height: 19px; }

@media (max-width: 820px) {
  }
@media (max-width: 600px) {
    .pj-t { font-size: 19px; } .pj-d { font-size: 14px; line-height: 1.55; }
    .pj-gets li { font-size: 13px; }
    .pj-tile { width: 60px; height: 60px; border-radius: 12px; margin-bottom: 14px; }
  }
/* benefits: 2-up on tablet and phone */
  @media (max-width: 1040px) { .co-out-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 600px) {
    .co-out-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
    .co-o { padding: 20px 16px; }
    .co-o-t { font-size: 14.5px; }
    .co-o-d { font-size: 12px; }
    .co-o-ic { width: 58px; height: 58px; margin-bottom: 14px; }
    .co-o-ic svg { width: 28px !important; height: 28px !important; }
  }
/* ═══ mobile navigation ═══ */
  

  .nav-toggle { display: none; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--neutral-200);
    background: #fff; cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }

  .nav-toggle svg { width: 20px; height: 20px; stroke: var(--black); fill: none; stroke-width: 2; stroke-linecap: round; }

  .nav-panel { display: none; }

  .nav-panel.open { display: block; position: fixed; inset: 64px 0 0 0; background: #fff; z-index: 90;
    padding: 24px; overflow-y: auto; border-top: 1px solid var(--neutral-200); }

  .nav-panel a { display: block; padding: 15px 4px; font-size: 16.5px; font-weight: 600;
    color: var(--black); text-decoration: none; border-bottom: 1px solid var(--neutral-200); }

  .nav-panel .np-cta { margin-top: 20px; background: #0559B3; color: #fff; text-align: center;
    border-radius: 8px; border: 0; padding: 14px; }



  /* clip decorative / marquee overflow on small screens */
  .tw-mq { max-width: 100vw; overflow: hidden; }

  .co-hero, .cx-sec, .co-out, .co-curr, .co-faq, .co-cta, .co-fit { overflow-x: clip; }

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



  /* ═══ section CTAs ═══ */
  .sc-cta { display: flex; justify-content: center; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-top: 44px; }

  .sc-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600;
    padding: 13px 26px; border-radius: 8px; text-decoration: none; border: 1.5px solid transparent;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .22s, border-color .22s;
    font-family: inherit; cursor: pointer; }

  .sc-btn.primary { background: #0559B3; color: #fff;
    box-shadow: none; }

  .sc-btn.primary:hover {  box-shadow: none; }

  .sc-btn.ghost { background: #fff; color: #0559B3; border-color: rgba(5,89,179,.32); }

  .sc-btn.ghost:hover {  border-color: #0559B3; background: #F4F8FD; }

  .sc-note { flex-basis: 100%; text-align: center; font-size: 13px; color: #5F6670; margin-top: 4px; }

  /* per-card download inside curriculum */

@media (max-width: 600px) {
    .sc-cta { gap: 10px; margin-top: 34px; }
    .sc-btn { padding: 12px 20px; font-size: 13.5px; width: 100%; justify-content: center; }
  }



  /* curriculum download block */
  .dl-box { margin-top: 64px; display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center;
    background: #0B1220;
    border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 34px 38px;
    box-shadow: 0 2px 6px rgba(11,30,58,0.112), 0 20px 48px rgba(11,30,58,0.117);
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .28s;
    position: relative; overflow: hidden; }

  .dl-box:hover {  border-color: rgba(92,220,229,0.34);
    box-shadow: 0 6px 12px rgba(11,30,58,0.081), 0 28px 60px rgba(11,30,58,0.153); }

  .dl-l { display: flex; gap: 18px; align-items: flex-start; }

  .dl-box .dl-l > div { max-width: 620px; }

  .dl-box h3 { font-family: var(--font-display,'Figtree',sans-serif); font-size: 21px;
    font-weight: 700; letter-spacing: -0.02em; margin-bottom: 7px; color: #fff; }

  .dl-box p { font-size: 14.5px; color: rgba(255,255,255,0.68); line-height: 1.55; max-width: 520px; }

  .dl-l { position: relative; z-index: 1; }

  .dl-box .sc-btn { position: relative; z-index: 1; }

  .dl-box .sc-btn.primary { background: #fff; color: #0B1220;
    box-shadow: 0 2px 6px rgba(0,0,0,0.154), 0 10px 24px rgba(0,0,0,0.09); }

  .dl-box .sc-btn.primary:hover { background: #F2F6FB; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.182), 0 16px 34px rgba(0,0,0,0.117); }

  .dl-f { display: flex; gap: 10px; align-items: center; }

  .dl-in { border: 1px solid var(--neutral-200); background: #fff; border-radius: 8px;
    padding: 13px 16px; font-size: 14.5px; font-family: inherit; min-width: 230px; color: var(--black); }

  .dl-in:focus { outline: none; border-color: #0559B3; }
@media (max-width: 900px) {
    .dl-box { margin-top: 48px; grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
    .dl-f { flex-direction: column; align-items: stretch; }
    .dl-in { min-width: 0; width: 100%; }
  }



  /* ═══ salary & hiring ═══ */
  .sl-card { background: #fff; border: 1px solid rgba(11,18,32,0.32); border-radius: 12px;
    padding: 34px; margin-top: 44px;
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 12px 30px rgba(11,30,58,0.036); }

  .sl-tabwrap { display: flex; justify-content: center; }
      /* centred selector */
  .sl-tabs { display: flex; gap: 6px; background: #FAFBFD; border: 1px solid var(--neutral-200);
    border-radius: 10px; padding: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }

  .sl-tabs::-webkit-scrollbar { display: none; }

  .sl-tab { flex: 0 0 auto; font-family: var(--font-display,'Figtree',sans-serif); font-size: 14px;
    font-weight: 600; padding: 11px 20px; border-radius: 8px; border: 0; background: none;
    color: #5F6670; cursor: pointer; white-space: nowrap; transition: .22s; }

  .sl-tab.on { background: #fff !important; color: #0559B3 !important;
    box-shadow: 0 1px 2px rgba(11,30,58,0.042), 0 4px 12px rgba(11,30,58,0.036); }

  .sl-pane { display: none; background: transparent !important; }

  .sl-pane.on { display: block; animation: slFade .34s cubic-bezier(.22,1,.36,1); }
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: none; }

  .sl-grid { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: center; margin-top: 30px; }

  .sl-desc { font-size: 15.5px; color: #5F6670; line-height: 1.62; margin-bottom: 34px; max-width: 640px; }

  .sl-desc b { color: var(--black); font-weight: 600; }

  .sl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

  .sl-main { display: flex; flex-direction: column; }

  .sl-lbl { font-family: var(--font-display,'Figtree',sans-serif); font-size: 15px;
    font-weight: 700; letter-spacing: -0.02em; margin-bottom: 22px; color: var(--black); }

  .sl-cos { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }

  .sl-co { display: inline-flex; align-items: center; gap: 11px; background: none;
    border: 0; padding: 0; transition: transform .22s cubic-bezier(.22,1,.36,1); }

  .sl-co:hover {  }

  .sl-co svg { width: 30px !important; height: 30px !important; }

  .sl-co span { font-family: var(--font-display,'Figtree',sans-serif); font-size: 15.5px;
    font-weight: 600; color: #334155; letter-spacing: -0.02em; white-space: nowrap; }

  .sl-bars { display: flex; flex-direction: column; gap: 14px; }

  .sl-row { display: grid; grid-template-columns: 1fr 68px; gap: 14px; align-items: center; }

  .sl-track { height: 40px; border-radius: 8px; background: #FAFBFD; border: 1px solid var(--neutral-200); overflow: hidden; }

  .sl-fill { height: 100%; border-radius: 9px; display: flex; align-items: center; padding-left: 13px;
    font-family: var(--font-display,'Figtree',sans-serif); font-size: 15px; font-weight: 800;
    white-space: nowrap;
    transform: scaleX(0); transform-origin: left; animation: slGrow 1.1s cubic-bezier(.22,1,.36,1) forwards; }
 to { transform: scaleX(1); }

  .sl-fill.min, .sl-fill.max { background: #EAF1FA; color: #0559B3; }

  .sl-fill.avg { background: #0559B3; color: #fff; }

  .sl-row small { font-size: 12px; color: #5F6670; font-weight: 500; }

  .sl-meta { display: flex; gap: 52px; flex-wrap: wrap; align-items: flex-start; margin-top: 36px; padding-top: 30px;
    border-top: 1px solid var(--neutral-200); }

  .sl-meta.top { margin-top: 0; margin-bottom: 34px; padding-top: 0; padding-bottom: 30px;
    border-top: 0; border-bottom: 1px solid var(--neutral-200);
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: flex-start; gap: 52px; }

  .sl-meta > span { display: flex; flex-direction: column; gap: 13px; align-self: flex-start; }

  .sl-meta .k { font-family: var(--font-display,'Figtree',sans-serif); font-size: 15px;
    font-weight: 700; letter-spacing: -0.02em; color: var(--black); }

  .sl-meta b { font-family: var(--font-display,'Figtree',sans-serif);
    font-size: 15.5px; font-weight: 600; color: #1E293B; letter-spacing: -0.01em; line-height: 1.45; }

  .sl-img { border-radius: 12px; overflow: hidden; min-height: 0; height: 340px; align-self: center;
    background: #EEF3FA; border: 1px dashed rgba(5,89,179,.3);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #3A6599; font-size: 13px; text-align: center; padding: 20px; }

  .sl-src { text-align: center; font-size: 12px; color: #5F6670; margin-top: 24px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .sl-fill { animation: none; transform: none; } }
@media (max-width: 1040px) {
    .sl-grid { grid-template-columns: 1fr; }
    .sl-img { min-height: 220px; order: -1; }
  }
@media (max-width: 760px) {
    .sl-card { padding: 24px 20px; }
    .sl-two { grid-template-columns: 1fr; gap: 26px; }
    .sl-tab { font-size: 13px; padding: 10px 15px; }
    .sl-desc { font-size: 14.5px; }
  }



  .sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }

  .sl-chip { font-family: var(--font-display,'Figtree',sans-serif);
    font-size: 13.5px; font-weight: 600; color: #0559B3; letter-spacing: -0.01em;
    background: rgba(5,89,179,0.07); border: 1px solid rgba(5,89,179,0.16);
    padding: 7px 13px; border-radius: 8px; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1); }

  .sl-chip:hover { background: rgba(5,89,179,0.12); border-color: rgba(5,89,179,0.34);  }
@media (max-width: 600px) { .sl-chip { font-size: 12.5px; padding: 6px 11px; } }



  .sl-fill.us.min, .sl-fill.us.max { background: #E9F6F1; color: #0E7A5A; }

  .sl-fill.us.avg { background: #0E7A4F; color: #fff; }
@media (max-width: 1040px) { .sl-two { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sl-two { grid-template-columns: 1fr !important; } }



  /* lift content sections above the page grid overlay */
  .cx-sec { position: relative; z-index: 1; }



  /* ═══ comparison table ═══ */
  .cmp-t { border: 1px solid var(--neutral-200); border-radius: 12px; overflow: hidden;
    background: #fff; margin-top: 40px; }

  .cmp-h { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-bottom: 1px solid var(--neutral-200);
    background: #FAFBFD; }

  .cmp-h > div { padding: 18px 26px; font-family: var(--font-display,'Figtree',sans-serif);
    font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--black); }

  .cmp-h .cmp-mid { background: #0B7A55 !important; color: #fff !important; }

  .cmp-h .cmp-last { color: #5F6670; }

  .cmp-r { display: grid; grid-template-columns: 1.2fr 1fr 1fr;
    border-bottom: 1px solid var(--neutral-200); transition: background .2s; }

  .cmp-r:last-child { border-bottom: 0; }

  .cmp-r:hover { background: #FAFCFE; }

  .cmp-r > div { padding: 22px 26px; display: flex; gap: 12px; font-size: 14px;
    line-height: 1.55; color: #5F6670; }

  .cmp-r .cmp-lbl { font-weight: 600; color: var(--black); font-size: 15px; align-items: center; }

  .cmp-r .cmp-mid { background: #F3F9F6; }

  .cmp-r svg { flex: none; margin-top: 2px; }
@media (max-width: 860px) {
    .cmp-h, .cmp-r { grid-template-columns: 1fr; }
    .cmp-h > div:first-child { display: none; }
    .cmp-h { border-bottom: 0; }
    .cmp-h > div { padding: 12px 20px; font-size: 12.5px; }
    .cmp-r { padding: 6px 0 14px; }
    .cmp-r > div { padding: 12px 20px; }
    .cmp-r .cmp-lbl { padding-bottom: 4px; font-size: 15.5px; }
  }



  /* ═══ footer ═══ */
  .ft { background: #fff; border-top: 1px solid rgba(11,18,32,0.42); padding: 64px 0 40px;
    margin-top: 0; position: relative; z-index: 1; }





  .co-cta-btns .co-ghost-d { display: inline-flex; align-items: center; gap: 9px; }

  .co-cta-btns .co-lime { display: inline-flex; align-items: center; }
@media (max-width: 560px) {
    .co-cta-btns { flex-direction: column; align-items: center; }
    .co-cta-btns a { justify-content: center; }
  }

  .nav-logo .ebp-lk { height: 38px; }



  /* ═══════════════════════════════════════════════════════════════
     Curriculum trigger — module index.

     Replaces the full module-one preview. The pile behind it is
     unchanged (.cm-paper), and so is the dialog: each row opens it
     scrolled to that module, the footer opens it at the top.
     The container is a <div>, not a <button>, because the rows are
     themselves buttons and interactive elements cannot nest.
     ═══════════════════════════════════════════════════════════════ */
  .cm-ix {
    position: relative;
    background: #fff;
    border: 1px solid var(--neutral-200, #EAEEF4);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11,30,58,0.042), 0 10px 26px rgba(11,30,58,0.036);
  }
  .cm-ix-h {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 28px;
    border-bottom: 1px solid var(--neutral-200, #EAEEF4);
    background: #FAFBFD;
  }
  .cm-ix-h b {
    font-family: var(--font-display, 'Figtree', sans-serif);
    font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--black, #0B1220);
  }
  .cm-ix-h span { font-size: 13px; color: #5A6B82; white-space: nowrap; }

  .cm-ix-r {
    display: grid; grid-template-columns: auto 1px 1fr auto auto;
    gap: 16px; align-items: center; width: 100%;
    padding: 15px 28px; border: 0; border-bottom: 1px solid #F2F5F9;
    background: none; text-align: left; cursor: pointer;
    font-family: inherit; transition: background .16s;
  }
  .cm-ix-r:hover { background: #F6F9FD; }
  .cm-ix-r:focus-visible { outline: 2px solid #0559B3; outline-offset: -2px; }

  /* plain tabular numeral, no container — "01" and "10" stay the same
     width so the rule below them lines up down the whole list */
  .cm-ix-n {
    font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: #0559B3;
  }

  .cm-ix-rule { width: 1px; height: 20px; background: #E6EBF2; }
  .cm-ix-t { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--black, #0B1220); }
  .cm-ix-l { font-size: 13px; color: #5A6B82; white-space: nowrap; }
  .cm-ix-c { width: 15px; height: 15px; fill: none; stroke: #B9C4D2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cm-ix-r:hover .cm-ix-c { stroke: #0559B3; }

  .cm-ix-f {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 28px; border: 0; background: none;
    cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 600; color: #0559B3;
    transition: background .16s;
  }
  .cm-ix-f:hover { background: #F6F9FD; }
  .cm-ix-f:focus-visible { outline: 2px solid #0559B3; outline-offset: -2px; }
  .cm-ix-a { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s; }
  .cm-ix-f:hover .cm-ix-a {  }

  /* the sheets sit behind a taller card now, so they need more of an edge */
  .cm-trig .cm-p2 { height: 64px; }
  .cm-trig .cm-p3 { height: 64px; }

  @media (max-width: 900px) {
    .cm-ix-h { flex-direction: column; align-items: flex-start; gap: 5px; padding: 16px 18px; }
    .cm-ix-r { grid-template-columns: auto 1px 1fr; gap: 13px; padding: 13px 18px; }
    .cm-ix-l, .cm-ix-c { display: none; }
    .cm-ix-f { padding: 15px 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cm-ix-f:hover .cm-ix-a { transform: none; }
  }

  /* ─── keyframes ─── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
@keyframes twL { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes twR { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
@keyframes coFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes slFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slGrow { to { transform: scaleX(1); } }

  /* salary tabs: scroll rather than overflow on narrow screens */
  @media (max-width: 860px) {
    .sl-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .sl-tabs::-webkit-scrollbar { display: none; }
    .sl-tab { flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 10px 14px; }
  }

  .co-legal{font-size:12.5px;line-height:1.55;color:#5F6670;margin:14px 0 0;text-align:center}
  .co-legal a{color:#5F6670;text-decoration:underline;text-underline-offset:2px}
  .co-legal a:hover{color:#0559B3}

  /* The course pages carry their own fixed enrol bar (#co-mobile). Below 760px
     it sits on top of the shared callback bar and makes its controls
     untappable, so the callback bar stands down — the enrol bar takes the
     bottom edge here. */
  @media (max-width: 760px) {
    .cbar { display: none; }
    .cbp { bottom: 0; }
  }

  /* ═══════════════════════════════════════════════════════════════
     Mobile corrections. Each of these is a desktop layout that does
     not survive a narrow screen — fixed heights, sticky stacks and
     full-bleed buttons.
     ═══════════════════════════════════════════════════════════════ */
  @media (max-width: 760px) {

    /* 1 · Projects — the stage had a fixed 640px height while the card
       is ~420px, leaving 220px of dead space under it. */

    /* 2 · Buttons — full-bleed reads as a form control, not a button.
       Match the rest of the site: intrinsic width, centred. */
    .sc-btn {
      width: auto; max-width: 100%;
      padding: 13px 24px; font-size: 14.5px;
      justify-content: center;
    }
    .sc-btns, .co-cta-btns, .tw-cta, .co-out-cta {
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    }

    /* 3 · Curriculum — keep the desktop pile. The card is taller than a
       phone screen, so cap it to the space under the nav and let the body
       scroll inside; the heading and download stay pinned and visible. */
    /* the fixed enrol bar owns the bottom 65px — the card has to clear it
       or its last rows sit underneath and read as clipped */
    .stk-dl, .stk-count { flex: 0 0 auto; }
    /* the benefits section already sits between two other enrol CTAs;
       on a phone the fixed bar carries the same action permanently */
    .co-out .sc-cta { display: none; }

    /* performance: the pile animates ten cards at once, so let the
       compositor own them and stop off-screen ones repainting */
    /* the six floating benefit icons are pure decoration — drop the loop */
    .co-o-ic { animation: none; }
    /* slGrow draws the salary bars from scaleX(0); skip the animation but
       keep the end state, or the bars render at zero width */
    .sl-fill { animation: none; transform: scaleX(1); }

    /* ten promoted layers on the pile is more than the compositor needs;
       promote only while it is actually moving */



    /* 4 · Hero — the enrol card duplicates the price and CTA that the
       fixed bottom bar already carries. */
    .co-hero-inner > .co-card { display: none; }
  }

  /* ═══ projects — native scroll with snap points ═══
     Replaces the 3D coverflow, its dots, arrows and 3s autoplay. The browser
     owns the gesture, so trackpad, touch and drag all behave natively. */

  @media (max-width: 1000px) {
  }
  @media (max-width: 640px) {
  }
  @media (prefers-reduced-motion: reduce) { }

  /* ═══════════════════════════════════════════════════════════════
     Projects rail — built once, no leftovers.

     A plain horizontal scroller. The browser owns the gesture, so
     touch, trackpad and drag all behave natively. JS does two things:
     paint depth from scroll position, and re-home into the middle set
     when scrolling stops so the rail never reaches an end.
     ═══════════════════════════════════════════════════════════════ */



  @media (max-width: 1000px) {
  }
  @media (max-width: 640px) {
  }

  /* ═══════════════════════════════════════════════════════════════
     Projects — coverflow, index driven.

     There is no scroll container here and nothing listens to a scroll
     event. The visible card is decided by one integer; every card's
     position comes from its distance to that integer, wrapped so the
     set has no first or last. Because nothing reads back the layout,
     there is no feedback path and it cannot drift on its own.
     ═══════════════════════════════════════════════════════════════ */
  .pj-deck {
    position: relative;
    margin-top: 52px;
    height: 470px;
    perspective: 1500px;
    perspective-origin: 50% 45%;
    overflow: hidden;
    touch-action: pan-y;          /* vertical page scroll still works */
    user-select: none;
    -webkit-user-select: none;
  }
  .pj-slot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 440px;
    margin-left: -220px;
    height: 100%;
    transition: transform .42s cubic-bezier(.22,1,.36,1),
                opacity   .42s cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .pj-slot .pj-card {
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(11,18,32,.10);
    border-radius: 12px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11,30,58,0.042), 0 10px 26px rgba(11,30,58,0.045);
  }

  @media (max-width: 1000px) {
    .pj-deck { height: 460px; }
    .pj-slot { width: 380px; margin-left: -190px; }
  }
  @media (max-width: 640px) {
    .pj-deck { height: 440px; margin-top: 34px; perspective: 1000px; }
    .pj-slot { width: 290px; margin-left: -145px; }
    .pj-slot .pj-card { padding: 22px 20px 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pj-slot { transition: none; }
  }

  .pj-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--neutral-200, #E4E9F0);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--black, #0B1220);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 2px rgba(11,30,58,0.042), 0 6px 18px rgba(11,30,58,0.045);
    transition: border-color .18s, background .18s, transform .18s;
  }
  .pj-arrow:hover {
    border-color: rgba(5,89,179,.45);
    background: #fff;
    transform: translateY(-50%)
  }
  .pj-arrow:active { transform: translateY(-50%) scale(.96); }
  .pj-arrow:focus-visible { outline: 2px solid #0559B3; outline-offset: 3px; }
  .pj-arrow svg {
    width: 19px; height: 19px;
    fill: none; stroke: currentColor;
    stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  }
  .pj-prev { left: 14px; }
  .pj-next { right: 14px; }

  @media (max-width: 1000px) { .pj-prev { left: 8px; } .pj-next { right: 8px; } }
  @media (max-width: 640px) {
    .pj-arrow { width: 38px; height: 38px; }
    .pj-arrow svg { width: 16px; height: 16px; }
    .pj-prev { left: 4px; }
    .pj-next { right: 4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pj-arrow, .pj-arrow:hover, .pj-arrow:active { transition: none; transform: translateY(-50%) }
  }

  /* ═══ FAQ — grouped into three themes ═══
     Nine questions in one column reads as a wall; three short lists under
     named themes let someone go straight to the part that applies to them. */
  .faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px;
    margin-top: 40px;
    align-items: start;
  }
  .faq-col-h {
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #0559B3; margin: 0 0 6px; padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-200, #EAEEF4);
  }
  .faq-item { border-bottom: 1px solid var(--neutral-200, #EAEEF4); }
  .faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    
    font-family: var(--font-display, 'Figtree', sans-serif);
    font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
    color: var(--black, #0B1220);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: #0559B3; }
  .faq-item summary:focus-visible { outline: 2px solid #0559B3; outline-offset: 2px; border-radius: 4px; }
  .faq-ic {
    width: 17px; height: 17px; flex: none; margin-top: 3px;
    color: #5A6B82;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .25s ease, color .2s;
  }
  .faq-item[open] .faq-ic { transform: rotate(45deg); color: #0559B3; }
  .faq-answer { padding: 0 0 18px; }
  .faq-answer p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted, #5A6B82); }

  @media (max-width: 900px) {
    .faq-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  }
  @media (prefers-reduced-motion: reduce) { .faq-ic { transition: none; } }

  /* Each theme sits in its own card. The page lattice runs behind every
     section, and a transparent FAQ was disappearing into it — the card
     gives the group an edge to stop against. */
  .faq-col {
    background: #fff;
    border: 1px solid var(--neutral-200, #EAEEF4);
    border-radius: 12px;
    padding: 24px 24px 10px;
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 10px 26px rgba(11,30,58,0.032);
    transition: border-color .2s, box-shadow .2s;
  }
  .faq-col:hover {
    border-color: rgba(5,89,179,.22);
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 14px 32px rgba(11,30,58,0.045);
  }
  .faq-col .faq-col-h { margin-bottom: 4px; }
  .faq-item:last-child { border-bottom: 0; }
  .faq-item summary { padding: 15px 0; }

  @media (max-width: 900px) { .faq-col { padding: 20px 20px 8px; } }
  @media (prefers-reduced-motion: reduce) { .faq-col { transition: none; } }

  /* ═══ Certificate — full-width hero, gently tilted ═══
     The certificate is the argument for the section, so it runs wide enough
     to read the seal, the signature and the ID. A slight 3D tilt gives it
     depth; hovering straightens it. Flat on touch, where a rotated
     certificate just reads as skewed. */
  .co-cert-head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
  .co-cert-h { margin-bottom: 14px; }
  .co-cert-d { margin: 0 auto; max-width: 640px; }

  .co-cert-stage { padding: 0 32px; }
  .co-cert-tilt {
    max-width: 1000px; margin: 0 auto;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(11,30,58,0.056), 0 34px 80px rgba(11,30,58,0.099);
  }
  .co-cert-tilt img { display: block; width: 100%; height: auto; }

  .co-cert-l {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px; margin: 46px 0 0; padding: 0; list-style: none;
  }
  .co-cert-l li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.55; color: var(--muted, #5A6B82);
  }
  .co-cert-l svg {
    width: 17px; height: 17px; flex: none; margin-top: 3px; color: #0559B3;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
  }

  @media (max-width: 900px) {
    .co-cert-l { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
    .co-cert-stage { padding: 0; }
    .co-cert-tilt { border-radius: 8px;
      box-shadow: 0 1px 4px rgba(11,30,58,0.056), 0 14px 34px rgba(11,30,58,0.072); }
  }
  @media (max-width: 560px) { .co-cert-l { grid-template-columns: 1fr; } }


  /* ═══════════════════════════════════════════════════════════════
     Curriculum — a single card in the page, the ten modules in a modal.

     Inline, the ten sticky module frames cost roughly 7,000px of scroll
     before anyone reaches the next section. Module one now stands in for
     the set, and the pile lives inside a full-screen dialog.
     ═══════════════════════════════════════════════════════════════ */
  .cm-sub { font-size: 16.5px; line-height: 1.6; color: var(--muted, #5A6B82);
    text-align: center; margin: 0 auto 40px; max-width: 620px; }

  /* the trigger: module one, with the rest stacked behind it */
  /* full section width, like every other block on the page. A <button> is
     not a block box by default, so `margin: 0 auto` alone left it hugging
     the left edge — display:block is what actually centres it. */
  .cm-trig { display: block; position: relative; width: 100%; margin: 0 auto;
    cursor: pointer; background: none; border: 0; padding: 0; text-align: left;
    font-family: inherit; transition: transform .22s; }
  .cm-trig:hover {  }
  .cm-trig:focus-visible { outline: 2px solid #0559B3; outline-offset: 6px; border-radius: 12px; }
  .cm-paper { position: absolute; left: 50%; transform: translateX(-50%); background: #fff;
    border: 1px solid var(--neutral-200, #E4E9F0); border-radius: 12px;
    box-shadow: 0 8px 20px rgba(11,30,58,0.027); transition: top .22s; }
  .cm-p2 { width: 96%; height: 100%; top: -12px; }
  .cm-p3 { width: 92%; height: 100%; top: -24px; }
  .cm-trig:hover .cm-p2 { top: -16px; }
  .cm-trig:hover .cm-p3 { top: -32px; }
  /* the trigger is a <button>, so its inner spans need explicit display —
     inline spans ignore the padding and the card collapses */
  .cm-face { display: block; position: relative; background: #fff;
    border: 1px solid var(--neutral-200, #E4E9F0);
    border-radius: 12px; padding: 30px 34px 26px;
    box-shadow: 0 1px 2px rgba(11,30,58,0.028), 0 14px 34px rgba(11,30,58,0.041); }
  .cm-fh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .cm-n { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0559B3; }
  .cm-of { font-size: 12.5px; color: #5F6670; }
  .cm-ft { font-family: var(--font-display, 'Figtree', sans-serif); font-size: 24px;
    font-weight: 700; letter-spacing: -.025em; margin: 0 0 18px; }
  .cm-ck { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #0559B3;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .cm-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--neutral-200, #EAEEF4); }
  .cm-go { display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display, 'Figtree', sans-serif);
    font-size: 15px; font-weight: 600; color: #0559B3; }
  .cm-ar { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round; }


  .cm-trig .cm-ft { display: block; }
  .cm-trig .cm-foot { display: block; }
  .cm-trig .cm-fh { display: flex; }
  .cm-paper { display: block; }

  /* the trigger previews the whole of module one, so it fills the section
     rather than sitting as a thin strip */
  .cm-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 4px; }
  .cm-preview > span { display: block; }
  .cm-trig .cm-lbl { display: block; }
  .cm-trig .cm-lst { display: flex; }
  .cm-trig .cm-panel { display: block; }
  .cm-trig .cm-ph { display: flex; }
  .cm-trig .cm-tools { display: flex; }
  .cm-trig .cm-tool { display: inline-flex; }
  /* the dialog */
  /* a dialog, not a takeover — the page stays visible at the margins so it
     reads as a layer over the page rather than a new screen */
  .cm-ov { position: fixed; inset: 0; z-index: 200; background: rgba(11,18,32,.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .26s, visibility .26s; }
  .cm-ov.is-open { opacity: 1; visibility: visible; }
  .cm-sheet { position: absolute; inset: 40px; max-width: 1240px; margin: 0 auto;
    background: #F7F9FC; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(12px) scale(.99);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 30px 90px rgba(0,0,0,0.158); }
  .cm-ov.is-open .cm-sheet { transform: none; }
  .cm-prog { position: absolute; left: 0; top: 0; height: 3px; background: #0559B3; width: 0; z-index: 6; }
  .cm-hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 34px; background: #fff; border-bottom: 1px solid var(--neutral-200, #EAEEF4); }
  .cm-hd b { font-family: var(--font-display, 'Figtree', sans-serif);
    font-size: 17px; font-weight: 700; }
  .cm-hd em { font-style: normal; font-size: 13.5px; color: var(--muted, #5A6B82); margin-left: 10px; }
  .cm-x { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--neutral-200, #E4E9F0);
    background: #fff; border-radius: 8px; padding: 9px 16px; cursor: pointer;
    font-family: var(--font-display, 'Figtree', sans-serif); font-size: 14px;
    font-weight: 600; color: var(--ink, #0B1220); }
  .cm-x:hover { background: #F4F6F9; }
  .cm-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; }
  .cm-bd { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 34px; }
  body.cm-locked { overflow: hidden; }


  /* below the desktop breakpoint the dialog goes edge to edge again — a 40px
     inset on a phone wastes most of the screen */
  @media (max-width: 900px) {
    .cm-sheet { inset: 0; border-radius: 0; max-width: none; box-shadow: none; }
  }
  /* the pile */
  .cm-w { position: sticky; top: 0; height: calc(100vh - 210px);
    display: flex; align-items: center; justify-content: center; }
  .cm-card { width: 100%; max-width: 1040px; background: #fff;
    border: 1px solid var(--neutral-200, #EAEEF4); border-radius: 12px; padding: 24px 28px;
    overflow: hidden; contain: paint;
    box-shadow: 0 1px 2px rgba(11,30,58,0.035), 0 14px 34px rgba(11,30,58,0.045);
    transform: scale(calc(1 - (9 - var(--k)) * .005)); transform-origin: 50% 0; }
  .cm-ch { border-bottom: 1px solid var(--neutral-200, #EAEEF4); padding-bottom: 13px; margin-bottom: 16px; }
  .cm-ch h3 { font-family: var(--font-display, 'Figtree', sans-serif); font-size: 20px;
    font-weight: 700; letter-spacing: -.02em; margin: 5px 0 0; }
  .cm-cb { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .cm-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #5F6670; margin-bottom: 8px; }
  .cm-lbl.cm-mt { margin-top: 20px; }
  .cm-lst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .cm-lst li { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: #3F4650;
    align-items: flex-start; }
  .cm-lst .cm-ck { width: 14px; height: 14px; margin-top: 3px; }

  /* lab and tools, as panels */
  .cm-panel { background: #F5F8FC; border: 1px solid #E2ECF8; border-radius: 10px; padding: 18px 18px 16px; }
  .cm-panel + .cm-panel { margin-top: 14px; background: #FBFCFE; }
  .cm-ph { display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display, 'Figtree', sans-serif);
    font-size: 13px; font-weight: 700; color: #0559B3; margin-bottom: 12px; }
  .cm-hi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cm-tools { display: flex; flex-wrap: wrap; gap: 8px; }
  .cm-tool { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3F4650;
    background: #fff; border: 1px solid var(--neutral-200, #E4E9F0); border-radius: 8px; padding: 6px 10px; }
  .cm-tool svg { width: 16px; height: 16px; flex: none; }
  /* the module footer: a solid button on the left, the counter opposite */
  /* the row is a child of the two-column grid, so it has to be told to span
     both tracks — otherwise it sits in the left column only */
  .cm-foot-row { grid-column: 1 / -1; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; margin-top: 18px;
    padding-top: 18px; border-top: 1px solid var(--neutral-200, #EAEEF4); }
  .cm-dl { display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display, 'Figtree', sans-serif);
    font-size: 14px; font-weight: 600; text-decoration: none;
    background: #0559B3; color: #fff; padding: 11px 20px; border-radius: 8px;
    box-shadow: none;
    transition: opacity .18s; }
  .cm-dl:hover { opacity: .88; }
  .cm-dl svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cm-count { font-size: 11.5px; color: #5F6670; margin: 0; }

  @media (max-width: 760px) {
    .cm-sub { margin-bottom: 28px; font-size: 15.5px; }
    .cm-face { padding: 22px 18px 20px; border-radius: 12px; }
    .cm-ft { font-size: 20px; margin-bottom: 14px; }
    .cm-p2 { width: 97%; top: -8px; } .cm-p3 { width: 94%; top: -16px; }
    .cm-trig:hover { transform: none; }
    .cm-trig:hover .cm-p2 { top: -8px; } .cm-trig:hover .cm-p3 { top: -16px; }
    .cm-hd { padding: 12px 14px; }
    .cm-hd b { font-size: 15px; }
    .cm-hd em { display: block; margin: 2px 0 0; font-size: 12px; }
    .cm-x { padding: 8px 13px; font-size: 13.5px; }
    .cm-bd { padding: 0 12px; }
    .cm-w { height: calc(100vh - 108px); height: calc(100dvh - 108px);
      align-items: stretch; padding: 10px 0; }
    .cm-card { max-width: none; max-height: 100%; transform: none; padding: 18px 16px;
      border-radius: 10px; display: flex; flex-direction: column; }
    .cm-cb { grid-template-columns: 1fr; gap: 16px; overflow-y: auto; min-height: 0; }
    .cm-ch h3 { font-size: 17px; }
    .cm-lst li { font-size: 13.5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cm-trig, .cm-paper, .cm-sheet, .cm-ov { transition: none; }
  }

  /* dark CTA band: the accent word needs a lighter blue to read on near-black */
  .co-cta-t em { color: #6AAEF0; }