/* Operator phone tweaks are incorporated into the v4.11 artboard in styles.css. */
/* 2026-11-02 operator: no hard right edge. Image was clipped by .home-hero overflow before its fade finished. Let it overflow (page clips horizontally instead) and fade harder toward the right/edges. */
html,body{overflow-x:clip}
.home-hero{overflow:visible}
.home .home-hero .hero-visual img,.home-hero .hero-visual img{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent),linear-gradient(to right,transparent,#000 18%,#000 52%,transparent 88%);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent),linear-gradient(to right,transparent,#000 18%,#000 52%,transparent 88%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* v4.12: extended paths reach toward the headline on the same artboard.
   Keep the approved image height and soften every edge into the page. */
.home-hero .hero-visual[data-option="10"] img,
.home-hero .hero-visual[data-option="11"] img{
  top:calc(var(--u) * 12);
  transform:translateX(-36.2%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent),linear-gradient(to right,transparent,#000 4%,#000 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent),linear-gradient(to right,transparent,#000 4%,#000 65%,transparent 100%);
}

/* Feather a paper clearance around the subline where longer paths pass. */
.home-hero .intro{position:relative;isolation:isolate}
.home-hero .intro::before{
  content:"";position:absolute;z-index:-1;inset:calc(var(--u) * -4);
  background:var(--paper);filter:blur(calc(var(--u) * 8));
}

/* v4.13: position the physical left hub at 42% of the shared artboard.
   Artwork height and feathered edges retain the approved phone proportions. */
.home-hero .hero-visual[data-option="12"] img,
.home-hero .hero-visual[data-option="13"] img{
  top:calc(var(--u) * 12);
  transform:translateX(var(--junction-shift));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent),linear-gradient(to right,transparent,#000 6%,#000 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent),linear-gradient(to right,transparent,#000 6%,#000 65%,transparent 100%);
}
.home-hero .hero-visual[data-option="12"]{--junction-shift:-40.621906%}
.home-hero .hero-visual[data-option="13"]{--junction-shift:-44.207284%}

/* Phones (<=760px): the hero fills ~88% of the first screen, header included (banner 31px + header 84px = 115px above it).
   The rest is composition: bigger artwork and headline, CTA pinned to the foot of the hero. The next section's fade peeks below. */
@media (max-width:760px){
  .home-hero{
    --hero-top:115px;
    --hero-h:calc(88vh - var(--hero-top));
    min-height:var(--hero-h);
    padding:calc(var(--u) * 30) calc(var(--u) * 18) calc(var(--u) * 28);
  }
  @supports (height:1svh){.home-hero{--hero-h:calc(88svh - var(--hero-top))}}
  .home-hero .hero-copy{
    grid-column:1/-1;height:auto;align-self:stretch;margin:0;
    font-size:calc(var(--u) * 28);
  }
  .home-hero h1{
    font-size:max(34px,calc(var(--u) * 42));letter-spacing:calc(var(--u) * -1.6);
    max-width:calc(var(--u) * 330);
  }
  .home-hero .intro{
    font-size:max(16px,calc(var(--u) * 18));margin-top:calc(var(--u) * 18);
    max-width:calc(var(--u) * 300);
  }
  .home-hero .actions{margin-top:auto;padding-top:calc(var(--u) * 24)}
  .home-hero .button{
    min-height:max(48px,calc(var(--u) * 52));padding-inline:calc(var(--u) * 18);
    font-size:max(15px,calc(var(--u) * 15));
  }
  .home-hero .text-link{font-size:max(13px,calc(var(--u) * 13))}
  .home-hero .hero-visual{
    position:absolute;grid-area:auto;translate:none;inset:auto;
    right:0;bottom:calc(var(--u) * 48 + max(48px,var(--u) * 52));
    /* anchored above the CTA row; on short screens it grows upward into the paper beside the subline, never below 256 ref px */
    width:100%;height:clamp(calc(var(--u) * 256),calc(var(--hero-h) - var(--u) * 298 - max(48px,var(--u) * 52)),calc(var(--u) * 360));
  }
  .home-hero .hero-visual[data-option] img{
    position:absolute;top:0;left:0;height:100%;width:auto;
    transform:translateX(calc(27vw - 13%));
  }
}