/* ==================================================================
   FLYER_AB (tools/flyer_ab), 2026-10-13. Hero A/B test on top of FLYER_V2.
   Both heroes are in index.html; the inline script at the top of <head>
   puts ab-hero-video or ab-hero-photo on <html> before the first paint.
   No class (no JavaScript): the photo hero. The video's source is set by
   an inline script (video.js), so without JavaScript it could not play;
   the photo hero works without any.
   NOT hero-photo: landing.css styles .hero-photo img (the pre-video
   hero's <picture>), which would catch every image on the page.
   ================================================================== */
html:not(.ab-hero-video) .vhero{display:none}
html.ab-hero-video .ab-photo{display:none}

/* Phones: FLYER_V2 hides the name band (the Cruiser's top) and pulls the
   video hero up under the sale strip. The photo hero is the pre-video
   page, which kept the band, so the band comes back with it. */
@media (max-width:600px){
  html:not(.ab-hero-video) .masthead{display:flex}   /* landing.css: flex, centred */
}

/* The photo hero's primary button in FLYER_V2's buy-button look
   (extra.css: the Seasoned Cruiser's block): the warm red gradient, white
   Lora 700, the light warm edge, the red glow, a 2px lift on hover, no
   arrow. "Read the math" stays the page's ghost button. */
.hero .btn-row.top-cta .btn:not(.ghost){
  background:#8C2818;background:linear-gradient(180deg,#C45E47,#8C2818);color:#fff;
  font-family:"Lora",Georgia,serif;font-weight:700;font-size:20px;line-height:1.2;
  text-transform:none;letter-spacing:0;padding:15px 24px 14px;
  border:1px solid #D0836C;border-radius:10px;box-shadow:0 10px 30px rgba(140,40,24,.5);
  text-shadow:none;filter:none;transition:transform .15s ease,box-shadow .15s ease;
}
.hero .btn-row.top-cta .btn:not(.ghost):hover,
.hero .btn-row.top-cta .btn:not(.ghost):focus-visible,
.hero .btn-row.top-cta .btn:not(.ghost):active{
  background:linear-gradient(180deg,#C45E47,#8C2818);color:#fff;border:1px solid #D0836C;
  transform:translateY(-2px);box-shadow:0 14px 38px rgba(140,40,24,.6);
}
.hero .btn-row.top-cta .btn:not(.ghost)::after{content:none}
@media (prefers-reduced-motion:reduce){
  .hero .btn-row.top-cta .btn:not(.ghost){transition:none}
  .hero .btn-row.top-cta .btn:not(.ghost):hover,
  .hero .btn-row.top-cta .btn:not(.ghost):active{transform:none}
}