/* Case study page v4 (spec: claude/strategy/case-study-v4-implementation-spec-20260928.md). */
.teardown-reading main{min-width:0;overflow-wrap:anywhere}
.teardown-reading .headline{margin-bottom:0}
.how-won{margin:28px 0 8px}
.how-won h2{font-size:28px;margin-bottom:16px}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px}
.chain-step{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;background:var(--paper2);border:1px solid var(--rule);border-top:3px solid var(--c);border-radius:3px;padding:12px}
.chain-step:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);color:var(--muted);font-size:15px;background:var(--paper);line-height:1;padding:2px 0}
.chain-jump{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.chain-years{font:500 12px/1 var(--font-mono);color:var(--muted)}
.chain-years b{color:var(--c);font-weight:600}
.chain-label{font:500 16.5px/1.2 var(--font-heading);color:var(--ink)}
.chain-ev{font-size:13px;line-height:1.45;color:var(--ink2)}
@media(hover:hover){.chain-jump:hover .chain-label{text-decoration:underline;text-underline-offset:3px}}
.chain-step .tag{align-self:flex-start;font-size:11.5px}
.chain-vs{margin:14px 0 0;font-size:14.5px;color:var(--ink2);border-left:3px solid var(--rule);padding-left:12px}
.chain-vs strong{color:var(--ink);font-weight:600}
@media(max-width:1100px){.chain{grid-template-columns:minmax(0,1fr);gap:14px}.chain-step:not(:last-child)::after{content:"↓";right:auto;left:22px;top:auto;bottom:-14px;transform:none;padding:0 4px}}

.before-meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.teardown-reading .arena-paragraph .taxonomy{margin:0 0 10px}
.teardown-reading .arena-paragraph>p:not(.before-meta):not(.citations):not(.taxonomy){max-width:70ch;margin:0 0 12px}

.steps>h2{margin-bottom:0}
.step{display:block;padding:44px 0 40px;border-top:1px solid var(--rule);position:relative;max-width:70ch}
.step:first-of-type{border-top:0;padding-top:20px}
.step:not(:first-of-type)::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:3px;background:var(--c)}
.step-eyebrow{font:500 12px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--c);margin:0 0 10px}
.step h3{font-size:25px;line-height:1.22;margin:0 0 18px}
.step h4{font:500 19.5px/1.3 var(--font-heading);margin:26px 0 10px;color:var(--ink)}
.step p{margin:0 0 14px;font-size:15.5px;line-height:1.65}
.step .rival-line{font-size:14px;line-height:1.55;color:var(--ink2);margin:22px 0 8px}
.step h4+p{margin-top:0}
.rival-k{font:600 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.step .taxonomy{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.step:target,.teardown-reading .entry-assessment:target{background:none}
.anchor{display:block;position:relative;top:-24px;visibility:hidden}
.cite{font-size:11px;color:var(--muted);white-space:nowrap}

.kd{list-style:none;margin:8px 0 0;padding:0;max-width:70ch}
.kd li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:7px 0;border-top:1px solid var(--rule2);font-size:14.5px}
.kd-date{font:500 12.5px/1.6 var(--font-mono);color:var(--muted)}
.kd li.kpi .kd-body{color:var(--ink)}
.kd-metric{font-weight:600;margin-right:6px;color:var(--ink)}
.kd li.kpi .kd-date{color:var(--go-to-market-strategy)}
.kd li:target{background:var(--intent-bg)}

.src-note{color:var(--muted);font-size:13px;margin:0 0 4px}
#sources ol.sources li{display:block;padding:2px 0 2px 44px;text-indent:-44px;border:0;font-size:13.5px;line-height:1.55}
#sources .source-id{display:inline-block;width:40px;text-indent:0;font:500 11.5px/1 var(--font-mono);color:var(--muted)}
#sources .src-meta{color:var(--ink2)}
.src-type{display:inline-block;text-indent:0;font-size:11px;line-height:1.4;padding:0 6px;border:1px solid var(--rule);border-radius:3px;background:var(--paper2);color:var(--ink2);margin-left:4px;vertical-align:1px;white-space:normal;max-width:100%}
#sources li:target{background:var(--intent-bg)}
.src-foot{margin:6px 0 0;font-size:13px}
.choice-dim{font-size:12px;color:var(--muted);margin-right:4px}

/* Tag and layer tooltips: generated only on hover or focus, so an unseen tooltip never widens the page. Off on touch. */
.tag[data-tip],.layer-tip{position:relative}
.layer-tip{cursor:help;text-decoration:underline dotted var(--rule);text-underline-offset:3px;display:inline-flex}
@media(hover:hover){
.tag[data-tip]:hover::after,.tag[data-tip]:focus-visible::after,.layer-tip:hover::after,.layer-tip:focus-visible::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:min(260px,80vw);padding:8px 10px;border-radius:4px;background:var(--ink);color:var(--paper);font:400 12.5px/1.45 var(--font-body);letter-spacing:0;text-transform:none;white-space:normal;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none;animation:tip-in .12s ease .15s both}
.strategy-profile .tag[data-tip]:hover::after,.strategy-profile .tag[data-tip]:focus-visible::after{left:auto;right:0;max-width:230px}
}
@keyframes tip-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:800px){.how-won h2{font-size:26px}.step{padding:32px 0 28px}.step h3{font-size:23px}.kd li{grid-template-columns:72px minmax(0,1fr)}}
@media print{.chain{grid-template-columns:1fr}.chain-step::after{display:none}}