/* Higgsfield hand cutout + the existing PHP app interface, not AI-generated text.
   Screen placement is measured against the 1360×2048 original, unchanged framing. */
.hero-with-hand{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:var(--space-16);padding-block:0;min-height:730px}
.hero-with-hand .hero-copy{padding-block:var(--space-12)}
.hero-hand-visual{height:690px;display:flex;justify-content:center;align-items:flex-start;overflow:clip;perspective:none}
.hero-hand-visual .hero-orbit{width:440px;top:150px;background:var(--color-brand);animation:none;scale:1;translate:0 0}
.hero-hand-visual .hero-hand-composition{position:relative;left:auto;top:auto;width:640px;max-width:none;flex-shrink:0;aspect-ratio:1120/1687;transform:none;translate:none;animation:none;z-index:1}
.hero-hand-image{width:100%;height:auto;max-width:none}
.hero-hand-screen{position:absolute;left:30.6%;top:9.25%;width:38.8%;height:54.4%;overflow:hidden;border-radius:8.5% / 4%;container-type:inline-size;background:var(--phone-ui-bg)}
.hero-hand-screen .phone{position:absolute;inset:0 auto auto 0;width:264px;height:558px;padding:0;border:0;border-radius:0;box-shadow:none;background:none;transform:scale(calc(100cqw / 264px));transform-origin:top left;animation:none}
.hero-hand-screen .phone-screen{width:100%;border:0;border-radius:0}
.hero-hand-screen .phone-notch{display:none}
.hero-hand-screen .phone-brand{top:50px}
.hero-hand-screen .phone-map{bottom:44%}
.hero-map{display:block;width:100%;height:100%}
.hero-route-halo,.hero-route-path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-route-halo{stroke:var(--phone-ui-bg);stroke-width:10}
.hero-route-path{stroke:var(--phone-ui-route);stroke-width:5}
.hero-pickup-halo{fill:var(--phone-ui-bg);stroke:var(--phone-ui-border);stroke-width:1}
.hero-pickup-ring{fill:var(--phone-ui-bg);stroke:var(--phone-ui-pickup);stroke-width:2}
.hero-pickup-dot{fill:var(--phone-ui-pickup)}
.hero-hand-screen .phone-sheet{padding-bottom:28px}
.hero-hand-screen .map-label{display:none}
/* Move the hand and screen together: one owner, no floating loops or flicker. */
@supports(animation-timeline:view()){
  .hero-hand-visual .hero-hand-composition{animation:hand-scroll linear both;animation-timeline:--hero-scroll;animation-range:exit 0% exit 100%}
}
@keyframes hand-scroll{from{transform:translateY(0)}to{transform:translateY(-32px)}}
.hero-with-hand.hero-offscreen .hero-hand-composition,.motion-suspended .hero-with-hand .hero-hand-composition{animation-play-state:paused}
@media(max-width:1100px){
  .hero-with-hand{gap:var(--space-8);min-height:650px}
  .hero-hand-visual{height:620px}
  .hero-hand-visual .hero-hand-composition{width:570px}
  .hero-hand-visual .hero-orbit{width:380px;top:140px}
}
@media(max-width:850px) and (min-width:651px){
  .hero-with-hand{gap:var(--space-6);min-height:560px}
  .hero-hand-visual{height:510px}
  .hero-hand-visual .hero-hand-composition{width:475px}
  .hero-hand-visual .hero-orbit{width:310px;top:120px}
}
@media(max-width:650px){
  .hero-with-hand{grid-template-columns:minmax(0,1fr);gap:var(--space-3);padding-top:var(--space-6);min-height:0}
  .hero-with-hand .hero-copy{padding-block:var(--space-4) var(--space-2)}
  .hero-with-hand .hero-actions{margin-top:var(--space-6)}
  .hero-with-hand .store-buttons{max-width:none;flex-wrap:nowrap;gap:var(--space-3)}
  .hero-with-hand .store-button{min-width:0;width:auto;flex:1 1 0;padding:12px;gap:8px}
  .hero-with-hand .store-button small{font-size:var(--text-12);letter-spacing:0}
  .hero-with-hand .store-button strong{font-size:var(--text-18)}
  .hero-with-hand .store-button .icon{width:23px;height:23px}
  /* Keep the desktop photo and screen registered together; crop only the lower wrist. */
  .hero-hand-visual{width:100%;max-width:430px;height:clamp(440px,136vw,550px);aspect-ratio:auto;margin-inline:auto}
  .hero-hand-visual .hero-hand-composition{width:clamp(405px,126vw,500px)}
  .hero-hand-visual .hero-orbit{width:min(340px,100%);top:clamp(95px,29.5vw,118px)}
}
@media(max-width:359px){
  .hero-with-hand .store-button{padding:10px 8px;gap:6px}
  .hero-with-hand .store-button strong{font-size:var(--text-16)}
  .hero-with-hand .store-button .icon{width:20px;height:20px}
}