/* Expressive HUD, painted in the existing composition; no layout/material changes. */
:root{--tech-ink:#e2e2e2bf;--tech-muted:#d0d0d080;--hud-focus-arm:16px}
.hero-visual .frame-front .frame-label>span:last-child{position:relative;color:transparent}
.hero-visual .frame-front .frame-label>span:last-child:before{
  content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:url('assets/hud-plus.svg') center/12px 12px no-repeat;
}

/* Diagonal focus corners outside the sphere silhouette. */
.hero-visual .frame-graphic:after{
  content:'';position:absolute;left:5px;top:0;width:127px;height:110px;pointer-events:none;
  background:
    linear-gradient(var(--tech-ink),var(--tech-ink)) left top/var(--hud-focus-arm) 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left top/1.5px var(--hud-focus-arm) no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right bottom/var(--hud-focus-arm) 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right bottom/1.5px var(--hud-focus-arm) no-repeat;
}

/* Preserve the original arrow glyph's metrics; replace only its paint. */
#process .process-chip>span{color:transparent;background:url('assets/technical-turn.svg') center/18px 18px no-repeat}

/* Keep the border slot, viewfinder size and sphere coordinates. */
#process .process-viewfinder{border-color:transparent}
#process .process-viewfinder:after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--tech-ink),var(--tech-ink)) left top/var(--hud-focus-arm) 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left top/1.5px var(--hud-focus-arm) no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right top/var(--hud-focus-arm) 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right top/1.5px var(--hud-focus-arm) no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left bottom/var(--hud-focus-arm) 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left bottom/1.5px var(--hud-focus-arm) no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right bottom/var(--hud-focus-arm) 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right bottom/1.5px var(--hud-focus-arm) no-repeat;
}

/* Single broad quantity markers; avoid repeated mini-scales and index boxes. */
.volume-option h3:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--tech-muted),var(--tech-muted)) 0 42%/14px 1.5px no-repeat,
    linear-gradient(var(--tech-muted),var(--tech-muted)) 100% 42%/14px 1.5px no-repeat;
}

@media(max-width:560px){
  :root{--hud-focus-arm:12px}
  /* The metal bar shifts left in the narrow card; keep its lower corner clear. */
  .hero-visual .frame-graphic:after{height:132px}
}

/* Composition-level viewfinder: only corners, leaving the card contents clear. */
.hero-hud{
  position:absolute;inset:30px 0 4px;z-index:6;pointer-events:none;
  background:
    linear-gradient(var(--tech-ink),var(--tech-ink)) right top/24px 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right top/1.5px 24px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left bottom/24px 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left bottom/1.5px 24px no-repeat;
}

@media(min-width:901px){
  .production-stage:not(:last-child):after{
    content:'';width:24px;height:12px;right:-27px;top:151px;pointer-events:none;
    background:url('assets/hud-connector.svg') center/100% 100% no-repeat;
  }
}
@media(min-width:901px) and (max-width:1150px){
  .production-stage:not(:last-child):after{width:18px;right:-19px}
}
@media(max-width:560px){
  .hero-hud{background:
    linear-gradient(var(--tech-ink),var(--tech-ink)) right top/16px 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) right top/1.5px 16px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left bottom/16px 1.5px no-repeat,
    linear-gradient(var(--tech-ink),var(--tech-ink)) left bottom/1.5px 16px no-repeat;
  }
}

/* One triple-slash per selected separator, offset horizontally but centred
   on the 1px rule vertically. SVG edges stay smooth at every device scale. */
/* Offset compensates for background-position percentages using (width - 48px). */
#work,#process{position:relative}
#work{border-top-color:transparent;--slash-position:24%;--slash-offset:-12.48px}
#process{border-bottom-color:transparent;--slash-position:72%;--slash-offset:10.56px}
.scope-title{border-top-color:transparent;--slash-position:68%;--slash-offset:8.64px}
#work:before,#process:after,.scope-title:after{
  content:'';position:absolute;left:0;right:0;height:12px;pointer-events:none;z-index:2;
  background:
    url('assets/divider-slashes.svg') calc(var(--slash-position) + var(--slash-offset)) center/48px 12px no-repeat,
    linear-gradient(90deg,var(--hud-rule) 0 calc(var(--slash-position) - 32px),
      transparent calc(var(--slash-position) - 32px) calc(var(--slash-position) + 32px),
      var(--hud-rule) calc(var(--slash-position) + 32px) 100%) center/100% 1px no-repeat;
}
#work:before,.scope-title:after{top:-6.5px}
#process:after{bottom:-6.5px}

/* Identical SVG stroke for both arms, including the FAQ's open/closed state. */
.faq-plus:before{
  left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);
  background:url('assets/hud-plus.svg') center/12px 12px no-repeat;
}
.faq-plus:after{content:none}
.faq-item[open] .faq-plus:before{background-image:url('assets/hud-minus.svg')}

@media(forced-colors:active){
  :root{--tech-ink:CanvasText;--tech-muted:CanvasText}
  #process .process-chip>span{color:CanvasText;background:none}
}