/* ==================================================
   Shared responsive system
   Breakpoints: 1200 / 992 / 768 / 576 / 480
   ================================================== */

@media (max-width: 1200px) {
  .site-nav__list > ul {
    gap: 20px;
  }

  .header-actions {
    gap: 14px;
  }

  .hero__content {
    width: min(860px, 100%);
  }

  .about-section__grid {
    gap: 56px;
  }

  .learning-roadmap__list > ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .learning-roadmap__item {
    border: 2px solid var(--color-white);
  }

  .auth-panel {
    padding-inline: clamp(36px, 5vw, 64px);
  }
}

@media (max-width: 992px) {
  :root {
    --space-section: 70px;
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .mobile-menu-toggle {
    display: grid;
  }

  .mobile-menu-toggle.is-open .fa-bars {
    display: none;
  }

  .mobile-menu-toggle.is-open .fa-xmark {
    display: inline-block;
  }

  .site-header__inner {
    min-height: 76px;
  }

  .site-header.is-scrolled .site-header__inner {
    min-height: 68px;
  }

  .mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: var(--color-white);
    border-top: 1px solid transparent;
    transition: max-height .35s ease, opacity var(--transition), border-color var(--transition);
  }

  .mobile-menu.is-open {
    max-height: 440px;
    opacity: 1;
    border-top-color: var(--color-border);
  }

  .mobile-menu__list > ul {
    width: min(var(--container-max), calc(100% - var(--container-gutter)));
    margin-inline: auto;
    padding-block: 10px 18px;
  }

  .mobile-menu a {
    display: flex;
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-menu__cta {
    justify-content: center;
    margin-top: 10px;
    padding: 15px 20px !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-black);
  }

  .auth-page .mobile-menu__cta {
    align-items: center;
    min-height: 49px;
    padding-block: 0 !important;
    line-height: 1;
  }

  .hero {
    min-height: calc(100svh - 116px);
    padding-block: 70px;
  }

  .hero__content {
    width: min(800px, 100%);
  }

  .hero__title {
    font-size: clamp(52px, calc(6vw + 8px), 66px);
  }

  .benefits-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }

  .about-section__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .final-membership-cta__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .final-membership-cta__content {
    max-width: 700px;
  }

  .final-membership-cta__visual {
    height: min(60vw, 520px);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }

  .site-footer__brand {
    max-width: 420px;
  }

  .video-showcase__heading {
    margin-bottom: 36px;
  }

  .video-showcase__cta {
    gap: 28px;
  }

  .learning-roadmap__list > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-roadmap__item {
    min-height: 230px;
  }

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

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

  .testimonials-section__grid {
    gap: 18px;
  }

  .testimonial-item {
    min-height: 290px;
    padding: 26px;
  }

  .stat-item:nth-child(odd) {
    border-left: 0;
  }

  .stat-item:nth-child(n + 3) {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--color-charcoal);
  }

  .about-section__media {
    height: min(70vw, 620px);
  }

  .about-section__content {
    max-width: 680px;
  }

  .auth-panel {
    padding: 72px 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-gutter: 28px;
    --space-section: 60px;
  }

  .topbar__inner {
    justify-content: center;
  }



  .video-showcase::before,
  .featured-tutorials::before,
  .testimonials-section::before,
  .site-footer::before {
    left: -62px;
  }

  .topbar__message {
    font-size: 10px;
    letter-spacing: .1em;
    text-align: center;
  }

  .topbar__contact {
    display: none;
  }

  .brand img {
    width: 116px;
  }

  .hero {
    min-height: calc(100svh - 108px);
    padding-block: 60px;
  }

  .hero__content {
    width: 100%;
  }

  .hero__title {
    font-size: clamp(48px, calc(8vw + 8px), 60px);
  }

  .hero__description {
    font-size: 18px;
  }

  .hero__actions {
    align-items: center;
    flex-direction: column;
    gap: 16px;
  }

  .hero__credit {
    right: 50%;
    width: calc(100% - var(--container-gutter));
    text-align: center;
    transform: translateX(50%);
  }

  .about-section__media {
    height: 68vw;
    min-height: 430px;
  }

  .video-showcase__title {
    font-size: clamp(38px, calc(6vw + 4px), 46px);
  }

  .video-showcase__description {
    font-size: 20px;
  }

  .video-showcase__cta-description {
    font-size: 18px;
  }

  .site-footer__description,
  .site-footer__contact-description {
    font-size: 17px;
  }

  .site-footer__column li a,
  .site-footer__email {
    font-size: 14px;
  }

  .site-footer__bottom {
    font-size: 12px;
  }

  .video-showcase__cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .learning-roadmap__title {
    font-size: clamp(38px, calc(6vw + 4px), 46px);
  }

  .featured-tutorials__title {
    font-size: clamp(38px, calc(6vw + 4px), 46px);
  }

  .testimonials-section__grid {
    grid-template-columns: 1fr;
  }

  .testimonial-item {
    min-height: 0;
  }

  .auth-panel {
    padding: 48px 28px;
  }

  .auth-heading h1 {
    font-size: clamp(36px, 7vw, 44px);
  }

  .auth-benefits {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

@media (max-width: 576px) {
  :root {
    --space-section: 54px;
  }

  .site-header__inner {
    min-height: 68px;
    gap: 12px;
  }



  .brand img {
    width: 100px;
  }

  .mobile-menu-toggle {
    width: 38px;
    height: 38px;
  }

  .mobile-menu a {
    font-size: 11px;
  }

  .hero {
    min-height: calc(100svh - 108px);
    padding-block: 52px 64px;
  }

  .hero__content {
    width: 100%;
  }

  .hero__eyebrow {
    gap: 10px;
    font-size: 10px;
  }

  .hero__eyebrow::after {
    width: 24px;
  }

  .hero__title {
    font-size: clamp(44px, calc(10vw + 8px), 54px);
    line-height: 1.06;
  }

  .hero__description {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.65;
  }

  .hero__actions {
    margin-top: 26px;
  }

  .hero__primary-cta {
    width: 100%;
  }

  .hero__video-cta {
    padding-block: 3px;
  }

  .hero__play-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .hero__credit {
    font-size: 9px;
  }

  .benefits-strip__inner {
    grid-template-columns: 1fr;
    padding-block: 22px;
  }

  .about-section__grid {
    gap: 34px;
  }

  .video-showcase__heading {
    margin-bottom: 28px;
  }

  .learning-roadmap__eyebrow {
    gap: 10px;
    font-size: 10px;
  }

  .learning-roadmap__eyebrow::before,
  .learning-roadmap__eyebrow::after {
    width: 22px;
  }

  .learning-roadmap__title {
    font-size: clamp(34px, calc(8.5vw + 4px), 42px);
  }

  .learning-roadmap__description {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.7;
  }

  .learning-roadmap__list > ol {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .learning-roadmap__item,
  .learning-roadmap__item:last-child {
    min-height: 0;
    padding: 24px 18px;
    border: 2px solid var(--color-white);
  }

  .learning-roadmap__item-title {
    margin-top: 24px;
    font-size: 25px;
  }

  .learning-roadmap__cta {
    margin-top: 30px;
  }

  .learning-roadmap__cta .btn {
    width: 100%;
  }

  .featured-tutorials__eyebrow {
    gap: 10px;
    font-size: 10px;
  }

  .featured-tutorials__eyebrow::before,
  .featured-tutorials__eyebrow::after {
    width: 22px;
  }

  .featured-tutorials__title {
    font-size: clamp(34px, calc(8.5vw + 4px), 42px);
  }

  .featured-tutorials__description {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.7;
  }

  .featured-tutorials__grid {
    grid-template-columns: 1fr;
    gap: 38px;
    margin-top: 32px;
  }

  .tutorial-item__title {
    font-size: 26px;
  }

  .featured-tutorials__cta {
    margin-top: 36px;
  }

  .featured-tutorials__cta .btn {
    width: 100%;
  }

  .stats-section {
    padding-block: 50px;
  }

  .stats-section__grid {
    grid-template-columns: 1fr;
  }

  .stat-item,
  .stat-item:nth-child(n + 3) {
    margin-top: 0;
    padding: 28px 12px;
    border-top: 0;
    border-left: 0;
  }

  .stat-item + .stat-item {
    border-left: 0;
    border-top: 1px solid var(--color-charcoal);
  }

  .stat-item:first-child {
    padding-top: 0;
  }

  .stat-item:last-child {
    padding-bottom: 0;
  }

  .stat-item__index {
    margin-bottom: 12px;
  }

  .stat-item__number {
    font-size: clamp(40px, 13vw, 52px);
  }

  .testimonials-section__eyebrow {
    gap: 10px;
    font-size: 10px;
  }

  .testimonials-section .testimonials-section__heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .testimonials-section__nav {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-top: 20px;
  }

  .testimonials-section__eyebrow::before,
  .testimonials-section__eyebrow::after {
    width: 22px;
  }

  .testimonials-section__title {
    font-size: clamp(34px, calc(8.5vw + 4px), 42px);
  }

  .testimonials-section__description {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.7;
  }

  .testimonials-section__grid {
    gap: 16px;
    margin-top: 32px;
  }

  .testimonial-item {
    padding: 24px 20px;
  }

  .testimonial-item__text {
    margin-block: 22px 28px;
  }

  .testimonial-item__text {
    font-size: 17px;
  }

  .testimonials-section__cta {
    margin-top: 32px;
  }

  .testimonials-section__cta .btn {
    width: 100%;
  }

  .final-membership-cta__title {
    font-size: clamp(36px, calc(9vw + 4px), 44px);
  }

  .final-membership-cta__description {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.7;
  }

  .final-membership-cta__button {
    width: 100%;
  }

  .final-membership-cta__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    margin-top: 26px;
  }

  .final-membership-cta__link {
    align-self: center;
  }

  .final-membership-cta__visual {
    height: 85vw;
    max-height: 430px;
  }

  .final-membership-cta__caption {
    right: 14px;
    bottom: 14px;
  }

  .site-footer {
    padding-top: 56px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-bottom: 46px;
  }

  .site-footer__brand {
    max-width: 520px;
  }

  .site-footer__description,
  .site-footer__contact-description {
    margin-top: 18px;
  }

  .site-footer__links > ul {
    margin-top: 18px;
  }

  .site-footer__cta {
    max-width: 320px;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-block: 22px;
  }

  .video-showcase__eyebrow {
    gap: 10px;
    font-size: 10px;
  }

  .video-showcase__eyebrow::before,
  .video-showcase__eyebrow::after {
    width: 22px;
  }

  .video-showcase__title {
    font-size: clamp(34px, calc(8.5vw + 4px), 42px);
  }

  .video-showcase__description {
    margin-top: 16px;
    font-size: 19px;
    line-height: 1.7;
  }

  .video-showcase__frame {
    aspect-ratio: 4 / 3;
  }

  .video-showcase__play {
    width: 64px;
    height: 64px;
    font-size: 16px;
  }

  .video-showcase__cta {
    gap: 24px;
    margin-top: 26px;
    padding-top: 24px;
  }

  .video-showcase__cta-title {
    font-size: 28px;
  }

  .video-showcase__cta .btn {
    width: 100%;
  }

  .about-section__media {
    height: 115vw;
    min-height: 0;
    max-height: 560px;
  }

  .about-section__eyebrow {
    gap: 10px;
    font-size: 10px;
  }

  .about-section__eyebrow::after {
    width: 24px;
  }

  .about-section__title {
    font-size: clamp(36px, calc(9vw + 4px), 44px);
  }

  .about-section__description {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.7;
  }

  .about-section__button {
    width: 100%;
    margin-top: 26px;
  }

  .about-section__trust {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .about-section__trust span {
    display: none;
  }

  .benefit-item {
    justify-content: center;
  }

  .auth-panel {
    padding: 38px 20px 44px;
  }

  .auth-panel__top {
    margin-bottom: 24px;
  }

  .auth-heading {
    margin-bottom: 26px;
  }

  .auth-heading>p:last-child {
    font-size: 14px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .auth-reassurance {
    margin-top: 28px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-gutter: 24px;
  }

  .topbar__message {
    letter-spacing: .06em;
  }

  .hero__title {
    font-size: clamp(42px, calc(10vw + 8px), 50px);
  }

  .form-options {
    align-items: flex-start;
  }

  .auth-panel {
    padding-inline: 18px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__background-video {
    display: none;
  }

  .hero-reveal,
  .auth-panel__inner {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero.is-ready .hero-reveal {
    transition: none;
  }

  .btn,
  .auth-submit,
  .auth-submit i {
    transition: none;
  }

  .hero__video-cta {
    animation: none;
  }

  .hero__play-icon::before,
  .hero__play-icon::after {
    animation: none;
  }

  .final-membership-cta__visual img,
  .final-membership-cta__visual:hover img {
    transform: none;
    transition: none;
  }

  [data-scroll-reveal],
  [data-scroll-reveal="left"],
  [data-scroll-reveal="right"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* Editorial layouts retain the existing mobile breakpoints. */
@media (max-width: 1200px) {
  .learning-roadmap__item { border: 0; }
}
@media (max-width: 992px) {
  .mobile-menu { background: var(--color-header); visibility: hidden; }
  .mobile-menu.is-open { visibility: visible; border-top-color: var(--border-on-dark); }
  .mobile-menu a { border-bottom-color: var(--border-on-dark); }
  .mobile-menu__cta { background: var(--color-accent); color: var(--color-white); align-items: center; text-align: center; }
  .mobile-menu__cta:hover { background: var(--color-accent-hover); }
  .hero { min-height: 650px; }
  .hero__content { width: min(650px, 100%); }
  .learning-roadmap__item { min-height: 300px; }
  .learning-roadmap__cta { align-items: flex-start; flex-direction: column; }
  .final-membership-cta { padding-block: 90px; }
  .final-membership-cta__visual { height: 100%; }
  .stat-item:nth-child(n + 3) { border-top-color: var(--border-on-dark); }
}
@media (max-width: 576px) {
  .brand img { width: 82px; }
  .hero { min-height: 0; padding-block: 44px 56px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .1em; }
  .hero__title { font-size: clamp(40px, calc(9vw + 8px), 52px); }
  .hero__actions { gap: 24px; align-items: center; }
  .benefits-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .benefit-item { gap: 8px; align-items: center; flex-direction: column; }
  .benefit-item__icon { width: 22px; height: 22px; flex-basis: 22px; font-size: 14px; }
  .benefit-item__text { font-size: 14px; }
  .learning-roadmap__item, .learning-roadmap__item:last-child { min-height: 260px; padding: 24px 24px 82px; border: 0; }
  .learning-roadmap__list > ol { gap: 16px; }
  .learning-roadmap__item-title { margin-top: 20px; }
  .tutorial-item__media { aspect-ratio: 16 / 10; }
  .stat-item + .stat-item { border-top-color: var(--border-on-dark); }
  .testimonial-item { padding-inline: 12px; }
  .final-membership-cta { padding-block: 70px 100px; }
  .final-membership-cta__visual { height: 100%; max-height: none; }
  .final-membership-cta__visual::after { background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .38) 70%, rgba(0, 0, 0, .2)); }
  .final-membership-cta__caption { right: 20px; bottom: 20px; }
  .site-footer__legal { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-item__media img, .about-section__media img, .tutorial-item__play { transition: none; }
  .tutorial-item__media:hover img, .tutorial-item__media:focus-visible img, .about-section__media:hover img { transform: none; }
}

/* Full-background hero and shared brand adaptations. */
@media (max-width: 992px) {
  .hero { min-height: calc(100svh - 76px); }
  .mobile-menu__cta { color: var(--color-white); }
  .learning-roadmap__item,
  .learning-roadmap__item:last-child { border-top: 3px solid var(--color-accent); }
  .stat-item:nth-child(n + 3) { border-top-color: var(--color-border); }
}
@media (max-width: 576px) {
  .hero { min-height: calc(100svh - 68px); padding-block: 56px; }
  .hero__title { font-size: clamp(42px, 10vw, 54px); }
  .hero__eyebrow { line-height: 1.5; letter-spacing: .08em; }
  .hero__actions { gap: 22px; }
  .hero__primary-cta { width: auto; }
  .learning-roadmap__list > ol { gap: 0; }
  .stat-item + .stat-item { border-top-color: var(--color-border); }
}


/* Member dashboard, library and profile */
@media (max-width: 1050px) {
  .member-welcome__inner { gap: 24px; }
  .member-profile { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 992px) {
  .member-page .header-actions { display: flex; margin-left: auto; }
  .member-page .mobile-menu.is-open { max-height: 600px; }
}
@media (max-width: 820px) {
  .member-welcome__inner { grid-template-columns: 1fr; gap: 0; }
  .member-welcome__content { padding-block: 54px 30px; }
  .member-welcome__image { min-height: 320px; max-height: 410px; margin-inline: calc(var(--container-gutter) / -2); }
  .member-welcome__image::after { background: linear-gradient(180deg, var(--color-dark), transparent 34%); }
  .member-profile { grid-template-columns: 1fr; }
  .member-profile__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .profile-help { margin: 0; }
  .member-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .member-page .header-actions { gap: 0; }
  .member-account__trigger { gap: 8px; }
  .member-account__trigger > i { display: none; }
  .member-account__avatar { width: 34px; height: 34px; }
  .member-account__panel { right: 0; width: min(265px, calc(100vw - 24px)); }
  .member-page-head { padding-block: 50px; }
  .member-welcome__image { min-height: 250px; }
  .member-content { padding-block: 48px 68px; }
  .member-section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .member-stats { grid-template-columns: 1fr; }
  .member-stat { padding-block: 20px; }
  .member-stat + .member-stat { border-left: 0; border-top: 1px solid var(--color-border); }
  .member-feature { grid-template-columns: 1fr; margin-block: 38px 58px; }
  .member-feature__image { min-height: 235px; max-height: 280px; }
  .member-feature__content { padding: 26px 22px 32px; }
  .member-lessons { grid-template-columns: 1fr; }
  .library-tools { align-items: start; flex-direction: column; gap: 5px; }
  .library-search { width: 100%; }
  .library-count { padding: 0; }
  .profile-form__row,
  .member-profile__side { grid-template-columns: 1fr; }
  .profile-card,
  .profile-summary { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .member-page a,
  .member-page button,
  .lesson-card__media img { transition: none; }
}

/* Logged-in video detail: the full player adds playback controls that are not
   present in the static preview. Keep the reference two-column layout until
   tablet width, then stack related lessons below the player. */
@media (max-width: 1180px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .watch-info__body { align-items: flex-start; flex-direction: column; }
  .watch-info__actions,
  body.logged-in.video-detail-page .watch-info__actions { width: 100%; max-width: none; justify-content: flex-start; }
  .watch-loop-controls { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .watch-section { padding-block: 28px 60px; }
  .watch-layout { grid-template-columns: 1fr; gap: 24px; }
  .watch-sidebar,
  body.admin-bar.video-detail-page .watch-sidebar { position: static; max-height: none; }
  .watch-sidebar__content,
  body.admin-bar.video-detail-page .watch-sidebar__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .watch-related { grid-template-columns: 108px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .watch-section { padding-block: 18px 46px; }
  .watch-info { margin-top: 12px; padding: 22px 18px; }
  .watch-info__heading { gap: 16px; }
  .watch-info__title { font-size: clamp(34px, 11vw, 46px); }
  .watch-info__body { gap: 22px; }
  .watch-info__actions { align-items: stretch; }
  .watch-loop-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body.video-detail-page .watch-loop-controls button { width: 100%; white-space: normal; }
  .watch-info__ask { width: 100%; }
  .watch-tags { margin-top: 20px; }
  .watch-sidebar__content { grid-template-columns: 1fr; }
  .watch-related { grid-template-columns: 96px minmax(0, 1fr); }
  .watch-upgrade { align-items: stretch; flex-direction: column; }
  .watch-upgrade .btn { width: 100%; }
}