/* ============================================================
   Course page — tabbed layout (Overview / Curriculum / Instructor / Reviews)
   Palette tokens come from globals.css (navy-anchor #003F9E, primary-blue #0345D9,
   yellow #FEDA25, gold #FEB92D, ice #E6F0FF, success #07BD80).
   ============================================================ */

/* home.css defines a global `section{...}` rule for the homepage's snap-scroll sections; this page scrolls normally. */
.cs-page a{ text-decoration:none; }
.cs-page section{ scroll-snap-align:none; min-height:0; display:block; }
.cs-page svg{ flex-shrink:0; }

.cs-loading{ min-height:60vh; display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--primary-blue); padding-top:76px; }
.cs-notfound{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:98px 5vw 100px; }
.cs-notfound h1{ font-family:'Poppins',sans-serif; font-weight:800; font-size:28px; color:var(--primary-blue); margin-bottom:10px; }
.cs-notfound p{ font-family:'Inter',sans-serif; color:var(--gray500); margin-bottom:24px; }
.cs-notfound__btn{ background:var(--navy-anchor); color:var(--white); font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; padding:13px 26px; border-radius:999px; text-decoration:none; display:inline-block; }
@media (min-width:901px){
  .cs-loading{ padding-top:0; }
  .cs-notfound{ padding-top:22px; }
}

/* ---------- Shell ---------- */
.cs-shell{ max-width:1360px; margin:0 auto; padding:98px 28px 70px; background:var(--white); }
@media (min-width:901px){ .cs-shell{ padding-top:22px; } }
.cs-shell__grid{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:34px; align-items:start; }
.cs-shell__main{ min-width:0; }
@media (max-width:1000px){ .cs-shell__grid{ grid-template-columns:1fr; } .cs-sidebar{ position:static !important; } .cs-shell{ padding-left:5vw; padding-right:5vw; } }

.cs-hero__crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--gray500); padding:0 0 14px; }
.cs-hero__crumb a{ color:inherit; }
.cs-hero__crumb b{ font-weight:600; color:var(--navy-anchor); }

/* ---------- Hero ---------- */
.cs-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; }
.cs-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cs-badge{ background:var(--ice); border:1px solid var(--gray300); color:var(--navy-anchor); font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; padding:5px 12px; border-radius:8px; }
.cs-badge--y{ background:var(--yellow); border-color:var(--yellow); }
.cs-hero__title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1.12; letter-spacing:-.4px; color:var(--navy-anchor); margin-bottom:14px; }
.cs-hero__sub{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.65; color:var(--gray500); margin-bottom:20px; max-width:760px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cs-chips{ display:flex; gap:14px; flex-wrap:wrap; }
.cs-chips > div{ display:flex; align-items:center; gap:8px; }
.cs-chips i, .cs-meta3 i, .cs-hl i, .cs-f3 i, .cs-val i, .cs-why i{ width:36px; height:36px; border-radius:10px; background:var(--primary-blue); color:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cs-chips i.is-y{ background:var(--yellow); color:var(--navy-anchor); }
.cs-chips span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:11.5px; line-height:1.3; color:var(--navy-anchor); }
.cs-chips b{ display:block; font-weight:600; }
.cs-hero__media{ position:relative; border-radius:18px; overflow:hidden; height:270px; border:3px solid var(--white); box-shadow:var(--shadow-md); background:var(--ice); }
.cs-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.cs-hero__media .img-ph{ height:100%; border-radius:0; border-style:solid; aspect-ratio:auto !important; }
.cs-hero__grid--solo{ grid-template-columns:1fr; }
.cs-hero__play--solo{ position:static; transform:none; display:inline-flex; margin-top:18px; border:1.5px solid var(--gray300); }
.cs-hero__play{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; align-items:center; gap:9px; background:var(--white); color:var(--navy-anchor); font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; padding:8px 18px 8px 8px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-md); }
.cs-hero__play i{ width:28px; height:28px; border-radius:50%; background:var(--primary-blue); color:var(--white); display:flex; align-items:center; justify-content:center; }
@media (max-width:760px){ .cs-hero__grid{ grid-template-columns:1fr; } .cs-hero__media{ height:240px; order:-1; } }

/* ---------- Tabs ---------- */
.cs-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:var(--white); border:1px solid var(--gray300); border-radius:12px; padding:5px; margin:26px 0 22px; box-shadow:var(--shadow-md); overflow-x:auto; }
.cs-tabs__btn{ white-space:nowrap; font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--primary-blue); background:none; border:none; padding:12px; border-radius:9px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.cs-tabs__btn.is-active{ background:var(--primary-blue); color:var(--white); }
@media (max-width:560px){ .cs-tabs{ grid-template-columns:repeat(4,minmax(96px,1fr)); } .cs-tabs__btn{ font-size:13px; padding:11px 6px; } }

/* ---------- Panels ---------- */
.cs-panel p{ font-family:'Inter',sans-serif; font-size:14.5px; color:var(--gray500); line-height:1.75; margin-bottom:14px; }
.cs-panel h3.cs-sh{ margin-top:34px; }
.cs-panel > h3.cs-sh:first-child, .cs-ov h3.cs-sh{ margin-top:0; }
.cs-sh{ display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:21px; color:var(--navy-anchor); margin:0 0 8px; }
.cs-sh::before{ content:""; width:6px; height:18px; background:var(--yellow); border-radius:3px; flex-shrink:0; }
.cs-panel p.cs-sub, .cs-sub{ font-size:13px; color:var(--gray500); margin:0 0 16px; line-height:1.5; }
.cs-panel h3.cs-sh + .cs-hl, .cs-panel h3.cs-sh + .cs-tools{ margin-top:14px; }

.cs-ov{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:26px; align-items:start; }
.cs-ov > div > p{ margin-top:14px; }
.cs-ov__learn{ background:var(--ice); border-radius:14px; padding:22px; }
.cs-ov__learn h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--navy-anchor); margin:0 0 10px; }
.cs-ov__learn ul{ list-style:none; padding:0; margin:0; }
.cs-ov__learn li{ display:flex; gap:9px; font-family:'Inter',sans-serif; font-size:13px; color:var(--navy-anchor); margin:9px 0; }
.cs-ov__learn li svg{ color:var(--primary-blue); margin-top:1px; }
.cs-ov--solo{ grid-template-columns:1fr; }
@media (max-width:760px){ .cs-ov{ grid-template-columns:1fr; } }

.cs-meta3{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:20px; background:var(--white); border:1px solid var(--gray300); border-radius:12px; padding:14px; }
.cs-meta3 > div{ display:flex; gap:10px; align-items:center; padding:0 12px; border-right:1px solid var(--gray300); min-width:0; }
.cs-meta3 > div:last-child{ border:0; }
.cs-meta3 i, .cs-hl i, .cs-f3 i, .cs-val i, .cs-why i{ background:var(--ice); color:var(--primary-blue); }
.cs-meta3 i.is-y, .cs-hl i.is-y{ background:#FFF7DA; color:var(--gold); }
.cs-hl i.is-g{ background:var(--success-bg); color:var(--success); }
.cs-meta3 span, .cs-hl span, .cs-f3 span, .cs-val span, .cs-why span{ font-family:'Inter',sans-serif; font-size:11.5px; line-height:1.35; color:var(--gray500); }
.cs-meta3 b, .cs-hl b, .cs-f3 b, .cs-val span, .cs-why b{ display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; color:var(--navy-anchor); }
@media (max-width:640px){ .cs-meta3{ grid-template-columns:1fr; gap:12px; } .cs-meta3 > div{ border:0; padding:0; } }

.cs-hl, .cs-proj{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.cs-hl > div, .cs-proj > div{ min-width:0; display:flex; align-items:center; gap:12px; border:1px solid var(--gray300); border-radius:12px; padding:14px; background:var(--white); }
.cs-hl i{ width:42px; height:42px; border-radius:50%; }
.cs-hl b{ font-size:13.5px; }

/* Curriculum list on Overview (links through to the Curriculum tab) */
.cs-cur__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:34px; margin-bottom:6px; }
.cs-panel > .cs-cur__head:first-child{ margin-top:0; }
.cs-cur__head .cs-sub{ margin-bottom:0; }
.cs-panel .cs-cur__head h3.cs-sh{ margin-top:0; }
.cs-cur__tot{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--gray500); margin-top:4px; }
.cs-dl{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--primary-blue); color:var(--primary-blue); background:var(--white); font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; padding:9px 18px; border-radius:10px; }
.cs-modlist{ display:grid; gap:10px; margin-top:14px; }
.cs-modrow{ display:grid; grid-template-columns:34px 42px minmax(0,1fr) auto 18px; gap:14px; align-items:center; width:100%; text-align:left; background:var(--white); border:1px solid var(--gray300); border-radius:12px; padding:11px 16px; box-shadow:var(--shadow-md); cursor:pointer; color:var(--navy-anchor); }
.cs-modrow b{ font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; }
.cs-modrow em{ font-style:normal; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--gray500); white-space:nowrap; }
.cs-modico{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; font-style:normal; }
.cs-accordion__num{ width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--navy-anchor); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; }
@media (max-width:640px){ .cs-modrow{ grid-template-columns:34px minmax(0,1fr) 18px; } .cs-modrow .cs-modico, .cs-modrow em{ display:none; } }

/* Tools / careers */
.cs-tools{ display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; }
.cs-tools > div{ display:flex; flex-direction:column; align-items:center; gap:10px; border:1px solid var(--gray300); border-radius:12px; padding:16px 8px 12px; background:var(--white); text-align:center; box-shadow:var(--shadow-md); }
.cs-tools i{ font-size:26px; color:var(--primary-blue); width:44px; height:44px; border-radius:10px; background:var(--ice); display:flex; align-items:center; justify-content:center; }
.cs-tools span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; color:var(--navy-anchor); }
.cs-rolegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.cs-rolegrid > div{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; border:1px solid var(--gray300); border-radius:12px; padding:18px 10px; background:var(--white); box-shadow:var(--shadow-md); }
.cs-rolegrid i, .cs-proj i{ width:46px; height:46px; border-radius:12px; background:var(--ice); color:var(--primary-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cs-rolegrid span, .cs-proj span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px; line-height:1.3; color:var(--navy-anchor); }
.cs-proj > div{ flex-direction:column; text-align:center; padding:18px 10px; box-shadow:var(--shadow-md); }

/* Instructor cards (Overview + Instructor tab) */
.cs-ins{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; margin-top:14px; }
.cs-in{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:20px; background:var(--white); border:1px solid var(--gray300); border-radius:14px; padding:14px; box-shadow:var(--shadow-md); }
.cs-in__img{ width:140px; height:165px; border-radius:10px; object-fit:cover; object-position:50% 12%; }
.cs-ph{ display:flex; align-items:center; justify-content:center; background:var(--navy-anchor); color:var(--white); font-family:'Poppins',sans-serif; font-weight:700; font-size:26px; }
.cs-in h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; color:var(--navy-anchor); margin:6px 0 2px; }
.cs-in__role{ font-family:'Inter',sans-serif; font-size:13.5px; color:var(--navy-anchor); margin-bottom:8px; }
.cs-in p{ font-size:13px !important; line-height:1.6 !important; margin-bottom:0 !important; }
.cs-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.cs-tags span{ background:var(--ice); color:var(--primary-blue); border-radius:6px; padding:4px 10px; font-family:'Poppins',sans-serif; font-weight:600; font-size:11.5px; }
@media (max-width:560px){ .cs-ins{ grid-template-columns:1fr; } .cs-in{ grid-template-columns:96px minmax(0,1fr); gap:14px; } .cs-in__img{ width:96px; height:120px; } }

.cs-trainers{ background:var(--ice); border-radius:18px; padding:26px; }
.cs-eyebrow{ display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:1px; color:var(--primary-blue); }
.cs-eyebrow::before{ content:""; width:22px; height:3px; background:var(--yellow); }
.cs-trainers h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:32px; color:var(--navy-anchor); margin:6px 0 8px; }
.cs-trainers > p{ max-width:600px; }
.cs-f3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:20px; }
.cs-f3 > div{ background:var(--white); border-radius:12px; padding:16px; display:flex; gap:12px; }
.cs-f3 i{ width:42px; height:42px; }
.cs-f3 span{ font-size:12px; }

/* Students say */
.cs-say{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:22px; align-items:stretch; }
.cs-say__stats:only-child{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.cs-say:has(.cs-say__quotes:only-child), .cs-say:has(.cs-say__stats:only-child){ grid-template-columns:1fr; }
.cs-say__quotes{ display:flex; flex-direction:column; gap:12px; }
.cs-say__q{ display:flex; gap:16px; align-items:center; border:1px solid var(--gray300); border-radius:14px; padding:14px; background:var(--white); box-shadow:var(--shadow-md); }
.cs-say__img{ width:110px; height:110px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.cs-say__q p{ margin:0 0 8px !important; font-size:13.5px !important; font-style:italic; line-height:1.6 !important; }
.cs-say__q b{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--navy-anchor); }
.cs-say__q span:not(.cs-ph){ font-family:'Inter',sans-serif; font-size:11.5px; color:var(--gray500); }
.cs-say__stats{ background:var(--navy-anchor); border-radius:16px; padding:26px; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-content:center; }
.cs-say__stats > div{ display:flex; gap:12px; align-items:center; }
.cs-say__stats i{ width:44px; height:44px; border-radius:50%; background:rgba(254,218,37,.18); color:var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cs-say__stats span{ font-family:'Inter',sans-serif; font-size:12px; color:rgba(255,255,255,.85); line-height:1.3; }
.cs-say__stats b{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; color:var(--white); }
@media (max-width:760px){ .cs-say{ grid-template-columns:1fr; } .cs-say__q{ align-items:flex-start; } .cs-say__img{ width:72px; height:72px; } }

/* ---------- Curriculum tab ---------- */
.cs-acc{ display:grid; gap:12px; margin-top:14px; }
.cs-accordion{ background:var(--white); border:1px solid var(--gray300); border-radius:12px; box-shadow:var(--shadow-md); overflow:hidden; }
.cs-accordion__head{ display:grid; grid-template-columns:34px 42px minmax(0,1fr) auto 20px; gap:14px; align-items:center; width:100%; background:none; border:none; padding:12px 16px; text-align:left; cursor:pointer; color:var(--navy-anchor); }
.cs-accordion__head b{ font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; }
.cs-accordion__meta{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--gray500); white-space:nowrap; }
.cs-accordion__chev{ color:var(--navy-anchor); transition:transform .25s var(--ease); }
.cs-accordion__chev.is-open{ transform:rotate(180deg); }
.cs-accordion__body{ padding:0 16px 16px 66px; }
.cs-trow{ display:grid; grid-template-columns:44px minmax(0,1fr) 110px 18px; gap:8px; align-items:center; width:100%; padding:10px 14px; font-family:'Inter',sans-serif; font-size:13px; color:var(--navy-anchor); text-align:left; background:none; border:none; cursor:pointer; }
.cs-trow--head{ background:var(--ice); border-radius:10px 10px 0 0; font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; color:var(--gray500); cursor:default; }
.cs-topic{ background:var(--ice); border-top:1px solid var(--white); }
.cs-topic:last-child{ border-radius:0 0 10px 10px; overflow:hidden; }
.cs-topic .cs-trow:hover{ background:rgba(0,82,204,.06); }
.cs-topic__chev{ color:var(--gray500); transition:transform .2s var(--ease); }
.cs-topic__chev.is-open{ transform:rotate(180deg); color:var(--primary-blue); }
.cs-topic__dur{ font-family:'Roboto Mono',monospace; font-size:11px; color:var(--primary-blue); background:var(--white); border:1px solid var(--gray300); border-radius:999px; padding:3px 10px; flex-shrink:0; }
.cs-topic__yt{ display:inline-block; margin:2px 0 8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; color:var(--primary-blue); text-decoration:underline; }
.cs-topic__body{ background:var(--white); padding:10px 18px 14px 58px; }
.cs-content-item{ position:relative; margin:0 !important; padding:7px 0 7px 20px; font-family:'Inter',sans-serif; font-size:13px !important; line-height:1.55 !important; color:var(--gray700) !important; }
.cs-content-item::before{ content:""; position:absolute; left:2px; top:14px; width:6px; height:6px; border-radius:50%; background:var(--primary-blue); }
.cs-content-item--hook{ font-style:italic; color:var(--navy-anchor) !important; background:var(--ice); padding:10px 14px 10px 38px; border-radius:var(--radius-sm); margin:2px 0 8px !important; border-left:3px solid var(--gold); }
.cs-content-item--hook::before{ content:"\2726"; left:14px; top:9px; width:auto; height:auto; background:none; color:var(--gold); font-size:12px; }
.cs-subtopic{ padding-top:10px; margin-top:10px; border-top:1px solid var(--gray300); }
.cs-subtopic:first-child{ padding-top:0; margin-top:0; border-top:none; }
.cs-subtopic__head{ display:flex; align-items:center; gap:10px; padding:0 0 6px; font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px; color:var(--navy-anchor); }
.cs-subtopic__name{ flex:1; }
@media (max-width:640px){
  .cs-accordion__head{ grid-template-columns:34px minmax(0,1fr) 20px; }
  .cs-accordion__head .cs-modico, .cs-accordion__meta{ display:none; }
  .cs-accordion__body{ padding:0 10px 12px; }
  .cs-trow{ grid-template-columns:30px minmax(0,1fr) 70px 16px; padding:10px 8px; }
  .cs-topic__body{ padding:10px 12px 14px; }
}

.cs-end{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; margin-top:14px; }
.cs-checks{ list-style:none; padding:0; margin:0; }
.cs-checks li{ display:flex; gap:9px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--navy-anchor); margin:9px 0; }
.cs-checks svg{ color:var(--primary-blue); margin-top:3px; }
.cs-end__promo{ background:var(--yellow); border-radius:16px; padding:24px; }
.cs-end__promo h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; line-height:1.3; color:var(--navy-anchor); margin-bottom:6px; }
.cs-panel .cs-end__promo p{ font-size:13px; color:var(--navy-anchor); margin-bottom:14px; }
.cs-end__promo a{ width:38px; height:38px; border-radius:50%; background:var(--white); color:var(--primary-blue); display:flex; align-items:center; justify-content:center; }
@media (max-width:760px){ .cs-end{ grid-template-columns:1fr; } }

/* ---------- Reviews tab ---------- */
.cs-card{ background:var(--white); border:1px solid var(--gray300); border-radius:16px; padding:24px; box-shadow:var(--shadow-md); }
.cs-sf{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; align-items:start; }
.cs-sf:not(:has(.cs-why)){ grid-template-columns:1fr; }
.cs-sf h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:21px; color:var(--navy-anchor); margin:0 0 14px; }
.cs-feedback{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:16px; align-items:center; }
.cs-feedback__card{ background:var(--ice); border-radius:14px; padding:22px 10px; text-align:center; }
.cs-feedback__card b{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:46px; line-height:1.1; color:var(--navy-anchor); }
.cs-feedback__card b small{ font-size:20px; font-weight:500; color:var(--gray500); }
.cs-feedback__card span{ display:block; font-family:'Inter',sans-serif; font-size:12px; color:var(--gray500); }
.cs-feedback__stars{ display:flex; justify-content:center; gap:2px; margin:6px 0; }
.cs-feedback__stars svg, .cs-quote__stars svg{ color:var(--gold); }
.cs-feedback__dist{ display:flex; flex-direction:column; gap:12px; }
.cs-feedback__row{ display:grid; grid-template-columns:34px minmax(0,1fr) 38px; gap:8px; align-items:center; font-family:'Inter',sans-serif; font-size:12px; color:var(--navy-anchor); }
.cs-feedback__lbl{ display:flex; align-items:center; gap:4px; }
.cs-feedback__lbl svg{ color:var(--gold); }
.cs-feedback__bar{ height:7px; border-radius:99px; background:var(--ice); overflow:hidden; }
.cs-feedback__bar span{ display:block; height:100%; background:var(--primary-blue); border-radius:99px; }
.cs-feedback__count{ text-align:right; }
@media (max-width:640px){ .cs-sf{ grid-template-columns:1fr; } .cs-feedback{ grid-template-columns:1fr; } }

.cs-why{ background:var(--ice); border-radius:14px; padding:20px; }
.cs-why h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--navy-anchor); margin-bottom:12px; }
.cs-why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cs-why__grid > div{ background:var(--white); border-radius:10px; padding:12px; display:flex; gap:10px; align-items:center; }
.cs-why i{ width:34px; height:34px; }
.cs-why b{ font-size:14px; }
.cs-why span{ font-size:11px; }

.cs-quote-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:22px; }
.cs-quote{ border:1px solid var(--gray300); border-radius:12px; padding:16px; background:var(--white); }
.cs-quote__h{ display:flex; gap:10px; align-items:center; }
.cs-quote__img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; font-size:15px; }
.cs-quote b{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--navy-anchor); }
.cs-quote__h div span{ font-family:'Inter',sans-serif; font-size:11px; color:var(--gray500); }
.cs-quote__stars{ display:flex; gap:2px; margin-top:3px; }
.cs-panel .cs-quote p{ font-size:13px; line-height:1.6; margin:10px 0 0; }
.cs-val{ margin-top:16px; background:var(--ice); border-radius:12px; padding:14px 20px; display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); gap:20px; align-items:center; }
.cs-val > b{ font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; color:var(--navy-anchor); }
.cs-val > div{ display:flex; gap:10px; align-items:center; }
.cs-val i{ background:var(--white); width:38px; height:38px; }
.cs-val span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; color:var(--navy-anchor); }
@media (max-width:900px){ .cs-val{ grid-template-columns:1fr; gap:12px; } }

/* ---------- Sticky sidebar ---------- */
.cs-sidebar{ position:sticky; top:100px; }
.cs-price-card{ background:var(--white); border:1px solid var(--gray300); border-radius:16px; padding:22px; box-shadow:var(--shadow-md); }
.cs-price-top{ display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--navy-anchor); }
.cs-price-top del{ color:var(--gray500); font-weight:500; }
.cs-price-badge{ margin-left:auto; background:var(--yellow); color:var(--navy-anchor); font-family:'Poppins',sans-serif; font-weight:700; font-size:11px; padding:3px 10px; border-radius:7px; }
.cs-price-big{ font-family:'Poppins',sans-serif; font-weight:800; font-size:38px; line-height:1.2; color:var(--navy-anchor); margin-top:4px; }
.cs-price-note{ font-family:'Inter',sans-serif; font-size:12px; color:var(--gray500); margin:0 0 16px; }
.cs-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; padding:13px; border-radius:10px; margin-bottom:10px; border:0; cursor:pointer; transition:transform .2s var(--ease); }
.cs-btn:hover{ transform:translateY(-2px); }
.cs-btn--fill{ background:var(--yellow); color:var(--navy-anchor); }
.cs-btn--outline{ background:var(--white); color:var(--primary-blue); border:1.5px solid var(--primary-blue); }
.cs-meta-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:13px; }
.cs-meta-list li{ display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--navy-anchor); }
.cs-meta-list li svg{ color:var(--primary-blue); }
.cs-meta-list li h6{ font-weight:500; font-size:13.5px; color:var(--gray500); margin:0 auto 0 0; }
.cs-meta-list li span{ font-weight:600; }
.cs-quick{ margin-top:18px; padding-top:16px; border-top:1px solid var(--gray300); }
.cs-quick h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:var(--navy-anchor); margin-bottom:10px; }
.cs-quick .cs-btn{ font-size:13.5px; padding:11px; margin-bottom:8px; }
.cs-quick .cs-btn:last-child{ margin-bottom:0; }
.cs-help{ margin-top:18px; border-radius:16px; background:var(--ice); padding:18px; display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center; }
.cs-help img{ width:110px; height:160px; object-fit:cover; object-position:50% 0; border-radius:12px; margin-left:-6px; }
.cs-help h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--navy-anchor); }
.cs-help p{ font-family:'Inter',sans-serif; font-size:12px; line-height:1.4; color:var(--gray500); margin:2px 0 10px; }
.cs-help .cs-btn{ font-size:12.5px; padding:9px; margin-bottom:8px; }
.cs-help .cs-btn:last-child{ margin-bottom:0; }
@media (max-width:1000px) and (min-width:561px){ .cs-sidebar{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } .cs-help{ margin-top:0; } }
@media (max-width:420px){ .cs-help{ grid-template-columns:72px minmax(0,1fr); } .cs-help img{ width:84px; height:130px; } }

/* ---------- Related courses ---------- */
.cs-related{ margin-top:40px; }
.cs-related__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.cs-viewall{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--primary-blue); color:var(--primary-blue); border-radius:999px; padding:8px 18px; font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; background:var(--white); }
.cs-related__row{ display:grid; grid-template-columns:38px minmax(0,1fr) 38px; gap:12px; align-items:center; }
.cs-arrow{ width:38px; height:38px; border-radius:50%; background:var(--white); border:1px solid var(--gray300); color:var(--primary-blue); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); cursor:pointer; }
.cs-related__scroll{ display:flex; gap:20px; overflow-x:auto; padding:4px 4px 14px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cs-related__scroll::-webkit-scrollbar{ display:none; }
.cs-related__card{ scroll-snap-align:start; flex:0 0 calc((100% - 40px) / 3); min-width:260px; display:grid; grid-template-columns:130px minmax(0,1fr); background:var(--white); border:1px solid var(--gray300); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md); transition:transform .2s var(--ease); }
.cs-related__card:hover{ transform:translateY(-3px); }
.cs-related__media{ min-height:104px; }
.cs-related__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-related__media-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:34px; }
.cs-related__body{ padding:14px; position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:10px; }
.cs-related__body h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; line-height:1.3; color:var(--navy-anchor); padding-right:30px; }
.cs-related__go{ position:absolute; right:12px; top:12px; width:24px; height:24px; border:1.5px solid var(--primary-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--primary-blue); }
.cs-related__meta{ display:flex; justify-content:space-between; align-items:center; }
.cs-related__meta span{ font-family:'Inter',sans-serif; font-size:12px; color:var(--gray500); display:flex; align-items:center; gap:5px; }
.cs-related__price{ font-family:'Poppins',sans-serif !important; font-weight:700 !important; font-size:15px !important; color:var(--navy-anchor) !important; }
.cs-related__dots{ display:flex; justify-content:center; gap:8px; margin-top:6px; }
.cs-related__dot{ width:8px; height:8px; border-radius:50%; background:var(--gray300); border:none; padding:0; cursor:pointer; transition:background .2s var(--ease), width .2s var(--ease); }
.cs-related__dot.is-active{ background:var(--primary-blue); width:22px; border-radius:99px; }
@media (max-width:900px){ .cs-related__card{ flex-basis:80%; } .cs-related__row{ grid-template-columns:minmax(0,1fr); } .cs-arrow{ display:none; } }
@media (max-width:420px){ .cs-related__card{ grid-template-columns:96px minmax(0,1fr); } }

/* ---------- Final CTA ---------- */
.cs-final-cta{ margin-top:34px; background:var(--primary-blue); border-radius:16px; color:var(--white); overflow:hidden; }
.cs-final-cta__inner{ display:grid; grid-template-columns:minmax(0,1fr) 440px; min-height:200px; }
.cs-final-cta__inner > div:first-child{ padding:30px 36px; }
.cs-final-cta h2{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,27px); line-height:1.25; color:var(--white); margin-bottom:8px; }
.cs-final-cta p{ font-family:'Inter',sans-serif; font-size:14.5px; color:rgba(255,255,255,.9); margin-bottom:18px; }
.cs-final-cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cs-final-cta__btn{ display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; padding:11px 22px; border-radius:999px; transition:transform .2s var(--ease); }
.cs-final-cta__btn--fill{ background:var(--yellow); color:var(--navy-anchor); }
.cs-final-cta__btn--fill:hover{ transform:translateY(-2px); }
.cs-final-cta__btn--outline{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.7); }
.cs-final-cta__pic{ position:relative; }
.cs-final-cta__pic::before{ content:""; position:absolute; right:30px; top:-50px; width:300px; height:300px; border-radius:50%; background:var(--yellow); }
.cs-final-cta__pic img{ position:absolute; right:50px; top:50%; transform:translateY(-50%); width:180px; height:180px; border-radius:50%; object-fit:cover; object-position:40% 40%; border:5px solid var(--white); }
@media (max-width:900px){ .cs-final-cta__inner{ grid-template-columns:1fr; } .cs-final-cta__pic{ height:200px; } .cs-final-cta__pic img{ right:50%; transform:translate(50%,-50%); width:180px; height:180px; } .cs-final-cta__pic::before{ right:50%; transform:translateX(50%); width:260px; height:260px; top:-50px; } .cs-final-cta__inner > div:first-child{ padding:24px; } }

/* globals.css sets overflow-x:hidden on html AND body, which makes body a scroll container and silently disables position:sticky.
   On this page only, clip instead (same visual clamp, no scroll container) so the fee card follows the scroll. */
body:has(.cs-page){ overflow-x:clip; }