.instruction-hero {
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.7), transparent 25%), linear-gradient(135deg, #dbfff2, #f8efff 52%, #fff2d6);
}

.instruction-section { padding-top: 34px; }

.instruction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.instruction-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.video-frame { aspect-ratio: 16 / 9; background: #1e1930; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.instruction-copy { padding: 26px; }
.instruction-copy > span { color: var(--purple); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.instruction-copy h2 { margin: 10px 0 8px; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.instruction-copy p { margin: 0; color: var(--muted); }

.pdf-instruction {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, .55fr) 1.45fr;
  align-items: center;
  background: linear-gradient(135deg, #1e1735, #5b32a2);
  color: #fff;
}
.pdf-instruction .instruction-copy > span { color: #a9ffda; }
.pdf-instruction .instruction-copy p { color: rgba(255,255,255,.76); max-width: 720px; }
.pdf-instruction .button { margin-top: 22px; }
.pdf-mark { display: grid; place-items: center; min-height: 260px; font-family: var(--display); font-size: clamp(4rem, 10vw, 8rem); font-weight: 800; color: #19132b; background: linear-gradient(145deg, #a9ffda, #ffdc72); }

@media (max-width: 760px) {
  .instruction-grid { grid-template-columns: 1fr; }
  .pdf-instruction { grid-column: auto; grid-template-columns: 1fr; }
  .pdf-mark { min-height: 160px; }
}