/* MSR Trainings — multi-course design layer.
   Palette is the original site's: amber #f59e0b · orange #fb923c · deep orange #c2410c ·
   cream #fff7ed / #ffedd5 · peach border #fed7aa · ink #111827 / #1f2937 / #020617 · grays. */
:root { --amber:#f59e0b; --orange:#fb923c; --deep:#c2410c; --cream:#fff7ed; --cream2:#ffedd5; --peach:#fed7aa; --ink:#111827; --ink2:#1f2937; --night:#020617; --muted:#6b7280; --nav-h:96px; }
html { scroll-padding-top: calc(var(--nav-h) + 64px); }
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- buttons & chips ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.8rem 1.3rem; border-radius:.75rem; font-weight:800; font-size:.95rem; line-height:1.1; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; text-align:center; }
.btn-primary { background:var(--amber); color:#fff; box-shadow:0 10px 22px rgba(245,158,11,.25); }
.btn-primary:hover { background:#d97706; }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid #d1d5db; }
.btn-ghost:hover { border-color:var(--ink); }
.btn-light { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.28); }
.btn-light:hover { background:rgba(255,255,255,.18); }
.btn-sm { padding:.55rem .9rem; font-size:.85rem; }
.btn-block { width:100%; }
.chip-bar { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.75rem; }
.chip { border:1px solid var(--peach); background:#fff; color:#374151; font-weight:800; font-size:.85rem; padding:.5rem 1rem; border-radius:9999px; cursor:pointer; transition:all .2s ease; }
.chip:hover { border-color:var(--amber); color:var(--ink); }
.chip.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.sec { padding:4rem 0; }
.sec-head { text-align:center; max-width:46rem; margin:0 auto 2rem; }
.sec-kicker { color:var(--amber); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; }
.sec-head h2 { font-size:2rem; line-height:2.4rem; font-weight:800; margin-top:.4rem; color:var(--ink); }
.sec-head p { color:#4b5563; margin-top:.75rem; font-size:.98rem; line-height:1.6rem; }

/* ---------- nav additions ---------- */
.course-menu { position:relative; }
.course-menu-btn { display:inline-flex; align-items:center; gap:.4rem; font-weight:500; color:#4b5563; background:none; border:0; padding:.45rem 0; cursor:pointer; font-size:1rem; }
.course-menu-btn:hover, .course-menu.open .course-menu-btn { color:var(--ink); }
.course-menu-btn .chev { font-size:.6rem; transition:transform .2s ease; }
.course-menu.open .chev { transform:rotate(180deg); }
.course-menu-panel { position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 1rem); width:380px; background:#fff; border:1px solid var(--peach); border-radius:1rem; box-shadow:0 24px 60px rgba(15,23,42,.16); padding:.5rem; display:none; z-index:60; }
.course-menu.open .course-menu-panel { display:block; }
.course-menu-panel a { display:flex; gap:.8rem; align-items:flex-start; padding:.75rem; border-radius:.75rem; }
.course-menu-panel a:hover, .course-menu-panel a[aria-current="page"] { background:var(--cream); }
.cm-code { flex:0 0 auto; background:var(--ink); color:#fbbf24; font:800 .62rem ui-monospace,monospace; padding:.45rem .5rem; border-radius:.5rem; letter-spacing:.04em; margin-top:.1rem; }
.course-menu-panel strong { display:block; color:var(--ink); font-weight:800; font-size:.95rem; }
.course-menu-panel small { display:block; color:var(--muted); font-size:.78rem; margin-top:.15rem; }
.course-menu-panel .menu-all { display:block; border-top:1px solid var(--peach); margin-top:.3rem; border-radius:0 0 .75rem .75rem; color:var(--deep); font-weight:800; font-size:.88rem; }
.nav-link { white-space:nowrap; }
.menu-toggle { display:none; width:42px; height:42px; border-radius:.7rem; border:1px solid var(--peach); background:var(--cream); font-size:1.3rem; color:var(--ink); cursor:pointer; }
.mobile-menu { display:none; }
@media (max-width:767px){
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .nav-enroll { display:none !important; }
  .mobile-menu.open { display:block; position:sticky; top:var(--nav-h); z-index:49; background:#fff; border-bottom:1px solid var(--peach); box-shadow:0 18px 30px rgba(15,23,42,.1); padding:.5rem 1.5rem 1rem; }
  .mobile-menu a { display:block; padding:.7rem 0; font-weight:700; color:var(--ink); border-bottom:1px solid #f3f4f6; }
  .mobile-menu .mm-label { display:block; margin-top:.75rem; color:var(--deep); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
  .mobile-courses a { color:var(--deep); }
}

/* ---------- course cards (catalogue + related) ---------- */
.mc-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(320px, 400px)); justify-content:center; }
@media (max-width:420px){ .mc-grid { grid-template-columns:1fr; } }
.mc-card { background:#fff; border:1px solid #f3e8da; border-radius:1.25rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 14px 34px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mc-card:hover { transform:translateY(-6px); border-color:var(--amber); box-shadow:0 24px 50px rgba(245,158,11,.18); }
.mc-card[hidden] { display:none; }
.mc-cover { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:170px; padding:1.1rem 1.25rem; color:#fff; overflow:hidden;
  background: radial-gradient(circle at 85% 15%, rgba(245,158,11,.45), transparent 42%), radial-gradient(circle at 10% 110%, rgba(251,146,60,.28), transparent 45%), linear-gradient(135deg, var(--ink) 0%, var(--ink2) 60%, var(--night) 100%); }
.mc-cover::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px; pointer-events:none; }
.mc-label { position:relative; z-index:1; align-self:flex-start; background:var(--amber); color:var(--ink); font-weight:900; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .65rem; border-radius:9999px; }
.mc-code { position:relative; z-index:1; font:900 1.65rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; background:linear-gradient(90deg,#fff,#fed7aa 60%,#fbbf24); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mc-cover-meta { position:relative; z-index:1; display:flex; gap:.5rem; flex-wrap:wrap; font-size:.75rem; font-weight:800; }
.mc-cover-meta span { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); padding:.25rem .6rem; border-radius:9999px; }
.mc-body { padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.mc-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.7rem; }
.mc-tags span { background:var(--cream); color:var(--deep); border:1px solid var(--peach); font-size:.7rem; font-weight:800; padding:.18rem .55rem; border-radius:9999px; }
.mc-body h3 { font-size:1.3rem; font-weight:900; line-height:1.25; color:var(--ink); margin-bottom:.45rem; }
.mc-body h3 a:hover { color:var(--deep); }
.mc-body > p { color:#4b5563; font-size:.92rem; line-height:1.45rem; margin-bottom:.9rem; }
.mc-facts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.75rem; }
.mc-facts li { background:#f9fafb; border:1px solid #f3f4f6; border-radius:.7rem; padding:.5rem .65rem; font-size:.82rem; font-weight:800; color:var(--ink2); }
.mc-facts b, .mc-next b { display:block; color:#92400e; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.mc-next { background:var(--cream); border:1px dashed var(--peach); border-radius:.7rem; padding:.55rem .7rem; font-size:.85rem; font-weight:800; color:var(--ink2); margin-bottom:1rem; }
.mc-actions { margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.mc-actions .btn { padding:.7rem .6rem; font-size:.86rem; }
.mc-actions .btn:only-child { grid-column:1/-1; }

/* ---------- batch schedule ---------- */
#schedule { background: radial-gradient(circle at 12% 18%, rgba(245,158,11,.12), transparent 28%), linear-gradient(180deg,#f9fafb 0%, var(--cream) 100%); }
.sch-list { display:grid; gap:.85rem; max-width:62rem; margin:0 auto; }
.sch-row { display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem; align-items:center; background:#fff; border:1px solid var(--peach); border-radius:1.1rem; padding:1rem 1.15rem; box-shadow:0 12px 28px rgba(15,23,42,.06); position:relative; overflow:hidden; }
.sch-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--amber),var(--orange)); }
.sch-row.is-past { background:#fcfcfd; }
.sch-row.is-past::before { background:#d1d5db; }
.sch-date { width:74px; height:74px; border-radius:1rem; background:linear-gradient(180deg,var(--ink),var(--ink2)); border:1px solid rgba(245,158,11,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 22px rgba(17,24,39,.18); }
.sch-date span, .sch-date small { color:#fed7aa; font-size:.7rem; font-weight:800; text-transform:uppercase; }
.sch-date strong { font-size:1.55rem; font-weight:900; line-height:1.05; }
.sch-date.is-past { background:linear-gradient(180deg,#4b5563,#374151); border-color:#9ca3af; }
.sch-course { color:var(--deep); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.sch-main h3 { font-size:1.12rem; font-weight:900; color:var(--ink); margin:.1rem 0 .45rem; line-height:1.3; }
.sch-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; font-size:.85rem; font-weight:700; color:#374151; }
.sch-pill { font-size:.72rem; font-weight:900; padding:.25rem .6rem; border-radius:9999px; }
.pill-live { background:var(--cream2); color:var(--deep); }
.pill-dark { background:#e5e7eb; color:#374151; }
.sch-empty { text-align:center; color:var(--muted); padding:1.5rem; }
@media (max-width:767px){ .sch-row { grid-template-columns:auto 1fr; } .sch-cta { grid-column:1/-1; } .sch-cta .btn { width:100%; } }

/* ---------- compare table ---------- */
.cmp-wrap { overflow-x:auto; border:1px solid var(--peach); border-radius:1.25rem; background:#fff; box-shadow:0 14px 34px rgba(15,23,42,.06); }
.cmp { width:100%; border-collapse:collapse; min-width:640px; font-size:.92rem; }
.cmp th, .cmp td { padding:.9rem 1.1rem; text-align:left; vertical-align:top; border-bottom:1px solid #f3f4f6; }
.cmp thead th { background:var(--ink); color:#fff; font-weight:900; font-size:1rem; }
.cmp thead th:first-child { background:var(--ink2); }
.cmp-code { display:block; color:#fbbf24; font:800 .7rem ui-monospace,monospace; letter-spacing:.06em; margin-bottom:.2rem; }
.cmp tbody th { width:180px; color:#92400e; font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; background:var(--cream); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:0; }
.tool-chip { display:inline-block; margin:0 .3rem .3rem 0; background:#f9fafb; border:1px solid #e5e7eb; color:var(--ink2); font-size:.75rem; font-weight:800; padding:.22rem .55rem; border-radius:.5rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width:52rem; margin:0 auto; display:grid; gap:.7rem; }
.faq-item, .acc-item { background:#fff; border:1px solid #f3e8da; border-radius:1rem; transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item[open], .acc-item[open] { border-color:var(--peach); box-shadow:0 12px 28px rgba(245,158,11,.1); }
.faq-item summary, .acc-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.8rem; padding:1rem 1.15rem; font-weight:800; color:var(--ink); }
.faq-item summary::-webkit-details-marker, .acc-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after, .acc-item summary::after { content:'+'; margin-left:auto; flex:0 0 auto; width:28px; height:28px; border-radius:9999px; background:var(--cream); color:var(--deep); display:grid; place-items:center; font-weight:900; transition:transform .2s ease; }
.faq-item[open] summary::after, .acc-item[open] summary::after { content:'–'; background:var(--amber); color:#fff; }
.faq-item p { padding:0 1.15rem 1.1rem; color:#4b5563; line-height:1.6rem; }

/* ---------- contact (home) ---------- */
.contact-select { width:100%; padding:.85rem 1rem; border:1px solid var(--peach); border-radius:.8rem; background:var(--cream); font-weight:700; color:var(--ink); margin-bottom:.75rem; font-size:.95rem; }

/* ---------- COURSE PAGE ---------- */
.course-hero { position:relative; color:#fff; overflow:hidden;
  background: radial-gradient(circle at 78% 20%, rgba(245,158,11,.30), transparent 38%), radial-gradient(circle at 5% 100%, rgba(251,146,60,.18), transparent 40%), linear-gradient(135deg, var(--ink) 0%, var(--ink2) 55%, var(--night) 100%); }
.course-hero::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; }
.course-hero-inner { position:relative; z-index:1; max-width:80rem; margin:0 auto; padding:2.5rem 1.5rem 3rem; display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:2.5rem; }
.course-hero-copy { grid-column:1; }
.crumbs { display:flex; flex-wrap:wrap; gap:.45rem; font-size:.82rem; color:#9ca3af; font-weight:700; margin-bottom:1.1rem; }
.crumbs a { color:#fed7aa; } .crumbs a:hover { color:#fff; }
.hero-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.hero-tags span { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#e5e7eb; font-size:.72rem; font-weight:800; padding:.25rem .6rem; border-radius:9999px; }
.hero-tags .hero-label { background:var(--amber); border-color:var(--amber); color:var(--ink); text-transform:uppercase; letter-spacing:.05em; }
.course-hero h1 { font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.08; font-weight:900; margin-bottom:1rem; }
.course-summary { color:#d1d5db; font-size:1.05rem; line-height:1.7rem; max-width:44rem; margin-bottom:1.5rem; }
.hero-facts { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; margin-bottom:1.6rem; max-width:44rem; }
.hero-facts div { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:.9rem; padding:.7rem .8rem; }
.hero-facts span { font-size:1rem; }
.hero-facts small { display:block; color:#fbbf24; font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; margin-top:.15rem; }
.hero-facts strong { display:block; font-size:.86rem; font-weight:800; margin-top:.1rem; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.7rem; }
.course-tabs { position:sticky; top:var(--nav-h); z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid #f3e8da; }
.course-tabs-inner { max-width:80rem; margin:0 auto; padding:0 1.5rem; display:flex; gap:1.6rem; overflow-x:auto; scrollbar-width:none; }
.course-tabs a { white-space:nowrap; padding:1rem 0 .85rem; font-weight:800; color:var(--muted); border-bottom:3px solid transparent; font-size:.95rem; }
.course-tabs a:hover { color:var(--ink); }
.course-tabs a.active { color:var(--ink); border-bottom-color:var(--amber); }
.course-layout { max-width:80rem; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:2.5rem; align-items:start; }
.course-aside { position:sticky; top:calc(var(--nav-h) + 70px); z-index:41; }
.enroll-card { background:#fff; border:1px solid var(--peach); border-radius:1.25rem; padding:1.25rem; box-shadow:0 30px 70px rgba(15,23,42,.18); display:grid; gap:.7rem; position:relative; overflow:hidden; }
.enroll-card::before { content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--amber),var(--orange) 42%,var(--ink)); }
.enroll-kicker { color:var(--deep); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.enroll-batch { display:flex; gap:.85rem; align-items:center; margin-top:.5rem; }
.enroll-batch strong { display:block; color:var(--ink); font-weight:900; }
.enroll-batch span { display:block; color:#4b5563; font-size:.85rem; font-weight:700; }
.enroll-none { color:#4b5563; font-weight:700; margin-top:.4rem; }
.enroll-price { display:flex; justify-content:space-between; align-items:baseline; background:var(--cream); border:1px solid var(--peach); border-radius:.85rem; padding:.7rem .9rem; }
.enroll-price span { color:#92400e; font-size:.8rem; font-weight:800; }
.enroll-price strong { font-size:1.5rem; font-weight:900; color:var(--ink); }
.enroll-list { display:grid; gap:.4rem; font-size:.88rem; color:#374151; margin:.2rem 0; }
.enroll-list li::before, .learn-grid li::before, .plan li::before { content:'✓'; color:var(--amber); font-weight:900; margin-right:.5rem; }
.enroll-wa { text-align:center; color:var(--deep); font-weight:800; font-size:.86rem; }
.enroll-wa:hover { color:var(--ink); }
.c-sec { padding:2.75rem 0 .5rem; }
.c-sec h2 { font-size:1.75rem; font-weight:900; color:var(--ink); margin-bottom:1rem; }
.c-sub { font-size:1.1rem; font-weight:900; color:var(--ink); margin:1.75rem 0 .8rem; }
.c-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.c-head h2 { margin-bottom:.2rem; }
.c-head-actions { display:flex; gap:.6rem; }
.link-btn { background:var(--cream); border:1px solid var(--peach); color:var(--deep); font-weight:800; font-size:.82rem; padding:.45rem .8rem; border-radius:9999px; cursor:pointer; }
.link-btn:hover { border-color:var(--amber); color:var(--ink); }
.c-lead { color:var(--muted); font-weight:700; font-size:.88rem; margin-bottom:1rem; }
.learn-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.25rem; background:var(--cream); border:1px solid var(--peach); border-radius:1.1rem; padding:1.25rem; }
.learn-grid li { display:flex; color:var(--ink2); font-weight:600; font-size:.94rem; line-height:1.45rem; }
.tool-row .tool-chip { font-size:.82rem; padding:.35rem .7rem; }
.aud-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.aud-card { background:#fff; border:1px solid #f3e8da; border-radius:1rem; padding:1rem 1.1rem; transition:border-color .2s ease, transform .2s ease; }
.aud-card:hover { border-color:var(--amber); transform:translateY(-3px); }
.aud-card .icon-badge { width:32px !important; height:32px !important; font-size:.72rem !important; margin-bottom:.5rem !important; }
.aud-card h4 { font-weight:900; color:var(--ink); margin-bottom:.25rem; }
.aud-card p { color:#4b5563; font-size:.88rem; line-height:1.4rem; }
.acc { display:grid; gap:.6rem; }
.acc-num { flex:0 0 auto; width:34px; height:34px; border-radius:.6rem; background:var(--ink); color:#fbbf24; display:grid; place-items:center; font:800 .78rem ui-monospace,monospace; }
.acc-title { font-size:1rem; }
.acc-count { color:var(--muted); font-size:.78rem; font-weight:700; white-space:nowrap; }
.acc-item ul { padding:0 1.15rem 1.1rem 4.1rem; display:grid; gap:.45rem; }
.acc-item li { color:#374151; font-size:.92rem; position:relative; }
.acc-item li::before { content:''; position:absolute; left:-1rem; top:.55rem; width:6px; height:6px; border-radius:9999px; background:var(--amber); }
.plan-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.9rem; }
.plan { position:relative; background:#fff; border:1px solid #f3e8da; border-radius:1.1rem; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.plan.featured { border:2px solid var(--amber); box-shadow:0 18px 40px rgba(245,158,11,.16); }
.plan-flag { align-self:flex-start; background:var(--cream2); color:#c2410c; font-size:.72rem; font-weight:900; padding:.2rem .6rem; border-radius:9999px; }
.plan h3 { font-size:1.15rem; font-weight:900; color:var(--ink); }
.plan p { color:var(--muted); font-size:.85rem; }
.plan > strong { font-size:1.8rem; font-weight:900; color:var(--ink); }
.plan ul { display:grid; gap:.4rem; font-size:.88rem; color:#374151; margin-bottom:.6rem; }
.plan .btn { margin-top:auto; }
.course-after { padding-top:2rem; }
.course-cta { background: radial-gradient(circle at 85% 20%, rgba(245,158,11,.3), transparent 40%), linear-gradient(135deg, var(--ink), var(--ink2)); color:#fff; border-radius:1.5rem; padding:2.25rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.course-cta h2 { font-size:1.8rem; font-weight:900; line-height:1.2; }
.course-cta p { color:#d1d5db; margin-top:.4rem; }
.course-cta .hero-ctas .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
#mobile-bar { display:none; }
@media (max-width:1023px){
  .course-hero-inner, .course-layout { grid-template-columns:1fr; }
  .course-aside { position:static; margin-top:0; order:-1; padding-top:1.5rem; }
  .hero-facts { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px){
  .learn-grid, .aud-grid, .plan-grid { grid-template-columns:1fr; }
  .course-hero-inner { padding:1.75rem 1.25rem 2rem; }
  #mobile-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--peach); box-shadow:0 -10px 30px rgba(15,23,42,.12); padding:.65rem 1rem; align-items:center; justify-content:space-between; gap:1rem; }
  #mobile-bar small { display:block; color:var(--deep); font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
  #mobile-bar strong { font-size:.9rem; color:var(--ink); }
  body[data-course] { padding-bottom:72px; }
  body[data-course] .voice-welcome { bottom:84px; }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.enroll-batch .sch-date strong { color:#fff; display:block; font-weight:900; }
.enroll-batch .sch-date span, .enroll-batch .sch-date small { color:#fed7aa; font-size:.7rem; font-weight:800; }

/* ---------- HOME: course billboard slideshow ---------- */
.billboard { position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,#ffffff 0%, #fffaf4 100%); border-bottom:1px solid #f3e8da; }
.bb-slides { display:grid; order:1; }
.bb-slide { grid-area:1/1; opacity:0; visibility:hidden; transform:translateX(24px); transition:opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.bb-slide.is-active { opacity:1; visibility:visible; transform:none; transition:opacity .6s ease, transform .6s ease, visibility 0s; z-index:1; }
@media (prefers-reduced-motion: reduce){ .bb-slide, .bb-slide.is-active { transition:none; transform:none; } }
.bb-slide > div { padding-bottom:2rem !important; }
.bb-kicker { color:var(--deep); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; margin-bottom:.6rem; }
.bb-headline { font-size:clamp(2.4rem, 4.6vw, 3.6rem); line-height:1.06; font-weight:900; color:var(--ink); margin-bottom:1.1rem; }
.bb-tagline { font-size:1.2rem; line-height:1.75rem; color:#4b5563; margin-bottom:1.75rem; max-width:36rem; }
.bb-facts { display:flex; flex-wrap:wrap; gap:2rem; }
.bb-facts h3 { font-size:1.35rem; font-weight:800; color:var(--ink); }
.bb-facts p { color:var(--muted); }
/* course "poster" panel — same frame as the robot lab panel */
.bb-visual { height:500px; }
.bb-poster { position:relative; height:100%; border-radius:1.5rem; overflow:hidden; padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:1rem; color:#fff;
  background: radial-gradient(circle at 82% 18%, rgba(245,158,11,.35), transparent 38%), radial-gradient(circle at 12% 95%, rgba(251,146,60,.2), transparent 42%), linear-gradient(140deg, var(--ink) 0%, var(--night) 100%);
  box-shadow:0 30px 70px rgba(15,23,42,.25); border:1px solid rgba(245,158,11,.2); }
.bb-poster::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:26px 26px; pointer-events:none; }
.bb-poster > * { position:relative; z-index:1; }
.bb-poster-top { display:flex; justify-content:space-between; gap:1rem; font-size:13px; font-weight:800; }
.bb-poster-name { background:linear-gradient(90deg,#7dd3fc,#c4b5fd,#fbbf24); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bb-poster-top small { color:var(--amber); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.bb-poster-code { font:900 clamp(2.4rem,4.4vw,3.6rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.03em; background:linear-gradient(90deg,#fff 0%,#fed7aa 55%,#f59e0b 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding:.6rem 0 .2rem; }
.bb-poster-mid { display:grid; grid-template-columns:1fr 130px; gap:1rem; flex:1; min-height:0; }
.bb-poster-term { background:#111827ed; border:1px solid #374151; border-radius:12px; padding:0 0 .8rem; overflow:hidden; }
.bb-term-file { background:#1f2937; color:#fbbf24; font:700 11px ui-monospace,monospace; padding:.45rem .8rem; border-bottom:1px solid #374151; }
.bb-poster-term ul { padding:.7rem .9rem 0; display:grid; gap:.45rem; font:12.5px/1.35 ui-monospace,monospace; color:#d1e6f8; }
.bb-term-more { display:block; padding:.5rem .9rem 0; color:#fbbf24; font:700 11px ui-monospace,monospace; }
.bb-poster-date { align-self:start; background:linear-gradient(180deg,#fff7ed,#fff); color:var(--ink); border-radius:1.1rem; padding:.9rem .5rem; text-align:center; box-shadow:0 14px 30px rgba(0,0,0,.3); }
.bb-poster-date small { display:block; color:var(--deep); font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.bb-poster-date strong { display:block; font-size:2.6rem; font-weight:900; line-height:1.05; margin:.15rem 0; }
.bb-poster-date span { display:block; color:#4b5563; font-size:.8rem; font-weight:800; }
.bb-poster-tools { display:flex; flex-wrap:wrap; gap:.4rem; }
.bb-poster-tools span { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#e5e7eb; font:700 11px ui-monospace,monospace; padding:.3rem .55rem; border-radius:.45rem; }
/* controls: rotation button first in DOM (accessibility), shown under the slides */
.bb-controls { order:2; max-width:80rem; width:100%; margin:0 auto; padding:0 1.5rem 1.6rem; display:flex; align-items:center; gap:.75rem; }
.bb-btn { flex:0 0 auto; width:44px; height:44px; border-radius:9999px; border:1px solid var(--peach); background:#fff; color:var(--ink); font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 8px 18px rgba(15,23,42,.08); transition:all .2s ease; display:inline-flex; align-items:center; justify-content:center; }
.bb-btn:hover { background:var(--amber); border-color:var(--amber); color:#fff; }
.bb-btn:focus-visible, .bb-tab:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }
.bb-play { font-size:.75rem; letter-spacing:-.05em; }
.bb-tabs { flex:1; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.6rem; min-width:0; }
.bb-tab { text-align:left; background:#fff; border:1px solid #f3e8da; border-radius:.9rem; padding:.6rem .8rem .7rem; cursor:pointer; display:grid; grid-template-columns:auto 1fr; column-gap:.55rem; align-items:center; transition:border-color .2s ease, box-shadow .2s ease; min-width:0; }
.bb-tab:hover { border-color:var(--amber); }
.bb-tab.active { border-color:var(--amber); box-shadow:0 10px 24px rgba(245,158,11,.16); }
.bb-tab-num { font:800 .72rem ui-monospace,monospace; color:var(--muted); }
.bb-tab.active .bb-tab-num { color:var(--deep); }
.bb-tab-text { font-weight:800; font-size:.88rem; color:#4b5563; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-tab.active .bb-tab-text { color:var(--ink); }
.bb-tab-bar { grid-column:1/-1; height:3px; border-radius:9999px; background:#f3f4f6; margin-top:.5rem; overflow:hidden; }
.bb-tab-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amber),var(--orange)); border-radius:inherit; }
.bb-tab.active .bb-tab-bar i { width:100%; }
.billboard.is-running .bb-tab.active .bb-tab-bar i { width:0; animation:bb-progress var(--bb-delay,7000ms) linear forwards; }
@keyframes bb-progress { from { width:0; } to { width:100%; } }
@media (max-width:767px){
  .bb-visual { height:auto; }
  .bb-poster { height:auto; min-height:400px; }
  .bb-poster-mid { grid-template-columns:1fr; }
  .bb-poster-date { display:flex; align-items:baseline; gap:.6rem; justify-content:center; }
  .bb-poster-date strong { font-size:1.6rem; }
  .bb-controls { flex-wrap:wrap; }
  .bb-tabs { order:3; flex-basis:100%; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; scrollbar-width:none; }
  .bb-play { order:1; } .bb-prev { order:1; } .bb-next { order:2; }
}
.bb-facts { gap:1.75rem; }
.bb-facts h3 { font-size:1.2rem; white-space:nowrap; }
@media (max-width:767px){ .bb-facts { gap:1rem 1.5rem; } .bb-facts h3 { font-size:1.05rem; } }
.bb-slide { display:flex; align-items:center; }
.bb-slide > div { width:100%; }
@media (max-width:767px){
  .bb-slide[data-course] .bb-visual { display:none; }
  .bb-slide > div { padding-top:2rem !important; padding-bottom:1.25rem !important; }
}
@media (max-width:767px){ .bb-slide:first-child .robot-hero { display:none !important; } }
/* ===== MOCKUP overrides ===== */
.billboard { overflow:hidden; }
.bb-slides { display:flex; transition:transform .8s cubic-bezier(.65,0,.35,1); }
.bb-slide, .bb-slide.is-active { flex:0 0 100%; opacity:1; visibility:visible; transform:none; transition:none; }
.mc-grid { grid-auto-flow:column; grid-auto-columns:minmax(520px,1fr); grid-template-columns:none; justify-content:stretch; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.hc-card { scroll-snap-align:start; }
.hc-card .mc-cover { min-height:140px; }
.hc-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.hc-h { display:block; color:#92400e; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; }
.hc-learn { display:grid; gap:.4rem; font-size:.86rem; color:#374151; }
.hc-learn li::before { content:'✓'; color:var(--amber); font-weight:900; margin-right:.4rem; }
.hc-mods { display:grid; gap:.35rem; font-size:.86rem; color:#374151; }
.hc-mods span { display:inline-block; width:24px; color:var(--deep); font:800 .72rem ui-monospace,monospace; }
.hc-mods .more { color:var(--deep); font-weight:800; font-size:.8rem; }
.hc-tools { margin-bottom:1rem; }
.hc-strip { display:grid; grid-template-columns:1fr auto; gap:.75rem; background:var(--cream); border:1px dashed var(--peach); border-radius:.8rem; padding:.7rem .9rem; margin-bottom:1rem; }
.hc-strip b { display:block; color:#92400e; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.hc-strip span { font-weight:800; color:var(--ink2); font-size:.9rem; }
.hc-strip .hc-price { font-size:1.35rem; font-weight:900; color:var(--ink); }
.sch-course { color:var(--deep); }
@media (max-width:767px){ .mc-grid { grid-auto-columns:88%; } .hc-cols { grid-template-columns:1fr; } }
.bb-brand-title span { display:block; color:var(--amber); font-size:.62em; margin-top:.35rem; }
.bb-brand-visual { position:relative; }
.bb-portrait { position:absolute; left:-28px; bottom:72px; z-index:5; display:flex; align-items:center; gap:.8rem; background:#fff; border:1px solid var(--peach); border-radius:1.1rem; padding:.7rem 1rem .7rem .7rem; box-shadow:0 22px 48px rgba(15,23,42,.28); max-width:330px; }
.bb-portrait img { width:72px; height:72px; border-radius:9999px; object-fit:cover; border:3px solid var(--amber); flex:0 0 auto; }
.bb-portrait strong { display:block; font-weight:900; color:var(--ink); font-size:.98rem; line-height:1.2; }
.bb-portrait span { display:block; color:var(--deep); font-weight:800; font-size:.8rem; margin-top:.1rem; }
.bb-portrait small { display:block; color:var(--muted); font-weight:700; font-size:.74rem; margin-top:.15rem; }
@media (max-width:767px){ .bb-portrait { position:static; margin-top:.5rem; max-width:none; box-shadow:0 12px 26px rgba(15,23,42,.1); } }
.bb-portrait { bottom:auto; top:96px; } @media (max-width:767px){ .bb-portrait { top:auto; } }
.bb-portrait { top:auto; bottom:-30px; left:-30px; padding:.55rem .9rem .55rem .55rem; max-width:300px; }
.bb-portrait img { width:60px; height:60px; }
.bb-portrait strong { font-size:.92rem; }
.bb-portrait span { font-size:.76rem; }
@media (max-width:767px){ .bb-portrait { bottom:auto; left:auto; } }

/* Top bar: YouTube + Instagram */
.topbar-social { display:flex; align-items:center; gap:.5rem; padding-right:.9rem; margin-right:.1rem; border-right:1px solid rgba(255,255,255,.18); }
.topbar-social a { display:inline-flex; align-items:center; gap:.4rem; height:30px; padding:0 .7rem 0 .55rem; border-radius:9999px; color:#fff; font-weight:700; font-size:.8rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); transition:background .2s ease, transform .2s ease; }
.topbar-social a:hover { transform:translateY(-1px); }
.topbar-social svg { width:16px; height:16px; fill:currentColor; }
.topbar-social .social-yt svg { fill:#ff3d3d; }
.topbar-social .social-yt:hover { background:#ff0000; } .topbar-social .social-yt:hover svg { fill:#fff; }
.topbar-social .social-ig svg { fill:#f77737; }
.topbar-social .social-ig:hover { background:linear-gradient(45deg,#f58529,#dd2a7b 55%,#8134af); } .topbar-social .social-ig:hover svg { fill:#fff; }
@media (max-width:767px){ .topbar-social { border-right:0; padding-right:0; } }
@media (max-width:767px){
  div:has(> .topbar-social) { gap:.9rem; flex-wrap:wrap; }
  .topbar-social span { display:none; }
  .topbar-social a { width:32px; padding:0; justify-content:center; }
  .topbar-social svg { width:17px; height:17px; }
}

/* course card: next batch | live course duration | fee */
.hc-strip { grid-template-columns:1fr auto auto; column-gap:1.25rem; }
.hc-strip .hc-dur { font-size:1.15rem; font-weight:900; color:var(--ink); }
.hc-strip > div:not(:first-child) { border-left:1px solid var(--peach); padding-left:1rem; }
@media (max-width:767px){ .hc-strip { grid-template-columns:1fr 1fr; row-gap:.6rem; } .hc-strip > div:first-child { grid-column:1/-1; } .hc-strip > div:nth-child(2) { border-left:0; padding-left:0; } }

/* Batch schedule: Weekend / Weekday sections */
.sch-group { display:grid; gap:.85rem; }
.sch-group + .sch-group { margin-top:1.4rem; }
.sch-group-head { display:flex; align-items:center; gap:.75rem; padding:.2rem .25rem; }
.sch-group-icon { width:40px; height:40px; border-radius:.8rem; display:grid; place-items:center; background:var(--ink); font-size:1.15rem; box-shadow:0 8px 18px rgba(17,24,39,.18); }
.sch-group-head h3 { font-size:1.15rem; font-weight:900; color:var(--ink); line-height:1.2; }
.sch-group-head small { color:var(--muted); font-weight:700; font-size:.8rem; }
.sch-group-count { margin-left:auto; background:var(--cream2); color:var(--deep); font-weight:900; font-size:.75rem; padding:.3rem .7rem; border-radius:9999px; }
.pill-type { background:var(--ink); color:#fbbf24; }
.welcome-batch-meta .welcome-batch-type { grid-column:1/-1; }