/* Clear aligners */
.ca { background: #101b2d; color: #e8eef6; }
.ca-label { display: block; margin-bottom: 12px; color: #94e6d4; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; }

.ca-buy {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  padding: 17px 30px;
  border: 2px solid #ffe066;
  border-radius: 12px;
  background: #ffe066;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  color: #142137;
  font: 800 17px/1.3 Roboto, sans-serif;
  letter-spacing: .2px;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.ca-buy:hover { background: #fff0a6; border-color: #fff0a6; box-shadow: 0 9px 25px rgba(0, 0, 0, .27); transform: translateY(-2px); }

/* Hero */

/* Program content */
.ca-program { padding: 72px 24px; background: #f0f5f7; color: #1b2c40; }
.ca-program__inner { max-width: 1280px; margin-inline: auto; }
.ca-program__label { color: #147d70; font: 100 18px/27px var(--font-heading); letter-spacing: 6.1px; }
.ca-program h2 { margin: 4px 4px 26px; font-size: 42px; line-height: 49px; letter-spacing: -2.1px; }
.ca-topics { font-family: Roboto, sans-serif; font-weight: 400; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; padding: 12px 24px; overflow: hidden; border: 1px solid #dbe5e9; border-radius: 16px; background: #fff; counter-reset: topic; }
.ca-topics li {
  position: relative;
  padding: 16px 0 16px 54px;
  border-bottom: 1px solid #e3ebee;
  color: #243b50;
  font-size: 18px;
  line-height: 1.65;
  counter-increment: topic;
  transition: background-color .25s, border-color .25s;
}
.ca-topics li:nth-last-child(-n+2) { border-bottom: 0; }
.ca-topics li::after {
  content: counter(topic, decimal-leading-zero);
  position: absolute;
  top: 17px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d0ebe3;
  border-radius: 50%;
  background: #eaf7f2;
  color: #147e6e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background-color .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .ca-topics li:hover { border-bottom-color: #d5e8e2; border-radius: 6px; background: #f2faf7 radial-gradient(180px circle at var(--x, 50%) var(--y, 50%), rgba(120, 219, 198, .22), transparent 100%); }
  .ca-topics li:hover::after { background: #d5f0e5; border-color: #a9dccc; color: #0b6255; }
}

/* Chapters */
.ca-chapters { padding: 70px 24px; background: #142137; color: #fff; }
.ca-chapters__inner { max-width: 1280px; margin-inline: auto; }
.ca-chapters header { margin-bottom: 30px; }
.ca-chapters h2 { font-size: 42px; line-height: 1.2; letter-spacing: -1px; }
.ca-chapters__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.ca-chapter { grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(89, 114, 142, .4); border-radius: 18px; background: #21334c; transition: transform .25s, border-color .25s; }
.ca-chapter:nth-child(4) { grid-column: 2 / span 2; }
.ca-chapter:hover { transform: translateY(-4px); border-color: #94e6d4; }
.ca-chapter > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ca-chapter__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.ca-chapter h3 { min-height: 60px; margin-bottom: 24px; font-size: 22px; line-height: 1.35; letter-spacing: -.4px; }
.ca-chapter .ca-buy, .ca-chapter__watch { width: 100%; min-height: 52px; margin-top: auto; padding: 15px 12px; font-size: 15px; }
.ca-chapter__watch { display: flex; justify-content: center; align-items: center; border: 1px solid #76d9c4; border-radius: 10px; background: #76d9c4; color: #123936; font-weight: 600; line-height: 1; transition: background-color .2s, transform .2s; }
.ca-chapter__watch:hover { background: #b4f4e3; transform: translateY(-3px); }

/* Thumbnails + offer */
.ca-offer { position: relative; isolation: isolate; padding: 20px 24px 55px; background: #142137; text-align: center; }
.ca-offer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #ff5151; mix-blend-mode: multiply; }
.ca-offer__thumbs { display: flex; justify-content: center; gap: 20px; margin-bottom: 51px; }
.ca-offer__thumbs img { width: 232px; }
.ca-offer__deal { display: block; width: 425px; margin-inline: auto; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.ca-offer p { margin-top: 20px; color: #bdcbdc; font: 600 16px/18.67px Roboto, sans-serif; letter-spacing: -.8px; }

/* Video */
.ca-video { padding: 82px 34px; background: #eaf2f5; color: #182f43; }
.ca-video h2 { margin-bottom: 28px; font-size: 42px; line-height: 49px; letter-spacing: -2.1px; text-align: center; }
.ca-video__frame { position: relative; overflow: hidden; max-width: 1260px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #000; box-shadow: 0 20px 40px rgba(16, 39, 59, .133); }
.ca-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ca-video__link { display: table; margin-top: 12px; font-size: 14px; }
.ca-video__link { margin-left: max(0px, (100% - 1260px) / 2); }

/* Trainers */
.ca .speaker--team { padding-block: 72px 78px; background: #101b2d; }
.ca .speaker__heading { margin-top: 5px; }
.ca .speaker__grid { gap: 28px; }
.ca .speaker--team .speaker__card { max-width: 334px; min-height: 567px; padding: 28px; border-radius: 22px; }
.ca .speaker--team .speaker__card + .speaker__card { min-height: 575px; }
.ca .speaker--team .speaker__card img { width: 242px; }
.ca .speaker--team .speaker__card + .speaker__card img { width: 251px; }
.ca .speaker__card h3 { color: #93e7d3; font-size: 25px; line-height: 35px; letter-spacing: -1px; }

@media (max-width: 1000px) {
  .ca-chapters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-chapter, .ca-chapter:nth-child(4) { grid-column: auto; }
}
@media (max-width: 767px) {
  .ca-program { padding: 44px 20px; }
  .ca-buy { width: 100%; }
  .ca-offer__thumbs { flex-wrap: wrap; }
  .ca-chapters .ca-label { line-height: 30px; }
  .ca-chapters h2 { font-size: 28px; line-height: 33.6px; }
  .ca-chapters header { margin-bottom: 29px; }
  .ca-offer { padding: 64px 40px 54px; }
  .ca-offer__thumbs { display: grid; grid-template-columns: repeat(3, 89px); gap: 20px; justify-content: start; }
  .ca-offer__thumbs img { width: 89px; }
  .ca-offer__deal { width: 281px; }
  .ca-offer p { line-height: 20px; }
  .ca-video { padding: 54px 30px; }
  .ca-video h2 { font-size: 28px; line-height: 35px; letter-spacing: -1.4px; }
  .ca .speaker--team { padding-block: 44px 49px; }
  .ca .speaker__heading { font-size: 28px; line-height: 35px; letter-spacing: -1.4px; }
  .ca .speaker--team .speaker__grid { margin-top: 97px; gap: 20px; }
  .ca .speaker--team .speaker__card { max-width: 340px; min-height: 515px; }
  .ca .speaker--team .speaker__card img { width: 248px; }
  .ca .speaker--team .speaker__card h3 { margin-top: 41px; }
  .ca .speaker--team .speaker__card + .speaker__card { min-height: 509px; }
  .ca .speaker--team .speaker__card + .speaker__card img { width: 257px; }
  .ca .speaker--team .speaker__card + .speaker__card h3 { margin-top: 26px; }
}
@media (max-width: 700px) {
  .ca-topics { grid-template-columns: 1fr; padding: 8px 18px; }
  .ca-topics li { padding: 14px 0 14px 46px; font-size: 17px; }
  .ca-topics li:nth-last-child(2) { border-bottom: 1px solid #e3ebee; }
  .ca-topics li::after { top: 14px; left: 2px; width: 30px; height: 30px; }
}
@media (max-width: 600px) {
  .ca-chapters { padding: 44px 20px; }
  .ca-chapters__grid { grid-template-columns: 1fr; }
  .ca-chapter__body { padding: 22px; }
  .ca-chapter h3 { min-height: 0; }
}

/* Page-specific touches on the shared course hero */
.ca-hero { background: radial-gradient(ellipse at 78% 45%, rgba(148, 230, 212, .14), transparent 45%), radial-gradient(at 100% 0%, rgba(36, 99, 109, .45), transparent 60%), #0a0f18; }
.ca-hero__media::before { width: 100%; }
.ca-hero .course-hero__media img { width: min(100%, 560px); border: 1px solid rgba(148, 230, 212, .18); border-radius: 24px; }
.course-hero__price s { color: #8fa3b8; font-size: 20px; font-weight: 600; }
.ca-hero h1 span { font-size: .5em; line-height: 1.35; }
@media (max-width: 767px) { .ca-hero .course-hero__media img { width: 100%; border-radius: 18px; } }