/* HumanOps responsive.css */
@media (max-width: 640px) {
  :root {
    --section-space: 2.35rem;
    --section-space-sm: 1.8rem;
    --section-space-compact: 1.45rem;
    --section-head-space: 1.15rem;
    --section-grid-gap: 1rem;
  }

  html {
    font-size: 15px;
  }
}

@media (max-width: 1024px) {
  .hero {
    min-height: auto;
  }

  .hero-bg-image {
    right: auto;
    left: 62%;
    object-position: center center;
    transform: translate(-50%, -50%) !important;
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(34, 27, 20, .82) 0%, rgba(44, 35, 26, .66) 48%, rgba(44, 35, 26, .26) 100%),
      linear-gradient(0deg, rgba(34, 27, 20, .32) 0%, transparent 48%);
  }

  .hero .container {
    width: min(calc(100% - 32px), var(--container));
    align-items: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-copy {
    width: min(100%, 20rem);
  }

  .hero-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem .45rem;
    max-width: 19rem;
  }

  .nav {
    column-gap: 14px;
    row-gap: 8px;
    font-size: 0.8rem;
  }

  .why-grid,
  .video-demo-grid,
  .cards--five,
  .cards--process,
  .cards--three,
  .expert-grid,
  .stats-inner,
  .testimonials-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sub-hero .container,
  .about-intro-grid,
  .content-grid,
  .course-archive-grid,
  .content-grid--two,
  .content-grid--four,
  .corporate-training-fit-grid,
  .tech-partner-inner,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .cta-band .btn {
    justify-self: start;
  }

  .tech-partner {
    padding: var(--section-space-sm) 0;
  }

  .tech-partner-brand {
    justify-items: center;
    text-align: center;
  }

  .tech-partner-brand span::before {
    width: 24px;
  }

  .register-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register-form input,
  .register-form select,
  .register-form textarea,
  .register-form button {
    grid-column: auto;
    grid-row: auto;
    min-height: 44px;
  }

  .register-form textarea,
  .register-form button {
    grid-column: 1 / -1;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }

  .training-stage {
    display: grid;
    gap: 1rem;
    min-height: 0;
    padding: 1rem;
  }

  .training-stage::before,
  .training-stage::after {
    display: none;
  }

  .training-presenter,
  .training-podium,
  .training-stage .cards--five,
  .training-stage .course-card {
    position: static;
  }

  .training-podium,
  .training-presenter {
    width: min(72%, 18rem);
    max-height: none;
    justify-self: center;
    transform: none;
  }

  .training-podium {
    width: min(100%, 18rem);
    order: 2;
  }

  .training-stage .cards--five {
    display: grid;
    order: 3;
  }

  .training-stage .course-card {
    width: auto;
    transform: none;
  }

  .training-stage .course-card:nth-child(3) {
    width: auto;
    transform: none;
  }

  .register-inner {
    grid-template-columns: 1fr;
  }

  .register-copy {
    padding: 1rem;
  }

  .hr-training-inner,
  .student-voices-inner,
  .student-register-inner {
    grid-template-columns: 1fr;
  }

  .student-voices-copy {
    max-width: none;
  }

  .hr-training-points {
    grid-template-columns: 1fr;
  }

  .register-portrait {
    order: -1;
    min-height: auto;
    max-width: 24rem;
    justify-self: center;
    width: 100%;
  }

  .project-track {
    grid-template-columns: 1fr;
  }

  .project-arrow {
    display: none;
  }

}

@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
    padding: 14px 0;
  }

  .brand-logo {
    width: auto;
    height: 50px;
  }

  .brand-copy span:first-child {
    font-size: 0.95rem;
  }

  .brand-copy span:last-child {
    font-size: 0.84rem;
  }

  .brand--footer .brand-logo {
    width: 5.5rem;
    height: auto;
  }

  .nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 8px;
  }

  .nav a {
    min-height: 36px;
    padding: 7px 2px;
  }

  .nav-item {
    flex-wrap: wrap;
  }

  .nav-submenu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;
    width: 100%;
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    left: 0;
    transform: none;
  }

  .nav-submenu::before {
    display: none;
  }

  .nav-submenu a {
    min-height: 34px;
    padding: 6px 2px;
    font-size: 0.8rem;
  }

  .nav-item--has-submenu:hover .nav-submenu,
  .nav-item--has-submenu:focus-within .nav-submenu {
    transform: none;
  }

  .hero {
    padding-top: 0;
  }

  .hero-copy {
    padding-bottom: 0;
  }

  .hero-visual {
    min-height: 0;
  }

  .nav {
    font-size: 0.8rem;
  }

  .hero h1 {
    max-width: 18rem;
    font-size: 1.8rem;
  }

  .hero-desc {
    max-width: 18rem;
    font-size: .86rem;
  }

  .hero-pillar span {
    font-size: 0.8rem;
  }

  .tech-partner-copy h2 {
    font-size: 1.45rem;
  }

  .tech-partner-points {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tech-partner-points span {
    width: 100%;
  }

  .tech-partner .btn {
    width: 100%;
    justify-content: center;
  }

  .section-head p,
  .why-item p,
  .testimonial-card p,
  .footer-brand p,
  .footer-col p {
    font-size: 0.8rem;
  }

  .hero-brand {
    margin-bottom: 1.7rem;
  }

  .hero-quote {
    max-width: 19rem;
    padding-right: 2rem;
    padding-left: 2.35rem;
  }

  .hero-visual {
    min-height: 0;
  }

  .hero-photo {
    width: 100%;
  }

  .why-grid,
  .cards--five,
  .cards--process,
  .cards--three,
  .expert-grid,
  .stats-inner,
  .testimonials-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .register-inner,
  .hr-training-inner,
  .student-voices-inner,
  .student-register-inner,
  .project-track {
    grid-template-columns: 1fr;
  }

  .student-voices-slider {
    width: min(100%, 20.5rem);
  }

  .hr-training-media {
    min-height: 16rem;
  }

  .register-form {
    grid-template-columns: 1fr;
  }

  .register-copy {
    padding: .2rem;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .student-form {
    grid-template-columns: 1fr;
  }

  .register-form input,
  .register-form select,
  .register-form textarea,
  .register-form button {
    grid-column: auto;
    grid-row: auto;
  }

  .register-form button {
    min-height: 44px;
  }

  .training-presenter {
    width: min(84%, 16rem);
  }

  .register-benefits {
    display: grid;
    grid-template-columns: 1fr;
  }

  .project-arrow {
    display: none;
  }

  .service-card,
  .course-card,
  .course-list-card,
  .testimonial-card {
    border-radius: var(--radius-md);
  }

  .stats-inner {
    gap: var(--section-grid-gap);
  }

  .stat + .stat::before {
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-contact {
    padding: 0;
  }

  .footer-contact-list p {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
  }

  .footer-contact-list span {
    width: 26px;
    height: 26px;
  }

  .container {
    width: min(calc(100% - 28px), var(--container));
  }
}

/* Final mobile navigation polish. */
@media (max-width: 640px) {
  .site-header {
    position: relative;
  }

  .header-inner {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
  }

  .brand--header {
    min-width: 0;
    padding-right: 0;
  }

  .brand-logo {
    height: 42px;
  }

  .brand {
    gap: 8px;
  }

  .brand-copy span:first-child {
    font-size: .82rem;
  }

  .brand-copy span:last-child {
    font-size: .74rem;
  }

  .hotline {
    gap: 7px;
    padding: 6px 8px;
  }

  .hotline-icon {
    width: 28px;
    height: 28px;
  }

  .hotline small {
    display: none;
  }

  .hotline strong {
    font-size: .8rem;
  }

  .nav-toggle {
    display: grid;
  }

  .nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 14px;
    right: 14px;
    z-index: 120;
    order: initial;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .site-header.is-nav-open .nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav a,
  .nav-submenu a {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
  }

  .nav > a::before,
  .nav-item > a::before {
    display: none;
  }

  .nav-item {
    display: grid;
    width: 100%;
  }

  .nav-submenu {
    position: static;
    display: grid;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-submenu a {
    color: var(--muted);
    font-size: .8rem;
  }

  .hero .container,
  .sub-hero .container {
    width: min(calc(100% - 28px), var(--container));
  }
}

/* Final mobile density and section safety. */
@media (max-width: 640px) {
  .site-main section:not(.hero) > .container,
  .page-section .container {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .section-head h2,
  .sub-hero h1,
  .about-intro-copy h2,
  .student-voices-copy h3 {
    font-size: 1.45rem;
    line-height: 1.18;
  }

  .section-head p {
    max-width: 22rem;
    line-height: 1.6;
  }

  .hero .container {
    min-height: 0;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
  }

  .hero-brand {
    margin-bottom: 1.15rem;
  }

  .hero-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 18rem;
    gap: .55rem;
  }

  .hero-pillar {
    min-height: 7.2rem;
    padding: .65rem;
  }

  .hero-quote {
    display: none;
  }

  .hero-signature {
    display: none;
  }

  .tech-partner-brand {
    padding: .9rem;
  }

  .tech-partner-brand img {
    max-width: 12rem;
  }

  .tech-partner-copy,
  .student-voices-copy,
  .hr-training-copy {
    text-align: left;
  }

  .tech-partner-copy {
    gap: .7rem;
  }

  .tech-partner-copy p:not(.section-kicker) {
    font-size: .84rem;
    line-height: 1.58;
  }

  .stat {
    padding: 1rem;
  }

  .stat strong {
    font-size: 1.65rem;
  }

  .register,
  .student-register,
  .student-voices {
    overflow: hidden;
  }

  .student-voices-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.15rem;
    width: 100%;
    min-width: 0;
  }

  .student-voices-copy,
  .student-voices-slider,
  .student-voice-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .student-voices-copy h3 {
    max-width: 21rem;
  }

  .student-voices-points {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    width: 100%;
  }

  .student-voices-points span {
    width: 100%;
    min-height: 2.55rem;
  }

  .student-voice-card {
    padding: 1rem;
  }

  .sub-hero {
    padding: 1.75rem 0;
  }

  .sub-hero .container {
    min-height: 0;
    gap: 1rem;
  }

  .sub-hero-card {
    padding: .8rem;
  }

  .cta-band {
    padding: 1.15rem;
  }
}

/* High-priority mobile fixes for navigation, hero density, and conversion. */
@media (max-width: 640px) {
  .site-header {
    position: relative;
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .nav-toggle {
    display: grid;
  }

  .site-header .nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 14px;
    right: 14px;
    z-index: 120;
    display: grid;
    width: auto;
    max-height: calc(100vh - 96px);
    padding: 10px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .site-header.is-nav-open .nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header .nav a,
  .site-header .nav-submenu a {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
  }

  .site-header .nav-submenu {
    position: static;
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
  }

  .hero {
    min-height: 29.5rem;
  }

  .hero-bg-image {
    left: 64%;
    width: auto;
    height: 104%;
    opacity: .72;
    object-position: 58% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(31, 25, 20, .98) 0%, rgba(31, 25, 20, .88) 48%, rgba(31, 25, 20, .42) 100%);
  }

  .hero::after {
    background:
      linear-gradient(0deg, rgba(31, 25, 20, .52) 0%, rgba(31, 25, 20, .08) 48%),
      linear-gradient(90deg, rgba(34, 27, 20, .78) 0%, rgba(44, 35, 26, .32) 100%);
  }

  .hero .container {
    padding-top: 1rem;
    padding-bottom: 1.1rem;
  }

  .hero-copy {
    width: min(100%, 20rem);
  }

  .hero-brand {
    margin-bottom: .55rem;
    gap: .65rem;
  }

  .hero-brand img {
    width: 3.1rem;
  }

  .hero-brand span {
    font-size: .86rem;
  }

  .hero-brand small {
    margin-top: .25rem;
    font-size: .62rem;
    letter-spacing: .1em;
  }

  .hero h1 {
    max-width: 18.5rem;
    margin-bottom: .45rem;
    font-size: 1.34rem;
    line-height: 1.12;
  }

  .hero-desc {
    max-width: 17.5rem;
    margin-bottom: .6rem;
    font-size: .76rem;
    line-height: 1.45;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 18rem;
    gap: .45rem;
    margin-bottom: .65rem;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 2.35rem;
    padding-right: .65rem;
    padding-left: .65rem;
    font-size: .72rem;
  }

  .hero-pillars {
    max-width: 17.5rem;
    gap: .45rem;
  }

  .hero-pillar:nth-child(n+3) {
    display: none;
  }

  .hero-pillar {
    min-height: 5rem;
    padding: .5rem .42rem;
    background: rgba(15, 13, 12, .22);
    border: 1px solid rgba(214, 164, 58, .18);
    border-radius: var(--radius-sm);
  }

  .hero-pillar i {
    margin-bottom: .25rem;
    font-size: 1.1rem;
  }

  .hero-pillar strong {
    margin-bottom: .12rem;
    font-size: .7rem;
  }

  .hero-pillar span {
    font-size: .64rem;
    line-height: 1.26;
  }

  .client-logo img {
    min-height: 1.75rem;
    object-fit: contain;
  }

  .register-portrait {
    order: 2;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 calc(clamp(.8rem, 2vw, 1.05rem) * -1) calc(clamp(.8rem, 2vw, 1.05rem) * -1);
    padding: .55rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .register-portrait img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 13rem);
    max-height: 14rem;
    object-fit: contain;
    object-position: center bottom;
  }

  .register-copy {
    order: 1;
  }

  .register-form {
    grid-template-columns: 1fr;
  }

  .register-form input,
  .register-form select,
  .register-form textarea,
  .register-form button {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .register-form button {
    min-height: 2.8rem;
  }

  .register-benefits {
    grid-template-columns: 1fr;
  }

  .mobile-sticky-cta {
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 180;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(214, 164, 58, .22);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 38px rgba(22, 18, 14, .22);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(calc(100% + 18px));
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .mobile-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
  }

  .mobile-sticky-cta__call {
    gap: .42rem;
    color: var(--gold-dark);
    background: #fff;
    border: 1px solid rgba(214, 164, 58, .28);
  }

  .mobile-sticky-cta__form {
    color: #fff;
    background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
    box-shadow: var(--shadow-soft);
  }

  .mobile-sticky-cta:not(.is-visible) {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(calc(100% + 18px)) !important;
  }

  .mobile-sticky-cta.is-suppressed {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(calc(100% + 18px)) !important;
    transition: none !important;
  }

  .services .cards--five {
    gap: .85rem;
  }

  .video-demo {
    padding: var(--section-space-sm) 0;
  }

  .video-demo-grid {
    gap: .7rem;
  }

  .video-demo-card__button {
    min-height: 0;
    grid-template-columns: 2.55rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .7rem;
    row-gap: .35rem;
    align-items: start;
    padding: .75rem;
  }

  .video-demo-card__media {
    grid-row: 1 / span 2;
    width: 2.45rem;
    height: 2.45rem;
  }

  .video-demo-card__body {
    min-width: 0;
    gap: .24rem;
  }

  .video-demo-card__body small {
    font-size: .66rem;
  }

  .video-demo-card__body strong {
    font-size: .88rem;
    line-height: 1.28;
  }

  .video-demo-card__body span {
    display: -webkit-box;
    overflow: hidden;
    font-size: .73rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .video-demo-card__cta {
    grid-column: 2;
    font-size: .72rem;
  }

  .video-demo-modal {
    padding: .65rem;
  }

  .video-demo-modal__panel {
    padding: .75rem;
  }

  .video-demo-modal__title {
    margin-right: 2.1rem;
    font-size: .9rem;
  }

  .video-demo-modal__close {
    top: .6rem;
    right: .6rem;
    width: 2rem;
    height: 2rem;
  }

  .video-demo-modal__player {
    max-height: 65vh;
  }

  .services .service-card:nth-child(n+4) {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    column-gap: .75rem;
    align-items: center;
    min-height: 0;
    padding: .7rem;
  }

  .services .service-card:nth-child(n+4) .card-thumb {
    grid-row: 1 / 4;
    width: 5rem;
    margin: 0;
    aspect-ratio: 1;
  }

  .services .service-card:nth-child(n+4) h3 {
    margin: 0 0 .2rem;
    font-size: .82rem;
  }

  .services .service-card:nth-child(n+4) ul {
    display: none;
  }

  .services .service-card:nth-child(n+4) .card-link {
    justify-self: start;
    min-height: 2rem;
    margin-top: .35rem;
    padding: 0 .72rem;
    font-size: .72rem;
  }

  .services-cta {
    display: grid;
    gap: .8rem;
    margin-top: 1rem;
    padding: .9rem;
  }

  .services-cta strong {
    font-size: .92rem;
  }

  .services-cta .btn {
    width: 100%;
  }

  .why-grid {
    gap: .65rem;
  }

  .why-item {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .15rem .7rem;
    padding: .9rem;
    text-align: left;
  }

  .why-icon {
    grid-row: 1 / 3;
  }

  .why-item h3 {
    margin: 0;
  }

  .why-item p {
    margin: .15rem 0 0;
  }

  .stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .stat {
    min-height: 0;
  }

  .testimonial-card p {
    min-height: 0;
  }

  .section-head h2 {
    font-size: 1.38rem;
  }

  .services,
  .training,
  .projects,
  .testimonials,
  .student-voices {
    padding: 2.45rem 0;
  }

  .project-track {
    grid-template-columns: 1fr;
  }

  .project-card,
  .project-card:nth-child(2) {
    aspect-ratio: 3 / 2;
  }

  .project-card:nth-child(5) {
    display: none;
  }

  .project-card:nth-child(2) .project-overlay {
    padding: .95rem;
  }

  .project-card:nth-child(2) h3 {
    font-size: .95rem;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .testimonial-card {
    min-height: 0;
    padding: 1.05rem;
  }

  .project-meta {
    display: none;
  }

  .sub-hero {
    padding: 2.15rem 0;
  }

  .sub-hero .container {
    min-height: 0;
    gap: 1rem;
  }

  .sub-hero h1 {
    font-size: 1.42rem;
  }

  .sub-hero p {
    display: -webkit-box;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.62;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .sub-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    margin-top: .85rem;
  }

  .sub-hero-actions .btn {
    width: 100%;
    min-height: 2.55rem;
  }

  .sub-hero-card {
    padding: .75rem;
  }

  .course-archive-grid {
    gap: .75rem;
  }

  .course-list-card:nth-child(n+7) {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    min-height: 0;
  }

  .course-list-card:nth-child(n+7) .course-badge-promo {
    top: .45rem;
    left: .45rem;
    min-height: 1.35rem;
    padding: 0 .42rem;
    font-size: .66rem;
  }

  .course-list-card:nth-child(n+7) .course-list-thumb {
    height: 100%;
    min-height: 6.7rem;
    padding: .45rem 0 .45rem .45rem;
  }

  .course-list-card:nth-child(n+7) .course-list-thumb img {
    border-radius: var(--radius-sm);
  }

  .course-list-card:nth-child(n+7) .course-list-body {
    min-width: 0;
    padding: .62rem .7rem;
  }

  .course-list-card:nth-child(n+7) h3 {
    margin-bottom: .38rem;
    font-size: .78rem;
    line-height: 1.3;
  }

  .course-list-card:nth-child(n+7) .course-list-body > p:not(.course-discount),
  .course-list-card:nth-child(n+7) .course-discount {
    display: none;
  }

  .course-list-card:nth-child(n+7) .course-list-meta {
    align-items: start;
    margin-bottom: .48rem;
  }

  .course-list-card:nth-child(n+7) .course-badges span {
    min-height: 1.25rem;
    font-size: .68rem;
  }

  .course-list-card:nth-child(n+7) .course-price strong {
    font-size: .76rem;
  }

  .course-list-card:nth-child(n+7) .course-register {
    justify-self: start;
    min-height: 1.9rem;
    padding: 0 .68rem;
    font-size: .68rem;
  }

  .form-status--loading,
  .form-status--success,
  .form-status--error {
    padding: .68rem .75rem;
    font-size: .78rem;
  }
}