/* Public Online Booking page only. Every rule is scoped to .online-booking-feature-page. The page base, hero, type
   scale, step rail, dark band and its facts list, screenshot frames, lightbox, reveals and related/FAQ/CTA come from
   feature-story.css. */

/* Hero: the phone photo on a pure black studio backdrop, so on wide screens the band is black behind the photo and
   eases to the kit's #222 behind the copy; on narrow screens the photo's top edge fades into the band. */
@media(min-width:1001px){
  .online-booking-feature-page .story-hero{background:linear-gradient(to right,#222 34%,#000 60%);}
}
@media(max-width:1000px){
  .online-booking-feature-page .story-hero{background:linear-gradient(#222 40%,#000);}
  .online-booking-feature-page .story-hero__art{-webkit-mask-image:linear-gradient(transparent,#000 20%);mask-image:linear-gradient(transparent,#000 20%);}
}

.online-booking-feature-page :is(.obf-clip,.obf-flow,.obf-book){padding:var(--story-section-space) 0;}
.online-booking-feature-page .obf-clip{scroll-margin-top:80px;}
.online-booking-feature-page .obf-rules{max-width:880px;}

/* Copy beside a screenshot: the clip, and the book. */
.online-booking-feature-page .obf-split{display:grid;grid-template-columns:minmax(0,1fr) var(--obf-shot);gap:clamp(40px,7vw,100px);align-items:center;}
/* The screenshot column is the shot's own width (auto would size to the clip's intrinsic 780px). */
.online-booking-feature-page .obf-clip{--obf-shot:560px;}
.online-booking-feature-page .obf-book{--obf-shot:460px;}
.online-booking-feature-page .obf-body{margin:22px 0 0;max-width:var(--story-measure);color:var(--story-body-muted);font-size:var(--story-text-body);}
.online-booking-feature-page .obf-visual--texts{width:min(100%,460px);margin-top:32px;}

@media(max-width:760px){
  .online-booking-feature-page .obf-split{grid-template-columns:1fr;gap:28px;}
  .online-booking-feature-page .obf-visual--book{width:min(100%,460px);}
}