/* Case studies: real-life AI workstreams */
.case-shell { max-width: 72rem; margin: 0 auto; padding: var(--sp-6, 2rem) var(--sp-4, 1rem); }
.case-breadcrumb { font-size: 0.85rem; color: var(--color-text-muted, #667); margin-bottom: var(--sp-4, 1rem); }
.case-breadcrumb a { color: inherit; }
.case-hero { margin-bottom: var(--sp-6, 2rem); }
.case-hero .case-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--color-text-muted, #667); margin: 0 0 var(--sp-2, 0.5rem); }
.case-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 var(--sp-3, 0.75rem); }
.case-hero p { max-width: 44rem; color: var(--color-text-muted, #667); }
.case-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4, 1rem); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.case-card { display: flex; flex-direction: column; gap: var(--sp-3, 0.75rem); padding: var(--sp-5, 1.5rem); border: 1px solid var(--color-border, #e2e2e2); border-radius: var(--radius-md, 14px); background: var(--color-surface, #fff); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.case-card:hover, .case-card:focus-visible { border-color: var(--color-accent, #4f46e5); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.case-card__subject { font-size: 1.05rem; font-weight: 650; margin: 0; }
.case-card__org { color: var(--color-text-muted, #667); font-size: 0.9rem; margin: 0; }
.case-card__outcome { font-size: 1.05rem; line-height: 1.4; border-left: 3px solid var(--color-accent, #4f46e5); padding-left: var(--sp-3, 0.75rem); margin: 0; }
.case-card__tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.case-chip { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--color-accent-soft, #eef); color: var(--color-text, #3730a3); }
.case-chip--source { background: var(--color-surface-raised, #f4f4f5); color: var(--color-text-muted, #667); }
.case-card__more { margin-top: auto; font-size: 0.9rem; color: var(--color-accent, #4f46e5); }
.case-notice { padding: var(--sp-5, 1.5rem); border: 1px dashed var(--color-border, #e2e2e2); border-radius: var(--radius-md, 14px); color: var(--color-text-muted, #667); }
/* detail */
.case-detail__subject { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: var(--sp-4, 1rem); }
.case-detail__subject h1 { margin: 0; }
.case-steps { list-style: none; counter-reset: casestep; margin: var(--sp-5, 1.5rem) 0; padding: 0; display: grid; gap: var(--sp-4, 1rem); }
.case-step { counter-increment: casestep; display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-3, 0.75rem); }
.case-step::before { content: counter(casestep); width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--color-accent-soft, #eef); color: var(--color-text, #3730a3); display: grid; place-items: center; font-weight: 700; }
.case-step h3 { margin: 0.3rem 0 0.25rem; font-size: 1.05rem; }
.case-step p { margin: 0; color: var(--color-text-muted, #667); }
.case-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3, 0.75rem); }
.case-outcome { padding: var(--sp-4, 1rem); border: 1px solid var(--color-border, #e2e2e2); border-radius: var(--radius-md, 14px); }
.case-outcome p { margin: 0 0 0.5rem; font-size: 1.02rem; }
.case-outcome a { font-size: 0.85rem; }
.case-sources { margin-top: var(--sp-6, 2rem); border-top: 1px solid var(--color-border, #e2e2e2); padding-top: var(--sp-4, 1rem); }
.case-sources li { margin-bottom: 0.5rem; }
.case-attribution { margin-top: var(--sp-4, 1rem); padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); background: var(--color-surface-raised, #f4f4f5); border-radius: var(--radius-md, 10px); font-size: 0.9rem; color: var(--color-text-muted, #667); }
.case-meta { font-size: 0.85rem; color: var(--color-text-muted, #667); }
.case-example { margin: 0.4rem 0 0; padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); background: var(--color-surface-raised, #f4f4f5); border: 1px solid var(--color-border, #e2e2e2); border-radius: var(--radius-md, 10px); font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; user-select: all; }

/* Imagery lane (2026-10-27): use-cases index hero visual, clearly labelled illustrative. */
.case-hero__visual { margin: var(--sp-4, 1rem) 0 0; }
.case-hero__visual img { display: block; width: 100%; height: auto; border-radius: var(--radius-md, 8px); border: 1px solid var(--color-border, #d7dce6); }
.case-hero__visual figcaption { margin-top: var(--sp-2, 0.5rem); font-size: 0.8125rem; color: var(--color-text-muted, #667); }

/* Skip link: reuse of .guides-skip on case pages needs its own rule (guides.css is not loaded here). */
.guides-skip{position:absolute;left:var(--sp-3);top:-6rem;z-index:var(--z-dialog);background:var(--color-surface);padding:var(--sp-3)}
.guides-skip:focus{top:var(--sp-3)}

/* Process map: reported workflow at a glance. Horizontal scroll track on wide
   screens, vertical stack on small screens. HTML/CSS only, no image assets. */
.case-flow { margin: var(--sp-5, 1.5rem) 0; }
.case-flow__track { list-style: none; display: flex; align-items: stretch; gap: var(--sp-2, 0.5rem); overflow-x: auto; padding: var(--sp-3, 0.75rem); margin: 0; border: 1px solid var(--color-border, #e2e2e2); border-radius: 14px; background: linear-gradient(120deg, var(--color-accent-soft, #eef) 0%, var(--color-surface, #fff) 60%); scroll-snap-type: x proximity; }
.case-flow__node { flex: 0 0 auto; min-width: 9rem; max-width: 12rem; border: 1px solid var(--color-border, #e2e2e2); border-radius: 12px; background: var(--color-surface, #fff); box-shadow: 0 4px 14px rgba(23,29,45,0.07); padding: var(--sp-3, 0.75rem); display: flex; gap: var(--sp-2, 0.5rem); align-items: flex-start; scroll-snap-align: start; }
.case-flow__num { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-accent, #6366f1); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.case-flow__name { font-size: 0.9rem; line-height: 1.35; }
.case-flow__arrow { align-self: center; color: var(--color-accent, #6366f1); font-weight: 700; list-style: none; }
@media (max-width: 760px) {
  .case-flow__track { flex-direction: column; overflow: visible; background: none; border: none; padding: 0 0 0 0.8rem; position: relative; }
  .case-flow__track::before { content: ''; position: absolute; left: 1.55rem; top: 0.8rem; bottom: 0.8rem; width: 2px; background: var(--color-accent, #6366f1); opacity: 0.35; }
  .case-flow__node { max-width: none; position: relative; }
  .case-flow__arrow { display: none; }
}

/* 'See it in action': illustrative prompt -> result pair from our own suggested
   practice steps. Clearly labelled as illustration, never the subject's artifacts. */
.case-illus { margin: var(--sp-5, 1.5rem) 0; }
.case-illus__window { border: 1px solid var(--color-border, #e2e2e2); border-radius: 14px; overflow: hidden; background: var(--color-surface, #fff); box-shadow: 0 10px 30px rgba(23,29,45,0.08); }
.case-illus__titlebar { display: flex; gap: 6px; padding: 10px 14px; background: var(--color-surface-raised, #f4f4f5); border-bottom: 1px solid var(--color-border, #e2e2e2); }
.case-illus__titlebar span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border, #d5d5da); }
.case-illus__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3, 0.75rem); align-items: stretch; padding: var(--sp-4, 1rem); background: linear-gradient(180deg, var(--color-surface-raised, #f7f7f9), var(--color-surface, #fff)); }
.case-illus__pane { margin: 0; border: 1px solid var(--color-border, #e2e2e2); border-radius: 16px; padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); background: var(--color-surface-raised, #f4f4f5); }
.case-illus__pane--in { border: none; border-bottom-right-radius: 4px; background: #4f46e5; color: #ffffff; justify-self: end; }
.case-illus__pane--in p { color: #ffffff; }
.case-illus__pane.case-illus__pane--in figcaption { color: #ffffff; }
.case-illus__pane--out { border-bottom-left-radius: 4px; background: var(--color-surface, #fff); box-shadow: 0 2px 8px rgba(23,29,45,0.06); }
.case-illus__pane figcaption { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted, #667); margin-bottom: var(--sp-2, 0.5rem); }
.case-illus__pane p { margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.case-illus__arrow { align-self: center; color: var(--color-text-muted, #667); font-size: 1.25rem; }
@media (max-width: 760px) {
  .case-illus__pair { grid-template-columns: 1fr; }
  .case-illus__arrow { transform: rotate(90deg); justify-self: start; margin-left: 1.2rem; }
}

/* Plain practice visuals, not a simulated product screen. */
.case-flow__track, .case-illus__pair { background: var(--color-surface, #fff); }
.case-flow__node, .case-illus__window, .case-illus__pane { box-shadow: none; }
.case-jumps { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.case-jumps a { padding:12px 0; min-height:44px; }
.case-illus__pane--in { justify-self:stretch; }

/* Tidy case cards: summary first, labelled rows, clamped text. */
.case-card__title { font-size: var(--text-base, 1rem); line-height: 1.35; margin: 0; font-weight: 700; }
.case-card__subject { margin: 0; font-size: var(--text-sm, .875rem); color: var(--color-text-muted, #586278); font-weight: 600; }
.case-card__summary { margin: 0; font-size: var(--text-sm, .875rem); line-height: 1.5; color: var(--color-text, #171d2d); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.case-card__label { flex: none; min-width: 3.5rem; font-size: var(--text-xs, .75rem); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted, #586278); font-weight: 600; }
.case-card .case-chip { font-size: var(--text-xs, .75rem); white-space: nowrap; }
.case-card .case-meta { margin: 0; font-size: var(--text-sm, .875rem); line-height: 1.45; }
.case-card .case-meta--try { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Detail page: one tag style, button row, wrapping step strip. */
.case-chip { text-decoration: none; white-space: nowrap; display: inline-block; }
a.case-chip { border: 1px solid transparent; }
a.case-chip:hover { border-color: var(--color-accent, #3d5afe); }
.case-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: var(--sp-3, .75rem) 0; }
.case-jumps { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--sp-4, 1.25rem) 0; }
.case-jumps a.case-jump { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border: 1.5px solid var(--color-accent, #3d5afe); border-radius: 999px; background: transparent; color: var(--color-accent, #3d5afe); font-weight: 600; font-size: var(--text-sm, .875rem); text-decoration: none; }
.case-jumps a.case-jump--primary { background: var(--color-accent, #3d5afe); color: #fff; }
.case-jumps a.case-jump:hover { box-shadow: 0 2px 8px rgba(23,29,45,.18); }
@media (max-width: 560px) { .case-jumps a.case-jump { flex: 1 1 100%; } }
@media (min-width: 561px) { .case-flow__track { flex-wrap: wrap; overflow: visible; } .case-flow__arrow { display: none; } }

/*cs2*/.cs2-hero{margin:14px 0}.cs2-hero img{width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:14px;display:block}.cs2-hero figcaption{font-size:.8rem;color:#5b6475;margin-top:4px}.case-card__img{width:100%;height:150px;object-fit:cover;display:block;border-radius:10px 10px 0 0;margin:0 0 10px}
.cs2-flow{overflow:visible!important}.cs2-fg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;counter-reset:n}
.cs2-fc{position:relative;display:flex;flex-direction:column;gap:8px;border:2px solid;border-radius:12px;padding:12px 14px 12px 14px;font-size:1rem;line-height:1.35;color:#1b2540}
.cs2-ft{background:#eaf0fb;border-color:#3b5bdb}.cs2-fp{background:#e8f4ee;border-color:#2f7d5b}
.cs2-fn{font-weight:800;font-size:.9rem;color:#5b6475}.cs2-fh{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.cs2-fw{align-self:flex-start;background:#fff;border:1px solid currentColor;border-radius:999px;padding:2px 12px;font-size:.92rem;font-weight:600}
.cs2-leg{margin:10px 0 0;font-size:.92rem;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}.cs2-sw.cs2-ft{border-color:#3b5bdb}.cs2-sw.cs2-fp{border-color:#2f7d5b}.cs2-sw{display:inline-block;width:16px;height:16px;border:2px solid;border-radius:4px}
.cs2-stat .cs2-k,.cs2-k{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#5b6475;font-weight:700}.cs2-stat a{font-size:.75rem;margin-left:6px}
.cs2{max-width:860px;margin:0 auto;padding:8px 20px 56px}
.cs2 h1{font-size:2.1rem;line-height:1.15;margin:.3em 0 .35em}
.cs2 .cs2-by{color:var(--text-muted,#5b6475);margin:0 0 14px}
.cs2 .cs2-sum{font-size:1.15rem;line-height:1.5;margin:0 0 20px}
.cs2 h2{font-size:1.35rem;margin:34px 0 10px}
.cs2-glance{border:1px solid var(--border,#d9dee8);border-radius:14px;padding:16px 18px;background:var(--surface,#f6f8fc);display:grid;gap:14px}
.cs2-res{grid-column:1/-1}.cs2-res b{display:inline;font-weight:600}.cs2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cs2-stat b{display:block;font-size:1.02rem;line-height:1.3}.cs2-stat span{font-size:.88rem;color:var(--text-muted,#5b6475)}
.cs2-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cs2-chip{border:1px solid var(--border,#c9d1e0);border-radius:999px;padding:3px 12px;font-size:.9rem;background:#fff;color:#1b2540}
.cs2-label{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#5b6475);margin-right:6px}
.cs2-flow svg{max-width:none!important;height:auto}
.cs2-flow{overflow-x:auto;border:1px solid var(--border,#d9dee8);border-radius:14px;padding:10px;background:#fff}
.cs2-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.cs2-steps li{border:1px solid var(--border,#d9dee8);border-left:4px solid #2f7d5b;border-radius:12px;padding:12px 16px;background:#fff}
.cs2-steps h3{margin:0 0 4px;font-size:1.05rem}.cs2-steps p{margin:4px 0}
.cs2-check{background:#fff8e6;border:1px solid #ecd9a0;border-radius:8px;padding:6px 10px;font-size:.93rem}
.cs2-ba{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cs2-ba div{border:1px solid var(--border,#d9dee8);border-radius:12px;padding:12px 16px;background:#fff}
.cs2-ba h3{margin:0 0 6px;font-size:.95rem;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:600px){.cs2-ba{grid-template-columns:1fr}.cs2 h1{font-size:1.6rem}}
.cs2 details{border:1px solid var(--border,#d9dee8);border-radius:12px;padding:10px 16px;margin:10px 0;background:#fff}
.cs2 summary{cursor:pointer;font-weight:600}
.cs2-src li{margin:4px 0}.cs2-note{color:var(--text-muted,#5b6475);font-size:.92rem}