/* the trenches highlight (gym/web/home): scoped under #trenches, on the site's tokens and section rules */
#trenches{overflow:hidden}
#trenches .sec-head{margin-bottom:clamp(28px,4vw,44px)}
#trenches .tr-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 22px;margin-top:30px}
#trenches .tr-how{color:var(--d-ink2);font:400 17px/1 var(--sys);letter-spacing:-.022em;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px}
#trenches .tr-how:hover{color:var(--yellow);border-color:currentColor}
#trenches .tr-live{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,199,44,.22);font:500 12.5px/1 var(--mono);color:var(--d-ink2);letter-spacing:.02em;font-variant-numeric:tabular-nums}
#trenches .tr-live i{width:7px;height:7px;border-radius:50%;background:var(--up-d);box-shadow:0 0 0 3px rgba(48,209,88,.18)}
#trenches .tr-live[hidden]{display:none}
/* the stage: the hero's laptop and phone, the live board on their screens, the gold arches breathing behind */
#trenches .tr-stage{position:relative;max-width:1100px;height:clamp(230px,41vw,560px);margin:0 auto}
#trenches .tr-arches{position:absolute;left:50%;top:50%;width:min(820px,80vw);aspect-ratio:1;transform:translate(-50%,-54%);color:var(--yellow);opacity:.11;filter:blur(1px);z-index:0}
#trenches .tr-stage::before{content:"";position:absolute;inset:auto 0 -10% 0;height:70%;background:radial-gradient(640px 360px at 50% 100%,rgba(218,41,28,.34),rgba(218,41,28,0) 70%);z-index:0}
#trenches .tr-mbp{width:min(840px,78vw);z-index:2}
#trenches .tr-screen{background:#0a0908}
#trenches .tr-screen img,#trenches .tr-pscreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
#trenches .tr-phone{right:calc(50% - min(420px,39vw) + 10px);bottom:-5%;width:clamp(96px,16vw,210px);z-index:4}
#trenches .tr-pscreen{padding:0;background:#0a0908}
#trenches .tr-pscreen .island{z-index:2}
/* tiles: a 1 px warm rule, tabular numbers, no boxes */
#trenches .tr-tiles{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;border-top:1px solid rgba(255,199,44,.22)}
#trenches .tr-tiles li{padding:22px 0 6px;border-top:1px solid transparent;min-width:0}
#trenches .tr-tiles b{display:block;font:700 clamp(28px,3vw,40px)/1 var(--sysd);letter-spacing:-.04em;color:var(--yellow);font-variant-numeric:tabular-nums}
#trenches .tr-tiles span{display:block;margin-top:10px;font:400 15px/1.35 var(--sys);color:var(--d-ink2);letter-spacing:-.01em;text-wrap:balance}
/* the puns strip: one line at a time, crossfaded by section.js */
#trenches .tr-puns{position:relative;height:1.6em;margin:clamp(30px,4vw,48px) 0 0;text-align:center;font:600 clamp(18px,2vw,24px)/1.3 var(--sysd);letter-spacing:-.02em;color:var(--d-ink)}
#trenches .tr-puns span{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .5s var(--ease);text-wrap:balance}
#trenches .tr-puns span.on{opacity:1}
@media (max-width:834px){
  #trenches .tr-stage{height:clamp(200px,62vw,340px)}
  #trenches .tr-mbp{width:88vw}
  #trenches .tr-phone{right:2vw;bottom:-4%;width:22vw}
  #trenches .tr-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
}
@media (max-width:640px){
  #trenches .tr-cta{gap:12px 16px}
  #trenches .tr-tiles b{font-size:26px}
  #trenches .tr-tiles span{font-size:14px}
}
@media (prefers-reduced-motion:reduce){#trenches .tr-puns span{transition:none}}