/* case-study.css - AnyAI customer story layout (group 2 preview).
   Built only on the existing tokens from tokens.css / marketing.css
   (--surface, --ink-*, --brand, --link, --signal, --deck-*, --hairline, radii, shadows).
   Light/dark follow the same switch as marketing.css, so no theme overrides are needed here. */

/* ---------- hero ---------- */
.mk-page .mk-deck-hero.cs-hero{padding:6.5rem 0 10rem}
.cs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 1.75rem;padding:0;list-style:none;font-size:.875rem;color:var(--deck-muted)}
.cs-crumb a{color:var(--deck-ink);text-decoration:none;opacity:.88}
.cs-crumb a:hover{text-decoration:underline;opacity:1}
.cs-crumb li+li:before{content:"/";margin-right:8px;opacity:.6}
.cs-tag{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.875rem;font-weight:600;letter-spacing:.01em;line-height:1.4;color:var(--deck-muted)}
.cs-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none}
.cs-tag b{color:var(--deck-ink);font-weight:700}
.cs-tag i{font-style:normal;opacity:.55}
.mk-page .cs-hero h1{margin:1rem 0 2rem;max-width:24ch;font-size:clamp(2.125rem,3.2vw + 1rem,3.625rem);line-height:1.08;text-wrap:balance}
.cs-hero .mk-deck-sub{margin:-.75rem 0 2rem;max-width:40rem}

/* ---------- image frames (placeholder until the real file is dropped in) ---------- */
.cs-media{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--hairline);
  background:
    radial-gradient(110% 90% at 10% 8%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 62%),
    radial-gradient(90% 80% at 94% 96%,color-mix(in srgb,var(--signal) 24%,transparent),transparent 60%),
    linear-gradient(160deg,var(--surface-2),var(--bg-well))}
.cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-ph{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-pill,999px);
  background:color-mix(in srgb,var(--surface) 84%,transparent);border:1px solid var(--hairline);color:var(--ink-muted);font-size:.8125rem;font-weight:500;line-height:1.3}
.cs-ph .mk-i{width:16px;height:16px;flex:none}
.cs-hero-media{position:relative;z-index:1;margin-top:-7.5rem;box-shadow:var(--shadow-hover)}

/* ---------- facts + stat strip ---------- */
.cs-meta{display:grid;margin-top:2rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.cs-meta>*{min-width:0;padding:24px 24px 26px}
.cs-meta>*+*{border-top:1px solid var(--hairline)}
.cs-facts{margin:0;display:grid;gap:14px;align-content:start}
.cs-facts>div{display:grid;grid-template-columns:minmax(6.75rem,8.5rem) minmax(0,1fr);gap:12px}
.cs-facts dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;color:var(--ink-dim)}
.cs-facts dd{margin:0;font-size:.9375rem;font-weight:500;line-height:1.5;color:var(--ink-strong)}
.cs-facts dd span{display:block}
.cs-stat:before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--signal);margin-bottom:16px}
.cs-stat-head{font:700 clamp(1.5rem,1vw + 1rem,1.875rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink-strong)}
.cs-stat-text{margin-top:10px;font-size:.9375rem;line-height:1.55;color:var(--ink-muted)}

/* ---------- body ---------- */
.cs-body{padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(4rem,7vw,6.5rem)}
.cs-read{max-width:46rem}
.mk-page .cs-lede{font-size:clamp(1.1875rem,.5vw + 1rem,1.375rem);line-height:1.6;color:var(--ink)}
.mk-page .cs-with{margin:2.5rem 0 1.1rem;font-size:1.375rem;line-height:1.3}
.cs-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cs-list li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;line-height:1.6;color:var(--ink-muted)}
.cs-list .mk-i{width:20px;height:20px;margin-top:4px;color:var(--link);stroke-width:2.25}

.cs-section{margin-top:clamp(3.5rem,6vw,5.5rem);padding-top:clamp(2rem,3vw,2.75rem);border-top:1px solid var(--hairline)}
.cs-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:1.75rem}
.cs-sec-icon{width:44px;height:44px;border-radius:12px;background:var(--wash);color:var(--link);display:grid;place-items:center;flex:none}
.cs-sec-icon .mk-i{width:22px;height:22px}
.mk-page .cs-sec-head h2{font-size:clamp(1.75rem,1.5vw + 1rem,2.375rem)}
.cs-sec-grid{display:grid;gap:2rem}
.cs-content{min-width:0}
.mk-page .cs-content h3{font-size:1.375rem;line-height:1.3;margin:0 0 1rem}
.mk-page .cs-content h3:not(:first-child){margin-top:2.5rem}
.mk-page .cs-content p{font-size:1.125rem;line-height:1.7;color:var(--ink-muted)}
.mk-page .cs-content p+p{margin-top:1.1rem}
.cs-content .cs-media{margin:2.25rem 0 0}
.cs-built{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cs-built li{padding:16px 18px;background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--signal);border-radius:14px;font-size:1.0625rem;line-height:1.6;color:var(--ink-muted)}
.cs-built strong{color:var(--ink-strong);font-weight:600}
.mk-page .cs-built+p{margin-top:1.5rem}

/* margin cards (side cards next to each section) */
.cs-aside{min-width:0}
.cs-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-card)}
.cs-kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--signal-text)}
.mk-page .cs-card h3{font-size:1.0625rem;line-height:1.35;margin:8px 0}
.mk-page .cs-card p{font-size:.9375rem;line-height:1.6;color:var(--ink-muted)}
.cs-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;text-decoration:none;color:var(--link)}
.cs-more:hover{text-decoration:underline}
.cs-more .mk-i{width:16px;height:16px}
.cs-flow{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;counter-reset:cs-flow}
.cs-flow li{counter-increment:cs-flow;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:.9375rem;line-height:1.5;color:var(--ink-muted)}
.cs-flow li:before{content:counter(cs-flow);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--link);font:700 .75rem/1 var(--display)}
.cs-card .mk-cta{margin-top:16px}
.cs-card .mk-btn{padding:10px 16px;font-size:14px}

/* ---------- related stories ---------- */
.cs-related{padding:clamp(4rem,7vw,6rem) 0;background:var(--surface-2);border-top:1px solid var(--hairline)}
.cs-related-head{text-align:center;margin-bottom:2.5rem}
.cs-related-head .mk-lead{margin-top:10px}
.cs-cards{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.cs-cards>li{min-width:0}
.cs-scard{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;color:inherit;text-decoration:none;transition:transform .24s,box-shadow .24s,border-color .24s}
.cs-scard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.cs-scard .cs-media{border:0;border-bottom:1px solid var(--hairline);border-radius:0}
.cs-scard-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px}
.cs-scard-tag{font-size:.8125rem;font-weight:600;color:var(--ink-dim)}
.mk-page .cs-scard h2,.mk-page .cs-scard h3{font-size:1.0625rem;line-height:1.4;letter-spacing:-.01em}
.mk-page .cs-scard p{font-size:.9375rem;line-height:1.6;color:var(--ink-muted)}
.cs-scard-go{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--link)}
.cs-scard-go .mk-i{width:16px;height:16px;transition:transform .24s}
.cs-scard:hover .cs-scard-go .mk-i{transform:translateX(3px)}

/* ---------- group page ---------- */
.cs-intro{padding:clamp(3.5rem,6vw,5.5rem) 0 0}
.mk-page .cs-intro p+p{margin-top:1.25rem}
.mk-page .cs-intro p:not(.cs-lede){font-size:1.125rem;line-height:1.7;color:var(--ink-muted)}
.cs-block{padding:clamp(4rem,7vw,6rem) 0}
.cs-block-head{margin-bottom:2.25rem;max-width:46rem}
.cs-block-head .mk-lead{margin-top:10px}
.cs-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:cs-step}
.cs-step{counter-increment:cs-step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 18px;padding:22px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.cs-step-num{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--wash);color:var(--link);font:700 1rem/1 var(--display)}
.cs-step-num:before{content:counter(cs-step)}
.mk-page .cs-step h3{font-size:1.125rem;align-self:center}
.mk-page .cs-step p{font-size:1rem;line-height:1.65;color:var(--ink-muted)}
.cs-gloss{margin:0;display:grid;gap:16px}
.cs-gloss>div{min-width:0;padding:22px;background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--signal);border-radius:var(--radius-lg)}
.cs-gloss dt{display:flex;align-items:center;gap:10px;font:700 1.0625rem/1.35 var(--display);color:var(--ink-strong)}
.cs-gloss dt .mk-i{width:20px;height:20px;color:var(--link)}
.cs-gloss dd{margin:10px 0 0;font-size:1rem;line-height:1.65;color:var(--ink-muted)}

/* ---------- responsive ---------- */
@media(min-width:768px){
  .cs-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-gloss{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .cs-meta{grid-template-columns:1.2fr 1fr 1fr}
  .cs-meta>*{padding:28px 30px 30px}
  .cs-meta>*+*{border-top:0;border-left:1px solid var(--hairline)}
  .cs-step{grid-template-columns:44px minmax(10rem,15rem) minmax(0,1fr);align-items:start;gap:0 28px;padding:24px 28px}
  .cs-step-num{grid-row:auto}
  .mk-page .cs-step h3{padding-top:10px;align-self:start}
  .mk-page .cs-step p{padding-top:8px}
}
@media(min-width:1024px){
  .cs-sec-grid{grid-template-columns:minmax(0,46rem) minmax(0,18.5rem);justify-content:space-between;gap:4rem}
  .cs-aside{position:sticky;top:88px;align-self:start}
}
@media(max-width:639px){
  .mk-page .mk-deck-hero.cs-hero{padding:5.5rem 0 6.5rem}
  .cs-hero-media{margin-top:-4rem;border-radius:var(--radius-lg)}
  .cs-hero .mk-cta .mk-btn{width:100%}
  .cs-meta>*{padding:20px 18px 22px}
  .cs-built li{padding:14px 16px;font-size:1rem}
  .cs-list li{font-size:1rem}
  .mk-page .cs-content p{font-size:1.0625rem}
  .cs-tag i{display:none}
  .cs-tag span{flex-basis:100%;padding-left:16px}
}
@media(prefers-reduced-motion:reduce){.cs-scard,.cs-scard-go .mk-i{transition:none}}