/* VLPremier Pro · how it works layout + page components. DESIGN PROTOTYPE ONLY.
   Page components: .crop (screenshot crop, same rule as features.css), .ex (Example / Sample marker), kbd keycaps, .vrail. */

/* "Example" marker: dashed outline, mono. Marks fictional or sample numbers. */
.ex { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px dashed var(--line-strong); border-radius: 4px; font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); font: 500 var(--fs-meta)/1 var(--font-mono); color: var(--text); }

/* hero */
.h-hero { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 64px; overflow: clip; }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.h-hero h1 { margin-bottom: 22px; }
.h-hero h1 .hi { display: block; color: var(--accent-bright); }
.sample { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.sample h2 { margin-top: 14px; font-size: 22px; }
.sample > p { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.sample .kv { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sample .small { margin-top: 16px; font: 400 var(--fs-meta)/1.5 var(--font-mono); }

/* vertical timecode rail */
.h-steps { padding-top: 24px; }
.vrail { list-style: none; margin: 0; padding: 0; position: relative; }
.vrail::before { content: ""; position: absolute; left: 39px; top: 14px; bottom: 14px; width: 1px; background: var(--line-strong); }
.vstep { display: grid; grid-template-columns: 80px minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.vstep + .vstep { margin-top: clamp(72px, 8vw, 112px); }
.vt { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; justify-content: center; }
.vt .t { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-ctl); background: var(--bg); border: 1px solid var(--line-strong); font: 500 var(--fs-label)/1 var(--font-mono); color: var(--accent-bright); }
.vcopy { padding-top: 2px; }
.vcopy h2 { font-size: var(--fs-h3); }
.vcopy > p:not([class]) { margin-top: 14px; color: var(--muted); max-width: 46ch; }
.keys { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.keys span { display: inline-flex; align-items: center; gap: 4px; }
.keys kbd:last-of-type { margin-right: 6px; }
.took { display: flex; gap: 10px; align-items: baseline; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 46ch; }
.took .ex { flex: none; transform: translateY(-1px); }
.keys-note { margin: 56px 0 0 104px; font: 400 var(--fs-meta)/1.5 var(--font-mono); color: var(--muted); max-width: 70ch; }

@media (max-width: 1180px) {
  .h-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sample { max-width: 520px; }
}
@media (max-width: 960px) {
  .vrail::before { left: 7px; }
  .vstep { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-left: 32px; }
  .vt { position: relative; top: auto; justify-content: flex-start; margin-left: -32px; }
  .vt::before { content: ""; position: absolute; left: 3px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .vt .t { margin-left: 32px; }
  .keys-note { margin-left: 32px; }
}
@media (max-width: 640px) {
  .h-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .sample { padding: 20px; }
  .sample .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sample .kv dd + dt { margin-top: 10px; }
}