/* VLPremier Pro · download page layout + page components. DESIGN PROTOTYPE ONLY.
   Page components: .ex (Sample marker, same rule as how-it-works.css), .dmg window, .reqs, .isteps, .integ, .rn. */
.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; }
.sec-h { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 28px; }

/* hero */
.d-hero { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 80px; overflow: clip; }
.d-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.d-hero h1 { margin-top: 18px; }
.d-ver { margin-top: 20px; font: 400 var(--fs-label)/1.5 var(--font-mono); color: var(--muted); }
.d-ver b { color: var(--text); font-weight: 500; }
.d-actions { margin-top: 32px; }
.d-locked { border-style: dashed; }
.lock { position: relative; width: 12px; height: 9px; margin-top: 5px; border-radius: 2px; background: currentColor; }
.lock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 8px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.d-note { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); max-width: 52ch; }
.d-notify { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 480px; }
.d-notify .row { display: flex; gap: 8px; }
.d-notify .input { flex: 1; min-width: 0; }

/* disk-image window (real app icon) */
.dmg { border: 1px solid #3a3a3a; border-radius: var(--r-panel); background: var(--panel); overflow: hidden; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.dmg-bar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel-bar); border-bottom: 1px solid var(--panel-line); font: 400 var(--fs-micro)/1 var(--font-mono); color: #9a9a9a; }
.dmg-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3d3d3d; }
.dmg-bar span { margin-inline: auto; }
.dmg-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px); background: radial-gradient(380px 200px at 50% 40%, rgb(45 140 235 / .1), transparent 70%), var(--panel); }
.dmg-item { display: grid; justify-items: center; gap: 12px; font: 500 13px/1.3 var(--font-display); color: #e6e6e6; text-align: center; }
.dmg-item img { width: clamp(72px, 9vw, 112px); height: auto; border-radius: 22%; }
.folder { position: relative; width: clamp(80px, 9.5vw, 116px); aspect-ratio: 1.25; border-radius: 8px; background: linear-gradient(#5d9cf0, #3a78d6); }
.folder::before { content: ""; position: absolute; left: 6%; top: -8%; width: 38%; height: 18%; border-radius: 6px 6px 0 0; background: #4d8ae6; }
.folder::after { content: ""; position: absolute; left: 50%; top: 52%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgb(255 255 255 / .55); border-radius: 50%; }
.dmg-arrow { width: clamp(48px, 6vw, 88px); height: 2px; background: repeating-linear-gradient(90deg, #8f8f8f 0 6px, transparent 6px 11px); position: relative; }
.dmg-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 10px solid #8f8f8f; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.dmg figcaption { padding: 10px 12px; border-top: 1px solid var(--panel-line); font: 400 var(--fs-micro)/1.3 var(--font-mono); color: var(--panel-text); text-align: center; }

/* requirements */
.d-req { padding-top: 32px; }
.reqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-strong); }
.reqs > div { padding: 20px 20px 24px 0; }
.reqs > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.reqs dt { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.reqs dd { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.reqs dd b { display: block; margin-bottom: 6px; font: 800 22px/1.15 var(--font-display); color: var(--text); }
.reqs .unsup dd b { color: var(--muted); }

/* install steps + verify */
.d-two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.isteps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.isteps li { counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.isteps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 500 var(--fs-label)/1.9 var(--font-mono); color: var(--accent-bright); }
.isteps h3 { font-size: 19px; }
.isteps p { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.integ { margin: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.integ div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 18px; }
.integ div + div { border-top: 1px solid var(--line); }
.integ dt { font: 500 var(--fs-meta)/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.integ dd { margin: 0; font: 400 14px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.integ .later { color: var(--muted); font-style: italic; }
.integ-note { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 52ch; }

/* release notes (Sample) */
.rn { max-width: 760px; padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--r-panel); }
.rn header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; font: 500 var(--fs-label)/1 var(--font-mono); color: var(--muted); }
.rn header b { font-weight: 500; }
.rn h2 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 30px); }
.rn ul { list-style: none; margin: 18px 0 0; padding: 0; }
.rn li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.rn li b { font: 500 var(--fs-meta)/1.9 var(--font-mono); color: var(--accent-bright); }
.rn-foot { margin-top: 18px; font-size: 14px; color: var(--muted); }

@media (max-width: 1180px) {
  .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reqs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .reqs > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .d-hero-grid, .d-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .d-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 48px; }
  .d-actions .btn { flex: 1 1 100%; }
  .d-notify .row { flex-direction: column; }
  .reqs { grid-template-columns: minmax(0, 1fr); }
  .reqs > div, .reqs > div + div { padding: 18px 0; border-left: 0; }
  .reqs > div + div { border-top: 1px solid var(--line); }
  .integ div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rn { padding: 20px; }
}