/* Booked By Search — VSL-first hero layout v1 — 2026-09-12
   Goal: make the VSL visible immediately, especially on mobile, while keeping
   the existing 4:3 Vidalytics canvas fully visible (captions included). */

.hero.hero-vsl-first{
  position:relative;
  padding-top:116px;
  padding-bottom:68px;
  text-align:left;
}

.hero-vsl-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(540px,1.05fr);
  gap:40px;
  align-items:start;
  width:100%;
}

.hero-vsl-copy{
  min-width:0;
  padding-top:6px;
}

.hero-vsl-copy .availability-pill{
  margin:0;
}

.hero-vsl-copy h1{
  max-width:570px;
  margin:22px 0 18px;
  font-size:clamp(46px,4.4vw,64px);
  line-height:.96;
  letter-spacing:-.06em;
  text-align:left;
}

.hero-vsl-copy h1 .hero-title-desktop-break{
  display:none !important;
}

.hero-vsl-copy .hero-lead{
  max-width:550px;
  margin:0;
  font-size:clamp(16px,1.45vw,19px);
  line-height:1.55;
  text-align:left;
}

.hero-vsl-media{
  min-width:0;
  align-self:center;
}

.hero-vsl-media .watch-label{
  margin:0 0 10px;
  text-align:center;
}

.hero-vsl-media .video-stage{
  width:100%;
  max-width:none;
  margin:0;
}

.hero-vsl-media .video-chrome{
  border-radius:24px;
  box-shadow:0 36px 90px rgba(0,0,0,.46),0 0 0 6px rgba(71,125,255,.032);
}

.hero-vsl-media .video-chrome:before{
  border-radius:23px;
}

.hero-vsl-media .video-topbar{
  height:42px;
}

.hero-vsl-media .video-bottom{
  height:34px;
  justify-content:center;
}

/* Support content now lives BELOW the VSL. Desktop aligns the guarantee under
   the copy and the four system components directly under the video column. */
.hero-vsl-support{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(540px,1.05fr);
  gap:40px;
  align-items:center;
  width:100%;
  margin:24px auto 0;
}

.hero-vsl-support .hero-guarantee-anchor-v26{
  position:static !important;
  inset:auto !important;
  width:100% !important;
  margin:0 !important;
  justify-content:flex-start !important;
  pointer-events:auto;
}

.hero-vsl-support .hero-guarantee-badge-v23{
  width:100%;
  max-width:390px;
  margin:0;
}

.hero-vsl-support .system-pills{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  margin:0;
}

.hero-vsl-support .system-pills span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 12px;
  text-align:center;
}

.hero-vsl-support .system-pills i{
  display:none;
}

.hero.hero-vsl-first > .hero-guarantee-line-v23{
  margin-top:15px;
  text-align:center;
}

.hero.hero-vsl-first > .hero-cta,
.hero.hero-vsl-first > .hero-proof-strip{
  text-align:center;
}

@media(max-width:1100px){
  .hero-vsl-grid,
  .hero-vsl-support{
    grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);
    gap:34px;
  }
  .hero-vsl-copy h1{
    font-size:clamp(44px,4.8vw,58px);
  }
}

/* Tablet / small laptop: stack the message and VSL, but keep the video early. */
@media(max-width:980px){
  .hero.hero-vsl-first{
    padding-top:105px;
    text-align:center;
  }
  .hero-vsl-grid{
    display:block;
    max-width:790px;
    margin:0 auto;
  }
  .hero-vsl-copy{
    padding-top:0;
    text-align:center;
  }
  .hero-vsl-copy .availability-pill{
    margin:0 auto;
  }
  .hero-vsl-copy h1{
    max-width:760px;
    margin:20px auto 16px;
    font-size:clamp(46px,7.5vw,68px);
    text-align:center;
  }
  .hero-vsl-copy .hero-lead{
    max-width:670px;
    margin:0 auto;
    text-align:center;
  }
  .hero-vsl-media{
    margin-top:22px;
  }
  .hero-vsl-media .watch-label{
    margin-bottom:10px;
  }
  .hero-vsl-support{
    grid-template-columns:minmax(0,330px) minmax(0,1fr);
    gap:18px;
    max-width:790px;
    margin-top:18px;
  }
  .hero-vsl-support .hero-guarantee-badge-v23{
    max-width:none;
  }
}

/* Mobile: copy is deliberately compact so the actual VSL starts inside the
   first viewport on normal iPhones. */
@media(max-width:680px){
  .hero.hero-vsl-first{
    padding-top:78px;
    padding-bottom:46px;
  }

  .hero-vsl-grid{
    width:100%;
    max-width:none;
  }

  .hero-vsl-copy .availability-pill{
    padding:6px 10px;
    font-size:8px;
    letter-spacing:.095em;
  }

  .hero-vsl-copy .au-market-flag{
    font-size:14px;
  }

  .hero-vsl-copy h1{
    max-width:100%;
    margin:13px auto 10px;
    font-size:clamp(31px,9.8vw,38px);
    line-height:.98;
    letter-spacing:-.055em;
    text-align:center;
  }

  .hero-vsl-copy .hero-lead{
    max-width:350px;
    padding:0 4px;
    font-size:13.25px;
    line-height:1.42;
    text-align:center;
  }

  .hero-vsl-media{
    margin-top:13px;
  }

  .hero-vsl-media .watch-label{
    margin:0 auto 7px;
    font-size:8.5px;
    letter-spacing:.115em;
  }

  .hero-vsl-media .video-stage{
    width:calc(100% + 2px);
    margin-left:-1px;
  }

  .hero-vsl-media .video-aurora{
    inset:-8px 9%;
    filter:blur(30px);
    opacity:.16;
  }

  .hero-vsl-media .video-chrome{
    border-radius:17px;
    box-shadow:0 20px 46px rgba(0,0,0,.36),0 0 0 4px rgba(71,125,255,.028);
  }

  .hero-vsl-media .video-chrome:before{
    border-radius:16px;
  }

  .hero-vsl-media .video-topbar{
    height:29px;
    padding:0 10px;
  }

  .hero-vsl-media .browser-dots{
    gap:5px;
  }

  .hero-vsl-media .browser-dots span{
    width:5px;
    height:5px;
  }

  .hero-vsl-media .video-kicker{
    font-size:6.7px;
    letter-spacing:.12em;
  }

  .hero-vsl-media .video-time{
    font-size:6.2px;
  }

  .hero-vsl-media .video-frame{
    margin:0 4px;
    border-radius:11px;
  }

  .hero-vsl-media .video-bottom{
    height:24px;
    padding:0 10px;
    font-size:7px;
  }

  .hero-vsl-support{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:none;
    margin:12px auto 0;
  }

  .hero-vsl-support .hero-guarantee-anchor-v26{
    order:1;
    width:100% !important;
    margin:0 !important;
  }

  .hero-vsl-support .hero-guarantee-badge-v23{
    width:100%;
    max-width:none;
    padding:8px 9px;
    border-radius:13px;
  }

  .hero-vsl-support .hero-guarantee-star-v23{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:16px;
  }

  .hero-vsl-support .hero-guarantee-copy-v23 strong{
    font-size:9px;
  }

  .hero-vsl-support .hero-guarantee-copy-v23 small{
    font-size:7.2px;
    line-height:1.28;
  }

  .hero-vsl-support .system-pills{
    order:2;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:100%;
    margin:0;
  }

  .hero-vsl-support .system-pills span{
    min-height:34px;
    padding:6px 7px;
    font-size:8.4px;
    line-height:1.2;
    border-radius:999px;
  }

  .hero.hero-vsl-first > .hero-guarantee-line-v23{
    margin-top:10px;
    font-size:7.8px;
    line-height:1.4;
  }

  .hero.hero-vsl-first > .hero-cta{
    margin-top:18px;
  }

  .hero.hero-vsl-first > .hero-proof-strip{
    margin-top:28px;
  }
}

@media(max-width:370px){
  .hero.hero-vsl-first{padding-top:74px}
  .hero-vsl-copy h1{font-size:30px}
  .hero-vsl-copy .hero-lead{font-size:12.6px}
  .hero-vsl-support .system-pills span{font-size:7.8px}
}

/* Desktop polish v2 — keep the VSL-first mobile flow, but make wide screens
   feel like one intentional two-column hero instead of two stacked rows. */
.hero-desktop-actions{display:none}

@media(min-width:981px){
  .hero.hero-vsl-first{
    padding-top:108px;
    padding-bottom:54px;
  }

  .hero-vsl-grid{
    grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);
    gap:54px;
    align-items:start;
  }

  .hero-vsl-copy{
    padding-top:10px;
  }

  .hero-vsl-copy h1{
    max-width:610px;
    margin:24px 0 20px;
    font-size:clamp(48px,4.25vw,68px);
    line-height:.98;
  }

  .hero-vsl-copy .hero-lead{
    max-width:570px;
    font-size:clamp(16px,1.3vw,19px);
    line-height:1.52;
  }

  .hero-desktop-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    margin-top:34px;
    max-width:540px;
  }

  .hero-desktop-guarantee{
    width:100%;
    max-width:470px;
    margin:0;
  }

  .hero-desktop-cta{
    margin:0;
    min-width:220px;
  }

  .hero-desktop-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px 16px;
    color:rgba(221,232,255,.66);
    font-size:11px;
    line-height:1.35;
  }

  .hero-vsl-media{
    padding-top:0;
  }

  .hero-vsl-media .watch-label{
    margin-bottom:12px;
  }

  .hero-vsl-media .video-stage{
    max-width:720px;
    margin-left:auto;
  }

  .hero-vsl-support{
    display:block;
    width:auto;
    margin:18px 0 0 calc(44% + 27px);
  }

  .hero-vsl-support .hero-guarantee-anchor-v26{
    display:none !important;
  }

  .hero-vsl-support .system-pills{
    max-width:720px;
    margin-left:auto;
  }

  .hero.hero-vsl-first > .hero-guarantee-line-v23,
  .hero.hero-vsl-first > .hero-cta{
    display:none;
  }

  .hero.hero-vsl-first > .hero-proof-strip{
    margin-top:34px;
  }
}

@media(min-width:981px) and (max-width:1180px){
  .hero-vsl-grid{
    grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);
    gap:36px;
  }
  .hero-vsl-copy h1{font-size:clamp(44px,4.8vw,58px)}
  .hero-vsl-support{margin-left:calc(45% + 18px)}
  .hero-desktop-meta{font-size:10px}
}

/* Desktop premium hero v3 — matches approved visual direction, mobile untouched. */
.hero-desktop-market-pill,
.hero-desktop-watch{display:none}

@keyframes heroCtaGlowPulse{
  0%,100%{box-shadow:0 18px 44px rgba(52,136,255,.30),0 0 0 0 rgba(82,210,255,.22),0 0 34px rgba(108,92,255,.16),inset 0 1px 0 rgba(255,255,255,.78)}
  50%{box-shadow:0 24px 62px rgba(52,136,255,.44),0 0 0 10px rgba(82,210,255,0),0 0 52px rgba(143,92,255,.29),inset 0 1px 0 rgba(255,255,255,.86)}
}

@media(min-width:981px){
  .hero.hero-vsl-first{
    padding-top:102px;
    padding-bottom:58px;
  }

  .hero-vsl-grid{
    grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);
    gap:62px;
    align-items:start;
  }

  /* The market pill belongs to the media column on desktop so it never collides with the video. */
  .hero-vsl-copy > .availability-pill{display:none}
  .hero-desktop-market-pill{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    margin:0 0 20px 12px;
    padding:9px 16px;
    font-size:10px;
    letter-spacing:.145em;
    white-space:nowrap;
  }

  .hero-vsl-copy{
    padding-top:54px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  .hero-vsl-copy h1{
    max-width:640px;
    margin:0 0 23px;
    font-size:clamp(50px,4.1vw,70px);
    line-height:.985;
    letter-spacing:-.058em;
  }

  .hero-vsl-copy .hero-lead{
    max-width:585px;
    font-size:clamp(17px,1.28vw,20px);
    line-height:1.5;
    color:#b9c7de;
  }

  .hero-desktop-actions{
    width:100%;
    max-width:600px;
    margin-top:30px;
    gap:14px;
    align-items:center;
    text-align:center;
  }

  .hero-desktop-cta{
    width:min(100%,500px);
    min-height:74px;
    padding:0 34px;
    border-radius:22px;
    font-size:22px;
    font-weight:860;
    gap:22px;
    background:linear-gradient(100deg,#55dfff 0%,#4b9cff 34%,#716fff 68%,#b36cff 100%);
    border:1px solid rgba(185,226,255,.72);
    animation:heroCtaGlowPulse 2.8s ease-in-out infinite;
  }
  .hero-desktop-cta svg{width:27px;height:27px}
  .hero-desktop-cta:hover{animation-play-state:paused;transform:translateY(-3px) scale(1.015)}

  .hero-desktop-meta{
    width:100%;
    justify-content:center;
    gap:10px 23px;
    margin-top:1px;
    color:#d7e5fb;
    font-size:12px;
  }
  .hero-desktop-meta span::first-letter{color:#60ddff}

  .hero-desktop-watch{
    display:block;
    position:relative;
    width:100%;
    margin:19px 0 0;
    color:#8da8ce;
    font-size:10px;
    letter-spacing:.18em;
  }
  .hero-desktop-watch::before,
  .hero-desktop-watch::after{
    content:"";
    display:inline-block;
    vertical-align:middle;
    width:16%;
    height:1px;
    margin:0 14px;
    background:linear-gradient(90deg,transparent,rgba(87,167,255,.32));
  }
  .hero-desktop-watch::after{background:linear-gradient(90deg,rgba(87,167,255,.32),transparent)}

  .hero-media-watch{display:none}

  .hero-vsl-media{
    padding-top:0;
  }

  .hero-vsl-media .video-stage{
    max-width:735px;
    margin-left:auto;
  }

  .hero-vsl-media .video-chrome{
    border-radius:26px;
    box-shadow:0 34px 86px rgba(0,0,0,.45),0 0 50px rgba(65,132,255,.08),0 0 0 1px rgba(85,160,255,.06);
  }

  /* Cleaner 2x2 feature cards directly under video. */
  .hero-vsl-support{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);
    gap:62px;
    width:100%;
    margin:18px auto 0;
  }

  .hero-vsl-support .system-pills{
    grid-column:2;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:100%;
    max-width:735px;
    margin:0 0 0 auto;
  }

  .hero-vsl-support .system-pills span{
    justify-content:flex-start;
    gap:13px;
    min-height:64px;
    padding:12px 18px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(16,31,58,.78),rgba(9,19,39,.72));
    border:1px solid rgba(106,166,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.08);
    text-align:left;
  }
  .hero-vsl-support .system-pills span>b{
    flex:0 0 30px;
    width:30px;
    color:#5fdcff;
    font-size:23px;
    line-height:1;
    text-align:center;
    font-style:normal;
  }
  .hero-vsl-support .system-pills span>em{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
    font-style:normal;
  }
  .hero-vsl-support .system-pills strong{
    color:#eef6ff;
    font-size:12px;
    line-height:1.15;
  }
  .hero-vsl-support .system-pills small{
    display:block;
    color:#8fa5c7;
    font-size:9px;
    font-weight:500;
    line-height:1.25;
  }

  /* Keep exactly one guarantee box and let it anchor the full hero. */
  .hero-vsl-support .hero-guarantee-anchor-v26{
    display:flex !important;
    grid-column:1 / -1;
    grid-row:2;
    width:100% !important;
    margin:18px 0 0 !important;
    justify-content:center !important;
  }
  .hero-vsl-support .hero-guarantee-badge-v23{
    width:min(100%,1040px);
    max-width:none;
    min-height:70px;
    margin:0 auto;
    padding:13px 22px;
    border-radius:17px;
    background:linear-gradient(100deg,rgba(87,55,4,.28),rgba(17,24,43,.86) 24%,rgba(10,18,36,.9));
    border-color:rgba(246,181,48,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 40px rgba(0,0,0,.16),0 0 28px rgba(255,180,40,.04);
  }
  .hero-vsl-support .hero-guarantee-star-v23{
    width:45px;
    height:45px;
    flex-basis:45px;
    border-radius:13px;
    font-size:20px;
  }
  .hero-vsl-support .hero-guarantee-copy-v23 strong{font-size:13px;letter-spacing:.07em}
  .hero-vsl-support .hero-guarantee-copy-v23 small{font-size:9.5px;line-height:1.35}

  .hero.hero-vsl-first > .hero-guarantee-line-v23,
  .hero.hero-vsl-first > .hero-cta{display:none !important}

  .hero.hero-vsl-first > .hero-proof-strip{margin-top:42px}
}

@media(min-width:981px) and (max-width:1180px){
  .hero-vsl-grid,
  .hero-vsl-support{
    grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);
    gap:38px;
  }
  .hero-vsl-copy{padding-top:48px}
  .hero-vsl-copy h1{font-size:clamp(45px,4.7vw,58px)}
  .hero-desktop-market-pill{font-size:8.8px;padding:8px 12px;margin-left:6px}
  .hero-desktop-cta{width:min(100%,430px);min-height:68px;font-size:19px}
}

/* Mobile/tablet: preserve the version the user already approved. */
@media(max-width:980px){
  .hero-desktop-market-pill,
  .hero-desktop-watch{display:none !important}
  .hero-media-watch{display:block}
  .hero-vsl-support .system-pills span>b,
  .hero-vsl-support .system-pills span>em{display:contents}
  .hero-vsl-support .system-pills span small{display:none}
  .hero-vsl-support .system-pills span strong{font:inherit;color:inherit}
}

/* Final desktop polish v4 — approved layout: watch cue → compact guarantee → CTA. */
.hero-desktop-guarantee{display:none}

@media(min-width:981px){
  .hero-desktop-actions{
    margin-top:27px;
    gap:13px;
  }

  /* The video is to the right on desktop, so the cue points right. */
  .hero-desktop-watch{
    order:1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 2px;
    font-size:10px;
    line-height:1;
    letter-spacing:.19em;
    white-space:nowrap;
  }
  .hero-desktop-watch > span{
    order:2;
    margin-left:12px;
    color:#5fdcff;
    font-size:21px;
    line-height:1;
    letter-spacing:0;
    transform:translateY(-1px);
  }
  .hero-desktop-watch::before,
  .hero-desktop-watch::after{
    width:18%;
    margin:0 13px;
  }
  .hero-desktop-watch::before{order:0}
  .hero-desktop-watch::after{order:3}

  /* Compact desktop-only guarantee directly under the watch cue. */
  .hero-desktop-guarantee{
    order:2;
    display:flex;
    align-items:center;
    width:min(100%,520px);
    min-height:80px;
    padding:12px 17px;
    border:1px solid rgba(246,181,48,.63);
    border-radius:19px;
    background:linear-gradient(105deg,rgba(92,58,4,.30),rgba(17,24,43,.90) 30%,rgba(10,18,36,.92));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.14),0 0 26px rgba(255,180,40,.035);
    text-align:left;
  }
  .hero-desktop-guarantee .hero-guarantee-star-v23{
    width:48px;
    height:48px;
    flex:0 0 48px;
    margin-right:14px;
    border-radius:14px;
    font-size:21px;
  }
  .hero-desktop-guarantee .hero-guarantee-copy-v23{
    min-width:0;
  }
  .hero-desktop-guarantee .hero-guarantee-copy-v23 strong{
    display:block;
    margin-bottom:3px;
    color:#fff2c9;
    font-size:13px;
    line-height:1.12;
    letter-spacing:.055em;
  }
  .hero-desktop-guarantee .hero-guarantee-copy-v23 small{
    display:block;
    color:#cdbf9c;
    font-size:9.5px;
    line-height:1.34;
  }

  .hero-desktop-cta{
    order:3;
    margin-top:1px;
  }
  .hero-desktop-meta{
    order:4;
  }

  /* The same guarantee remains in its original location for mobile only. */
  .hero-vsl-support .hero-guarantee-anchor-v26{
    display:none !important;
  }

  /* With the full-width guarantee removed, proof metrics rise up cleanly. */
  .hero.hero-vsl-first > .hero-proof-strip{
    margin-top:30px;
  }
}

@media(min-width:981px) and (max-width:1180px){
  .hero-desktop-guarantee{width:min(100%,460px)}
  .hero-desktop-watch::before,
  .hero-desktop-watch::after{width:13%;margin-left:9px;margin-right:9px}
}

@media(max-width:980px){
  .hero-desktop-guarantee{display:none !important}
}