/* Video mockup pages (/try/pink-cuts/, /try/quizrush/) — loaded after shell.css. */
.vp-hero {
  max-width: 1200px; margin: 0 auto; padding: var(--space-block) var(--gutter) 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end;
}
.vp-eyebrow { margin: 0 0 1rem; color: var(--app-accent); font-size: var(--text-micro); }
.vp-hero h1 { text-wrap: balance; margin: 0; font-size: var(--text-display); line-height: 1.12; font-weight: 600; }
.vp-lead { margin: 0; color: var(--ink-soft); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem); }
.vp-meta { margin: 0.9rem 0 0; color: var(--ink-faint); font-size: var(--text-small); }

.vp-stage {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.25rem; align-items: start;
}
.vp-frame {
  position: relative; margin: 0; border-radius: var(--radius-l); overflow: hidden;
  background: var(--paper-sunk); border: 1px solid var(--hairline-strong);
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--app-accent) 55%, transparent), 0 2px 0 0 var(--hairline) inset;
}
.vp-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.vp-frame figcaption { padding: 0.6rem 1rem; color: var(--ink-faint); font-size: var(--text-micro); border-top: 1px solid var(--hairline); }

.vp-chapters { padding: 0.35rem; border: 1px solid var(--hairline); border-radius: var(--radius-m); background: var(--paper-raised); }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters-title { margin: 0.5rem 0.6rem 0.35rem; color: var(--ink-faint); font-size: var(--text-micro); font-weight: 400; }
.chapters button {
  width: 100%; display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem; align-items: baseline; text-align: left;
  padding: 0.55rem 0.6rem; border: 0; border-radius: var(--radius-s); background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: var(--text-small); line-height: 1.45;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.chapters button .mono { color: var(--ink-faint); font-size: var(--text-micro); }
.chapters button:hover { background: var(--paper-sunk); color: var(--ink); }
.chapters button[aria-current="true"] { background: color-mix(in srgb, var(--app-accent) 16%, transparent); color: var(--ink); }
.chapters button[aria-current="true"] .mono { color: var(--app-accent); }

.vp-section { max-width: 1200px; margin: 0 auto; padding: var(--space-section) var(--gutter) 0; }
.vp-section h2 { margin: 0 0 1.5rem; font-size: var(--text-display); line-height: 1.15; font-weight: 600; max-width: 26ch; text-wrap: balance; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline-strong); }
.steps li { padding: 1.25rem 1.5rem 1.25rem 0; }
.steps li + li { padding-left: 1.5rem; border-left: 1px solid var(--hairline); }
.steps .mono { color: var(--app-accent); font-size: var(--text-micro); }
.steps h3 { margin: 0.4rem 0 0.35rem; font-size: var(--text-title); line-height: 1.35; }
.steps p { margin: 0; color: var(--ink-soft); font-size: var(--text-small); }

.facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem; margin: 2rem 0 0; padding: 0; }
.facts div { display: grid; }
.facts dt { order: 2; color: var(--ink-faint); font-size: var(--text-small); }
.facts dd { order: 1; margin: 0; font-size: var(--text-title); font-weight: 600; font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.split .vp-frame video { aspect-ratio: 9 / 16; }
.split p { color: var(--ink-soft); max-width: 34rem; }

.vp-line {
  max-width: 1200px; margin: var(--space-section) auto 0; padding: 0 var(--gutter);
}
.vp-line-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-l);
  border: 1px solid color-mix(in srgb, var(--line-green) 35%, var(--hairline));
  background: radial-gradient(120% 140% at 100% 0%, rgba(6, 199, 85, 0.12), transparent 55%), var(--paper-raised);
}
.vp-line-card h2 { margin: 0 0 0.5rem; font-size: var(--text-title); }
.vp-line-card p { margin: 0; color: var(--ink-soft); font-size: var(--text-small); }
.vp-line-card [data-line-mode="link"] { display: grid; gap: 0.6rem; justify-items: start; }
.vp-line-card [data-line-mode="link"] .lq-button { min-height: 48px; padding: 0.6rem 1.4rem; font-size: var(--text-base); }

@media (max-width: 1023px) {
  .vp-stage { grid-template-columns: 1fr; }
  .chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}
@media (max-width: 760px) {
  .vp-hero { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
  .split { grid-template-columns: 1fr; }
  .split .vp-frame { max-width: 18rem; }
  .vp-line-card { grid-template-columns: 1fr; }
  .topbar .lq-button { padding: 0.4rem 0.8rem; }
}

/* Thai captions over the recording: solid backing so they read over busy UI */
video::cue { background: rgba(8, 9, 12, 0.78); color: #fff; font-family: var(--font-sans); line-height: 1.5; }