/* Shared case-study typography, callouts and diagrams, from the approved HomeMade draft. */
.release-track span,.decision-pair span,.evidence-chain span,.outcome-grid span{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

.release-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:24px 0;background:#f5f6f3;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.release-track>div{padding:22px 18px;border-right:1px solid var(--line)}
.release-track>div:last-child{border-right:0}
.case-content .release-track p{font-size:14px;line-height:1.6;margin:8px 0 0}

.journey-map{margin:28px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 34px rgba(32,39,73,.07)}
.journey-head,.journey-lane{display:grid;grid-template-columns:140px repeat(3,minmax(0,1fr))}
.journey-head{background:var(--chapter-journey, #222a78);color:#fff}
.journey-head>div{padding:14px 16px;border-left:1px solid rgba(255,255,255,.16)}
.journey-head>div:first-child{border-left:0}
.journey-head span,.journey-step span,.lane-label span{display:block;font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase}
.journey-head span{color:rgba(255,255,255,.64)}
.journey-head strong{display:block;margin-top:4px;font-size:14px}
.journey-lane.customer{background:#f7f6f1}
.journey-lane.staff{background:#edf5ef;border-top:1px solid var(--line)}
.lane-label,.journey-step{padding:20px 16px}
.lane-label{display:flex;flex-direction:column;justify-content:center}
.lane-label span{color:var(--accent)}
.lane-label strong{font:500 21px/1.1 var(--serif);margin-top:7px}
.journey-step{position:relative;border-left:1px solid var(--line)}
.journey-step span{color:var(--muted)}
.journey-step strong{display:block;font-size:16px;line-height:1.3;margin-top:9px}
.case-content .journey-step p{font-size:13.5px;line-height:1.5;margin:7px 0 0;color:var(--muted)}
.journey-step:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:18px;z-index:2;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:11px;line-height:16px;text-align:center;color:var(--accent)}

.layer-system{margin:26px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#f8f7f2,#f1f5f2);box-shadow:0 14px 34px rgba(32,39,73,.06)}
.layer-system-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:2px 4px 14px}
.layer-system-head strong{font-size:16px}
.layer-system-head span{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.layer-map{display:grid;gap:8px}
.layer-map>div{display:grid;grid-template-columns:44px 132px 1fr;gap:14px;padding:16px;align-items:center;border:1px solid rgba(30,38,90,.10);border-radius:9px}
.layer-map>div:nth-child(1){background:#fff}
.layer-map>div:nth-child(2){background:#eef1fb}
.layer-map>div:nth-child(3){background:#e3f2eb}
.layer-map>div:nth-child(4){background:#e9e3d8}
.layer-map span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.72);font:10px var(--mono);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(30,38,90,.10)}
.layer-map strong{font-size:15px}
.case-content .layer-map p{margin:0;font-size:14px;color:#5d625f}
.decision-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.decision-pair>div{padding:22px;border:1px solid var(--line);border-radius:10px}
.decision-pair>div:last-child{background:#eef4ef}
.case-content .decision-pair h3{margin:12px 0 8px}
.case-content .decision-pair p{margin:0;font-size:15px}
.decision-block{margin:34px 0}
.decision-block>span{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.case-content .decision-block h3{font-size:22px;margin:8px 0 10px}
.case-content .decision-block p{margin:0 0 14px}
.case-content .decision-block ul{grid-column:2;margin-top:0}
.case-content section{margin-bottom:48px}
.case-header h1{font-size:clamp(34px,4vw,54px)}
.case-content > section > h2 { font-size: clamp(24px,2.2vw,28px); line-height: 1.2; margin: 6px 0 18px; }

.evidence-chain,.outcome-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.evidence-chain>div,.outcome-grid>div{padding:22px 18px;border-right:1px solid var(--line)}
.evidence-chain>div:last-child,.outcome-grid>div:last-child{border-right:0}
.evidence-chain>div:nth-child(2),.outcome-grid>div:nth-child(2){background:#f5f6f3}
.evidence-chain>div:nth-child(3),.outcome-grid>div:nth-child(3){background:#eef4ef}
.evidence-chain strong,.outcome-grid strong{display:block;font-size:17px;line-height:1.35;margin:10px 0 8px}
.case-content .evidence-chain p,.case-content .outcome-grid p{font-size:14px;line-height:1.55;margin:0}

@media(max-width:600px){.release-track,.decision-pair,.evidence-chain,.outcome-grid{grid-template-columns:1fr}
.release-track>div,.evidence-chain>div,.outcome-grid>div{border-right:0;border-bottom:1px solid var(--line)}
.release-track>div:last-child,.evidence-chain>div:last-child,.outcome-grid>div:last-child{border-bottom:0}
.journey-head{display:none}
.journey-lane{grid-template-columns:1fr}
.journey-lane.staff{border-top:1px solid var(--line)}
.lane-label{padding:16px 18px;border-bottom:1px solid var(--line)}
.lane-label strong{font-size:20px}
.journey-step{border-left:0;border-bottom:1px solid var(--line);padding:17px 18px 17px 64px}
.journey-step:last-child{border-bottom:0}
.journey-step::before{content:attr(data-step);position:absolute;left:18px;top:18px;font:10px var(--mono);color:var(--accent)}
.journey-step:not(:last-child)::after{content:"↓";right:auto;left:20px;top:auto;bottom:-9px}
.layer-system{padding:12px}
.layer-system-head{display:block}
.layer-system-head span{display:block;margin-top:5px}
.layer-map>div{grid-template-columns:38px 1fr;padding:14px;gap:10px}
.layer-map p{grid-column:2}
.case-content .decision-block ul{grid-column:1}
}

/* Both label formats use the same callout type, including the AI practice page. */
.decision-block > .tag { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }