/* ==========================================================
   HERO · HANDWRITTEN LINE + BREATHING ROOM
   "with" in Caveat (#400580), between
   "More booked appointments." and the black Aria pill.
   Bottom hero pills removed, so centre spacing is opened up.

   Advisor scribble near "Book a discovery call" (right of CTA):
   Caveat arrow PRE-FLIP (natural tip→Book, no scaleX); text BELOW.
   Arrow tip vertically level with Book button center (advisor-align).
   Purple #400580. Hidden on load; fade in after 3s.
   ========================================================== */
@font-face{
  font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/caveat-latin.woff2") format("woff2");
}
.hero-spot h1 .h1-hand{
  display:block;margin-top:6px;
  font-family:"Caveat","Segoe Print","Bradley Hand",cursive;
  font-weight:600;font-size:clamp(28px,2.6vw,38px);line-height:1.05;
  letter-spacing:0;text-transform:none;color:#400580;
  transform:rotate(-2deg);transform-origin:center;
}
/* vertical rhythm, hero centre */
.hero-spot .hs-centre{padding-top:28px;padding-bottom:24px}
.hero-spot h1 .h1-nudge{margin-top:8px}
.hero-spot h1 .h1-c{margin-top:22px}
.hero-spot .hs-sub{margin-top:14px}
.hero-spot .hs-strip{margin-top:20px}
.hero-spot .hs-ctas{margin-top:24px}

/* let the advisor scribble sit by the CTA without clipping;
   keep centre above the white L/R feathers so the callout
   isn't washed out */
.hero-spot{overflow:visible}
.hero-spot .hs-centre{overflow:visible;z-index:6}
.hero-spot .hs-ctas{overflow:visible}
.hero-spot .hs-strip{overflow:visible}

/* Book CTA + Caveat advisor callout (advisor-fix)
   Order is always: Get free video audit → Book a discovery call.
   DESKTOP: audit | Book side by side, both on the same centre line
   (no margin on the Book wrap, so Book never rides up). The arrow
   tip (SVG 22,10 of 96x70) is pinned to Book's vertical centre, just
   right of the button; Caveat text hangs below the arrow, to the right.
   Room for the hanging text is reserved on .hs-ctas, not the wrap.
   MOBILE: callout sits fully BELOW the stacked buttons with a clear
   gap; arrow tip points up at Book from below, never over its label. */
.hero-spot .hs-ctas{padding-bottom:36px}
.hs-ctas .btn-audit{order:1}
.hs-ctas .hs-book-wrap{order:2}
.hs-book-wrap{
  position:relative;display:inline-flex;align-items:center;z-index:7;
  margin:0;
}
.hs-advisor{
  position:absolute;
  left:calc(100% - 6px);
  right:auto;
  top:calc(50% - (10 / 70 * 64px));
  bottom:auto;
  width:168px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  pointer-events:none;user-select:none;
  opacity:0;
  transform:translate(0,6px);
  animation:hsAdvisorIn .7s cubic-bezier(.22,.7,.25,1) 3s forwards;
  z-index:8;
}
.hs-advisor-arrow{
  display:block;width:88px;height:64px;margin:0 0 0 2px;
}
.hs-advisor-txt{
  display:block;margin:0 0 0 22px;max-width:150px;
  font-family:"Caveat","Segoe Print","Bradley Hand",cursive;
  font-weight:700;font-size:22px;line-height:1.02;
  letter-spacing:.02em;color:#400580;
  transform:rotate(-5deg);transform-origin:left top;
  white-space:normal;text-align:left;
}
@keyframes hsAdvisorIn{
  from{opacity:0;transform:translate(0,6px)}
  to{opacity:1;transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){
  .hs-advisor{animation:none;opacity:1;transform:none}
}
@media (max-width:900px){
  .hero-spot .hs-ctas{padding-bottom:60px}
  .hs-advisor{
    left:calc(100% - 6px);width:148px;gap:3px;
    top:calc(50% - (10 / 70 * 52px));
  }
  .hs-advisor-arrow{width:72px;height:52px}
  .hs-advisor-txt{font-size:18px;max-width:132px;margin-left:18px}
}
@media (max-width:600px){
  .hero-spot h1 .h1-hand{font-size:28px;margin-top:4px}
  .hero-spot .hs-centre{padding-top:48px;padding-bottom:40px}
  .hero-spot h1 .h1-nudge{margin-top:6px}
  .hero-spot h1 .h1-c{margin-top:22px}
  .hero-spot .hs-strip{margin-top:30px}
  /* stacked full-width CTAs: audit, then Book; callout fully
     below Book (12px gap), arrow tip pointing up at Book */
  .hero-spot .hs-ctas{padding-bottom:0}
  .hs-book-wrap{
    display:block;width:100%;
    margin:0 0 112px;
  }
  .hs-advisor{
    left:auto;right:18px;
    top:calc(100% + 12px);
    width:min(170px,52vw);
    align-items:flex-start;
    gap:2px;
    transform:translate(0,4px);
    animation-name:hsAdvisorInMobile;
  }
  .hs-advisor-arrow{
    width:58px;height:42px;margin:0;
  }
  .hs-advisor-txt{
    margin:0 0 0 14px;padding:0;font-size:18px;max-width:150px;
    text-align:left;
    transform:rotate(-4deg);transform-origin:left top;
    line-height:1.05;
  }
}
@keyframes hsAdvisorInMobile{
  from{opacity:0;transform:translate(0,4px)}
  to{opacity:1;transform:translate(0,0)}
}