/* Per-app badges and colorways on benchseries.com (preview). Values: see bench-family-badges.css header. */
[data-product="iebench"],[data-app="iebench"]{--prod:#2563eb;--prod-btn:#2563eb;--prod-hi:#3b82f6}
[data-product="fieldscan"],[data-app="fieldscan"]{--prod:#0d9488;--prod-btn:#0f766e;--prod-hi:#0d9488}
[data-product="budgetblade"],[data-app="budgetblade"]{--prod:#b41c1c;--prod-btn:#b41c1c;--prod-hi:#e04848}
[data-product="pipefit"],[data-app="pipefit"]{--prod:#b86630;--prod-btn:#9a5325;--prod-hi:#d08a55}
[data-product="truesolve"],[data-app="truesolve"]{--prod:#6b8f4e;--prod-btn:#4d6b36;--prod-hi:#8ea67e}
/* badges on media */
.product-media img.prod-badge,.mega-card img.prod-badge,.card-art img.prod-badge{position:absolute!important;left:10px;top:10px;z-index:3;width:48px!important;height:48px!important;aspect-ratio:1/1!important;object-fit:contain!important;border-radius:0!important;transform:none!important;transition:none!important;opacity:1!important;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.mega-card img.prod-badge{width:34px!important;height:34px!important;left:8px;top:8px}
/* lineup + menu cards */
.product-card[data-product]{border-color:color-mix(in srgb,var(--prod) 38%,var(--line))}
.product-card[data-product]:hover{border-color:color-mix(in srgb,var(--prod) 75%,transparent)}
.product-card[data-product] .status{color:var(--prod-hi)}
.product-card[data-product] .card-link{color:var(--prod-hi)}
.mega-card[data-product]:hover{border-color:color-mix(in srgb,var(--prod) 55%,transparent)}
.mega-card[data-product] strong{color:var(--prod-hi)}
.mega-card[data-product] .mega-card-links a{color:var(--prod-hi)}
/* hero carousel + device showcase */
.slide[data-product] .eyebrow{color:var(--prod-hi);border-bottom-color:color-mix(in srgb,var(--prod-hi) 40%,transparent)}
.slide[data-product] .hero-actions .button:not(.outline){background:var(--prod-btn);color:#fff}
.slide[data-product] .hero-actions .button:not(.outline):hover{background:var(--prod-btn);filter:brightness(1.12)}
.slide[data-product] .hero-points li:before{background:var(--prod-hi);box-shadow:0 0 0 1px color-mix(in srgb,var(--prod-hi) 30%,transparent)}
.app-ui[data-app] .app-title.gold{color:var(--prod-hi)}
.app-ui[data-app] .app-field.is-active{border-color:var(--prod-hi);box-shadow:0 0 0 1px color-mix(in srgb,var(--prod-hi) 35%,transparent)}
.app-ui[data-app] .app-field .val .caret{background:var(--prod-hi)}
.app-ui[data-app] .app-btn{background:var(--prod-btn);box-shadow:0 6px 16px color-mix(in srgb,var(--prod-btn) 27%,transparent)}
.app-ui[data-app] .app-btn.is-done{background:var(--prod-btn);filter:brightness(.9)}
/* concept pages */
body[data-product] .content-badge{display:block;width:112px;height:112px;margin:0 0 22px;object-fit:contain;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--prod) 30%,transparent))}
body[data-product] .content-page-copy .eyebrow{color:var(--prod-hi);border-bottom-color:color-mix(in srgb,var(--prod) 45%,transparent)}
body[data-product] .content-page-copy li::marker{color:var(--prod-hi)}
body[data-product] .content-page-copy .button:not(.outline){background:var(--prod-btn)}
@media(max-width:600px){body[data-product] .content-badge{width:88px;height:88px}}
/* I&E Bench CTAs use I&E blue (iebench.com --accent) */
a.button[href^="https://iebench.com"]:not(.outline){background:#2563eb!important;border-color:#2563eb!important;color:#fff!important}
a.button[href^="https://iebench.com"]:not(.outline):hover{background:#3b82f6!important;border-color:#3b82f6!important}

/* ===== Pipefit / Truesolve carousel colorways (7:25 PM CT request) ===== */
[data-product=pipefit]{--cw:#b86630;--cw-hi:#d08a55;--cw-deep:#9a5325;--cw-bg:#120c08;--cw-bg2:#170f0a;--cw-field:#21160f;--cw-line:#3a281b;--cw-t1:#efe3d8;--cw-t2:#cdbcae;--cw-t3:#bba897;--cw-rgb:184,102,48}
[data-product=truesolve]{--cw:#6b8f4e;--cw-hi:#8ea67e;--cw-deep:#4d6b36;--cw-bg:#0c100a;--cw-bg2:#10150d;--cw-field:#181f14;--cw-line:#2c3825;--cw-t1:#e6eadf;--cw-t2:#c4cabb;--cw-t3:#9e9d9b;--cw-rgb:107,143,78}
#hero:is([data-product=pipefit],[data-product=truesolve]) .hero-card{border-color:rgba(var(--cw-rgb),.4);background:var(--cw-bg);box-shadow:0 28px 80px #00000099,0 0 0 1px rgba(var(--cw-rgb),.12),inset 0 1px 0 rgba(var(--cw-rgb),.12)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .hero-mood-glow{background:radial-gradient(ellipse at center,rgba(var(--cw-rgb),.10) 0%,rgba(var(--cw-rgb),.04) 35%,transparent 70%)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .hero-mood-glow:after{background:radial-gradient(ellipse at 70% 60%,rgba(var(--cw-rgb),.12) 0%,rgba(var(--cw-rgb),.06) 40%,transparent 70%)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .hero-mood-grid{background-image:linear-gradient(rgba(var(--cw-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--cw-rgb),.05) 1px,transparent 1px),linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .hero-mood-particles span{background:var(--cw)!important;box-shadow:0 0 8px rgba(var(--cw-rgb),.4)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .dots button[aria-pressed=true]:before{background:var(--cw-hi)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .dots button:before{background:var(--cw-t3)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .controls button{border-color:rgba(var(--cw-rgb),.35);color:var(--cw-t1)}
#hero:is([data-product=pipefit],[data-product=truesolve]) .hero-caption{color:var(--cw-t3)}
.slide:is([data-product=pipefit],[data-product=truesolve]){background:var(--cw-bg)}
.slide:is([data-product=pipefit],[data-product=truesolve]):before{background:linear-gradient(90deg,var(--cw-bg) 0%,color-mix(in srgb,var(--cw-bg) 85%,transparent) 27%,color-mix(in srgb,var(--cw-bg) 17%,transparent) 75%)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-art.showcase-art{background:var(--cw-bg)}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-art.showcase-art:after{background:linear-gradient(90deg,color-mix(in srgb,var(--cw-bg) 95%,transparent) 0%,color-mix(in srgb,var(--cw-bg) 88%,transparent) 28%,color-mix(in srgb,var(--cw-bg) 40%,transparent) 55%,transparent 76%)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .product-name,.slide:is([data-product=pipefit],[data-product=truesolve]) h1,.slide:is([data-product=pipefit],[data-product=truesolve]) h2{color:var(--cw-t1)}
.slide:is([data-product=pipefit],[data-product=truesolve]) .description{color:var(--cw-t2)}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-points li{color:var(--cw-t3)}
.slide:is([data-product=pipefit],[data-product=truesolve]) .eyebrow{color:var(--cw-hi)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-points li:before{background:var(--cw-hi)!important;box-shadow:0 0 0 1px rgba(var(--cw-rgb),.3)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-actions .button:not(.outline){background:var(--cw-deep)!important;border-color:var(--cw-deep)!important;color:#fff!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-actions .button:not(.outline):hover{background:var(--cw)!important;border-color:var(--cw)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-actions .button.outline{border-color:rgba(var(--cw-rgb),.55)!important;color:var(--cw-t1)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .hero-actions .button.outline:hover{background:rgba(var(--cw-rgb),.14)!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .showcase-bezel{box-shadow:0 30px 80px #000c,0 0 60px rgba(var(--cw-rgb),.18)}
.app-ui:is([data-app=pipefit],[data-app=truesolve]){color:var(--cw-t1);background:linear-gradient(180deg,var(--cw-bg2),var(--cw-bg) 55%,var(--cw-bg))!important}
.slide:is([data-product=pipefit],[data-product=truesolve]) .showcase-screen{background:var(--cw-bg);box-shadow:inset 0 0 0 1px rgba(var(--cw-rgb),.14)}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-title{color:var(--cw-hi)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-sub,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-res-label,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-note,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .lab,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .val .u,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-col-label,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-status{color:var(--cw-t3)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-field{background:var(--cw-field)!important;border-color:var(--cw-line)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-field.is-active{border-color:var(--cw-hi)!important;box-shadow:0 0 0 1px rgba(var(--cw-rgb),.35),0 0 14px rgba(var(--cw-rgb),.25)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .val{color:var(--cw-t1)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-field.is-result .val,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-field.is-good .val{color:var(--cw-hi)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .caret{background:var(--cw-hi)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-btn,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-btn.is-done,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-btn.is-press{background:var(--cw-deep)!important;color:#fff!important;box-shadow:0 6px 18px rgba(var(--cw-rgb),.3)!important;border-color:var(--cw-deep)!important}
.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-status-bar,.app-ui:is([data-app=pipefit],[data-app=truesolve]) .app-time{color:var(--cw-t3)}
.product-card:is([data-product=pipefit],[data-product=truesolve]) .category{color:var(--cw-hi)!important}
html[data-hero-product=pipefit]{--ask-rgb:184,102,48}html[data-hero-product=truesolve]{--ask-rgb:107,143,78}
html:is([data-hero-product=pipefit],[data-hero-product=truesolve]) #bs-ask-btn .bs-ask-glow{background:radial-gradient(circle,rgba(var(--ask-rgb),.25) 0%,rgba(var(--ask-rgb),.09) 45%,transparent 70%)}
html:is([data-hero-product=pipefit],[data-hero-product=truesolve]) #bs-ask-btn .bs-ask-glow::after{border-color:rgb(var(--ask-rgb))}
/* 8:40 PM CT v2: clearly visible outer halo ring around every app badge tile, in the app's colorway
   (modeled on ref/halo-reference.png). Three stacked drop-shadows follow the rounded tile alpha. Badge PNGs unchanged. */
img[src*="/badges/iebench-badge"]{--halo:59,130,246}
img[src*="/badges/fieldscan-badge"]{--halo:13,148,136}
img[src*="/badges/budgetblade-badge"]{--halo:224,72,72}
img[src*="/badges/pipefit-badge"]{--halo:208,138,85}
img[src*="/badges/truesolve-badge"]{--halo:142,166,126}
img[src*="/badges/"][src*="-badge-"]{--h0:1px;--h1:4px;--h2:10px;--a0:.95;--a1:.75;--a2:.5;filter:drop-shadow(0 0 var(--h0) rgba(var(--halo),var(--a0))) drop-shadow(0 0 var(--h1) rgba(var(--halo),var(--a1))) drop-shadow(0 0 var(--h2) rgba(var(--halo),var(--a2)))!important}
img[src*="/badges/"].content-badge,img[src*="/badges/"].hero-badge,img[src*="/badges/"].hero-mark{--h0:1.5px;--h1:8px;--h2:22px;--a0:.9;--a1:.7;--a2:.5}
@media (prefers-color-scheme: light){
  html[data-palette] img[src*="/badges/"][src*="-badge-"]:not(.fam-badge){--a0:.9;--a1:.62;--a2:.42}
}
@media (prefers-color-scheme: light){ img[src*="/badges/truesolve-badge"]{--halo:112,146,92} }
@media (prefers-color-scheme: light){ html[data-palette] img[src*="/badges/"][src*="-badge-"]:not(.fam-badge):not(.content-badge):not(.hero-badge):not(.hero-mark){--h1:5px;--h2:12px;--a0:1;--a1:.85;--a2:.6} }
/* 9:03 PM CT: no halo on app badges inside carousels */ .family-carousel .family-card img.fam-badge[src*="/badges/"],.family-carousel img[src*="/badges/"][src*="-badge-"]{filter:none!important;-webkit-filter:none!important;box-shadow:none!important}



/* Hero device frames: real app screenshots (window.HERO_SHOTS from /assets/hero-shots.js). Empty map = code-drawn screens.
   Phone PNGs are 1206×2622; iPad PNGs are 2064×2752 (3:4). Bezel padding is a % of width
   (2.6% 2.4% 3.2% phone, 2.2% iPad), so the *device* aspect is slightly wider than the
   shot so the inner screen opening matches the PNG and nothing is cropped.
   object-fit:contain + center keeps a 1px-safe fit; screen bg follows the shot edges. */
.showcase-device.has-shot .showcase-screen{background:#08080a}
@media (prefers-color-scheme:light){
  .showcase-device.has-shot .showcase-screen{background:#fefefe}
}
.showcase-device.has-shot .showcase-notch,
.showcase-device.has-shot .showcase-home{display:none}
.showcase-device.has-shot .app-shots{position:absolute;inset:0}
.showcase-device.has-shot .app-shot{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .5s ease;pointer-events:none}
.showcase-device.has-shot .app-shot.is-on{opacity:1;z-index:1}
.showcase-device.has-shot .app-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
@media (prefers-reduced-motion:reduce){
  .showcase-device.has-shot .app-shot{transition:none}
}
.showcase-device.is-ipad.is-portrait{aspect-ratio:3/4;width:auto;height:min(560px,76%);max-width:40%;max-height:calc(100% - 110px)}
@media (min-width:901px) and (max-width:1100px){.showcase-device.is-ipad.is-portrait{height:min(440px,62%);max-width:34%}}
@media (min-width:1101px) and (max-width:1280px){.showcase-device.is-ipad.is-portrait{height:min(500px,68%);max-width:38%}}
@media (min-width:721px) and (max-width:900px){.showcase-device.is-ipad.is-portrait{width:auto;height:min(420px,100%);max-width:60%}}
@media (max-width:720px){.showcase-device.is-ipad.is-portrait{width:auto;height:min(290px,100%);max-width:70%;max-height:100%}}

/* "More benches" placeholder in the lineup grid (6 cards: 3 + 3 on desktop) */
@media(min-width:1001px){#product-grid > .product-card:nth-child(4){grid-column:span 2}}
#product-grid > .product-card-future .card-art{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 40%,#1b1c20 0%,#0a0b0e 70%)}
#product-grid > .product-card-future .future-tile{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:20px;border:2px dashed rgba(230,214,160,.6);color:#e6d6a0;font:400 44px/1 system-ui,-apple-system,sans-serif;background:linear-gradient(160deg,#1d1e22,#0c0d10)}
#product-grid > .product-card-future h3{color:#e6d6a0}

/* Uncropped r6 shots: device aspect accounts for bezel padding so the screen equals the PNG.
   Width is capped by the smaller of the layout max-width and the height budget times aspect,
   and height is auto, so a tight max-width cannot leave letterbox bars (as on 1024x768 iPad). */
.showcase-device.has-shot.is-phone{
  aspect-ratio:0.469975;
  height:auto;
  width:min(32%, calc(min(607px,82%,100% - 120px) * 0.469975));
  max-width:32%;
  max-height:min(607px,82%,calc(100% - 120px));
}
.showcase-device.has-shot.is-ipad.is-portrait{
  aspect-ratio:0.758342;
  height:auto;
  width:min(40%, calc(min(560px,76%,100% - 110px) * 0.758342));
  max-width:40%;
  max-height:min(560px,76%,calc(100% - 110px));
}
@media (max-width:1000px){
  .showcase-device.has-shot.is-phone{
    width:min(34%, calc(min(560px,78%,100% - 110px) * 0.469975));
    max-width:34%;
    max-height:min(560px,78%,calc(100% - 110px));
  }
}
@media (min-width:901px) and (max-width:1100px){
  .showcase-device.has-shot.is-ipad.is-portrait{
    width:min(34%, calc(min(440px,62%,100% - 110px) * 0.758342));
    max-width:34%;
    max-height:min(440px,62%,calc(100% - 110px));
  }
}
@media (min-width:1101px) and (max-width:1280px){
  .showcase-device.has-shot.is-ipad.is-portrait{
    width:min(38%, calc(min(500px,68%,100% - 110px) * 0.758342));
    max-width:38%;
    max-height:min(500px,68%,calc(100% - 110px));
  }
}
@media (min-width:721px) and (max-width:900px){
  .showcase-device.has-shot.is-phone{
    width:min(36%, calc(min(360px,100%) * 0.469975));
    max-width:36%;
    max-height:min(360px,100%);
  }
  .showcase-device.has-shot.is-ipad.is-portrait{
    width:min(60%, calc(min(420px,100%) * 0.758342));
    max-width:60%;
    max-height:min(420px,100%);
  }
}
@media (max-width:720px){
  .showcase-device.has-shot.is-phone{
    width:min(46%, calc(min(270px,100%) * 0.469975));
    max-width:46%;
    max-height:min(270px,100%);
  }
  .showcase-device.has-shot.is-ipad.is-portrait{
    width:min(70%, calc(min(290px,100%) * 0.758342));
    max-width:70%;
    max-height:min(290px,100%);
  }
}

/* Feature chips replace Explore / Visit CTAs (preview, 2026-11-11) */
.feat-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  max-width:100%;
}
.feat-chips li{
  flex:0 1 auto;
  max-width:100%;
  box-sizing:border-box;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.01em;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--prod, #8e8e93) 42%, var(--line));
  color:var(--prod-hi, #d6e0e7);
  background:color-mix(in srgb, var(--prod, #8e8e93) 14%, transparent);
  white-space:nowrap;
}
.hero-copy .feat-chips{margin:4px 0 18px;max-width:420px}
.product-card{position:relative}
.product-card .card-hit{position:absolute;inset:0;z-index:1}
.product-card:has(.card-hit){cursor:pointer}
.product-card .card-link{position:relative;z-index:2}
.product-card .feat-chips{position:relative;z-index:1;pointer-events:none;margin-top:14px;margin-bottom:4px}
body[data-product] .content-page-copy a:not(.button){
  color:var(--prod-hi, #3b82f6);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (max-width:720px){
  .hero-copy .feat-chips{max-width:100%;margin-bottom:14px}
  .feat-chips li{font-size:10px;padding:4px 8px}
}

/* App-site links on hero device and static hero art (preview, 2026-11-11) */
a.hero-art{color:inherit;text-decoration:none}
a.hero-device-hit{
  position:absolute;
  z-index:2;
  display:block;
  box-sizing:border-box;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}