/* Holographic watermark canvases (warranty-holo-accents.js).
   The canvases sit behind each section's content, pointer-blind; the JS
   draws its own colors in-shader, so no color tokens are needed here. */

.warr-pitch,
.warr-cta{position:relative;}
.warr-cta{overflow:hidden;}

.warr-accent{
  position:absolute;
  z-index:0;
  pointer-events:none;
}
.warr-accent--ribbon{
  top:0;
  right:0;
  height:100%;
  width:552px;
}
.warr-accent--logo{
  top:0;
  left:0;
  height:100%;
  width:172px;
}
.warr-accent--surface{
  right:-64px;
  bottom:-80px;
  width:min(70vw,900px);
  aspect-ratio:1000/700;
}

/* keep the sections' own content stacked above the watermarks */
.warr-pitch__in{position:relative;z-index:1;}
.warr-tiers__sticky{z-index:1;}
.warr-cta__wrap{position:relative;z-index:1;}

/* Highlight pills backed by the real sticker shader: the 2D canvas sits
   behind the text, and the CSS foil approximation switches off. */
.hl.hl-gl,
.warr-comp__hl.hl-gl,
.warr-comp__amt.hl-gl{
  /* inline-block: an inline span is an unreliable containing block for the
     absolutely positioned canvas - its inset tracks line boxes, not the pill */
  display:inline-block;
  position:relative;
  z-index:0;
  background:none;
  box-shadow:none;
}
/* The CSS-foil pill is z-index:-1, so its host headings carry
   isolation:isolate to keep it above their backgrounds. But an isolated
   group is composited through a tone-mapped (SDR) pass in Chrome, killing
   the pill's HDR headroom. In GL mode the pill is z-index:0 and needs no
   isolation - drop it so the float16 canvas composites extended. */
.warr-bridge__text:has(.hl-gl),
.warr-cov__h:has(.hl-gl),
.warr-cta__h:has(.hl-gl),
.warr-tier__amt:has(.hl-gl){isolation:auto;}

.warr-hl-canvas{
  position:absolute;
  inset:0;
  /* let the float16 canvas composite into the display's HDR headroom;
     inert on SDR displays and browsers without the property */
  dynamic-range-limit:no-limit;
  /* a canvas is a replaced element: with auto width/height its intrinsic
     (DPR-scaled) size beats inset:0, so pin both axes explicitly */
  width:100%;
  height:100%;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
}

@media (max-width:720px){
  .warr-accent--ribbon{width:300px;}
  .warr-accent--logo{width:96px;}
}