/* Your Video — page styles. Only what site.css lacks; tokens via var(--…). */

/* Hero: the product trio doubles as jump links to each checklist. */
.mmp-your-video-pick .mm-product { text-decoration: none; color: inherit; cursor: pointer; }
.mmp-your-video-pick .mm-product small { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.mmp-your-video-pick .mm-product--green small { color: var(--ink); }
.mmp-your-video-pick .mm-product:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

/* Checklist cards: an equipment tile beside a large tick list. */
.mmp-your-video-stack { display: grid; gap: 24px; }
.mmp-your-video-check {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 32px); align-items: start;
  padding: 28px; border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.mmp-your-video-check--sky { background: var(--sky); box-shadow: none; }
.mmp-your-video-check--green { background: var(--green); box-shadow: none; }
.mmp-your-video-check--white { background: var(--off); box-shadow: none; }
.mmp-your-video-tile { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 28px 20px 24px; border-radius: var(--r-tile); background: var(--paper); }
.mmp-your-video-tile img { width: 100%; max-width: 260px; height: 220px; object-fit: contain; }
.mmp-your-video-tile h3 { font-size: clamp(26px, 2.4vw, 32px); }
@media (min-width: 901px) { .mmp-your-video-tile { position: sticky; top: calc(var(--header-h) + 24px); } }

.mmp-your-video-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: mmp-item; }
.mmp-your-video-list li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 16px 20px; border-radius: var(--r-panel); background: var(--paper); }
.mmp-your-video-check--white .mmp-your-video-list li { background: var(--paper); box-shadow: var(--shadow-card); }
.mmp-your-video-list__tick { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: var(--ink); display: grid; place-items: center; }
.mmp-your-video-list__tick .mm-ico { width: 26px; height: 26px; }
.mmp-your-video-list li > div { display: grid; gap: 4px; min-height: 48px; align-content: center; }
.mmp-your-video-list b { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.mmp-your-video-list span:not(.mmp-your-video-list__tick) { font-size: 16px; color: var(--muted); font-weight: 600; }
.mmp-your-video-next { margin-top: clamp(28px, 3vw, 40px); }

@media (max-width: 900px) {
  .mmp-your-video-check { grid-template-columns: 1fr; padding: 22px; }
  .mmp-your-video-tile { padding: 20px 16px 18px; }
  .mmp-your-video-tile img { height: 160px; }
}
@media (max-width: 480px) {
  .mmp-your-video-check { padding: 16px; }
  .mmp-your-video-list li { grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; }
  .mmp-your-video-list__tick { width: 40px; height: 40px; }
  .mmp-your-video-list__tick .mm-ico { width: 22px; height: 22px; }
  .mmp-your-video-list b { font-size: 17px; }
}

/* "What happens next" steps are an ordered list; strip the list chrome. */
.mmp-your-video-steps { list-style: none; margin: 0; padding: 0; }
.mmp-your-video-steps .mm-step { margin: 0; }
.mmp-your-video-steps .mm-step p + p { margin-top: 6px; }

/* "Haven't requested yet?" lines under a section: one row, centred like the tier foot. */
#tips .mm-tiers-foot, #send .mm-tiers-foot { margin-top: clamp(28px, 3vw, 40px); }
#send .mm-tiers-foot .mm-link { white-space: normal; }