/* ==========================================================================
   Course page v2 — quick-answer card, one-page scrolling course content
   (no tabs), curriculum timeline, spotlight cards and refreshed sidebar.
   Loaded after each course page's inline styles, so it overrides them.
   ========================================================================== */

:root{
  --cp-navy:#293681;
  --cp-navy-deep:#1a2360;
  --cp-blue:#3A86FF;
  --cp-red:#DF301C;
  --cp-gold:#FFC634;
  --cp-ink:#171B2E;
  --cp-soft:#4B5170;
  --cp-line:rgba(41,54,129,.12);
  --cp-bg:#F5F7FD;
  --cp-header-h:76px;
  --cp-ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   1. Quick answer card — dark intro panel + detail tiles, below the hero
   -------------------------------------------------------------------------- */
.aeo-summary{ padding:64px 0 8px; position:relative; margin:0; }
.aeo-box.cp-qa{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  padding:0; background:#fff; border:1px solid var(--cp-line);
  border-radius:28px;
  box-shadow:0 40px 70px -40px rgba(26,35,96,.5), 0 2px 6px rgba(26,35,96,.04);
}
.cp-qa-intro{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; gap:18px; padding:36px 34px;
  background:linear-gradient(155deg,var(--cp-navy-deep) 0%,var(--cp-navy) 55%,#3550c4 100%);
  color:#fff;
}
/* faint grid + glows inside the dark panel */
.cp-qa-intro::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at 0% 0%,#000 20%,transparent 70%); mask-image:radial-gradient(ellipse at 0% 0%,#000 20%,transparent 70%);
}
.cp-qa-intro::after{
  content:""; position:absolute; z-index:-1; right:-90px; bottom:-90px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(223,48,28,.5),transparent 65%);
}
.cp-qa .aeo-kicker{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin:0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff;
  padding:7px 14px 7px 12px; border-radius:999px; font-size:11.5px; letter-spacing:.12em;
}
.cp-pulse{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--cp-gold); flex:none; }
.cp-pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--cp-gold);
  opacity:0; animation:cpPulse 2s var(--cp-ease) infinite;
}
@keyframes cpPulse{ 0%{ transform:scale(.5); opacity:.8; } 100%{ transform:scale(1.6); opacity:0; } }
.cp-qa .aeo-lead{ font-size:15.5px; line-height:1.75; color:rgba(255,255,255,.78); margin:0; max-width:none; }
.cp-qa .aeo-lead strong{ color:#fff; font-weight:700; }
.cp-qa-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.cp-qa-badges span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:6px 12px;
}
.cp-qa-badges svg{ width:14px; height:14px; color:#4ade80; }
.cp-qa .aeo-updated{
  display:flex; align-items:flex-start; gap:8px; margin:auto 0 0; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.65);
}
.cp-qa .aeo-updated svg{ width:15px; height:15px; color:#4ade80; flex:none; margin-top:1px; }

.cp-qa .aeo-facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:26px;
  align-content:center;
}
.cp-qa .aeo-facts > div{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start; align-content:start;
  background:var(--cp-bg); border:1px solid transparent; border-radius:18px; padding:16px;
  transition:transform .3s var(--cp-ease), box-shadow .3s var(--cp-ease), border-color .3s, background .3s;
}
.cp-qa .aeo-facts > div:hover{
  background:#fff; border-color:rgba(58,134,255,.25); transform:translateY(-3px);
  box-shadow:0 18px 30px -20px rgba(26,35,96,.45);
}
.cp-fi{
  grid-row:span 2; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--cp-blue),var(--cp-navy));
  box-shadow:0 8px 16px -8px rgba(41,54,129,.7);
}
.cp-fi svg{ width:20px; height:20px; }
.aeo-facts > div:nth-child(2) .cp-fi{ background:linear-gradient(135deg,#8b5cf6,#5b3fd1); box-shadow:0 8px 16px -8px rgba(91,63,209,.7); }
.aeo-facts > div:nth-child(3) .cp-fi{ background:linear-gradient(135deg,#0ea5a4,#0b7f8f); box-shadow:0 8px 16px -8px rgba(11,127,143,.7); }
.aeo-facts > div:nth-child(4) .cp-fi{ background:linear-gradient(135deg,#f59e0b,#e2711d); box-shadow:0 8px 16px -8px rgba(226,113,29,.7); }
.aeo-facts > div:nth-child(5) .cp-fi{ background:linear-gradient(135deg,#22c55e,#15803d); box-shadow:0 8px 16px -8px rgba(21,128,61,.7); }
.cp-qa .aeo-facts dt{ font-size:11px; letter-spacing:.08em; color:var(--cp-soft); opacity:.85; margin:2px 0 3px; }
.cp-qa .aeo-facts dd{ font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; line-height:1.45; color:var(--cp-ink); margin:0; }
/* "Free demo" tile becomes the call-to-action */
.cp-qa .aeo-facts > div.cp-fact-cta{
  background:linear-gradient(135deg,var(--cp-red),#b8230f); color:#fff;
  box-shadow:0 18px 30px -18px rgba(223,48,28,.75);
}
.cp-qa .aeo-facts > div.cp-fact-cta .cp-fi{ background:rgba(255,255,255,.18); box-shadow:none; }
.cp-qa .aeo-facts > div.cp-fact-cta dt{ color:rgba(255,255,255,.85); }
.cp-qa .aeo-facts > div.cp-fact-cta dd,
.cp-qa .aeo-facts > div.cp-fact-cta dd a{ color:#fff; text-decoration:none; font-size:16px; }
.cp-qa .aeo-facts > div.cp-fact-cta:hover{ background:linear-gradient(135deg,#ec3a24,#b8230f); border-color:transparent; }

/* --------------------------------------------------------------------------
   2. Course content — everything on one page
   -------------------------------------------------------------------------- */
.course-body .course-tabs-layout{ align-items:stretch; gap:44px; }
.course-tabs-side{ position:static; top:auto; }

/* sticky "jump to" bar */
.cp-jump{
  position:sticky; top:calc(var(--cp-header-h) + 12px); z-index:20;
  display:flex; gap:4px; padding:6px; margin-bottom:40px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--cp-line); border-radius:999px;
  box-shadow:0 14px 34px -22px rgba(26,35,96,.55);
  overflow-x:auto; scrollbar-width:none;
}
.cp-jump::-webkit-scrollbar{ display:none; }
.cp-jump a{
  flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:999px; white-space:nowrap;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; color:var(--cp-soft); text-decoration:none;
  transition:background .25s, color .25s;
}
.cp-jump a svg{ width:15px; height:15px; flex:none; }
.cp-jump a:hover{ color:var(--cp-navy); background:rgba(41,54,129,.06); }
.cp-jump a.active{ color:#fff; background:linear-gradient(135deg,var(--cp-navy),#3a4bb0); box-shadow:0 8px 16px -10px rgba(26,35,96,.9); }
.cp-jump-progress{
  position:absolute; left:22px; right:22px; bottom:0; height:2px; border-radius:2px; overflow:hidden; pointer-events:none;
}
.cp-jump-progress span{
  display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--cp-red),var(--cp-gold),var(--cp-blue));
}

/* sections */
.cp-section{ scroll-margin-top:calc(var(--cp-header-h) + 92px); padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid var(--cp-line); }
.cp-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.cp-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:10px;
  font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cp-red);
}
.cp-eyebrow b{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px;
  background:rgba(223,48,28,.1); color:var(--cp-red); font-size:12px; letter-spacing:0;
}
.cp-eyebrow{ display:flex; width:max-content; }
.course-main .cp-section h2{
  display:block; text-transform:none; letter-spacing:-.01em; border:none;
  font-family:'Sora','Poppins',sans-serif; font-weight:800; font-size:clamp(24px,2.6vw,31px);
  line-height:1.2; color:var(--cp-navy); margin:0 0 18px; padding:0;
}
.cp-section h2::before{ content:none; display:none; }
.cp-sub{ color:var(--cp-soft); font-size:15px; margin:-6px 0 26px; }

/* overview — lead card (rotating gradient border + word reveal), insight cards, stats strip */
@property --cp-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes cpSpin{ to{ --cp-angle:360deg; } }
.cp-ov{ display:flex; flex-direction:column; gap:18px; }
.cp-ov-lead{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:24px; padding:28px 30px 28px 86px;
  border:1.5px solid transparent;
  background:
    linear-gradient(135deg,#fff,#f5f8ff) padding-box,
    conic-gradient(from var(--cp-angle), rgba(58,134,255,.18) 0deg, var(--cp-blue) 60deg, var(--cp-red) 120deg, rgba(58,134,255,.18) 180deg, rgba(58,134,255,.18) 360deg) border-box;
  animation:cpSpin 8s linear infinite;
  box-shadow:0 24px 44px -30px rgba(26,35,96,.45);
}
.cp-ov-lead::after{
  content:""; position:absolute; z-index:-1; right:-60px; top:-80px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(58,134,255,.14),transparent 65%);
}
.cp-ov-spark{
  position:absolute; left:26px; top:28px; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--cp-red),#ff7a45); box-shadow:0 10px 20px -10px rgba(223,48,28,.8);
}
.cp-ov-spark::after{
  content:""; position:absolute; inset:-5px; border-radius:16px; border:2px solid rgba(223,48,28,.35);
  animation:cpRing 2.4s var(--cp-ease) infinite;
}
@keyframes cpRing{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.cp-ov-spark svg{ width:20px; height:20px; }
.cp-ov .cp-lead{ margin:0; font-size:18px; line-height:1.7; font-weight:500; color:var(--cp-ink); }
/* text generate effect: words blur/fade in one after another */
.cp-tg .w{ display:inline; opacity:.12; filter:blur(6px); transition:opacity .5s ease, filter .5s ease; transition-delay:calc(var(--d) * 1ms); }
.cp-tg.is-in .w{ opacity:1; filter:none; }

.cp-ov-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cp-ov-card{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--cp-line); border-radius:20px; padding:24px;
  transition:transform .4s var(--cp-ease), box-shadow .4s var(--cp-ease), border-color .4s;
}
.cp-ov-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-navy)); transition:transform .5s var(--cp-ease);
}
.cp-ov-card:nth-child(2)::before{ background:linear-gradient(90deg,#f59e0b,var(--cp-red)); }
.cp-ov-card:hover{ transform:translateY(-5px); border-color:rgba(58,134,255,.25); box-shadow:0 28px 46px -30px rgba(26,35,96,.6); }
.cp-ov-card:hover::before{ transform:scaleX(1); }
.cp-ov-card h3{ position:relative; display:inline-block; font-family:'Poppins',sans-serif; font-size:16.5px; font-weight:700; color:var(--cp-navy); margin:16px 0 10px; padding-bottom:8px; }
.cp-ov-card h3::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--cp-blue),rgba(58,134,255,0)); transition:width .8s var(--cp-ease) .5s;
}
.cp-ov-card:nth-child(2) h3::after{ background:linear-gradient(90deg,#f59e0b,rgba(245,158,11,0)); }
.is-in .cp-ov-card h3::after{ width:48px; }
.cp-ov-card p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--cp-soft); }
.cp-ov-ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none;
  color:#fff; background:linear-gradient(135deg,var(--cp-blue),var(--cp-navy)); box-shadow:0 12px 20px -12px rgba(41,54,129,.9);
  transition:transform .45s var(--cp-ease);
}
.cp-ov-ic svg{ width:21px; height:21px; }
.cp-ov-card:nth-child(2) .cp-ov-ic{ background:linear-gradient(135deg,#f59e0b,#e2711d); box-shadow:0 12px 20px -12px rgba(226,113,29,.9); }
.cp-ov-card:hover .cp-ov-ic{ transform:rotate(-10deg) scale(1.1); }

/* stats: one connected strip */
.cp-ov-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff; border:1px solid var(--cp-line); border-radius:20px; overflow:hidden;
  box-shadow:0 20px 40px -32px rgba(26,35,96,.5);
}
.cp-ov-stats > div{
  position:relative; display:flex; flex-direction:column; gap:3px; padding:18px 18px 16px;
  transition:background .3s;
}
.cp-ov-stats > div + div{ border-left:1px solid var(--cp-line); }
.cp-ov-stats > div:hover{ background:#f5f8ff; }
.cp-ov-stats > div::after{
  content:""; position:absolute; left:18px; right:18px; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--cp-red),var(--cp-gold)); transform:scaleX(0); transition:transform .4s var(--cp-ease);
}
.cp-ov-stats > div:hover::after{ transform:scaleX(1); }
.cp-ov-stats .cp-ov-ic{ width:34px; height:34px; border-radius:10px; margin-bottom:10px; box-shadow:none; background:rgba(58,134,255,.12); color:var(--cp-navy); }
.cp-ov-stats > div:hover .cp-ov-ic{ background:var(--cp-navy); color:#fff; transform:translateY(-2px); }
.cp-ov-stats .cp-ov-ic svg{ width:17px; height:17px; }
.cp-ov-stats b{ font-family:'Sora','Poppins',sans-serif; font-size:16px; color:var(--cp-ink); line-height:1.3; }
.cp-ov-stats small{ font-size:12px; color:var(--cp-soft); line-height:1.4; }
.cp-note{
  display:flex; gap:12px; align-items:flex-start; margin:0 !important;
  background:linear-gradient(135deg,rgba(58,134,255,.07),rgba(41,54,129,.04));
  border:1px solid rgba(58,134,255,.18); border-radius:16px; padding:14px 16px;
  font-size:14.5px !important; line-height:1.65; color:var(--cp-navy) !important;
}
.cp-note svg{ width:20px; height:20px; flex:none; color:var(--cp-blue); margin-top:2px; animation:cpBob 2.4s ease-in-out infinite; }
@keyframes cpBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* staggered entrance for animated blocks (keyframes with "backwards" fill, so hover effects stay instant) */
@keyframes cpRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes cpIconIn{ from{ opacity:0; transform:scale(.4) rotate(-20deg); } to{ opacity:1; transform:none; } }
.cp-js [data-cp-anim]:not(.is-in) > *, .cp-js [data-cp-anim]:not(.is-in) .cp-cert-list li, .cp-js [data-cp-anim]:not(.is-in) .cp-steps li{ opacity:0; }
.cp-js [data-cp-anim].is-in > *{ animation:cpRise .7s var(--cp-ease) backwards; }
.cp-js [data-cp-anim].is-in > *:nth-child(2){ animation-delay:.1s; }
.cp-js [data-cp-anim].is-in > *:nth-child(3){ animation-delay:.2s; }
.cp-js [data-cp-anim].is-in > *:nth-child(4){ animation-delay:.3s; }
.cp-js [data-cp-anim].is-in > *:nth-child(5){ animation-delay:.4s; }
.cp-js [data-cp-anim].is-in > *:nth-child(6){ animation-delay:.5s; }
.cp-js [data-cp-anim].is-in .cp-cert-list li, .cp-js [data-cp-anim].is-in .cp-steps li{ animation:cpRise .7s var(--cp-ease) backwards; animation-delay:calc(.25s + var(--i) * .12s); }
.cp-js .is-in .cp-ov-grid .cp-ov-card .cp-ov-ic{ animation:cpIconIn .7s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:.35s; }
.cp-js .is-in .cp-ov-grid .cp-ov-card:nth-child(2) .cp-ov-ic{ animation-delay:.45s; }
.cp-js .cp-why-list.is-in .cp-why-ic{ animation:cpIconIn .7s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(.25s + var(--i) * .1s); }
@keyframes cpFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* curriculum — timeline with scroll beam, module cards and topic chips (brand blue only) */
.cp-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:-4px 0 28px; }
.cp-meta span{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--cp-navy);
  background:#fff; border:1px solid var(--cp-line); border-radius:999px; padding:7px 14px;
}
.cp-meta svg{ width:15px; height:15px; color:var(--cp-blue); }
.cp-timeline{ position:relative; }
.cp-tl-rail{
  position:absolute; left:23px; top:16px; bottom:30px; width:2px; border-radius:2px;
  background:rgba(41,54,129,.12);
}
.cp-tl-fill{
  position:absolute; left:0; top:0; width:100%; height:100%; border-radius:2px;
  transform-origin:top; transform:scaleY(0);
  background:linear-gradient(to bottom, var(--cp-blue), var(--cp-navy));
  box-shadow:0 0 10px rgba(58,134,255,.45);
}
.cp-tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.cp-tl > li, .cp-tl-finish{ position:relative; padding-left:70px; }

/* number box on the line */
.cp-tl-dot{
  position:absolute; left:0; top:18px; width:48px; height:48px; border-radius:15px;
  display:grid; place-items:center; z-index:1;
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:var(--cp-navy);
  background:#fff; border:1.5px solid rgba(41,54,129,.16);
  box-shadow:0 6px 14px -8px rgba(26,35,96,.35);
  transition:background .45s var(--cp-ease), color .45s, border-color .45s, box-shadow .45s, transform .45s var(--cp-ease);
}
.cp-tl-dot::after{ content:""; position:absolute; inset:-6px; border-radius:19px; border:2px solid var(--cp-blue); opacity:0; }
.cp-tl > li.is-on .cp-tl-dot, .cp-tl-finish.is-on .cp-tl-dot{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--cp-blue),var(--cp-navy));
  box-shadow:0 12px 22px -10px rgba(41,54,129,.85);
}
.cp-tl > li.is-on .cp-tl-dot::after, .cp-tl-finish.is-on .cp-tl-dot::after{ animation:cpRing 1.1s var(--cp-ease) 1; }

/* module card */
.cp-tl-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--cp-line); border-radius:20px; padding:18px 22px 20px;
  box-shadow:0 14px 30px -26px rgba(26,35,96,.5);
  transition:transform .4s var(--cp-ease), box-shadow .4s var(--cp-ease), border-color .4s;
}
.cp-tl-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-navy)); transition:transform .7s var(--cp-ease);
}
.cp-tl > li.is-on .cp-tl-card::before{ transform:scaleX(1); }
.cp-tl > li:hover .cp-tl-card{
  transform:translateX(4px); border-color:rgba(58,134,255,.35);
  box-shadow:0 22px 38px -26px rgba(26,35,96,.6);
}
.cp-tl > li:hover .cp-tl-dot{ transform:scale(1.06); }

.cp-tl-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.cp-tl-kicker{
  font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cp-blue);
}
.cp-tl-count{
  font-size:11.5px; font-weight:600; color:var(--cp-soft); white-space:nowrap;
  background:var(--cp-bg); border-radius:999px; padding:3px 10px;
}
.cp-tl-card h3{ font-family:'Poppins',sans-serif; font-size:17px; font-weight:700; line-height:1.35; color:var(--cp-ink); margin:0 0 12px; }
.cp-tl-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cp-tl-card li{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px 7px 9px; border-radius:999px; font-size:13.5px; font-weight:500; line-height:1.4; color:var(--cp-ink);
  background:var(--cp-bg); border:1px solid rgba(41,54,129,.08);
  transition:background .3s, border-color .3s;
}
.cp-tl-card li::before{
  content:""; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--cp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat;
}
.cp-tl > li:hover .cp-tl-card li{ background:rgba(58,134,255,.08); border-color:rgba(58,134,255,.18); }

/* finish point */
.cp-tl-finish{ margin-top:14px; }
.cp-tl-finish .cp-tl-dot{ top:8px; }
.cp-tl-finish .cp-tl-dot svg{ width:22px; height:22px; }
.cp-tl-finish-card{
  display:flex; flex-direction:column; gap:3px; padding:16px 20px; border-radius:18px;
  background:linear-gradient(135deg,var(--cp-navy-deep),var(--cp-navy) 60%,#3550c4); color:#fff;
  box-shadow:0 20px 36px -24px rgba(26,35,96,.9);
}
.cp-tl-finish-card b{ font-family:'Sora','Poppins',sans-serif; font-size:16px; color:#fff; }
.cp-tl-finish-card span{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.8); }

/* entrance: card slides in, chips follow */
@keyframes cpSlideIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
.cp-js .cp-tl > li:not(.is-seen) .cp-tl-card, .cp-js .cp-tl-finish:not(.is-seen) .cp-tl-finish-card{ opacity:0; }
.cp-js .cp-tl > li.is-seen .cp-tl-card, .cp-js .cp-tl-finish.is-seen .cp-tl-finish-card{ animation:cpSlideIn .6s var(--cp-ease) backwards; }
.cp-js .cp-tl > li.is-seen .cp-tl-card li{ animation:cpRise .5s var(--cp-ease) backwards; animation-delay:.25s; }
.cp-js .cp-tl > li.is-seen .cp-tl-card li:nth-child(2){ animation-delay:.33s; }
.cp-js .cp-tl > li.is-seen .cp-tl-card li:nth-child(n+3){ animation-delay:.41s; }

/* why TIIT — clean 2-column list cards with colour sweep on hover */
.cp-why-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cp-why-card{
  --tone:#3A86FF; --tone2:#293681;
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start;
  background:#fff; border:1px solid var(--cp-line); border-radius:20px; padding:20px 20px 20px 22px;
  transition:transform .4s var(--cp-ease), box-shadow .4s var(--cp-ease), border-color .4s;
}
.cp-why-card.tone-navy{ --tone:#3A86FF; --tone2:#293681; }
.cp-why-card.tone-blue{ --tone:#38bdf8; --tone2:#0e7fc4; }
.cp-why-card.tone-amber{ --tone:#f59e0b; --tone2:#e2711d; }
.cp-why-card.tone-green{ --tone:#22c55e; --tone2:#15803d; }
.cp-why-card.tone-violet{ --tone:#8b5cf6; --tone2:#5b3fd1; }
.cp-why-card.tone-red{ --tone:#ff6a45; --tone2:#DF301C; }
/* tint that sweeps in from the left */
.cp-why-card::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, color-mix(in srgb, var(--tone) 11%, #fff), #fff 75%);
  transition:transform .55s var(--cp-ease);
}
/* accent bar on the left edge */
.cp-why-card::after{
  content:""; position:absolute; left:0; top:50%; width:4px; height:0; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--tone),var(--tone2)); transform:translateY(-50%);
  transition:height .45s var(--cp-ease);
}
.cp-why-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--tone) 35%, transparent); box-shadow:0 26px 40px -28px color-mix(in srgb, var(--tone2) 70%, transparent); }
.cp-why-card:hover::before{ transform:scaleX(1); }
.cp-why-card:hover::after{ height:70%; }
.cp-why-ic{
  grid-row:span 2; width:50px; height:50px; border-radius:15px; display:grid; place-items:center; margin:0;
  color:#fff; background:linear-gradient(135deg,var(--tone),var(--tone2));
  box-shadow:0 12px 22px -12px var(--tone2);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.cp-why-ic svg{ width:23px; height:23px; }
.cp-why-card:hover .cp-why-ic{ transform:rotate(-10deg) scale(1.1); }
.cp-why-card h3{ font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:var(--cp-ink); margin:2px 0 6px; }
.cp-why-card p{ font-size:14px; line-height:1.65; color:var(--cp-soft); margin:0; }

/* certification — copy + tilting certificate, then a 3-step path */
.cp-cert{
  position:relative; overflow:hidden; isolation:isolate; border-radius:26px; padding:30px;
  background:linear-gradient(140deg,var(--cp-navy-deep),var(--cp-navy) 55%,#3550c4);
  color:#fff; box-shadow:0 34px 56px -32px rgba(26,35,96,.9);
}
.cp-cert::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 65%); mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 65%);
}
.cp-cert::after{
  content:""; position:absolute; z-index:-1; right:-100px; top:-100px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,198,52,.32), transparent 65%); pointer-events:none;
}
.cp-cert-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:center; }
.cp-cert-seal{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:7px 14px 7px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,198,52,.14); color:var(--cp-gold); border:1px solid rgba(255,198,52,.35);
}
.cp-cert-seal svg{ width:17px; height:17px; }
.cp-cert-copy > p{ color:rgba(255,255,255,.88); font-size:16px; line-height:1.7; margin:0 0 18px; }
.cp-cert-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cp-cert-list li{
  display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; line-height:1.45;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:11px 14px;
}
.cp-cert-list li svg{ width:20px; height:20px; flex:none; color:var(--cp-gold); }
.cp-cert-visual{ position:relative; perspective:1000px; }
.cp-tilt{ animation:cpFloat 6s ease-in-out infinite; }
.cp-tilt-card{
  --rx:0deg; --ry:0deg;
  position:relative; border-radius:14px; overflow:hidden; transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(-2deg);
  transform-style:preserve-3d; transition:transform .25s ease-out;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.08);
}
.cp-tilt-card img{ display:block; width:100%; height:auto; border-radius:14px; }
.cp-shine{
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%);
  background-size:250% 100%; background-position:150% 0; animation:cpShine 4.5s ease-in-out infinite;
}
@keyframes cpShine{ 0%,55%{ background-position:150% 0; } 100%{ background-position:-60% 0; } }
.cp-verified{
  position:absolute; right:-6px; bottom:-14px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#22c55e,#15803d); box-shadow:0 12px 22px -10px rgba(21,128,61,.9);
  animation:cpPop 2.6s var(--cp-ease) infinite;
}
.cp-verified svg{ width:14px; height:14px; }
@keyframes cpPop{ 0%,70%,100%{ transform:scale(1); } 80%{ transform:scale(1.08); } }
.cp-steps{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; position:relative; }
.cp-steps::before{
  content:""; position:absolute; left:16%; right:16%; top:21px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px);
  background-size:32px 2px; animation:cpDash 1.2s linear infinite;
}
@keyframes cpDash{ to{ background-position:32px 0; } }
.cp-steps li{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.cp-steps b{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  font-family:'Sora',sans-serif; font-size:16px; color:var(--cp-navy-deep);
  background:linear-gradient(135deg,var(--cp-gold),#ff9f43); box-shadow:0 0 0 6px rgba(255,198,52,.15);
}
.cp-steps span{ font-size:13.5px; font-weight:600; line-height:1.45; color:#fff; max-width:200px; }
.cp-verify-link{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  color:var(--cp-gold); font-weight:600; font-size:14px; text-decoration:none;
}
.cp-verify-link:hover{ text-decoration:underline; }
.cp-verify-link svg{ width:16px; height:16px; transition:transform .25s; }
.cp-verify-link:hover svg{ transform:translateX(3px); }

/* jobs */
.cp-jobs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.cp-job{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--cp-line);
  border-radius:16px; padding:16px; transition:transform .3s var(--cp-ease), box-shadow .3s, border-color .3s;
}
.cp-job:hover{ transform:translateY(-3px); border-color:rgba(223,48,28,.3); box-shadow:0 20px 34px -24px rgba(223,48,28,.55); }
.cp-job-ic{
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--cp-red); background:rgba(223,48,28,.09);
}
.cp-job-ic svg{ width:20px; height:20px; }
.cp-job span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; color:var(--cp-ink); line-height:1.35; }
.cp-placement{
  display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 16px; border-radius:14px;
  background:rgba(255,198,52,.14); border:1px solid rgba(255,198,52,.45); color:#7a5300; font-size:14px; font-weight:500;
}
.cp-placement svg{ width:20px; height:20px; flex:none; color:#c88a00; }

/* animated background: faint blueprint grid with light beams travelling along the lines */
.cp-stage{ position:relative; isolation:isolate; background:#F7F8FE; }
.cp-gridbg{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background-image:
    linear-gradient(rgba(41,54,129,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,54,129,.06) 1px, transparent 1px);
  background-size:48px 48px;
}
.cp-gridbg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(58,134,255,.10), transparent 70%),
    radial-gradient(800px 500px at 100% 40%, rgba(223,48,28,.05), transparent 70%),
    radial-gradient(900px 600px at 30% 100%, rgba(255,198,52,.08), transparent 70%);
}
.cp-gridbg .bm{ position:absolute; border-radius:2px; opacity:.6; }
.cp-gridbg .v{ top:-180px; width:2px; height:180px; margin-left:-0.5px; animation:cpBeamV linear infinite; }
.cp-gridbg .h{ left:-240px; height:2px; width:240px; margin-top:-0.5px; animation:cpBeamH linear infinite; }
.cp-gridbg .v1{ left:192px;  background:linear-gradient(to bottom, transparent, rgba(58,134,255,.9)); animation-duration:13s; animation-delay:-2s; }
.cp-gridbg .v2{ left:576px;  background:linear-gradient(to bottom, transparent, rgba(223,48,28,.7)); animation-duration:17s; animation-delay:-9s; }
.cp-gridbg .v3{ left:960px;  background:linear-gradient(to bottom, transparent, rgba(58,134,255,.9)); animation-duration:15s; animation-delay:-5s; }
.cp-gridbg .v4{ left:1392px; background:linear-gradient(to bottom, transparent, rgba(245,158,11,.8)); animation-duration:19s; animation-delay:-12s; }
.cp-gridbg .h1{ top:480px;  background:linear-gradient(to right, transparent, rgba(58,134,255,.9)); animation-duration:11s; animation-delay:-3s; }
.cp-gridbg .h2{ top:1728px; background:linear-gradient(to right, transparent, rgba(139,92,246,.8)); animation-duration:14s; animation-delay:-8s; }
.cp-gridbg .h3{ top:3024px; background:linear-gradient(to right, transparent, rgba(223,48,28,.7)); animation-duration:12s; animation-delay:-1s; }
@keyframes cpBeamV{ from{ top:-180px; } to{ top:100%; } }
@keyframes cpBeamH{ from{ left:-240px; } to{ left:100%; } }
.cp-stage .cp-section{ border-bottom-color:rgba(41,54,129,.1); }
.cp-stage .cp-tl-card, .cp-stage .cp-job{ background:rgba(255,255,255,.94); }

/* --------------------------------------------------------------------------
   3. Sidebar cards
   -------------------------------------------------------------------------- */
.course-tabs-side .side-card,
.course-tabs-side .side-snapshot{
  border-radius:22px; padding:22px; border:1px solid var(--cp-line);
  box-shadow:0 24px 44px -32px rgba(26,35,96,.55); background:#fff; margin-bottom:22px;
}
.course-tabs-side .side-card h3,
.course-tabs-side .side-snapshot h3{
  display:flex; align-items:center; gap:10px;
  font-family:'Sora','Poppins',sans-serif; font-size:17px; font-weight:700; color:var(--cp-navy); margin:0 0 16px;
  border:none; padding:0;
}
.cp-h-ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; background:linear-gradient(135deg,var(--cp-red),#ff7a45); }
.cp-h-ic svg{ width:17px; height:17px; }

/* certificate sample */
.cp-cert-card .cert-preview-wrap{
  border-radius:14px; display:block; cursor:zoom-in;
  box-shadow:0 18px 30px -20px rgba(26,35,96,.6);
  transition:transform .4s var(--cp-ease), box-shadow .4s;
}
.cp-cert-card .cert-preview-wrap:hover{ transform:translateY(-3px) rotate(-.6deg); box-shadow:0 26px 40px -22px rgba(26,35,96,.7); }
.cp-cert-card .cert-preview-wrap .cert-preview{ border-radius:14px; border:none; }
.cp-cert-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.cp-cert-tags span{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--cp-navy);
  background:var(--cp-bg); border-radius:999px; padding:5px 10px;
}
.cp-cert-tags svg{ width:12px; height:12px; color:#16a34a; }

/* related courses */
.course-tabs-side .related-list{ gap:10px; }
.course-tabs-side .related-list a{
  position:relative; display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 14px; border-radius:14px; border:1px solid var(--cp-line); background:#fff;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--cp-ink); text-decoration:none;
  transition:transform .3s var(--cp-ease), border-color .3s, box-shadow .3s, background .3s, color .3s;
}
.course-tabs-side .related-list a .cp-rl-ic{
  width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-size:12px; font-weight:700; color:var(--cp-navy);
  background:linear-gradient(135deg,rgba(58,134,255,.16),rgba(41,54,129,.08));
  transition:background .3s, color .3s;
}
.course-tabs-side .related-list a .cp-rl-t{ flex:1; line-height:1.35; }
.course-tabs-side .related-list a .cp-rl-go{ width:18px; height:18px; flex:none; color:var(--cp-soft); transition:transform .3s var(--cp-ease), color .3s; }
.course-tabs-side .related-list a:hover{
  background:#fff; color:var(--cp-navy); border-color:rgba(58,134,255,.35);
  transform:translateX(4px); box-shadow:0 16px 28px -22px rgba(26,35,96,.7);
}
.course-tabs-side .related-list a:hover .cp-rl-ic{ color:#fff; background:linear-gradient(135deg,var(--cp-blue),var(--cp-navy)); }
.course-tabs-side .related-list a:hover .cp-rl-go{ color:var(--cp-red); transform:translateX(3px); }

/* course snapshot — dark card, stays in view while scrolling */
.course-tabs-side .side-card.snapshot-card,
.course-tabs-side .side-snapshot.cp-snap{
  position:sticky; top:calc(var(--cp-header-h) + 16px);
  overflow:hidden; isolation:isolate; color:#fff; border:none;
  background:linear-gradient(160deg,var(--cp-navy-deep),var(--cp-navy) 60%,#3550c4);
  box-shadow:0 30px 50px -28px rgba(26,35,96,.85);
}
.course-tabs-side .side-card.snapshot-card::after,
.course-tabs-side .side-snapshot.cp-snap::after{
  content:""; position:absolute; z-index:-1; right:-70px; bottom:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(223,48,28,.45), transparent 65%);
}
.course-tabs-side .side-card.snapshot-card h3,
.course-tabs-side .side-snapshot.cp-snap h3{ color:#fff; border:none; padding:0; }
.course-tabs-side .snapshot-card .cp-h-ic,
.course-tabs-side .cp-snap .cp-h-ic{ background:rgba(255,255,255,.14); }
.course-tabs-side .snapshot-list{ margin:4px 0 20px; gap:10px; }
.course-tabs-side .snapshot-list li{
  display:flex; align-items:flex-start; gap:12px; padding:12px; border:none;
  background:rgba(255,255,255,.07); border-radius:14px;
}
.course-tabs-side .snapshot-list .ic{
  width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--cp-gold); font-size:0; margin:0;
}
.course-tabs-side .snapshot-list .ic svg{ width:18px; height:18px; }
.course-tabs-side .snapshot-list .label{ color:rgba(255,255,255,.65); }
.course-tabs-side .snapshot-list .value{ color:#fff; }
.course-tabs-side .snapshot-card .btn,
.course-tabs-side .cp-snap .btn{ width:100%; margin-bottom:10px; position:relative; }
.course-tabs-side .snapshot-card .btn-red,
.course-tabs-side .cp-snap .btn-red{ box-shadow:0 14px 26px -14px rgba(223,48,28,.9); }
.course-tabs-side .snapshot-card .btn-navy-outline,
.course-tabs-side .cp-snap .btn-navy-outline{ border:1.5px solid rgba(255,255,255,.45); color:#fff; background:transparent; }
.course-tabs-side .snapshot-card .btn-navy-outline:hover,
.course-tabs-side .cp-snap .btn-navy-outline:hover{ background:#fff; color:var(--cp-navy); border-color:#fff; }

/* --------------------------------------------------------------------------
   3b. FAQ — help panel + collapsed accordion (answers open on click)
   -------------------------------------------------------------------------- */
.cp-faq-sec{ padding-top:24px; }
.cp-faq-layout{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:48px; align-items:start; }
.cp-faq-side{ position:sticky; top:calc(var(--cp-header-h) + 24px); }
.cp-faq-side .cp-eyebrow b svg{ width:15px; height:15px; }
.cp-faq-side h2{
  font-family:'Sora','Poppins',sans-serif; font-weight:800; font-size:clamp(26px,2.8vw,34px); line-height:1.2;
  color:var(--cp-navy); margin:0 0 12px; text-transform:none; letter-spacing:-.01em; border:none; padding:0; display:block;
}
.cp-faq-side .faq-intro{ font-size:15.5px; line-height:1.7; color:var(--cp-soft); margin:0 0 24px; }
.cp-faq-help{
  position:relative; overflow:hidden; isolation:isolate; border-radius:22px; padding:22px;
  background:linear-gradient(155deg,var(--cp-navy-deep),var(--cp-navy) 60%,#3550c4); color:#fff;
  box-shadow:0 30px 50px -30px rgba(26,35,96,.85);
}
.cp-faq-help::after{
  content:""; position:absolute; z-index:-1; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,198,52,.35),transparent 65%);
}
.cp-faq-help-ic{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(255,255,255,.12); color:var(--cp-gold);
}
.cp-faq-help-ic svg{ width:22px; height:22px; }
.cp-faq-help p{ margin:0 0 18px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); }
.cp-faq-help p strong{ display:block; font-family:'Poppins',sans-serif; font-size:17px; color:#fff; margin-bottom:4px; }
.cp-faq-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.cp-btn{
  flex:1 1 120px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14px;
  text-decoration:none; transition:transform .25s var(--cp-ease), background .25s, color .25s, box-shadow .25s;
}
.cp-btn svg{ width:16px; height:16px; }
.cp-btn-red{ background:var(--cp-red); color:#fff; box-shadow:0 14px 24px -14px rgba(223,48,28,.9); }
.cp-btn-red:hover{ background:#ec3a24; transform:translateY(-2px); }
.cp-btn-ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.cp-btn-ghost:hover{ background:#25D366; border-color:#25D366; transform:translateY(-2px); }

.cp-faq-list{ display:flex; flex-direction:column; gap:12px; }
.cp-faq{
  background:#fff; border:1px solid var(--cp-line); border-radius:18px; overflow:hidden;
  transition:border-color .3s, box-shadow .3s var(--cp-ease);
}
.cp-faq:hover{ border-color:rgba(58,134,255,.35); }
.cp-faq[open]{ border-color:rgba(58,134,255,.4); box-shadow:0 24px 40px -28px rgba(26,35,96,.55); }
.cp-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:18px 20px;
  -webkit-tap-highlight-color:transparent;
}
.cp-faq summary::-webkit-details-marker{ display:none; }
.cp-faq summary:focus-visible{ outline:2px solid var(--cp-blue); outline-offset:-2px; border-radius:18px; }
.cp-faq-n{
  flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700; color:var(--cp-navy);
  background:linear-gradient(135deg,rgba(58,134,255,.16),rgba(41,54,129,.08));
  transition:background .3s, color .3s;
}
.cp-faq[open] .cp-faq-n{ color:#fff; background:linear-gradient(135deg,var(--cp-blue),var(--cp-navy)); }
.cp-faq summary h3{ flex:1; margin:0; font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:600; line-height:1.45; color:var(--cp-ink); }
.cp-faq-x{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  color:var(--cp-navy); background:var(--cp-bg); transition:transform .35s var(--cp-ease), background .3s, color .3s;
}
.cp-faq-x svg{ width:16px; height:16px; }
.cp-faq summary:hover .cp-faq-x{ background:rgba(58,134,255,.14); }
.cp-faq[open] .cp-faq-x{ transform:rotate(45deg); background:var(--cp-red); color:#fff; }
.cp-faq-a{ padding:0 22px 20px 72px; }
.cp-faq-a p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--cp-soft); }
.cp-faq-a a{ color:var(--cp-blue); font-weight:600; }
.cp-faq[open] .cp-faq-a{ animation:cpFaqIn .35s var(--cp-ease); }
@keyframes cpFaqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------------------
   4. Responsive + motion preferences
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .course-tabs-side .side-card.snapshot-card,
  .course-tabs-side .side-snapshot.cp-snap{ position:relative; top:auto !important; }
  .aeo-box.cp-qa{ grid-template-columns:1fr; }
  .cp-faq-layout{ grid-template-columns:1fr; gap:28px; }
  .cp-ov-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-ov-stats > div:nth-child(3){ border-left:none; }
  .cp-ov-stats > div:nth-child(n+3){ border-top:1px solid var(--cp-line); }
  .cp-faq-side{ position:static; }
}
@media (max-width:760px){
  /* not shown on phones: branch table and FAQ */
  .course-body.near-branch, .cp-faq-sec{ display:none; }
  .aeo-summary{ padding-top:40px; }
  .aeo-box.cp-qa{ border-radius:22px; }
  .cp-qa-intro{ padding:26px 20px; }
  .cp-qa .aeo-facts{ padding:16px; gap:10px; }
  .cp-qa .aeo-lead{ font-size:15px; }
  .cp-qa-badges span{ font-size:11px; padding:5px 10px; }
  .cp-jump{ margin:0 -4px 30px; border-radius:16px; }
  .cp-jump a{ padding:9px 13px; font-size:12.5px; flex:0 0 auto; }
  .cp-jump-progress{ left:14px; right:14px; }
  .cp-section{ padding-bottom:40px; margin-bottom:40px; }
  .cp-why-grid, .cp-why-list{ grid-template-columns:1fr; }
  .cp-ov-grid{ grid-template-columns:1fr; }
  .cp-ov-lead{ padding:78px 20px 22px; }
  .cp-ov-spark{ left:20px; top:20px; }
  .cp-ov .cp-lead{ font-size:16.5px; }
  .cp-cert{ padding:22px 18px; }
  .cp-cert-grid{ grid-template-columns:1fr; gap:34px; }
  .cp-cert-visual{ padding:0 8px; }
  .cp-steps{ grid-template-columns:1fr; gap:16px; }
  .cp-steps::before{ left:21px; right:auto; top:22px; bottom:22px; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px); background-size:2px 32px; animation:none; }
  .cp-steps li{ flex-direction:row; text-align:left; gap:14px; }
  .cp-steps span{ max-width:none; }
  .cp-gridbg .v3, .cp-gridbg .v4{ display:none; }
  .cp-gridbg .v2{ left:288px; }
  .cp-faq-a{ padding:0 18px 18px 18px; }
  .cp-faq summary h3{ font-size:14.5px; }
}
@media (max-width:480px){
  .cp-qa .aeo-facts{ grid-template-columns:1fr; }
  .cp-faq summary{ padding:16px 14px; gap:12px; }
  .cp-faq-a{ padding:0 14px 18px 14px; }
  .cp-tl > li, .cp-tl-finish{ padding-left:52px; }
  .cp-tl-dot{ width:38px; height:38px; font-size:13px; border-radius:12px; top:14px; }
  .cp-tl-rail{ left:18px; }
  .cp-tl-card{ padding:16px; }
  .cp-tl-card h3{ font-size:15.5px; }
  .cp-tl-card li{ font-size:12.5px; padding:6px 11px 6px 8px; }
}
@media (prefers-reduced-motion:reduce){
  .cp-pulse::after{ animation:none; }
  .cp-tl-fill{ transform:scaleY(1); }
  .cp-tl > li .cp-tl-dot{ transition:none; }
  .cp-tl-dot::after{ animation:none !important; }
  .cp-js .cp-tl > li:not(.is-seen) .cp-tl-card, .cp-js .cp-tl-finish:not(.is-seen) .cp-tl-finish-card{ opacity:1; }
  .cp-faq[open] .cp-faq-a{ animation:none; }
  .cp-gridbg .bm, .cp-ov-lead, .cp-ov-spark::after, .cp-note svg, .cp-tilt, .cp-shine, .cp-verified, .cp-steps::before{ animation:none !important; }
  .cp-gridbg .bm{ display:none; }
  .cp-tg .w{ opacity:1; filter:none; transition:none; }
  .cp-js [data-cp-anim]:not(.is-in) > *, .cp-js [data-cp-anim]:not(.is-in) .cp-cert-list li, .cp-js [data-cp-anim]:not(.is-in) .cp-steps li{ opacity:1; }
  .cp-js [data-cp-anim] *, .cp-js [data-cp-anim] > *{ animation:none !important; }
}