/* Dark band: deep warm black with grain on top. Add class ig-black to the
   section for the dark text colors. .phos-osc adds the oscillating lines
   (assets/oscillate-lines-paper-red.svg, the supplied art with its lines run
   off-white to red) plus a mirrored copy, so the fan fills both sides and
   the two arches cross above whatever sits in the middle. The red original
   is oscillate-lines.svg, the off-white one oscillate-lines-paper.svg. */
.phos{position:relative;background:#0e0c0c;overflow:hidden;isolation:isolate}
.phos-osc{background:url('assets/oscillate-lines-paper-red.svg') no-repeat,url('assets/oscillate-lines-paper-red-mirror.svg') no-repeat,#0e0c0c;
  /* sized by the band's height and anchored to its bottom, so the arch's peak
     sits just above the middle content and frames it from above; wider
     screens simply show more dark at the sides (the art fades to black) */
  background-size:auto 160%;background-position:50% 100%}
.phos::after{content:"";position:absolute;inset:0;background:url('assets/grain.gif');opacity:.06;mix-blend-mode:screen;pointer-events:none;z-index:1}
.phos-c{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(.35px)}
/* faint dark scanlines over the loops, like the home hero's raster */
.phos::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 1px,transparent 1px 4px);pointer-events:none;z-index:1}
.phos>*{position:relative;z-index:2}
.phos>.phos-c{position:absolute}
/* Two different line fields framing whatever sits in the middle
   (assets/undulate-left.svg and -right.svg, used as supplied): each is a
   square sized off the band's height. Deliberately uneven: the left one
   reaches in toward the middle, the right one is mostly off screen. */
.phos>.phos-art{position:absolute;top:50%;height:250%;aspect-ratio:1/1;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;z-index:0;opacity:.45}
.phos-l{left:0;transform:translate(-34%,-50%);background-image:url('assets/undulate-left.svg')}
.phos-r{right:0;transform:translate(52%,-50%);background-image:url('assets/undulate-right.svg')}
/* phones: the band is narrow, so smaller and pushed further out: each field
   shows as a strip down its own side, clear of the price and button */
@media (max-width:760px){
  .phos>.phos-art{height:150%}
  .phos-l{transform:translate(-68%,-50%)}
  .phos-r{transform:translate(64%,-50%)}
}
/* the price lifts off the line fields */
.phos h2{text-shadow:0 4px 30px rgba(0,0,0,.95),0 0 80px rgba(0,0,0,.85),0 0 140px rgba(0,0,0,.7)}
/* a wide, soft pool of shadow behind the price and button, so they sit in
   clear dark space over the line fields */
.phos>div::before{content:"";position:absolute;left:50%;top:48%;width:min(820px,110vw);height:540px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(10,8,8,.6) 0%,rgba(10,8,8,.45) 35%,rgba(10,8,8,.18) 58%,rgba(10,8,8,0) 72%);pointer-events:none;z-index:-1}