/* Bee Video Editor product page. Reuses the site tokens from /style.css (dark theme, Jost + Inter). */

.pv { padding-top: 80px; /* fixed header */ }

.pv h1 { font-size: clamp(2.2rem, 6vw, 3.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: var(--spacing-md) 0 var(--spacing-lg); text-wrap: balance; }
.pv h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.pv h3 { font-size: var(--font-size-xl); font-weight: 600; line-height: 1.2; }

.pv-hero { padding: var(--spacing-3xl) 0; }
.pv-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: center; }
.pv-hero-grid > * { min-width: 0; }
.pv-mark { width: 56px; height: 56px; display: block; margin-bottom: var(--spacing-lg); }
.pv-lead { font-size: var(--font-size-lg); color: var(--text-secondary); max-width: 36ch; }
.pv-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-xl); }
.pv-small { margin-top: var(--spacing-lg); color: var(--text-muted); font-size: var(--font-size-sm); }

/* Timeline mock: the one "editing bay" block on the page */
.pv-bay { background: #0f0f0f; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); padding: var(--spacing-md); font: 400 0.78rem/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--text-secondary); }
.pv-bay-top { display: flex; justify-content: space-between; gap: var(--spacing-md); color: var(--text-muted); padding-bottom: 0.7rem; }
.pv-track { display: grid; grid-template-columns: 4.4rem 1fr; gap: 0.6rem; align-items: center; margin-top: 0.45rem; }
.pv-track > span { color: var(--text-muted); }
.pv-lane { position: relative; height: 34px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; }
.pv-wave { height: 46px; background: none; display: flex; align-items: center; gap: 2px; }
.pv-wave i { flex: 1; min-width: 2px; background: var(--color-accent); border-radius: 2px; }
.pv-wave i.pv-cut { background: rgba(255, 255, 255, 0.14); }
.pv-blk { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; padding: 0 0.45rem; border-radius: 3px; font-size: 0.7rem; white-space: nowrap; overflow: hidden; }
.pv-cap { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pv-fx { background: var(--color-accent); color: var(--color-primary); font-weight: 500; }
.pv-sfx { background: #7bd389; color: #10240f; }
.pv-legend { margin-top: 0.8rem; color: var(--text-muted); }
.pv-legend b { color: var(--color-accent); font-weight: 500; }

/* Sections */
.pv-section { padding: var(--spacing-3xl) 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pv-head { display: flex; flex-direction: column; gap: 0.7rem; max-width: 44rem; margin-bottom: var(--spacing-2xl); }
.pv-head p:not(.section-tag) { color: var(--text-secondary); font-size: var(--font-size-lg); }
.pv-k { display: block; margin-bottom: 0.4rem; color: var(--color-accent); font: 600 var(--font-size-xs)/1 var(--font-family-display); letter-spacing: 0.1em; text-transform: uppercase; }

.pv-features { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pv-features li { padding: var(--spacing-lg) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pv-features p, .pv-flow p { color: var(--text-secondary); margin-top: 0.4rem; max-width: 40ch; }

.pv-flow { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); counter-reset: none; }
.pv-flow li { background: var(--color-secondary); border-radius: var(--radius-md); padding: var(--spacing-lg); }

/* Plans */
.pv-plans { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
.pv-plan { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-xl); background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); min-width: 0; }
.pv-rec { border-color: var(--color-accent); }
.pv-tag { align-self: flex-start; background: var(--color-accent); color: var(--color-primary); font: 700 var(--font-size-xs)/1 var(--font-family-display); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); }
.pv-price { font: 800 3rem/1 var(--font-family-display); letter-spacing: -0.03em; }
.pv-price small { display: block; margin-top: 0.5rem; font: 400 var(--font-size-sm)/1.4 var(--font-family); letter-spacing: 0; color: var(--text-muted); }
.pv-plan ul { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.95rem; }
.pv-plan li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.5rem; }
.pv-plan li::before { content: "✓"; color: var(--color-accent); font-weight: 700; }
.pv-plan li.no { color: var(--text-muted); }
.pv-plan li.no::before { content: "–"; color: var(--text-muted); }
.pv-plan .btn { margin-top: auto; }
.pv-plan .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.pv-note { margin-top: var(--spacing-lg); color: var(--text-secondary); }

/* Requirements */
.pv-reqs { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); }
.pv-reqs dt { font: 600 var(--font-size-lg) var(--font-family-display); margin-bottom: 0.3rem; padding-top: var(--spacing-md); border-top: 2px solid var(--color-accent); }
.pv-reqs dd { color: var(--text-secondary); }

/* FAQ */
.pv-faq { max-width: 52rem; margin: 0 auto; }
.pv-faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding: var(--spacing-md) 0; }
.pv-faq summary { cursor: pointer; font: 600 var(--font-size-lg) var(--font-family-display); list-style: none; display: flex; justify-content: space-between; gap: var(--spacing-md); }
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: "+"; color: var(--color-accent); }
.pv-faq details[open] summary::after { content: "–"; }
.pv-faq details p { margin-top: 0.6rem; color: var(--text-secondary); max-width: 60ch; }

/* Keyboard focus (the site's own components keep their styles) */
.pv a:focus-visible, .pv summary:focus-visible, .pv button:focus-visible,
.nav-dropdown-toggle:focus-visible, .nav-submenu a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

@media (min-width: 640px) {
    .pv-features { grid-template-columns: 1fr 1fr; column-gap: var(--spacing-2xl); }
    .pv-reqs { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 769px) {
    .pv-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-3xl); }
    .pv-features { grid-template-columns: repeat(3, 1fr); }
    .pv-flow { grid-template-columns: repeat(3, 1fr); }
    .pv-plans { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .pv * { transition: none !important; }
}

/* Timeline block positions (classes, not style attributes: the CSP blocks inline styles) */
.pv-x0-30 { left: 0%; width: 30%; }
.pv-x32-24 { left: 32%; width: 24%; }
.pv-x34-8 { left: 34%; width: 8%; }
.pv-x34-22 { left: 34%; width: 22%; }
.pv-x58-40 { left: 58%; width: 40%; }
.pv-x72-9 { left: 72%; width: 9%; }
.pv-x72-26 { left: 72%; width: 26%; }