/* ===== cost: ui artist per frame vs penui per month ===== */
#cost{padding-bottom:clamp(60px,8vw,110px)}
#cost .cost-head{margin-bottom:clamp(36px,5vw,60px)}
#cost .cost-frame{padding:0;overflow:hidden}

/* controls: frame count + artist level */
#cost .cost-ctrl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n tier" "r r";gap:18px 24px;align-items:end;padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px) 26px;border-bottom:1px solid var(--line)}
#cost .cost-n{grid-area:n;display:flex;align-items:baseline;gap:12px;font:400 15px var(--sans);color:var(--ink2)}
#cost .cost-n-v{font:450 clamp(40px,5vw,56px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:2ch}
#cost .cost-tier{grid-area:tier;display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
#cost .cost-tier button{font:500 13px var(--sans);color:var(--ink2);padding:8px 12px;border-radius:7px;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
#cost .cost-tier button b{font:500 12px var(--mono);color:var(--mute);margin-left:4px}
#cost .cost-tier button:hover{color:var(--ink)}
#cost .cost-tier button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(23,22,27,.12),0 0 0 1px var(--line)}
#cost .cost-tier button[aria-checked="true"] b{color:var(--ink)}
#cost .cost-tier button:focus-visible{outline:2px solid var(--sel);outline-offset:1px}

#cost input[type=range]{grid-area:r;width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
#cost input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--line) var(--fill))}
#cost input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--line) var(--fill))}
#cost input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:6px;background:var(--stud);border:1px solid rgba(23,22,27,.45);box-shadow:0 2px 6px rgba(23,22,27,.25)}
#cost input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:6px;background:var(--stud);border:1px solid rgba(23,22,27,.45);box-shadow:0 2px 6px rgba(23,22,27,.25)}
#cost input[type=range]:focus-visible{outline:2px solid var(--sel);outline-offset:4px;border-radius:4px}

/* the two totals */
#cost .cost-cols{display:grid;grid-template-columns:1fr 1fr}
#cost .cost-col{padding:clamp(24px,3.4vw,40px);min-width:0}
#cost .cost-a{border-right:1px solid var(--line)}
#cost .cost-p{background:var(--night);color:var(--ntext)}
#cost .cost-k{margin:0;font:500 13px var(--mono);color:var(--mute);letter-spacing:.01em}
#cost .cost-p .cost-k{color:#8d8996}
#cost .cost-total{margin:14px 0 0;font:450 clamp(48px,7vw,84px)/1 var(--sans);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
#cost .cost-p .cost-total{color:#fff}
#cost .cost-total small{font-size:.32em;letter-spacing:-.01em;color:#8d8996;margin-left:4px}
#cost .cost-sub{margin:12px 0 0;font-size:15px;color:var(--ink2)}
#cost .cost-p .cost-sub{color:#bdb8c4}
#cost .cost-list{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:14px;color:var(--ink2)}
#cost .cost-p .cost-list{border-color:var(--nline);color:#bdb8c4}
#cost .cost-list li{position:relative;padding-left:18px}
#cost .cost-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:currentColor;opacity:.6}
#cost .cost-p .cost-list b{color:var(--stud);font-weight:500}

/* bars: same scale, so the gap is the point */
#cost .cost-bars{padding:26px clamp(22px,3.4vw,40px);border-top:1px solid var(--line);display:grid;gap:10px}
#cost .cost-bar{display:grid;grid-template-columns:64px minmax(0,1fr) 80px;align-items:center;gap:14px;font:12px var(--mono);color:var(--ink2)}
#cost .cost-fill{display:block;height:14px;border-radius:4px;transition:width .35s var(--ease)}
#cost .cost-fill.a{width:var(--wa);background:var(--hot)}
#cost .cost-fill.p{width:var(--wp);background:var(--ink);box-shadow:0 0 0 1px var(--stud)}
#cost .cost-bv{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
#cost .cost-x{margin:8px 0 0;font:450 20px var(--sans);letter-spacing:-.02em;color:var(--ink2)}
#cost .cost-x b{color:var(--ink);font-weight:550}

/* wall of real frames: the first N light up */
#cost .cost-wall{list-style:none;margin:0;padding:clamp(18px,2.6vw,28px);border-top:1px solid var(--line);background:var(--bg2);display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:6px}
#cost .cost-wall li{position:relative;aspect-ratio:1;border-radius:6px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;opacity:.28;filter:grayscale(1);transition:opacity .25s,filter .25s,border-color .25s}
#cost .cost-wall li.on{opacity:1;filter:none;border-color:var(--line2)}
#cost .cost-wall img{max-width:86%;max-height:86%;object-fit:contain}
#cost .cost-wall li.on::after{content:var(--rate);position:absolute;right:2px;bottom:2px;padding:0 3px;border-radius:3px;font:500 8.5px/13px var(--mono);background:var(--hot);color:#fff;opacity:0;transition:opacity .15s}
#cost .cost-wall li.on:hover::after{opacity:1}

#cost .cost-note{max-width:820px;margin:18px auto 0;text-align:center;font-size:13px;line-height:1.55;color:var(--mute);text-wrap:pretty}
#cost .cost-note a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){#cost .cost-wall{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media (max-width:720px){
  #cost .cost-ctrl{grid-template-columns:1fr;grid-template-areas:"n" "r" "tier"}
  #cost .cost-tier button{flex:1;padding:8px 6px}
  #cost .cost-cols{grid-template-columns:1fr}
  #cost .cost-a{border-right:0;border-bottom:1px solid var(--line)}
  #cost .cost-bar{grid-template-columns:52px minmax(0,1fr) 64px}
}
@media (prefers-reduced-motion:reduce){#cost .cost-fill,#cost .cost-wall li{transition:none}}