/* scoped: si-private-instruction-OnlineCoursesGrid */

  .oc-grid-section:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    width: 100%;
    padding: 72px 80px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    background: linear-gradient(2.19deg, #FFFFFF 71.1%, #999999 220.56%);
    box-sizing: border-box;
  }

  .oc-heading:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    text-align: center;
  }

  .oc-heading--safety:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    margin-top: 28px;
  }

  .oc-section-title:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    text-transform: uppercase;
    color: #1A1A1A;
    margin: 0;
  }

  .oc-title-underline:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    width: 60px;
    height: 4px;
    background: #D62121;
  }

  .oc-section-desc:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #272727;
    margin: 0;
  }

  /* ── Cards ── */
  .oc-cards:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .oc-cards--safety:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    max-width: 900px;
  }

  /* Three-up row for the six-course catalogue. */
  .oc-cards--three:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1100px;
  }

  .oc-card:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 29.5px #00000029;
    overflow: hidden;
    min-height: 280px;
  }

  .oc-card-topline:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    height: 4px;
    background: #D62121;
    flex-shrink: 0;
  }

  .oc-card-body:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    flex: 1;
    padding: 22px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .oc-card-meta:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #D62121;
    margin: 0;
  }

  .oc-card-title:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 110%;
    text-transform: uppercase;
    color: #1A1A24;
    margin: 0;
  }

  .oc-card-title-line:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    width: 80px;
    height: 4px;
    background: #D62121;
    flex-shrink: 0;
    margin-bottom: 4px;
  }

  .oc-price-pill:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 40px;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, #D62121CC, #701111CC);
    font-family: 'Afacad', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
  }

  .oc-card-blurb:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 145%;
    color: #272727;
    margin: 4px 0 0;
  }

  .oc-card-cta:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    background: linear-gradient(90deg, #D62121, #701111);
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .oc-card-cta:hover:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    opacity: 0.92;
  }

  /* ── Mobile ── */
  html.is-mobile .oc-grid-section:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    padding: 48px 24px 24px;
    gap: 28px;
  }

  html.is-mobile .oc-section-title:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    font-size: 24px;
  }

  html.is-mobile .oc-cards:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *),
  html.is-mobile .oc-cards--safety:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *),
  html.is-mobile .oc-cards--three:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  html.is-mobile .oc-heading--safety:where(.si-private-instruction-OnlineCoursesGrid, .si-private-instruction-OnlineCoursesGrid *){
    margin-top: 12px;
  }