html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, sans-serif; }
.glass-nav { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid #e2e8f0; }
.instructions-main { max-width: 1152px; margin: auto; padding: 112px 24px 56px; }
.instructions-heading { margin-bottom: 32px; animation: appear .5s ease both; }
.instructions-brand { color: #9333ea; font-weight: 800; margin-bottom: 8px; }
.instructions-heading h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; margin: 0 0 16px; }
.instructions-heading > p:last-child { color: #64748b; font-size: 18px; }
.instructions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.instruction-card { display: block; color: #0f172a; text-decoration: none; background: white; border-radius: 24px; overflow: hidden; border: 1px solid #e2e8f0; transition: transform .2s ease, box-shadow .2s ease; animation: appear .6s .08s ease both; }
.instruction-card:nth-child(2) { animation-delay: .16s; }
.instruction-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px #0f172a14; }
.instruction-card:focus-visible { outline: 3px solid #9333ea; outline-offset: 5px; }
.instruction-photo { height: clamp(200px, 32vh, 320px); overflow: hidden; background: #e2e8f0; }
.instruction-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.instruction-card:hover img { transform: scale(1.025); }
.instruction-copy { padding: 28px; }
.instruction-copy h2 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.instruction-copy p { color: #64748b; line-height: 1.6; margin: 0; }
.instruction-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; color: #9333ea; font-weight: 700; }
.instruction-cta svg { width: 22px; height: 22px; }
.instructions-footer { max-width: 1152px; margin: auto; padding: 0 24px 24px; color: #64748b; font-size: 13px; }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .instructions-main { padding: 96px 16px 32px; }
  .instructions-grid { grid-template-columns: 1fr; gap: 20px; }
  .instructions-heading { margin-bottom: 24px; }
  .instructions-heading > p:last-child { font-size: 16px; }
  .instruction-photo { height: auto; aspect-ratio: 16 / 9; }
  .instruction-copy { padding: 22px; }
  .instruction-copy h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .instructions-heading, .instruction-card { animation: none; }
  .instruction-card, .instruction-photo img { transition: none; }
}