/* ASL hero background: the platform splash art sits behind the hero copy,
   CSS paints the light and the readability gradients at first paint, and the
   deferred script adds a canvas with slow motion and shine on top. */
.hero-bg,.asl-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(58% 52% at 78% 16%, rgba(76,154,255,.17), transparent 72%),
    radial-gradient(44% 48% at 16% 78%, rgba(53,224,255,.07), transparent 70%),
    radial-gradient(30% 30% at 50% 50%, rgba(156,200,255,.05), transparent 70%)}
.hero-bg img{position:absolute;top:50%;right:-4%;width:min(66vw,1180px);height:auto;transform:translateY(-50%);
  opacity:.78;
  /* fade the left edge into the copy and the top and bottom edges into the page, so the art never reads as a pasted rectangle */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-composite:intersect}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(4,9,20,.94) 0%, rgba(4,9,20,.82) 34%, rgba(4,9,20,.34) 58%, rgba(4,9,20,.12) 100%)}
.hero-bg canvas,.asl-ambient canvas{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%}
.hero-bg::after,.asl-ambient::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:3;
  background:linear-gradient(180deg, rgba(4,9,20,0), rgba(4,9,20,.94))}
.hero>.shell{position:relative;z-index:1}
@media (max-width:800px){
  /* Phones get their own hero: the art is a clean band at the top, the copy sits below it. */
  .hero{padding-top:14rem}
  /* main img[width][height]{height:auto} in seo-guides.css outranks .hero-bg img, so this selector is stronger */
  main .hero .hero-bg img[width][height]{right:auto;left:50%;top:-1rem;height:17.5rem;width:auto;max-width:none;transform:translateX(-50%);opacity:.96;
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero-bg::before{background:linear-gradient(180deg, rgba(4,9,20,.08) 0, rgba(4,9,20,.08) 8rem, rgba(4,9,20,.80) 14.5rem, rgba(4,9,20,.88) 100%)}
}
/* Product pages (2026-10-11): the same splash art and motion behind every product hero.
   Desktop keeps the copy in a left column over the dark side of the art; phones get the
   art as a band above the copy, like the home page. */
.phero>.shell,.product-hero>.shell{position:relative;z-index:1}
.phero .hero-bg img,.product-hero .hero-bg img{opacity:.62}
@media (min-width:1101px){
  .phero>.shell>*{max-width:46rem}
  .phero>.shell>.hero-metrics{max-width:46rem}
}
@media (min-width:801px) and (max-width:1100px){
  .phero .hero-bg img,.product-hero .hero-bg img{opacity:.38}
}
.hero-price{margin:1rem 0 0;color:var(--text);font-size:1.02rem;line-height:1.5}
.hero-price b{font-size:1.4rem;color:#fff;letter-spacing:-.01em;margin-right:.15rem}
.hero-price a{color:var(--ice)}
@media (max-width:800px){
  .phero{padding-top:14rem}
  main .phero .hero-bg img[width][height]{right:auto;left:50%;top:-1rem;height:17.5rem;width:auto;max-width:none;transform:translateX(-50%);opacity:.96;
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
}
/* The splash art replaces the older shield decorations wherever it is present, so two pieces
   of art never stack (asl-design-system.css .phero::before and .hero > .shell::after, styles.css .hero::before). */
.phero:has(> .hero-bg)::before,.hero:has(> .hero-bg)::before{display:none !important}
.hero:has(> .hero-bg) > .shell::after,.phero:has(> .hero-bg) > .shell::after{display:none !important}

/* Android store screenshots on product pages (2026-10-12). */
#android-app .gallery-phone{grid-template-columns:repeat(4,minmax(0,1fr))}
#android-app .shot{margin:0}
@media (max-width:700px){#android-app .gallery-phone{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}#android-app .shot-cap{font-size:.78rem;padding:.5rem .6rem}}