/* Cost bases + resource recipe: one connected, compact story. Video slot: .cb-vslot (16:10). */
#costbases .cb-wrap{max-width:1280px}

/* 1. Stats as one slim strip */
#costbases .cb-stats{gap:0;margin:0 0 14px;border:1px solid var(--line-1);border-radius:16px;background:var(--bg-card,var(--bg-0));overflow:hidden}
#costbases .cb-stat{display:flex;flex-direction:row;text-align:left;justify-content:flex-start;align-items:center;gap:14px;padding:14px 22px;border:0;border-radius:0;background:none;box-shadow:none}
#costbases .cb-stat+.cb-stat{border-left:1px solid var(--line-1)}
#costbases .cb-stat-num{font-size:clamp(26px,2.6vw,34px);line-height:1;flex:none}
#costbases .cb-stat-label{font-size:12px;line-height:1.35;max-width:30ch;color:var(--ink-2)}

/* 2. Nine bases as dense rows */
#costbases .cb-grid{gap:8px}
#costbases .cb-base{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top num" "bar bar";align-items:center;gap:6px 12px;padding:11px 14px 10px;border-radius:12px}
#costbases .cb-base-top{grid-area:top;min-width:0}
#costbases .cb-num{grid-area:num;font-size:19px;white-space:nowrap}
#costbases .cb-num small{font-size:11px;font-weight:500;color:var(--ink-2);letter-spacing:0}
#costbases .cb-bar{grid-area:bar;margin:0;height:3px}
#costbases .cb-meta{display:none}
#costbases .cb-rn{font-size:14px}
#costbases .cb-sub{font-size:10.5px}

/* 3. Connector: bases -> recipe */
#costbases .cb-ex{position:relative;margin-top:52px;overflow:visible;border-radius:20px;background:var(--bg-1)}
#costbases .cb-ex::before{content:"";position:absolute;left:50%;top:-52px;height:52px;width:1px;background:linear-gradient(var(--line-2,var(--line-1)),var(--accent))}
#costbases .cb-ex::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 18%,transparent)}
#costbases .cb-ex-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:40px;align-items:start;padding:30px 28px 0}
#costbases .cb-ex-eyebrow{grid-column:1;margin:0 0 6px}
#costbases .cb-ex-h{grid-column:1;grid-row:2;font-size:clamp(17px,1.6vw,21px);line-height:1.3;margin:0}
#costbases .cb-ex-head .csw-desc{grid-column:2;grid-row:1/3;margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2);align-self:center}

/* 4. Recipe layout: video slot left, positions right */
#costbases .csw{display:grid;grid-template-columns:minmax(560px,660px) minmax(0,1fr);gap:10px 22px;margin:0;padding:18px 28px 26px;align-items:start}
#costbases .csw-rail{grid-column:1/-1;grid-row:1;flex-wrap:wrap;gap:6px;margin:0}
#costbases .csw-chip{padding:5px 12px 5px 8px;font-size:12.5px}
#costbases .csw-meta{grid-column:1/-1;grid-row:2;margin:0}
#costbases .csw-note{grid-column:1/-1;grid-row:3;margin:0;padding:8px 12px;font-size:12px;border-radius:10px}
#costbases .cb-vslot{grid-column:1;grid-row:4;margin-top:6px;align-self:center}
#costbases .csw-grid{grid-column:2;grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
#costbases .csf{grid-column:1/-1;grid-row:5;margin:4px 0 0;padding:16px 18px 14px;border-radius:14px}

/* Video slot: <video autoplay muted loop playsinline> 16:10 goes straight inside */
.cb-vslot{position:relative;aspect-ratio:16/10;width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line-1);background:
  radial-gradient(120% 90% at 20% 0%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 60%),
  linear-gradient(var(--bg-2),var(--bg-card,var(--bg-0)))}
.cb-vslot::before{content:"";position:absolute;inset:0;opacity:.5;background:
  linear-gradient(var(--line-0) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,var(--line-0) 1px,transparent 1px) 0 0/32px 32px}
.cb-vslot::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-12px 0 0 -7px;border-left:20px solid color-mix(in oklab,var(--accent) 70%,transparent);border-top:12px solid transparent;border-bottom:12px solid transparent}
.cb-vslot:has(video)::before,.cb-vslot:has(video)::after,.cb-vslot:has(img)::before,.cb-vslot:has(img)::after{display:none}
.cb-vslot>video,.cb-vslot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* 5. Position cards: no animation art, tight */
#costbases .csw-card{padding:14px 14px 12px;border-radius:14px;min-width:0}
#costbases .csw-art,#costbases .csx,#costbases .csw-bdlbl,#costbases .csw-ratelbl{display:none}
#costbases .csw-cardh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#costbases .csw-wt{font-size:15px}
#costbases .csw-rate{margin:2px 0 0}
#costbases .csw-sub{margin:6px 0 0;font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#costbases .csw-ratezone{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:10px 0 8px}
#costbases .csw-total{margin:0;font-size:21px}
#costbases .csw-native{font-size:11px;white-space:nowrap}
#costbases .csw-legend{gap:3px 10px;font-size:11px;margin-top:7px}
#costbases .csw-lines{padding-top:9px;gap:6px;margin-top:9px}
#costbases .csw-lines>li:nth-child(n+4):not(:has(.csw-ln-syn)){display:none}
#costbases .csw-lncode{display:none}
#costbases .csw-lines .csw-lnmain{display:flex;flex-direction:row;align-items:baseline;gap:8px;min-width:0;flex:1 1 0}
#costbases .csw-lines .csw-ln{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#costbases .csw-lines .csw-lnmeta{display:block;flex:none;font-size:11px;color:var(--ink-3)}
#costbases .csw-lines>li{align-items:baseline}

@media (max-width:1180px){
  #costbases .csw{grid-template-columns:minmax(0,1fr)}
  #costbases .cb-vslot,#costbases .csf,#costbases .csw-grid{grid-column:1}
  #costbases .cb-vslot{grid-row:4;max-width:720px;margin-inline:auto}
  #costbases .csw-grid{grid-row:5;grid-template-columns:repeat(2,minmax(0,1fr))}
  #costbases .csf{grid-row:6}
}
@media (max-width:760px){
  #costbases .cb-stats{grid-template-columns:1fr}
  #costbases .cb-stat{padding:10px 16px}
  #costbases .cb-stat+.cb-stat{border-left:0;border-top:1px solid var(--line-1)}
  #costbases .cb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #costbases .cb-base{grid-template-columns:1fr;grid-template-areas:"top" "num" "bar"}
  #costbases .cb-sub{display:none}
  #costbases .cb-base:last-child{grid-column:1/-1}
  #costbases .cb-ex-head .csw-desc{display:none}
  #costbases .cb-ex-head{grid-template-columns:1fr;padding:22px 16px 0}
  #costbases .cb-ex-head .csw-desc{grid-column:1;grid-row:auto;margin-top:10px}
  #costbases .csw{padding:14px 14px 18px}
  #costbases .csw-rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #costbases .csw-chip{flex:none}
  #costbases .csw-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-14px;padding:0 14px 6px;scrollbar-width:none}
  #costbases .csw-card{flex:0 0 82%;scroll-snap-align:center}
}
/* Phones: one output per row, icon beside the label, so long compounds never split mid-word. */
@media (max-width:560px){
  #costbases .csf-mods{grid-template-columns:minmax(0,1fr);gap:6px}
  #costbases .csf-m{flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;padding:10px 14px;min-height:0;text-align:start}
  #costbases .csf-m span{word-break:normal;overflow-wrap:break-word;hyphens:auto}
}

/* Video as tall as the position cards */
#costbases .cb-hexflow{display:none}
@media (min-width:1181px){
  #costbases .csw{align-items:stretch}
  #costbases .cb-vslot{align-self:stretch;aspect-ratio:auto;height:auto;min-height:0}
  #costbases .cb-vslot>video,#costbases .cb-vslot>img{object-position:50% 50%}
}

/* Cost columns keep two readable cards */
@media (min-width:1181px){
  #costbases .csw{grid-template-columns:minmax(0,700px) minmax(520px,1fr)}
}
/* end Cost columns keep two readable cards */

/* Reframed video keeps its own shape when stacked */
@media (max-width:1180px){#costbases .cb-vslot{aspect-ratio:916/800}}
/* batch21 */
#costbases .csw-card{position:relative}
#costbases .csw-photo{position:absolute;top:12px;inset-inline-end:12px;width:64px;height:64px;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px rgba(15,28,46,.18)}
#costbases .csw-card>.csw-cardh,#costbases .csw-card>.csw-rate,#costbases .csw-card>.csw-sub{padding-inline-end:74px}