/* =====================================================================
   ROUND 13 · conversion pass: hero format line, four pains, tutorial
   contrast, compact programme intro, video slots, results note
   ===================================================================== */
.hero__sub { max-width: 38ch; }
.hero__format { margin-top: 14px; font-family: var(--sc-font-mono); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--text); }
.hero__format span { color: var(--acc); font-weight: 600; }

/* four pains, two columns on wide screens */
.pains__list--four { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); }
.pains__list--four li:nth-child(2) { border-top: 1px solid var(--line-strong); }

/* tutorial vs the course */
.yt__list h3 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem); }
.yt__contrast { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yt__contrast > div { padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r); border: 1px solid rgb(239 234 227 / 0.2); }
.yt__contrast p:not(.label) { margin-top: 8px; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.25; letter-spacing: -0.02em; color: #EFEAE3; }
.yt__contrast > div:first-child p:not(.label) { color: #B8AFA4; }
.yt__contrast-us { background: var(--acc); border-color: var(--acc) !important; }
.yt__contrast-us .label { color: rgb(247 242 236 / 0.8); }

/* compact programme intro */
.points--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 40px); margin-bottom: clamp(40px, 5vw, 64px); }

/* video proof */
.videos { margin-top: clamp(64px, 8vw, 110px); }
.videos__head { display: grid; gap: 12px; max-width: 40rem; margin-bottom: 24px; }
.videos__head > p:last-child { color: var(--soft); line-height: 1.55; }
.videos__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vclip { margin: 0; }
.vclip video, .vclip__ph { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r); background: #F4F4F2; object-fit: cover; }
.vclip__ph { border: 1.5px dashed rgb(18 18 18 / 0.3); display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; text-align: center; font-family: var(--sc-font-mono); font-size: 0.72rem; line-height: 1.5; color: var(--soft); }
.vclip__play { width: 54px; height: 54px; border-radius: 50%; background: var(--acc); position: relative; }
.vclip__play::after { content: ""; position: absolute; left: 21px; top: 16px; border: 11px solid transparent; border-left: 16px solid #F7F2EC; border-right: 0; }
.vclip figcaption { margin-top: 8px; font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--soft); }

.after__note { margin-top: 18px; max-width: 60ch; color: var(--soft); line-height: 1.6; }

@media (max-width: 860px) {
  .pains__list--four { grid-template-columns: 1fr; }
  .pains__list--four li:nth-child(2) { border-top: 1px solid var(--line); }
  .yt__contrast { grid-template-columns: 1fr; }
  .points--row { grid-template-columns: 1fr; }
  .videos__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .vclip { scroll-snap-align: start; }
}
/* the longer sub needs room: Julia sits lower on phones */
@media (max-width: 860px) {
  .hero__sub { font-size: 0.95rem; line-height: 1.45; }
  .hero__julia { height: 50svh; }
}
@media (max-width: 860px) and (max-height: 720px) { .hero__julia { height: 38svh; } .hero__sub { font-size: 0.88rem; } }
.prog__week { grid-template-columns: repeat(8, 1fr); }
.lesson__img--ph { display: grid; place-items: center; border: 1.5px dashed rgb(18 18 18 / 0.3); background: #F4F4F2; }
.lesson__ph { font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--soft); }
.lesson__n { font-family: var(--sc-font-mono); font-weight: 500; color: var(--acc); margin-right: 6px; letter-spacing: -0.02em; }