.page{ padding:70px 0 120px; }
    .section{ padding:90px 0; border-top:1px solid var(--line); }
    .eyebrow{
      margin:0 0 18px 0;
      font-size:12px;
      letter-spacing:0.2em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .title{
      margin:0 0 14px 0;
      font-size:34px;
      letter-spacing:-0.02em;
      line-height:1.15;
      max-width:28ch;
    }
    .desc{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.85;
      max-width:72ch;
    }


/* Hero split: big image left, title right */
.hero-split{
    display:grid;
    grid-template-columns: 7fr 5fr;
    gap:26px;
    align-items:stretch;
  }

  .lesson-image{
    border:1px solid var(--line);
    background:
      linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    min-height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .lesson-image .placeholder{
    color:var(--muted);
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-size:12px;
    border:1px solid var(--line);
    padding:10px 12px;
    background:rgba(255,255,255,0.9);
  }

  .hero-right{
    border:1px solid var(--line);
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:24px;
  }
  .course-kicker{
    margin:0;
    font-size:12px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted);
  }
  h1{
    margin:10px 0 0;
    font-size:44px;
    letter-spacing:-0.03em;
    line-height:1.05;
    max-width:18ch;
  }
  .hero-sub{
    margin:18px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.85;
    max-width:52ch;
  }

  .actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
  }
  .btn{
    text-decoration:none;
    border:1px solid var(--hard);
    padding:12px 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    background:var(--hard);
    color:var(--bg);
    white-space:nowrap;
    cursor:pointer;
  }
  .btn:hover, .btn:focus-visible{
    outline:none;
    background:var(--bg);
    color:var(--hard);
  }
  .btn-ghost{
    background:transparent;
    color:var(--hard);
    border-color:var(--line);
  }
  .btn-ghost:hover, .btn-ghost:focus-visible{
    border-color:var(--hard);
    background:var(--hard);
    color:var(--bg);
  }

  /* Overview list (simple, not cramped) */
  .outline{
    margin-top:56px;
    border:1px solid var(--line);
  }
  .outline-item{
    padding:26px 28px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
  }
  .outline-item:first-child{ border-top:none; }

  .outline-left{
    display:flex;
    gap:14px;
    min-width:0;
  }
  .tag{
    border:1px solid var(--line);
    padding:6px 10px;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;
    height:max-content;
  }
  .outline-text h3{
    margin:0;
    font-size:16px;
    letter-spacing:-0.01em;
  }
  .outline-text p{
    margin:10px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    max-width:70ch;
  }
  .outline-right{
    color:var(--muted);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    white-space:nowrap;
    padding-top:2px;
  }

  /* End CTA */
  .end-cta{
    border:1px solid var(--line);
    padding:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:56px;
  }
  .end-cta h2{
    margin:0 0 12px 0;
    font-size:28px;
    letter-spacing:-0.02em;
    line-height:1.15;
    max-width:22ch;
  }
  .end-cta p{
    margin:0;
    color:var(--muted);
    line-height:1.85;
    max-width:62ch;
    font-size:14px;
  }

  .lesson-image.video-box{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* change to 4/3 if you want */
    overflow: hidden;
    border-radius: 12px; /* optional */
  }
  
  .lesson-image.video-box iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  

  /* Responsive */
  @media (max-width: 980px){
    .navbar{ flex-wrap:wrap; }
    .nav-right{ width:100%; justify-content:space-between; }
    .nav-auth{ border-left:none; padding-left:0; }

    .hero-split{ grid-template-columns:1fr; }
    .lesson-image{ min-height:280px; }
    h1{ font-size:38px; }

    .end-cta{ padding:38px; flex-direction:column; align-items:flex-start; }
    .outline-item{ flex-direction:column; }
    .outline-right{ padding-top:0; }
  }