/* Видеоуроки мобильного приложения. Стили изолированы от блоков flexcore-new. */
@font-face {
      font-family: "PS Display";
      src: url("/fonts/PFDinTextPro/pfdintextpro-medium.ttf") format("truetype");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "PS Text";
      src: url("/fonts/Roboto.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "PS Text";
      src: url("/fonts/Robotomedium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    .video-lessons-page {
      --night: #101f2a;
      --night-soft: #183243;
      --blue: #286d9b;
      --blue-deep: #174866;
      --ice: #acd2e6;
      --paper: #eef1f0;
      --white: #fbfcfb;
      --ink: #172127;
      --muted: #66747b;
      --line: #c8d0d2;
      --orange: #b86634;
      --header: 60px;
      --shell: 1500px;
      --gutter: clamp(22px, 5vw, 78px);
    }

    .video-lessons-page *,.video-lessons-page *::before,.video-lessons-page *::after { box-sizing: border-box; }
    .video-lessons-page { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 24px); }
    .video-lessons-page {
      min-width: 320px;
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PS Text", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    .video-lessons-page.menu-open { overflow: hidden; }
    .video-lessons-page img { display: block; max-width: 100%; }
    .video-lessons-page a { color: inherit; text-decoration: none; }
    .video-lessons-page button { color: inherit; font: inherit; }
    .video-lessons-page button,.video-lessons-page a { -webkit-tap-highlight-color: transparent; }
    .video-lessons-page ::selection { color: #fff; background: var(--blue); }
    .video-lessons-page :focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

    .video-lessons-page .shell {
      width: 100%;
      max-width: var(--shell);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    .video-lessons-page .reading-progress {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: var(--ice);
      pointer-events: none;
    }

    .video-lessons-page .site-header {
      position: absolute;
      z-index: 50;
      top: 0;
      right: 0;
      left: 0;
      color: #fff;
      border-bottom: 1px solid rgba(172, 210, 230, .28);
      background: rgba(16, 31, 42, .88);
      backdrop-filter: blur(10px);
    }
    .video-lessons-page .site-header.is-sticky {
      position: fixed;
      background: rgba(16, 31, 42, .97);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    }
    .video-lessons-page .header__inner {
      min-height: var(--header);
      display: flex;
      align-items: center;
      gap: 42px;
    }
    .video-lessons-page .brand {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 12px;
    }
    .video-lessons-page .brand__icon {
      width: 25px;
      height: 31px;
      object-fit: contain;
    }
    .video-lessons-page .brand__copy { display: grid; gap: 3px; }
    .video-lessons-page .brand__name {
      font-family: "PS Display", Arial, sans-serif;
      font-size: 18px;
      line-height: 1;
      letter-spacing: .035em;
      text-transform: uppercase;
    }
    .video-lessons-page .brand__meta {
      color: #9eb0bc;
      font-size: 8px;
      line-height: 1;
      letter-spacing: .06em;
      white-space: nowrap;
    }
    .video-lessons-page .main-nav {
      display: flex;
      align-items: stretch;
      gap: 0;
      margin-left: auto;
      color: #d8e2e6;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .035em;
      text-transform: uppercase;
    }
    .video-lessons-page .main-nav > a {
      position: relative;
      min-height: var(--header);
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
    }
    .video-lessons-page .main-nav > a::after {
      content: "";
      position: absolute;
      right: 14px;
      bottom: 0;
      left: 14px;
      height: 2px;
      background: var(--ice);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .18s ease;
    }
    .video-lessons-page .main-nav > a:hover,.video-lessons-page .main-nav > a:focus-visible { color: #fff; }
    .video-lessons-page .main-nav > a:hover::after,.video-lessons-page .main-nav > a:focus-visible::after,.video-lessons-page .main-nav > a[aria-current="page"]::after { transform: scaleX(1); }
    .video-lessons-page .header__back {
      padding-inline: 17px !important;
      color: #dce9ee;
      background: rgba(172, 210, 230, .075);
    }
    .video-lessons-page .header__back::after { display: none; }
    .video-lessons-page .header__back:hover,.video-lessons-page .header__back:focus-visible {
      color: var(--night) !important;
      background: var(--ice);
    }
    .video-lessons-page .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      margin-left: auto;
      padding: 0;
      border: 1px solid rgba(172, 210, 230, .35);
      background: transparent;
      cursor: pointer;
    }
    .video-lessons-page .menu-toggle span,.video-lessons-page .menu-toggle::before,.video-lessons-page .menu-toggle::after {
      content: "";
      display: block;
      width: 18px;
      height: 2px;
      margin: 5px auto;
      background: #fff;
      transition: transform .18s ease, opacity .18s ease;
    }
    .video-lessons-page .menu-toggle.is-active span { opacity: 0; }
    .video-lessons-page .menu-toggle.is-active::before { transform: translateY(7px) rotate(45deg); }
    .video-lessons-page .menu-toggle.is-active::after { transform: translateY(-7px) rotate(-45deg); }

    .video-lessons-page .hero {
      position: relative;
      min-height: 700px;
      overflow: hidden;
      color: #fff;
      background: var(--night);
    }
    .video-lessons-page .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      background-image:
        linear-gradient(rgba(172, 210, 230, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(172, 210, 230, .18) 1px, transparent 1px);
      background-size: 68px 68px;
      -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000);
      mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000);
    }
    .video-lessons-page .hero::after {
      content: "VIDEO / 03";
      position: absolute;
      right: -34px;
      bottom: -44px;
      color: rgba(255, 255, 255, .035);
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(120px, 17vw, 270px);
      line-height: .78;
      letter-spacing: -.035em;
      white-space: nowrap;
      pointer-events: none;
    }
    .video-lessons-page .hero__inner {
      position: relative;
      z-index: 2;
      min-height: 700px;
      display: grid;
      grid-template-columns: minmax(0, .94fr) minmax(450px, .8fr);
      align-items: center;
      gap: clamp(54px, 7vw, 116px);
      padding-top: calc(var(--header) + 62px);
      padding-bottom: 70px;
    }
    .video-lessons-page .eyebrow {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 0 0 20px;
      color: var(--ice);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .video-lessons-page .eyebrow::before {
      content: "";
      width: 34px;
      height: 1px;
      background: currentColor;
    }
    .video-lessons-page .hero h1 {
      max-width: 790px;
      margin: 0;
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(52px, 5.2vw, 86px);
      font-weight: 500;
      line-height: .95;
      letter-spacing: -.025em;
    }
    .video-lessons-page .hero h1 span {
      display: block;
      color: var(--ice);
    }
    .video-lessons-page .hero__lead {
      max-width: 680px;
      margin: 27px 0 0;
      color: #c4d1d7;
      font-size: clamp(16px, 1.25vw, 20px);
      line-height: 1.65;
    }
    .video-lessons-page .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin-top: 34px;
    }
    .video-lessons-page .action {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 11px 20px;
      border: 1px solid rgba(172, 210, 230, .35);
      font-size: 12px;
      font-weight: 500;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .video-lessons-page .action--primary {
      color: var(--night);
      border-color: var(--ice);
      background: var(--ice);
    }
    .video-lessons-page .action--primary:hover { background: #d0e8f2; }
    .video-lessons-page .action--secondary:hover { color: var(--night); border-color: var(--ice); background: var(--ice); }
    .video-lessons-page .hero__stats {
      display: flex;
      align-items: stretch;
      margin-top: 42px;
    }
    .video-lessons-page .hero-stat {
      min-width: 116px;
      display: grid;
      gap: 5px;
      padding-right: 22px;
    }
    .video-lessons-page .hero-stat + .hero-stat {
      padding-left: 22px;
      border-left: 1px solid rgba(172, 210, 230, .22);
    }
    .video-lessons-page .hero-stat strong {
      color: #fff;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 29px;
      font-weight: 500;
      line-height: 1;
    }
    .video-lessons-page .hero-stat span {
      color: #90a4af;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .video-lessons-page .hero-device {
      position: relative;
      min-height: 530px;
    }
    .video-lessons-page .phone {
      position: absolute;
      overflow: hidden;
      border: 9px solid #07131b;
      border-radius: 34px;
      background: #07131b;
      box-shadow: 0 30px 65px rgba(0, 0, 0, .34);
    }
    .video-lessons-page .phone::before {
      content: "";
      position: absolute;
      z-index: 2;
      top: 8px;
      left: 50%;
      width: 44px;
      height: 4px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .34);
      transform: translateX(-50%);
    }
    .video-lessons-page .phone img { width: 100%; height: 100%; object-fit: cover; }
    .video-lessons-page .phone--front {
      z-index: 3;
      bottom: 0;
      left: 7%;
      width: 248px;
      height: 510px;
    }
    .video-lessons-page .phone--back {
      z-index: 1;
      top: 10px;
      right: 1%;
      width: 224px;
      height: 458px;
      opacity: .64;
      transform: rotate(4deg);
    }
    .video-lessons-page .phone--back img { object-position: top; }
    .video-lessons-page .device-line {
      position: absolute;
      z-index: 2;
      right: 20px;
      bottom: 58px;
      left: 24px;
      height: 1px;
      background: rgba(172, 210, 230, .45);
    }
    .video-lessons-page .device-line::before,.video-lessons-page .device-line::after {
      content: "";
      position: absolute;
      top: -4px;
      width: 9px;
      height: 9px;
      background: var(--ice);
    }
    .video-lessons-page .device-line::before { left: 0; }
    .video-lessons-page .device-line::after { right: 0; }
    .video-lessons-page .device-note {
      position: absolute;
      z-index: 4;
      right: 0;
      bottom: 0;
      width: 220px;
      padding: 14px 16px;
      border-left: 3px solid var(--ice);
      color: #b9c9d1;
      background: #152f40;
      font-size: 11px;
      line-height: 1.45;
    }
    .video-lessons-page .device-note strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .video-lessons-page .course-strip {
      position: relative;
      z-index: 4;
      color: var(--ink);
      border-bottom: 1px solid #aebfc5;
      background: #dfe7e8;
    }
    .video-lessons-page .course-strip__inner {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-left: 1px solid #aebfc5;
    }
    .video-lessons-page .course-route {
      min-height: 98px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 18px;
      align-items: center;
      gap: 13px;
      padding: 18px 22px;
      border-right: 1px solid #aebfc5;
      transition: color .18s ease, background .18s ease;
    }
    .video-lessons-page .course-route:hover,.video-lessons-page .course-route:focus-visible {
      color: #fff;
      background: var(--blue-deep);
    }
    .video-lessons-page .course-route__no {
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      letter-spacing: .1em;
    }
    .video-lessons-page .course-route:hover .course-route__no,.video-lessons-page .course-route:focus-visible .course-route__no { color: var(--ice); }
    .video-lessons-page .course-route strong {
      display: block;
      margin-bottom: 3px;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 17px;
      font-weight: 500;
      line-height: 1.15;
    }
    .video-lessons-page .course-route small {
      display: block;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }
    .video-lessons-page .course-route:hover small,.video-lessons-page .course-route:focus-visible small { color: #c6d5dc; }
    .video-lessons-page .course-route__arrow { color: var(--blue); font-size: 18px; }
    .video-lessons-page .course-route:hover .course-route__arrow,.video-lessons-page .course-route:focus-visible .course-route__arrow { color: var(--ice); }

    .video-lessons-page .course {
      padding: clamp(76px, 8vw, 126px) 0;
    }
    .video-lessons-page .course__head {
      max-width: 840px;
      margin-bottom: 46px;
    }
    .video-lessons-page .section-kicker {
      margin: 0 0 12px;
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .video-lessons-page .course__head h2,.video-lessons-page .outcomes h2,.video-lessons-page .next-step h2 {
      margin: 0;
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(36px, 4vw, 62px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.02em;
    }
    .video-lessons-page .course__head p {
      max-width: 700px;
      margin: 19px 0 0;
      color: var(--muted);
    }
    .video-lessons-page .course-layout {
      display: grid;
      grid-template-columns: 310px minmax(0, 1fr);
      align-items: start;
      gap: clamp(28px, 4vw, 62px);
    }
    .video-lessons-page .playlist {
      position: sticky;
      top: calc(var(--header) + 24px);
      border-top: 4px solid var(--night);
      background: #e3e9e9;
    }
    .video-lessons-page .playlist__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 17px 14px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .video-lessons-page .playlist__head span {
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .video-lessons-page .playlist__head strong {
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      font-weight: 500;
    }
    .video-lessons-page .playlist__track {
      height: 3px;
      overflow: hidden;
      background: #c8d3d6;
    }
    .video-lessons-page .playlist__track span {
      display: block;
      width: 33.333%;
      height: 100%;
      background: var(--blue);
      transition: width .25s ease;
    }
    .video-lessons-page .lesson-tab {
      width: 100%;
      min-height: 88px;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 20px;
      align-items: center;
      gap: 12px;
      padding: 15px 16px;
      border: 0;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
      background: transparent;
      text-align: left;
      cursor: pointer;
      transition: color .18s ease, background .18s ease;
    }
    .video-lessons-page .lesson-tab:hover { background: #f5f7f6; }
    .video-lessons-page .lesson-tab.is-active {
      color: #fff;
      border-color: var(--blue-deep);
      background: var(--blue-deep);
    }
    .video-lessons-page .lesson-tab__no {
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
    }
    .video-lessons-page .lesson-tab.is-active .lesson-tab__no { color: var(--ice); }
    .video-lessons-page .lesson-tab strong {
      display: block;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.18;
    }
    .video-lessons-page .lesson-tab small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .video-lessons-page .lesson-tab.is-active small { color: #bcd0da; }
    .video-lessons-page .lesson-tab__play {
      width: 19px;
      height: 19px;
      display: grid;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 7px;
    }
    .video-lessons-page .playlist__docs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 17px;
      color: #d7e4e9;
      background: var(--night);
      font-size: 10px;
    }
    .video-lessons-page .playlist__docs:hover { color: #fff; background: var(--night-soft); }

    .video-lessons-page .lesson-stage {
      min-width: 0;
      border-top: 4px solid var(--blue);
      background: var(--white);
      box-shadow: 8px 8px 0 #ccd5d6;
    }
    .video-lessons-page .lesson-stage__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 17px 22px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .video-lessons-page .lesson-stage__meta {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .video-lessons-page .lesson-stage__meta strong { color: var(--blue); font-weight: 500; }
    .video-lessons-page .external-video {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue-deep);
      font-size: 10px;
      font-weight: 500;
    }
    .video-lessons-page .external-video:hover { color: var(--blue); }
    .video-lessons-page .lesson-stage__title {
      padding: clamp(24px, 3.5vw, 46px);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .video-lessons-page .lesson-stage__title h3 {
      max-width: 860px;
      margin: 0;
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(31px, 3.5vw, 52px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.02em;
    }
    .video-lessons-page .lesson-stage__title p {
      max-width: 820px;
      margin: 17px 0 0;
      color: var(--muted);
      font-size: 15px;
    }
    .video-lessons-page .player {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #07131b;
    }
    .video-lessons-page .player iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .video-lessons-page .player-loader {
      position: absolute;
      z-index: 2;
      inset: 0;
      display: grid;
      place-items: center;
      color: #c4d5dc;
      background: #07131b;
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s ease, visibility .2s ease;
      pointer-events: none;
    }
    .video-lessons-page .player-loader.is-visible { opacity: 1; visibility: visible; }
    .video-lessons-page .player-loader span {
      width: 38px;
      height: 38px;
      border: 2px solid rgba(172, 210, 230, .25);
      border-top-color: var(--ice);
      border-radius: 50%;
      animation: rotate .8s linear infinite;
    }
    @keyframes rotate { to { transform: rotate(360deg); } }
    .video-lessons-page .lesson-detail {
      display: grid;
      grid-template-columns: minmax(0, .72fr) minmax(330px, 1fr);
      gap: clamp(28px, 4vw, 60px);
      padding: clamp(26px, 4vw, 50px);
      border-right: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .video-lessons-page .lesson-result {
      align-self: start;
      padding-left: 17px;
      border-left: 3px solid var(--blue);
    }
    .video-lessons-page .lesson-result span {
      display: block;
      margin-bottom: 8px;
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .video-lessons-page .lesson-result p { margin: 0; color: #31434c; }
    .video-lessons-page .lesson-points {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 22px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: lesson-point;
    }
    .video-lessons-page .lesson-points li {
      position: relative;
      min-height: 70px;
      padding: 13px 0 13px 35px;
      border-top: 1px solid var(--line);
      color: #42535b;
      font-size: 13px;
      counter-increment: lesson-point;
    }
    .video-lessons-page .lesson-points li::before {
      content: counter(lesson-point, decimal-leading-zero);
      position: absolute;
      top: 14px;
      left: 0;
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
    }
    .video-lessons-page .lesson-nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--line);
    }
    .video-lessons-page .lesson-nav button {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 20px;
      border: 0;
      background: #e5ebeb;
      cursor: pointer;
      transition: color .18s ease, background .18s ease;
    }
    .video-lessons-page .lesson-nav button + button { border-left: 1px solid var(--line); }
    .video-lessons-page .lesson-nav button:hover:not(:disabled) { color: #fff; background: var(--blue-deep); }
    .video-lessons-page .lesson-nav button:disabled { color: #9ba8ad; cursor: default; }
    .video-lessons-page .lesson-nav small {
      display: block;
      color: var(--muted);
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .video-lessons-page .lesson-nav button:hover:not(:disabled) small { color: #bfd3dc; }
    .video-lessons-page .lesson-nav strong {
      display: block;
      margin-top: 2px;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
    }
    .video-lessons-page .lesson-nav__next { text-align: right; }

    .video-lessons-page .outcomes {
      padding: clamp(70px, 8vw, 112px) 0;
      color: #fff;
      background: var(--night-soft);
    }
    .video-lessons-page .outcomes__head {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(380px, .7fr);
      align-items: end;
      gap: 60px;
      margin-bottom: 48px;
    }
    .video-lessons-page .outcomes__head p {
      margin: 0;
      color: #b5c5cc;
    }
    .video-lessons-page .outcome-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid rgba(172, 210, 230, .28);
      border-left: 1px solid rgba(172, 210, 230, .28);
    }
    .video-lessons-page .outcome {
      min-height: 260px;
      display: flex;
      flex-direction: column;
      padding: clamp(24px, 3vw, 40px);
      border-right: 1px solid rgba(172, 210, 230, .28);
      border-bottom: 1px solid rgba(172, 210, 230, .28);
    }
    .video-lessons-page .outcome__no {
      margin-bottom: auto;
      color: var(--ice);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      letter-spacing: .1em;
    }
    .video-lessons-page .outcome h3 {
      margin: 42px 0 9px;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 25px;
      font-weight: 500;
      line-height: 1.05;
    }
    .video-lessons-page .outcome p { margin: 0; color: #aebfc7; font-size: 13px; }

    .video-lessons-page .next-step {
      padding: clamp(70px, 8vw, 118px) 0;
      background: #d7e3e6;
    }
    .video-lessons-page .next-step__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 50px;
    }
    .video-lessons-page .next-step p {
      max-width: 720px;
      margin: 17px 0 0;
      color: #53676f;
    }
    .video-lessons-page .next-step__actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .video-lessons-page .next-step .action--primary { color: #fff; border-color: var(--blue-deep); background: var(--blue-deep); }
    .video-lessons-page .next-step .action--primary:hover { background: var(--blue); }
    .video-lessons-page .next-step .action--secondary { border-color: #8fa8b2; }
    .video-lessons-page .next-step .action--secondary:hover { color: #fff; border-color: var(--night); background: var(--night); }

    .video-lessons-page .site-footer {
      color: #d3dee3;
      border-top: 3px solid var(--blue);
      background: var(--night);
    }
    .video-lessons-page .footer-main {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 50px;
      padding-top: 52px;
      padding-bottom: 48px;
    }
    .video-lessons-page .footer-col { display: grid; align-content: start; gap: 9px; font-size: 12px; }
    .video-lessons-page .footer-col h3 {
      margin: 0 0 7px;
      color: var(--ice);
      font-family: "PS Display", Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
    }
    .video-lessons-page .footer-col a { color: #aebec6; }
    .video-lessons-page .footer-col a:hover { color: #fff; }
    .video-lessons-page .footer-bottom {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid rgba(172, 210, 230, .18);
      color: #8499a3;
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    @media (max-width: 1120px) {
      .video-lessons-page .main-nav > a { padding-inline: 9px; }
      .video-lessons-page .main-nav > a::after { right: 9px; left: 9px; }
      .video-lessons-page .hero__inner { grid-template-columns: minmax(0, 1fr) 390px; gap: 45px; }
      .video-lessons-page .phone--front { left: 0; width: 226px; height: 466px; }
      .video-lessons-page .phone--back { width: 202px; height: 414px; }
      .video-lessons-page .course-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
    }

    @media (max-width: 940px) {
      .video-lessons-page { --header: 58px; }
      .video-lessons-page .site-header { position: absolute; }
      .video-lessons-page .header__inner { gap: 18px; }
      .video-lessons-page .menu-toggle { display: block; }
      .video-lessons-page .main-nav {
        position: fixed;
        top: var(--header);
        right: 0;
        left: 0;
        max-height: calc(100vh - var(--header));
        display: none;
        overflow-y: auto;
        margin: 0;
        padding: 12px var(--gutter) 22px;
        background: var(--night);
        box-shadow: 0 18px 30px rgba(0, 0, 0, .26);
      }
      .video-lessons-page .main-nav.is-open { display: grid; }
      .video-lessons-page .main-nav > a {
        min-height: 50px;
        padding: 0 7px;
        border-bottom: 1px solid rgba(172, 210, 230, .14);
      }
      .video-lessons-page .main-nav > a::after { display: none; }
      .video-lessons-page .header__back {
        min-height: 46px !important;
        margin-top: 10px;
        padding-inline: 13px !important;
        border: 1px solid rgba(172, 210, 230, .35);
      }
      .video-lessons-page .hero__inner {
        min-height: auto;
        grid-template-columns: 1fr;
        padding-top: calc(var(--header) + 76px);
        padding-bottom: 68px;
      }
      .video-lessons-page .hero-device {
        width: min(520px, 100%);
        min-height: 480px;
        margin-inline: auto;
      }
      .video-lessons-page .phone--front { left: 7%; }
      .video-lessons-page .phone--back { right: 7%; }
      .video-lessons-page .course-strip__inner { grid-template-columns: 1fr; }
      .video-lessons-page .course-route { min-height: 78px; border-bottom: 1px solid #aebfc5; }
      .video-lessons-page .course-layout { grid-template-columns: 1fr; }
      .video-lessons-page .playlist {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .video-lessons-page .playlist__head,.video-lessons-page .playlist__track,.video-lessons-page .playlist__docs { grid-column: 1 / -1; }
      .video-lessons-page .lesson-tab {
        min-height: 106px;
        grid-template-columns: 28px minmax(0, 1fr);
        align-content: center;
      }
      .video-lessons-page .lesson-tab__play { display: none; }
      .video-lessons-page .lesson-detail { grid-template-columns: 1fr; }
      .video-lessons-page .outcomes__head { grid-template-columns: 1fr; gap: 20px; }
      .video-lessons-page .next-step__inner { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .video-lessons-page { --gutter: 18px; }
      .video-lessons-page .brand__meta { display: none; }
      .video-lessons-page .hero { min-height: auto; }
      .video-lessons-page .hero__inner { gap: 36px; padding-top: calc(var(--header) + 58px); padding-bottom: 54px; }
      .video-lessons-page .hero h1 { font-size: clamp(45px, 13vw, 66px); }
      .video-lessons-page .hero__lead { font-size: 15px; }
      .video-lessons-page .hero__actions { display: grid; }
      .video-lessons-page .action { width: 100%; }
      .video-lessons-page .hero__stats { margin-top: 32px; }
      .video-lessons-page .hero-stat { min-width: 0; padding-right: 12px; }
      .video-lessons-page .hero-stat + .hero-stat { padding-left: 12px; }
      .video-lessons-page .hero-stat strong { font-size: 24px; }
      .video-lessons-page .hero-device { min-height: 405px; }
      .video-lessons-page .phone { border-width: 7px; border-radius: 27px; }
      .video-lessons-page .phone--front { left: 2%; width: 190px; height: 390px; }
      .video-lessons-page .phone--back { top: 4px; right: 1%; width: 170px; height: 348px; }
      .video-lessons-page .device-note { width: 184px; padding: 11px 12px; font-size: 9px; }
      .video-lessons-page .course-route { grid-template-columns: 31px minmax(0, 1fr) 15px; padding: 15px 13px; }
      .video-lessons-page .course-route strong { font-size: 15px; }
      .video-lessons-page .course { padding-block: 68px; }
      .video-lessons-page .course__head { margin-bottom: 30px; }
      .video-lessons-page .playlist { grid-template-columns: 1fr; }
      .video-lessons-page .playlist__head,.video-lessons-page .playlist__track,.video-lessons-page .playlist__docs { grid-column: auto; }
      .video-lessons-page .playlist__track { order: 2; }
      .video-lessons-page .lesson-tab { min-height: 72px; grid-template-columns: 34px minmax(0, 1fr) 18px; }
      .video-lessons-page .lesson-tab__play { display: grid; }
      .video-lessons-page .lesson-stage { box-shadow: 5px 5px 0 #ccd5d6; }
      .video-lessons-page .lesson-stage__top { align-items: flex-start; padding: 14px 15px; }
      .video-lessons-page .lesson-stage__meta { display: grid; gap: 3px; }
      .video-lessons-page .external-video span { display: none; }
      .video-lessons-page .lesson-stage__title { padding: 24px 18px; }
      .video-lessons-page .lesson-stage__title h3 { font-size: 34px; }
      .video-lessons-page .lesson-detail { padding: 24px 18px; }
      .video-lessons-page .lesson-points { grid-template-columns: 1fr; }
      .video-lessons-page .lesson-nav { grid-template-columns: 1fr; }
      .video-lessons-page .lesson-nav button + button { border-top: 1px solid var(--line); border-left: 0; }
      .video-lessons-page .outcome-grid { grid-template-columns: 1fr; }
      .video-lessons-page .outcome { min-height: 205px; }
      .video-lessons-page .next-step__actions { display: grid; }
      .video-lessons-page .footer-main { grid-template-columns: 1fr; gap: 32px; }
      .video-lessons-page .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 15px; }
    }

    @media (max-width: 420px) {
      .video-lessons-page .hero-device { min-height: 350px; }
      .video-lessons-page .phone--front { width: 164px; height: 337px; }
      .video-lessons-page .phone--back { width: 148px; height: 303px; }
      .video-lessons-page .device-note { width: 155px; }
      .video-lessons-page .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
      .video-lessons-page .hero-stat { padding: 0 7px !important; text-align: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      .video-lessons-page { scroll-behavior: auto; }
      .video-lessons-page *,.video-lessons-page *::before,.video-lessons-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }