/* Property video preview pages. Sits on top of the ca-elite.com stylesheet. */

/* Hero is shorter here: the film is the point, not the headline. */
.vhero{padding-bottom:40px}
@media (min-width:720px){.vhero{padding-bottom:56px}}
.vhero h1{margin-bottom:16px}
.vhero .hero-sub{margin-bottom:0}

/* The film straddles the white hero and the black band below it. */
.film-band{
  background:linear-gradient(to bottom,var(--white) 0,var(--white) 38%,var(--black) 38%,var(--black) 100%);
  padding:0 0 48px;
}
@media (min-width:720px){.film-band{padding-bottom:72px}}
.film-band .container{max-width:1040px}
@media (max-width:719px){.film-band .container{padding:0 12px}}
.film{
  position:relative;border-radius:12px;overflow:hidden;background:var(--black);
  box-shadow:0 30px 60px -24px rgba(10,10,10,.45),0 0 0 1px var(--rule-dark);
}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--black)}
.film-note{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;font-size:13px;line-height:1.5;color:var(--mid-dark);
}
.film-note strong{color:var(--white);font-weight:600}

/* Vertical cut: phone mockup holds a video instead of an iframe. */
.vcut{align-items:center}
.vcut .section-sub{margin-bottom:24px}
.vcut .mockup-phone{max-width:280px;margin:0 auto}
.vcut .mockup-phone video{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:28px;background:var(--black);
}
.vcut-list{list-style:none;display:grid;gap:12px}
.vcut-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--mid);line-height:1.5}
.tick{flex-shrink:0;width:16px;height:16px;margin-top:3px}

/* Offer */
.offer-head{max-width:640px}
.price-card{display:flex;flex-direction:column}
.price-card .pc-cta{margin-top:auto;padding-top:24px}
.price-card.featured::before{content:'SAVE $180'}
.pc-feat .tick{margin-top:2px}
.offer-more{margin-top:24px;font-size:14px;color:var(--mid-dark)}
.offer-more a{color:var(--white);text-underline-offset:3px}

/* Three steps, not four. */
.steps.steps-3{margin-top:48px}
@media (min-width:720px){.steps.steps-3{grid-template-columns:repeat(3,1fr)}}

/* Keyboard focus, matching the red accent. */
a:focus-visible,button:focus-visible,video:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Last CTA closes the offer section. */
.final-cta{margin-top:40px;text-align:center}

/* Nav CTA keeps its lit look on hover (style.css turns it deep red). */
.nav-cta a.btn-lit{padding:8px 16px;font-weight:600}
.nav-cta a.btn-lit:hover{background:linear-gradient(var(--btn-c-light),var(--btn-c));color:var(--btn-ink)}
@media (max-width:720px){.nav-cta a.btn-lit{display:block;text-align:center;padding:12px}}

/* Our own SVG tick replaces the text tick from style.css. */
.pc-feat::before{content:none}

/* Sample pages: free-spec offer line above the price cards. */
.offer-free{margin:24px 0 32px;max-width:640px;padding:14px 18px;border-left:3px solid var(--lime,#D4FF2A);background:rgba(255,255,255,.04);font-size:15px;line-height:1.6;color:var(--white)}