/* Hands-only hero (1 Nov 2026, Jack: "just a hand, almost waving, taking up a lot of the right side,
   each fingertip a different section of AI automation"). Used on /automation and /bismo.
   The hand and all five labels are visible without JS; hand-hero.js only animates them in. Tip positions
   are percentages of the drawing, set once per tip below so a redraw needs only these five lines. */
@media (prefers-reduced-motion:no-preference){
  body[data-page="automation"] .bh .bh-p,body[data-page="automation"] .bh .bh-fan,body[data-page="automation"] .bh [data-spin],body[data-page="automation"] .hand-hero__tip{opacity:0;animation:hhShow .2s 9s forwards}
}
@keyframes hhShow{to{opacity:1}}
.hand-hero{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:1/1;transform-origin:52% 100%}
.hand-hero .bh{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;-webkit-mask-image:linear-gradient(#000 86%,transparent 99%);mask-image:linear-gradient(#000 86%,transparent 99%)}
.hand-hero__tips{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.hand-hero__tip{position:absolute;left:var(--x);top:var(--y);max-width:11rem;color:#2A1F0A;font:600 clamp(.72rem,1.15vw,.98rem)/1.25 'Work Sans',sans-serif;transform:translate(0,-50%)}
.hand-hero__tip span{display:block}
.hand-hero__tip[data-tip="thumb"]{--x:17%;--y:47%;text-align:right;transform:translate(-100%,-50%)}
.hand-hero__tip[data-tip="index"]{--x:34%;--y:12%;text-align:right;transform:translate(-100%,-50%)}
.hand-hero__tip[data-tip="middle"]{--x:51.7%;--y:1%;text-align:center;transform:translate(-50%,-50%);white-space:nowrap}
.hand-hero__tip[data-tip="ring"]{--x:68%;--y:9%}
.hand-hero__tip[data-tip="little"]{--x:80%;--y:23%;max-width:20%}
@media (min-width:62.5rem){.hand-hero__tip[data-tip="little"]{max-width:16%}}
@media (max-width:37.5rem){.hand-hero__tip{max-width:5.6rem;font-size:.68rem}.hand-hero__tip[data-tip="middle"]{max-width:none}.hand-hero__tip[data-tip="thumb"]{--x:1%;--y:48%;max-width:4.6rem;text-align:left;transform:translate(0,-100%)}}

/* /automation: the hand fills the right of the hero, bleeding to the edge like the old figure did. */
.ag-hero__hand{margin:-1.5rem -4vw -2.5rem 0;justify-self:stretch}
.ag-hero__hand .hand-hero{max-width:none}
@media (max-width:61.99rem){.ag-hero__hand{margin:.5rem auto -1rem;width:min(100%,30rem)}}

/* /bismo: same hand, a little smaller so the quote form stays near the top on a phone. */
.bm-hero__art--hand{height:auto;overflow:visible;background:none;border-radius:0;aspect-ratio:auto;width:min(86vw,360px);margin:.75rem auto 0}
@media (min-width:62rem){.bm-hero__art--hand{width:auto;margin:-1.5rem -4vw 0 0}.bm-hero__art--hand .hand-hero{max-width:none}}

/* /automation storyboard flow: no rules between sections, tinted runs fade in and out of the paper. */
body[data-page="automation"]{--fade:clamp(4rem,9vw,7.5rem)}
body[data-page="automation"] main .section{border-top:0}
body[data-page="automation"] .section--tint{background:linear-gradient(to bottom,var(--paper) 0,var(--paper-2) var(--fade),var(--paper-2) calc(100% - var(--fade)),var(--paper) 100%)}
body[data-page="automation"] .ag-close__inner{border-top:0}