/* Paid-search landing pages (make-how-to-videos, sop-video-maker, customer-support-videos). Extends site.css. */

/* Fallback fonts sized like Sora and Inter, so headlines don't re-wrap (and shift the page) when the web fonts arrive. */
@font-face { font-family: "Sora fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 105.5%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Inter fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 106%; ascent-override: 91%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Inter fallback"; font-weight: 500 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99%; ascent-override: 97%; descent-override: 24%; line-gap-override: 0%; }
:root { --display: "Sora", "Sora fallback", sans-serif; --body: "Inter", "Inter fallback", sans-serif; }
.lp-video { margin: 0; min-width: 0; }
.lp-video .frame { background: linear-gradient(140deg, rgba(139, 108, 255, .55), rgba(34, 211, 238, .25) 40%, rgba(255, 255, 255, .06) 70%); border-radius: 22px; padding: 10px; box-shadow: 0 60px 140px -50px rgba(124, 92, 255, .7); }
.lp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
.lp-video figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }
.lp-benefits { display: grid; gap: 14px; }
@media (min-width: 760px) { .lp-benefits { grid-template-columns: 1fr 1fr; } }
.lp-benefits .feature h3 { font-size: 19px; }

/* Comparison table: scrolls sideways on small screens instead of squashing */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.cmp caption { text-align: left; padding: 16px 18px 0; color: var(--muted); font-size: 14px; caption-side: bottom; padding-bottom: 16px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 600 15px/1.3 var(--display); background: var(--surface-2); }
.cmp tbody th { font-weight: 600; width: 22%; }
.cmp td { color: var(--muted); }
.cmp .us { background: var(--accent-soft); color: var(--ink); }
.cmp thead .us { color: var(--accent); }
.lp-fair { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 860px) { .lp-fair { grid-template-columns: repeat(3, 1fr); } }
.lp-fair .card h3 { font-size: 17px; }
.lp-fair .card p { font-size: 15px; }
.lp-sources { margin-top: 16px; font-size: 13px; color: var(--muted); }