/* Shared dense product UIs — replace generator SVGs. Do not use id=board or data-kpi. */
.pu{background:linear-gradient(180deg,#12181E 0%,#0E1216 100%);color:#DDE2E7;min-width:0;width:100%}
.pu-bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 16px 12px;border-bottom:1px solid var(--ink-line)
}
.pu-title{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:#fff}
.pu-meta{margin-top:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#717F8C}
.pu-act{
  flex:none;display:inline-flex;align-items:center;padding:7px 12px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--cta)
}
.pu-chip{
  flex:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border:1px solid currentColor
}
.pu-chip.warn{color:var(--amber)}.pu-chip.ok{color:#5FD3A0}.pu-chip.cta{color:#C4B8FF;border-color:rgba(183,169,255,.35);background:rgba(79,70,229,.16)}
.pu-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ink-line)}
.pu-kpis > div{padding:12px 14px;border-right:1px solid var(--ink-line);min-width:0}
.pu-kpis > div:last-child{border-right:0}
.pu-kpis span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#717F8C}
.pu-kpis b{display:block;margin-top:6px;font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:#fff}
.pu-kpis .up b{color:#5FD3A0}.pu-kpis .risk b{color:var(--amber)}
.pu-rows{list-style:none}
.pu-rows li,.pu-line{
  display:grid;grid-template-columns:minmax(56px,.8fr) minmax(0,1.2fr) auto;gap:8px;align-items:center;
  padding:10px 16px;border-bottom:1px solid #1A2027;
  font-family:var(--f-mono);font-size:12px;color:#B9C3CC;position:relative
}
.pu-rows li:last-child,.pu-line:last-child{border-bottom:0}
.pu-rows .on,.pu-line.on{background:rgba(79,70,229,.1)}
.pu-rows .on:before,.pu-line.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cta)}
.pu-rows .risk,.pu-line.risk{background:rgba(219,155,31,.08)}
.pu-rows .risk:before,.pu-line.risk:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber)}
.pu-rows b,.pu-line b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.pu-rows em,.pu-line em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8C98A4}
.pu-rows .risk em,.pu-line.risk em{color:var(--amber)}
.pu-cta{
  display:flex;align-items:center;justify-content:center;margin:12px 16px 16px;min-height:40px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:#fff;background:var(--cta)
}
.pu-cta.lime{background:#5FD3A0;color:#0E1216}
.pu-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-width:0}
.pu-col{padding:14px 16px 16px;min-width:0}
.pu-col + .pu-col{border-left:1px solid var(--ink-line);background:#10161C}
.pu-h{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#717F8C;margin-bottom:10px}
.pu-steps{list-style:none}
.pu-steps li{
  display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 0;border-top:1px solid #1A2027;
  font-family:var(--f-mono);font-size:12.5px;color:#B9C3CC
}
.pu-steps li:first-child{border-top:0;padding-top:0}
.pu-steps i{width:8px;height:8px;border-radius:50%;border:1px solid #3A444E;background:#0E1216}
.pu-steps .done i{background:#5FD3A0;border-color:#5FD3A0}
.pu-steps .now{color:#fff;background:rgba(79,70,229,.1);margin-inline:-16px;padding-inline:16px}
.pu-steps .now i{background:var(--cta);border-color:var(--cta)}
.pu-steps .later{color:#717F8C}
.pu-steps em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#717F8C}
.pu-steps .done em{color:#5FD3A0}.pu-steps .now em{color:#C4B8FF}
.pu-pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pu-pipe > div{padding:12px 10px 14px;border-right:1px solid var(--ink-line);min-width:0}
.pu-pipe > div:last-child{border-right:0}
.pu-pipe p{
  display:flex;justify-content:space-between;gap:6px;margin-bottom:10px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#717F8C
}
.pu-pipe p b{color:#fff;letter-spacing:0}
.pu-pipe ul{list-style:none;display:grid;gap:8px}
.pu-pipe li{padding:9px 10px;background:#161C22;border:1px solid var(--ink-line);font-family:var(--f-mono);font-size:11.5px;color:#B9C3CC}
.pu-pipe li strong{display:block;color:#fff;font-weight:600;margin-bottom:4px}
.pu-pipe li.risk{border-color:rgba(219,155,31,.45);background:rgba(219,155,31,.08)}
.pu-pipe li em{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8C98A4}
.pu-pipe li.risk em{color:var(--amber)}
.pu-draft{
  margin:10px 16px 0;padding:10px 12px;background:#10161C;border:1px solid var(--ink-line);
  font-family:var(--f-mono);font-size:12px;color:#B9C3CC;line-height:1.45
}
.pu-draft span{display:block;margin-bottom:6px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#717F8C}
.pu-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px 14px}
.pu-ok,.pu-no{
  display:flex;align-items:center;justify-content:center;min-height:40px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600
}
.pu-ok{background:var(--cta);color:#fff}
.pu-no{border:1px solid rgba(219,155,31,.45);color:var(--amber)}
.pu-q{padding:12px 16px 0;font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:#fff;line-height:1.25}
.pu-k{padding:12px 16px 0;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#C4B8FF}
.pu-brand{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);min-width:0}
.pu-id{background:#0A0D10;padding:16px 14px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.pu-mono{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.06em;line-height:.85;color:#fff}
.pu-name{margin-top:8px;font-family:var(--f-display);font-weight:700;font-size:1rem;color:#fff}
.pu-pdp{padding:14px 16px 16px;background:#F4F3EE;color:var(--ink);min-width:0}
.pu-pdp .pu-meta{color:var(--steel)}
.pu-swatch{margin-top:12px;aspect-ratio:16/9;background:linear-gradient(165deg,#E7E3D8,#D4CFC3);border:1px solid var(--rule);position:relative;overflow:hidden}
.pu-shirt{position:absolute;inset:18% 24% 14%;background:#2A333C;clip-path:polygon(18% 18%,38% 8%,50% 22%,62% 8%,82% 18%,88% 100%,12% 100%)}
.pu-bl{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.06em;color:#F4F3EE}
.pu-prod{margin-top:12px;display:flex;justify-content:space-between;gap:8px;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em}
.pu-prod span{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--steel)}
.pu-bag{
  display:flex;align-items:center;justify-content:center;margin-top:12px;min-height:40px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff
}
.pu-phone{
  max-width:280px;margin:16px auto;padding:16px 16px 18px;
  background:linear-gradient(180deg,#161C22,#0E1216);border:1px solid var(--ink-line);color:#fff
}
.pu-phone .notch{width:48px;height:5px;background:#2A333C;margin:0 auto 10px;border-radius:99px}
.pu-phone h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;margin:8px 0}
.pu-phone p{font-size:13px;color:#8C98A4;line-height:1.45}
.pu-phone .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.pu-phone .pri{background:#5FD3A0;color:#0E1216;min-height:40px;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.pu-phone .sec{border:1px solid #3A444E;min-height:40px;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pu-sheet{background:#F4F3EE;color:var(--ink);padding:16px}
.pu-sheet .pu-title{color:var(--ink)}
.pu-sheet table{width:100%;border-collapse:collapse;margin-top:12px;font-family:var(--f-mono);font-size:12px}
.pu-sheet th,.pu-sheet td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule);color:var(--steel)}
.pu-sheet th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8C98A4}
.pu-sheet td b{color:var(--ink);font-weight:600}
.pu-sheet .miss{color:var(--amber)}
.pu-mini{padding:12px 14px}
.pu-mini li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--ink-line);font-family:var(--f-mono);font-size:11.5px;color:#B9C3CC}
.pu-mini li:first-child{border-top:0;padding-top:0}
.pu-mini b{color:#fff}
.pu-mini .hot{color:var(--amber)}

.cs-frame .pu,.arch-frame .pu,.sol-media .pu,.sol-feat-shot .pu,
.ind-media .pu,.ind-shot .pu,.ind-desk .pu,.lp-pair .pu,.lp-dual .pu,.lp-case .pu,
.cap-media .pu,.proof-shot .pu,.crm-shot .pu{min-height:100%}
.lp-case > a .pu,.crm-shot .pu{flex:1;width:100%}
.crm-shot:has(.pu){display:flex}
.lp-dual figure:nth-child(2) .pu{max-width:240px;margin-left:auto}
.sol-media:has(.pu) .sol-peek{display:none}
.ind-media:has(.pu) img,.ind-shot:has(.pu) img,.ind-desk:has(.pu) > img{display:none}
.ind-desk:has(.pu) .cap{
  position:static;background:#0A0D10;padding:12px 16px;border-top:1px solid var(--ink-line)
}
.ind-desk.paper:has(.pu) .cap{background:var(--paper-2);color:var(--ink)}
.cap-media:has(.pu) > .slot,.proof-shot:has(.pu) > .slot{display:none!important}
.sol-feat-shot:has(.pu){min-height:280px}
.sol-feat-shot:hover .pu,.sol-row:hover .pu,.crm-shot:hover .pu,.proof-shot:hover .pu,.cap-row:hover .cap-media .pu{transform:none}
body.case .cs-crop:has(.pu),body.case .cs-crop:has(.pu-phone){max-height:none}
body.case .cs-phone .pu-phone{margin:0;max-width:none;border:0}
.lp-pair .pu-phone,.cs-crop .pu-phone{max-width:280px;margin:16px auto;border:1px solid var(--ink-line)}
.shot .pu,.story-frame .pu,.ba-layer .pu,.slot .pu{min-height:100%;height:100%}
.shot .slot:has(.pu),
body.case .shot .slot:has(.pu){
  display:flex !important;flex-direction:column;padding:0;background:none;justify-content:stretch
}
.slot:has(.pu){padding:0;background:none}
.slot:has(.pu) .skel,
.slot:has(.pu) .tagline{display:none !important}
.slot:has(.pu) > .pu{flex:1 1 auto}
.hero-float .pu{min-height:0}
.hero-float .pu-mini{padding:10px 12px 4px}
.ins-lead-shot .pu{min-height:0}
@media(max-width:900px){
  .pu-split,.pu-brand,.pu-pipe{grid-template-columns:1fr}
  .pu-col + .pu-col{border-left:0;border-top:1px solid var(--ink-line)}
  .pu-pipe > div{border-right:0;border-bottom:1px solid var(--ink-line)}
  .pu-id{flex-direction:row;align-items:center;gap:12px}
  .pu-mono{font-size:1.8rem}
}
@media(max-width:767px){
  .pu-kpis{grid-template-columns:1fr 1fr}
  .pu-kpis > div:nth-child(3){grid-column:1/-1;border-right:0;border-top:1px solid var(--ink-line)}
  .pu-desk{display:none}
}