/* ── Case pages ── */

/* ── Breadcrumb ── */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); margin-bottom: 2rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--page-fg); }
.breadcrumb svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── Case hero ── */
.case-hero { padding: 7rem 0 4rem; position: relative; }
@media (max-width: 639px) { .case-hero { padding: 5rem 0 2.5rem; } }
.case-hero-inner { max-width: 48rem; }
.case-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.case-hero-tag { padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; border: 1px solid; }
.case-hero-h1 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1rem; color: var(--page-fg); }
.case-hero-sub { font-size: 1.125rem; line-height: 1.7; color: var(--muted); margin-bottom: 2rem; max-width: 40rem; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; }
.case-meta-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); }
.case-meta-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.case-stack { display: flex; flex-wrap: wrap; gap: .5rem; }
.case-stack-tag { padding: .25rem .625rem; border-radius: .375rem; font-size: .75rem; font-family: 'JetBrains Mono', monospace; background: var(--subtle); border: 1px solid var(--card-border); color: var(--muted); }

/* ── Cover image ── */
.case-cover { width: 100%; max-height: 480px; object-fit: cover; border-radius: 1rem; border: 1px solid var(--card-border); margin-bottom: 4rem; display: block; }

/* ── Case body layout ── */
.case-body { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .case-body { grid-template-columns: 1fr 280px; align-items: start; } }

/* ── Case content ── */
.case-content { min-width: 0; }

/* ── Problem / Goal blocks ── */
.case-block { margin-bottom: 2.5rem; }
.case-block-label { font-size: .75rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.case-block h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1rem; color: var(--page-fg); }
.case-block p { font-size: 1rem; line-height: 1.8; color: var(--muted); }

/* ── Steps ── */
.case-steps { margin-bottom: 3rem; }
.case-steps-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.5rem; color: var(--page-fg); }
.case-step { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; }
.case-step-left { flex-shrink: 0; }
.case-step-num { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: .875rem; color: #fff; background: var(--accent); }
.case-step-content { flex: 1; min-width: 0; padding-top: .25rem; }
.case-step-content h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .625rem; color: var(--page-fg); }
.case-step-content p { font-size: .9375rem; line-height: 1.8; color: var(--muted); margin-bottom: 1rem; }
.case-step-img { width: 100%; border-radius: .75rem; border: 1px solid var(--card-border); display: block; margin-top: 1rem; }
.case-prompt { margin-top: 1rem; border-radius: .75rem; overflow: hidden; border: 1px solid var(--card-border); }
.case-prompt-head { display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem; background: var(--subtle); border-bottom: 1px solid var(--card-border); font-size: .75rem; font-family: 'JetBrains Mono', monospace; color: var(--muted); }
.case-prompt-head svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.case-prompt pre { padding: 1rem; font-size: .8125rem; line-height: 1.7; color: var(--page-fg); font-family: 'JetBrains Mono', monospace; white-space: pre-wrap; word-break: break-word; margin: 0; background: var(--card-bg); }

/* ── Key Points ── */
.key-points { margin-bottom: 2.5rem; }
.key-points-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.5rem; color: var(--page-fg); }
.key-point { border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--card-border); background: var(--card-bg); margin-bottom: 1rem; }
.key-point h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--page-fg); }
.key-point-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .75rem; }
@media (max-width: 480px) { .key-point-row { grid-template-columns: 1fr; } }
.kp-col label { font-size: .75rem; font-family: 'JetBrains Mono', monospace; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .375rem; }
.kp-col.old label { color: var(--red); }
.kp-col.new label { color: var(--green); }
.kp-col p { font-size: .875rem; line-height: 1.6; color: var(--muted); }
.kp-reason { font-size: .8125rem; line-height: 1.6; color: var(--muted); padding-top: .75rem; border-top: 1px solid var(--card-border); font-style: italic; }

/* ── Result ── */
.case-result { border-radius: 1rem; padding: 1.75rem; background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.2); margin-bottom: 2.5rem; }
.case-result-label { font-size: .75rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.case-result p { font-size: 1rem; line-height: 1.8; color: var(--page-fg); }

/* ── Client quote ── */
.case-quote { border-left: 3px solid var(--accent); padding: 1rem 1.5rem; margin-bottom: 2.5rem; }
.case-quote blockquote { font-size: 1.0625rem; line-height: 1.7; font-style: italic; color: var(--page-fg); margin-bottom: .5rem; }
.case-quote cite { font-size: .8125rem; color: var(--muted); font-style: normal; font-family: 'JetBrains Mono', monospace; }

/* ── FAQ on case page ── */
.case-faq { margin-bottom: 2.5rem; }
.case-faq h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.25rem; color: var(--page-fg); }

/* ── Sidebar (sticky) ── */
.case-sidebar { position: sticky; top: 5.5rem; }
.case-metrics-card { border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--card-border); background: var(--card-bg); margin-bottom: 1.25rem; }
.case-metrics-card h3 { font-size: .875rem; font-weight: 600; color: var(--muted); margin-bottom: 1.25rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.case-metric-item { padding: .875rem 0; border-bottom: 1px solid var(--card-border); }
.case-metric-item:last-child { border-bottom: none; padding-bottom: 0; }
.case-metric-val { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 900; color: var(--page-fg); margin-bottom: .125rem; }
.case-metric-label { font-size: .75rem; color: var(--muted); margin-bottom: .125rem; }
.case-metric-delta { font-size: .75rem; color: var(--green); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.sidebar-cta { border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--card-border); background: var(--subtle); text-align: center; margin-bottom: 1.25rem; }
.sidebar-cta p { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.6; }
.sidebar-cta a { display: block; padding: .75rem 1rem; border-radius: .75rem; background: var(--accent); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s; }
.sidebar-cta a:hover { background: #4f46e5; }
.sidebar-stack { border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--card-border); background: var(--card-bg); }
.sidebar-stack h3 { font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: 1rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-stack-tags { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Next case CTA ── */
.case-next { margin: 4rem 0; padding: 2rem; border-radius: 1rem; border: 1px solid var(--card-border); background: var(--card-bg); display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .case-next { flex-direction: row; align-items: center; justify-content: space-between; } }
.case-next-label { font-size: .75rem; font-family: 'JetBrains Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.case-next h3 { font-size: 1rem; font-weight: 700; color: var(--page-fg); }
.case-next a { flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: .75rem; background: var(--accent); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s; white-space: nowrap; }
.case-next a:hover { background: #4f46e5; }
.case-next a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Back to cases ── */
.back-to-cases { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); text-decoration: none; transition: color .15s; margin-bottom: 2rem; }
.back-to-cases:hover { color: var(--page-fg); }
.back-to-cases svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }