/* Public Smart Checkout page only. Every rule is scoped to .checkout-feature-page. The page base, hero, type scale,
   step rail, dark band, screenshot frames, lightbox, reveals and related/FAQ/CTA come from feature-story.css. */

/* The tablet photo (Check-in's first hero) sits where the kit's default placement expects it. Its backdrop is a studio
   gradient, #151615 at the top to #a8a9b1 at the bottom: on wide screens the band repeats it, darkened behind the copy
   so the white text stays above 7:1; on narrow screens the photo's top edge fades into the band. */
@media(min-width:1001px){
  .checkout-feature-page .story-hero{background:linear-gradient(to right,#222 34%,rgba(34,34,34,.9) 40%,rgba(34,34,34,.6) 47%,rgba(34,34,34,.25) 55%,rgba(34,34,34,0) 64%),linear-gradient(#151615,#a8a9b1) #222;}
}
@media(max-width:1000px){
  .checkout-feature-page .story-hero__art{-webkit-mask-image:linear-gradient(transparent,#000 20%);mask-image:linear-gradient(transparent,#000 20%);}
}

.checkout-feature-page :is(.cof-clip,.cof-flow,.cof-details){padding:var(--story-section-space) 0;}
.checkout-feature-page .cof-clip{padding-bottom:0;scroll-margin-top:80px;}

/* Two panels side by side, each copy above its screenshot at the panel's own width. */
.checkout-feature-page .cof-details{border-top:1px solid var(--story-line);}
.checkout-feature-page .cof-details__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,88px);align-items:start;}
.checkout-feature-page .cof-detail{display:grid;gap:28px;justify-items:start;}
.checkout-feature-page .cof-detail h3{margin:0 0 12px;font-size:var(--story-text-h3);font-weight:600;line-height:1.5;letter-spacing:-.02em;}
.checkout-feature-page .cof-detail p{margin:0;max-width:var(--story-measure);color:var(--story-body-muted);font-size:var(--story-text-body);}

/* After you close: what the close updates (the kit's .story-facts), beside the ticket in Ticket History. */
.checkout-feature-page .cof-close__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,88px);align-items:center;}
.checkout-feature-page .cof-visual--history{width:min(100%,460px);}

@media(max-width:1000px){
  .checkout-feature-page .cof-close__grid{grid-template-columns:1fr;}
  .checkout-feature-page .cof-visual--history{justify-self:start;}
}
@media(max-width:760px){
  .checkout-feature-page .cof-details__grid{grid-template-columns:1fr;}
}

/* Every checkout dialog has its close button in the top corner, so the zoom icon sits in the bottom one. */
.checkout-feature-page .feature-visual__zoom-icon{top:auto;bottom:12px;}