/* Shared case-study page styles (v2, tokenized via --cs-* set per page in :root).
   Used by metinvest, ncrypto, medbook, mybeauty. Source of truth: case_study_gen.py CSS. */
/* ---------- Hero ---------- */
.cs2-hero{position:relative;overflow:hidden;color:#fff;background:#0b0f12;min-height:clamp(500px,52vw,720px);display:flex}
.cs2-hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--cs-hero-bg)}
.cs2-hero .container{position:relative;z-index:1;display:flex;flex-direction:column;padding-block:clamp(28px,4vw,44px) clamp(44px,7vw,88px);width:100%}
.cs2-hero .breadcrumb{margin-bottom:clamp(40px,10vw,150px)}
.cs2-hero .breadcrumb a{color:#fff}
.cs2-hero .breadcrumb .sep,.cs2-hero .breadcrumb .cur{color:rgba(255,255,255,.7)}
.cs2-hero .eyebrow-h{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-accent-lt);margin-bottom:16px}
.cs2-hero h1{font-size:clamp(29px,4.4vw,56px);line-height:1.1;font-weight:600;letter-spacing:-.025em;max-width:min(640px,92%);text-shadow:0 2px 22px rgba(0,0,0,.42)}
.cs2-hero .btn{margin-top:clamp(24px,3vw,36px);align-self:flex-start}
@media(min-width:760px){.cs2-hero h1{max-width:60%}}
@media(min-width:1180px){.cs2-hero h1{max-width:680px}}
/* ---------- Meta bar ---------- */
.cs2-meta{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,36px);align-items:flex-start;padding-block:clamp(24px,3.6vw,44px)}
.cs2-meta .logo-tile{width:clamp(84px,12vw,120px);aspect-ratio:1;border-radius:24px;flex:0 0 auto;display:grid;place-items:center;background:var(--cs-logo-grad);box-shadow:0 14px 30px -18px rgba(40,40,60,.5)}
.cs2-meta .logo-tile img{width:64%;height:64%;object-fit:contain}
.cs2-meta .stats{display:grid;grid-template-columns:1fr;flex:1 1 300px;min-width:0}
.cs2-meta .st{padding-block:clamp(14px,3vw,18px)}
.cs2-meta .st:first-child{padding-top:0}
.cs2-meta .st + .st{border-top:1px solid var(--line)}
.cs2-meta .st .k{font-size:14px;font-weight:600;color:var(--muted)}
.cs2-meta .st .v{margin-top:6px;font-size:clamp(16px,1.7vw,19px);font-weight:600;color:var(--ink)}
@media(min-width:840px){
  .cs2-meta{align-items:center}
  .cs2-meta .stats{grid-template-columns:repeat(4,1fr)}
  .cs2-meta .st{padding:2px 0 2px clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
  .cs2-meta .st:first-child{padding-top:2px}
  .cs2-meta .st + .st{border-top:0}
}
/* ---------- Section scaffolding ---------- */
.cs2-sec{padding-block:clamp(40px,5vw,72px)}
.cs2-head{text-align:center;max-width:920px;margin:0 auto}
.cs2-eyebrow{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:14px}
.cs2-head h2{font-size:clamp(27px,4vw,50px);line-height:1.09;font-weight:600;letter-spacing:-.02em}
.cs2-head .lead{margin-top:18px;font-size:clamp(16px,1.7vw,19px);line-height:1.55;color:var(--muted);max-width:760px;margin-inline:auto}
/* ---------- Intro split ---------- */
.cs2-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);align-items:center;padding-block:clamp(28px,4vw,52px)}
@media(min-width:900px){.cs2-split{grid-template-columns:minmax(0,1fr) 520px}}
.cs2-split h2{font-size:clamp(26px,3.4vw,42px);line-height:1.14;font-weight:600;letter-spacing:-.02em}
.cs2-split p{margin-top:clamp(20px,2.4vw,28px);font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:#33333a}
.cs2-split .pic{align-self:center}
.cs2-split .pic.photo{border-radius:22px;overflow:hidden;aspect-ratio:5/6;background:#ececf2;border:1px solid rgba(16,16,24,.06);box-shadow:0 26px 52px -30px rgba(16,16,24,.3)}
.cs2-split .pic.photo img{width:100%;height:100%;object-fit:cover;display:block}
.cs2-split .pic.framed{border-radius:20px;overflow:hidden;background:#f4f6f9;border:1px solid rgba(16,16,24,.07);box-shadow:0 26px 52px -30px rgba(16,16,24,.28)}
.cs2-split .pic.framed img{display:block;width:100%;height:auto}
/* intro laptop mockup holding a real product screen */
.device-laptop{display:flex;flex-direction:column;align-items:center}
.device-laptop .lp-lid{width:100%;background:#141416;border-radius:16px;padding:11px;box-shadow:0 30px 55px -28px rgba(16,16,40,.55)}
.device-laptop .lp-lid img{display:block;width:100%;border-radius:6px}
.device-laptop .lp-deck{position:relative;width:104%;height:15px;background:linear-gradient(#e4e7ec 0%,#c3c8d0 55%,#aab0ba 100%);border-radius:2px 2px 12px 12px;box-shadow:0 14px 22px -12px rgba(16,16,40,.4)}
.device-laptop .lp-deck .lp-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:15%;height:7px;background:#b7bdc6;border-radius:0 0 9px 9px}
/* intro phone mockup holding a real product screen */
.device-phone{display:flex;justify-content:center}
.device-phone .ph-body{width:min(272px,78%);background:#0d0d10;border-radius:40px;padding:9px;box-shadow:0 34px 60px -26px rgba(16,16,40,.5)}
.device-phone .ph-body img{display:block;width:100%;border-radius:32px}
/* ---------- Capability cards ---------- */
.cs2-bento{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(32px,4vw,48px);max-width:952px;margin-inline:auto}
@media(min-width:760px){.cs2-bento{grid-template-columns:repeat(2,1fr)}}
.bento-card{position:relative;overflow:hidden;border-radius:24px;display:flex;flex-direction:column;color:#0f1013;min-height:190px;background:#eef1f6}
.bento-card .bc-txt{padding:26px 26px 24px}
.bento-card h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.2}
.bento-card p{margin-top:12px;font-size:15px;line-height:1.45;color:rgba(15,16,19,.74);max-width:340px}
/* ---------- Situation / Solution panels ---------- */
.cs2-cs{position:relative;overflow:hidden;border-radius:28px;max-width:1276px;margin:clamp(28px,3.5vw,44px) auto 0;color:#0f1419;display:flex;flex-direction:column}
.cs-a{background:var(--cs-panel-a)}
.cs-b{background:var(--cs-panel-b)}
.cs2-cs .panel{padding:clamp(26px,6vw,44px) clamp(24px,5vw,44px)}
.cs2-cs .panel .lead{font-size:clamp(15px,1.7vw,18px);line-height:1.55}
.cs2-cs .panel .mid{margin-top:clamp(16px,2vw,22px);font-size:clamp(15px,1.7vw,18px);line-height:1.5}
.cs2-cs .panel ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.cs2-cs .panel li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(15px,1.6vw,17px);line-height:1.4}
.cs2-cs .panel li b{font-weight:600}
.cs2-cs .panel .ck{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#141417;color:#fff;display:grid;place-items:center;font-size:12px;line-height:1;margin-top:1px}
.cs2-cs .panel .close{margin-top:clamp(22px,2.6vw,30px);font-size:clamp(19px,2.3vw,26px);font-weight:600;line-height:1.22;letter-spacing:-.01em}
@media(min-width:860px){.cs2-cs .panel{max-width:900px;margin-inline:auto;width:100%}}
.cs2-sec.tint-b{background:var(--cs-tint-b)}
/* ---------- Result stats ---------- */
.si-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,32px) clamp(16px,2.5vw,36px);margin-top:clamp(30px,4vw,48px);text-align:center}
@media(min-width:760px){.si-stats{grid-template-columns:repeat(4,1fr)}.si-stats.n3{grid-template-columns:repeat(3,1fr)}}
.si-stat .n{font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--cs-accent)}
.si-stat .l{margin-top:12px;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.si-narrative{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);margin-top:clamp(34px,4vw,54px);max-width:1000px;margin-inline:auto}
@media(min-width:820px){.si-narrative{grid-template-columns:1fr 1fr}}
.si-narrative p{font-size:clamp(16px,1.7vw,18px);line-height:1.6;color:#33333a}
.si-solo{max-width:840px;margin:clamp(30px,4vw,44px) auto 0;text-align:center;font-size:clamp(16px,1.8vw,20px);line-height:1.55;color:#3a3a42}
/* Result outcomes (qualitative, when a deck has no stat figures) */
.cs-outcomes{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,40px);margin-top:clamp(32px,4vw,50px);max-width:1040px;margin-inline:auto}
@media(min-width:760px){.cs-outcomes{grid-template-columns:repeat(3,1fr)}}
.cs-outcome h3{font-size:clamp(20px,2.2vw,25px);font-weight:600;letter-spacing:-.01em;color:var(--cs-accent)}
.cs-outcome p{margin-top:12px;font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:#33333a}
/* ---------- CTA ---------- */
.cs2-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,#131317 0%,#1b1b22 100%);color:#fff;text-align:center;padding-block:clamp(56px,8vw,96px)}
.cs2-cta .container{position:relative;z-index:1}
.cs2-cta h2{font-size:clamp(28px,4vw,46px);font-weight:600;letter-spacing:-.02em;max-width:16ch;margin-inline:auto;line-height:1.1}
.cs2-cta .cta-btn{position:relative;margin-top:clamp(24px,3vw,34px);border:0;border-radius:36px;padding:16px 32px;font:600 20px/1 'Inter',sans-serif;color:#fff;cursor:pointer;
  background:linear-gradient(-90deg,var(--cs-accent),#6e5bff);display:inline-block;box-shadow:0 10px 44px -8px rgba(110,91,255,.45),0 0 0 7px rgba(110,91,255,.08)}
.cs2-cta .cta-btn:hover{opacity:.92}
.cs2-cta .subhead{margin-top:clamp(30px,4vw,46px);font-size:clamp(19px,2vw,23px);font-weight:600}
.cs2-cta .subtext{margin-top:12px;font-size:clamp(15px,1.7vw,18px);color:rgba(255,255,255,.74);max-width:640px;margin-inline:auto;line-height:1.5}
.cs2-cta .steps{display:grid;grid-template-columns:1fr;gap:26px;margin-top:clamp(34px,4.4vw,52px);max-width:940px;margin-inline:auto}
@media(min-width:720px){.cs2-cta .steps{grid-template-columns:repeat(3,1fr)}}
.cs2-cta .step .num{width:clamp(56px,7vw,68px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:clamp(22px,2.4vw,28px);font-weight:600;background:rgba(235,235,245,.09);border:1px solid rgba(255,255,255,.16)}
.cs2-cta .step p{font-size:clamp(16px,1.7vw,19px);color:rgba(255,255,255,.86);max-width:220px;margin-inline:auto;line-height:1.4}