/* Bangers landing v3 - narrative components (pain ledger, work chain, autonomy). Loads after wow.css. */
.log{display:flex;flex-direction:column}
.log .row{display:grid;grid-template-columns:80px 18px 1fr;gap:11px;align-items:center;padding:9px 2px;border-bottom:1px dashed var(--border-soft);font-size:12.5px;color:var(--text-body);line-height:1.4}
.log .row:last-child{border-bottom:none}
.log .t{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint)}
.log .row.you{background:var(--coral-tint);border-radius:8px;padding:9px 10px;border-bottom:none;margin:4px 0}
.log .row.you .t{color:var(--coral-tint-text)}
.log .row.you span:last-child{color:var(--coral-tint-text);font-weight:700}
.log .dot{width:7px;height:7px;border-radius:50%;background:var(--success);justify-self:center}
.log .dot.c{background:var(--coral)}
.autonomy-chip{display:inline-flex;align-items:center;gap:8px;background:var(--blurple-tint);color:var(--blurple-tint-text);border-radius:var(--r-pill);padding:6px 13px;font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
/* quiet-quarter heatmap */
.hm{position:relative;margin-top:8px}
.hmg{display:grid;grid-template-columns:repeat(13,1fr);grid-auto-rows:1fr;gap:5px}
.hmg i{aspect-ratio:1;border-radius:3px;background:var(--surface-sunken);border:1px solid var(--border-soft);display:block}
.hm-full{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 2s var(--ease-snap) .25s}
.r.in .hm-full{clip-path:inset(0 0 0 0)}
.hm-full i{border-color:transparent}
.hm-legend{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:14px}
/* the work chain */
.chain{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.chain span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-pill);padding:9px 15px;font-size:13.5px;color:var(--text-muted);background:var(--surface-card);transition:background .5s var(--ease-snap),color .5s var(--ease-snap),border-color .5s var(--ease-snap),transform .5s var(--ease-spring);transition-delay:calc(var(--i,0)*.07s)}
.chain span b{font-family:var(--font-mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;opacity:.75}
.r.in .chain span{background:var(--blurple-tint);border-color:transparent;color:var(--blurple-tint-text)}
.r.in .chain span.mine{background:var(--coral);border-color:transparent;color:#fff;transform:scale(1.05);box-shadow:0 6px 18px rgba(255,92,56,.32)}
/* autonomy ledger */
.ledger{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:32px;align-items:stretch}
.ledger .side{padding:26px 28px;border-radius:var(--r-card)}
.ledger .mine-panel{background:var(--surface-ink);color:#C9C4D8}
.ledger ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.ledger .mine-panel ul{grid-template-columns:1fr}
.ledger li{display:flex;gap:9px;font-size:13.5px;line-height:1.4;color:var(--text-body)}
.ledger .mine-panel li{color:#E6E2F5;font-size:14.5px;font-weight:600}
.ledger li::before{content:"\2713";color:var(--success);font-weight:700;flex:none}
.ledger .mine-panel li::before{content:"\2192";color:var(--coral)}
.meter{height:10px;border-radius:6px;background:var(--surface-sunken);overflow:hidden;margin-top:18px;border:1px solid var(--border-soft)}
.meter i{display:block;height:100%;width:0;background:var(--gradient-banger);transition:width 1.6s var(--ease-snap) .2s}
.r.in .meter i{width:93%}
.pain{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.pain>div{padding:22px;border-radius:var(--r-card);background:var(--surface-card);border:1px solid var(--border-soft);box-shadow:var(--shadow-card)}
.pain .n{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--text-primary)}
.pain p{font-size:13.5px;color:var(--text-muted);line-height:1.5;margin:10px 0 0}
.pain .src{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);margin-top:12px;display:block}
@media (max-width:1000px){.ledger{grid-template-columns:1fr}.ledger ul{grid-template-columns:1fr}.pain{grid-template-columns:1fr}.log .row{grid-template-columns:70px 14px 1fr}}