:root{
  --ink:#303044;--muted:#6e6d7b;--line:#dedee3;--yellow:#f5c928;
  --mint:#7fc7ab;--dark:#1d1d1f;--white:#fff;--blue:#5d8ed7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.site-shell{width:100%;margin:0 auto;background:#fff}
.case-nav{height:56px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #eee}
.case-brand{font-size:12px;font-weight:800}.case-brand span{color:#b39300}
.case-nav a{font-size:12px;color:#666}
.case-nav-links{display:flex;gap:18px}
.case-index-hero{background:var(--yellow);padding:24px 26px 25px;position:relative;overflow:hidden}
.pattern{position:absolute;inset:0;opacity:.08;background-image:radial-gradient(circle at 20% 30%,#222 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#222 0 2px,transparent 3px);background-size:34px 34px,48px 48px}
.case-index-hero>*{position:relative}
.case-index-hero h1{font-size:14px;font-weight:700;letter-spacing:-.04em}.case-index-hero p{margin:5px 0 0;font-size:12px;color:#484733}
.case-index{padding:24px 26px 40px;background:#f5f5f6}
.case-index h2{font-size:14px;font-weight:700;font-weight:700;margin:0 0 5px}.case-index .sub{font-size:12px;color:#777;margin:0 0 18px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case-card{background:#fff;border:1px solid #dddde1;border-radius:7px;overflow:hidden;box-shadow:0 5px 14px rgba(0,0,0,.04);transition:.2s}
.case-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.1)}
.case-card-visual{height:140px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.case-card-visual.kulula{background:#78c9aa}.case-card-visual.account{background:#587fc0}.case-card-visual.pos{background:#f5c928}.case-card-visual.ios{background:#e96b78}
.fake-ui{width:76%;height:72%;background:#fff;border-radius:5px;box-shadow:0 8px 16px rgba(0,0,0,.13);padding:10px;position:relative}
.fake-ui:before{content:"";display:block;height:8px;width:45%;background:#ddd;border-radius:4px;margin-bottom:10px}
.fake-lines{display:grid;gap:6px}.fake-lines i{height:7px;background:#ececef;border-radius:3px;display:block}.fake-lines i:nth-child(2){width:70%}.fake-lines i:nth-child(3){width:82%}
.fake-icon{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:var(--mint);opacity:.9}
.case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}.case-card-body h3{margin:0 0 6px;font-size:14px;font-weight:700;color:#1d1d1f}.case-card-body p{margin:0 0 12px;color:#555;font-size:12px;line-height:1.5}.case-card-body .open{display:inline-block;padding:5px 10px;border-radius:10px;background:#2ca37b;color:#fff;font-size:12px;font-weight:700}
.case-card-body .count{float:right;color:#aaa;font-size:12px;margin-top:6px}

.case-detail{background:#fff}
.detail-hero{padding:0 0 0}
.detail-band{padding:24px 28px 23px;position:relative;overflow:hidden}
.detail-band.kulula{background:#78c9aa}.detail-band.account{background:#587fc0;color:#fff}.detail-band.pos{background:#f5c928}.detail-band.ios{background:#e96b78}
.detail-band h1{font-size:14px;font-weight:700;letter-spacing:-.045em}.detail-band p{margin:5px 0 0;font-size:12px;max-width:520px;line-height:1.45}
.detail-content{padding:24px 48px 40px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-bottom:18px}
.detail-label{font-size:12px;font-weight:800;margin-bottom:8px;color:#404052}
.detail-copy{font-size:12px;line-height:1.45;color:#60606d;margin:0}
.detail-list{padding-left:14px;margin:0;color:#60606d;font-size:12px;line-height:1.5}
.detail-list li{margin-bottom:3px}
.objectives{padding:0 0 18px}.objectives p{font-size:12px;color:#60606d;margin:3px 0}.objectives b{color:#3d3d4d}
.process-banner{height:65px;margin:0 -28px 26px;background:#f5c928;display:flex;align-items:center;padding:0 28px}.process-banner.mint{background:#78c9aa;color:#fff}.process-banner.blue{background:#587fc0;color:#fff}.process-banner.red{background:#e96b78;color:#fff}
.process-banner h2{font-size:14px;font-weight:700;color:inherit;letter-spacing:.01em}
.process-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:25px}
.process-step{border:1px solid #e1e1e5;border-radius:7px;padding:12px;background:#fff;position:relative}
.process-step:after{content:"→";position:absolute;right:-10px;top:30px;color:#aaa;z-index:2}.process-step:last-child:after{display:none}
.process-step .num{font-size:12px;font-weight:800;color:#999}.process-step h3{font-size:14px;font-weight:700;font-weight:700;margin:5px 0}.process-step p{font-size:12px;line-height:1.4;color:#6a6976;margin:0}
.section-title{font-size:14px;font-weight:700;font-weight:700;margin:26px 0 12px;color:#3e3d51}.body-copy{font-size:12px;line-height:1.55;color:#63626f;max-width:760px}
.lowfi{min-height:140px;border:2px dashed #cfcfd5;border-radius:8px;background:repeating-linear-gradient(0deg,#fafafa,#fafafa 25px,#f5f5f6 26px);display:grid;place-items:center;text-align:center;color:#9a99a4;font-size:12px;margin:15px 0 24px;padding:20px}
.lowfi strong{display:block;color:#777;font-size:12px;margin-bottom:4px}.lowfi span{display:block;max-width:300px}
.journey-map{display:grid;grid-template-columns:100px repeat(5,1fr);border:1px solid #e0e0e4;border-radius:6px;overflow:hidden;margin:15px 0 24px}
.journey-map>div{padding:9px;border-right:1px solid #e0e0e4;border-bottom:1px solid #e0e0e4;font-size:12px;line-height:1.35}.journey-map>div:nth-child(6n){border-right:0}.journey-map .head{background:#fafafa;font-weight:800;text-transform:uppercase;font-size:12px;color:#777}.journey-map .label{font-weight:800;background:#fcfcfd;color:#454455}.green{color:#3f9175;font-weight:700}.yellow{color:#b57d00;font-weight:700}.red{color:#c53b44;font-weight:700}
.quote-card{background:#eef8f4;border-radius:7px;padding:15px;margin:15px 0}.quote-card b{font-size:12px;color:#4e9d83;letter-spacing:.08em}.quote-card p{margin:6px 0 0;font-size:12px;font-style:italic;color:#4f4e5d}
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.outcome{border:1px solid #e1e1e5;border-radius:7px;padding:12px}.outcome b{display:block;font-size:12px;color:#4e9d83;margin-bottom:5px}.outcome p{font-size:12px;line-height:1.4;color:#666572;margin:0}
.detail-footer{background:#1d1d1f;color:#fff;padding:22px 28px;display:flex;justify-content:space-between;font-size:12px}.detail-footer a{color:#fff}
@media(max-width:700px){.site-shell{width:100%;margin:0}.case-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr;gap:18px}.process-flow{grid-template-columns:1fr 1fr}.journey-map{min-width:720px}.detail-content{overflow:hidden}.case-nav-links{gap:9px}}


/* Portfolio-aligned UX Case Studies landing page */
.case-index-hero{
  position:relative;
  height:178px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:0;
  background:#1f2227;
}
.case-banner-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
}
.case-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(24,27,31,.78) 0%,rgba(24,27,31,.40) 48%,rgba(24,27,31,.12) 100%);
}
.case-banner-content{
  position:relative;
  z-index:2;
  padding:26px 30px 24px;
  color:#fff;
}
.case-banner-content .eyebrow{
  color:#8ccbb2;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:6px;
}
.case-banner-content h1{font-size:14px;font-weight:700;
  letter-spacing:-.03em;
}
.case-banner-content p{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.86);
}
.case-index{
  background:#f7f7f7;
  padding:28px 30px 34px;
}
.case-index h2{
  margin-bottom:5px;
}
.case-index .sub{
  margin-bottom:20px;
  color:#74727d;
}
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.case-card{
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e1e1e4;
  box-shadow:0 6px 18px rgba(30,30,30,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}
.case-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(30,30,30,.11);
}

.case-card-visual.kulula{background:#78c9aa}
.case-card-visual.account{background:#5d82c3}
.case-card-visual.pos{background:#f5cb27}
.case-card-visual.ios{background:#ea6979}
.case-image-frame{
  width:86%;
  height:86%;
  background:#fff;
  border-radius:7px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 14px rgba(0,0,0,.09);
}
.case-image-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-body h3{margin:0 0 6px;font-size:14px;font-weight:700;color:#1d1d1f}
.case-card-body p{margin:0 0 12px;color:#555;font-size:12px;line-height:1.5}
.case-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
}
.case-meta > span:first-child{
  font-size:12px;
  color:#8a8992;
}
.case-meta .open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:13px;
  background:#4e9d83;
  color:#fff;
  font-size:12px;
  font-weight:800;
}
@media(max-width:760px){
  .case-grid{grid-template-columns:1fr}
  .case-index-hero{height:155px}
  .case-banner-content{padding:22px 20px}
  .case-index{padding:24px 18px}
}

/* =========================================================
   KULULA CASE STUDY — polished portfolio treatment
   ========================================================= */
:root{
  --kulula-green:#82c341;
  --kulula-green-dark:#5f9f2b;
  --kulula-blue:#00a9e0;
  --kulula-lime:#b9dd69;
  --kulula-pale:#f3f9ed;
  --kulula-ink:#252b31;
}

.kulula-hero-art{
  width:100%;
  background:#eef5e8;
  overflow:hidden;
}
.kulula-hero-art img{
  display:block;
  width:100%;
  height:auto;
  max-height:505px;
  object-fit:cover;
}

.kulula-title-block{
  padding:34px 28px 30px;
  background:#fff;
  border-bottom:1px solid #e8ece4;
}
.case-eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--kulula-pale);
  color:var(--kulula-green-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:10px;
}
.kulula-title-block h1{font-size:14px;font-weight:700;
  line-height:1.05;
  letter-spacing:-.045em;
}
.kulula-title-block p{
  margin:0;
  max-width:700px;
  color:#656872;
  font-size:12px;
  line-height:1.55;
}

.kulula-meta-row{align-items:start}
.kulula-logo-wrap{
  margin-top:14px;
  width:220px;
  padding:10px 13px;
  border:1px solid #e3e8df;
  border-radius:8px;
  background:#fff;
}
.kulula-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.objective-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:9px;
}
.objective-grid>div{
  border:1px solid #e4e7e2;
  border-radius:8px;
  padding:12px;
  background:#fbfcfa;
}
.objective-grid b{
  display:block;
  color:var(--kulula-green-dark);
  font-size:12px;
  margin-bottom:5px;
}
.objective-grid span{
  display:block;
  color:#666872;
  font-size:12px;
  line-height:1.45;
}

.kulula-process-banner{
  position:relative;
  height:132px;
  margin:2px -28px 28px;
  padding:20px 28px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 78% 45%,rgba(255,255,255,.24) 0 2px,transparent 3px),
    linear-gradient(110deg,#68aa34 0%,#82c341 48%,#a8d95a 100%);
  color:#fff;
}
.kulula-process-banner:before{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  right:-115px;
  top:-150px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}
.process-banner-copy{
  position:relative;
  z-index:3;
  max-width:520px;
}
.process-banner-copy>span{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  opacity:.8;
  margin-bottom:6px;
}
.process-banner-copy h2{font-size:14px;font-weight:700;
  letter-spacing:.01em;
}
.process-banner-copy p{
  margin:0;
  max-width:430px;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.9);
}
.process-orbit{
  position:absolute;
  right:32px;
  top:10px;
  width:250px;
  height:112px;
}
.orbit-ring{
  position:absolute;
  border:1px dashed rgba(255,255,255,.55);
  border-radius:50%;
}
.ring-one{width:190px;height:78px;right:4px;top:13px;transform:rotate(-17deg)}
.ring-two{width:128px;height:128px;right:59px;top:-8px;opacity:.45}
.orbit-node{
  position:absolute;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  color:var(--kulula-green-dark);
  font-size:12px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(35,72,18,.16);
}
.node-one{right:183px;top:25px}.node-two{right:101px;top:1px}.node-three{right:35px;top:45px}.node-four{right:91px;bottom:2px}
.orbit-plane{
  position:absolute;
  right:91px;
  top:42px;
  color:#fff;
  font-size:12px;
  transform:rotate(-16deg);
  text-shadow:0 4px 10px rgba(40,70,20,.22);
}
.polished-process-flow{margin-bottom:38px}
.polished-process-flow .process-step{
  min-height:112px;
  border-color:#e1e8db;
  box-shadow:0 4px 12px rgba(40,70,20,.04);
}
.polished-process-flow .num{color:var(--kulula-green-dark)}
.polished-process-flow .process-step:after{color:var(--kulula-green)}

.section-kicker{
  color:var(--kulula-green-dark);
  font-size:12px;
  font-weight:900;
  letter-spacing:.15em;
  margin-bottom:7px;
}
.section-title{font-size:14px;font-weight:700;
  letter-spacing:-.02em;
}
.user-research-section,
.journey-section,
.comparison-section,
.supporting-research,
.outcome-section{
  margin-top:42px;
}

.research-card{
  display:grid;
  grid-template-columns:145px 1fr;
  gap:30px;
  align-items:center;
  padding:18px 20px;
  border:1px solid #e4e6e3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(30,40,30,.045);
}
.research-portrait{
  width:126px;
  height:190px;
  border-radius:63px;
  overflow:hidden;
  justify-self:center;
  background:#f2f2f2;
}
.research-portrait img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.research-copy{
  max-width:650px;
}
.research-copy h3{font-size:14px;font-weight:700;
}
.research-intro{
  margin:0 0 8px;
  font-size:12px;
  color:#5f6269;
  line-height:1.5;
}
.research-copy ul{
  margin:0;
  padding-left:15px;
  color:#555860;
  font-size:12px;
  line-height:1.55;
}
.research-copy li{margin-bottom:3px}
.research-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.research-tags span{
  padding:5px 8px;
  border-radius:999px;
  background:#f1f8ea;
  color:#609d31;
  font-size:12px;
  font-weight:800;
}
.research-insights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.research-insights>div{
  padding:12px;
  border-radius:8px;
  background:#f8faf7;
  border:1px solid #e5e9e2;
}
.research-insights strong{
  display:block;
  color:var(--kulula-green-dark);
  font-size:12px;
  letter-spacing:.12em;
  margin-bottom:5px;
}
.research-insights span{
  display:block;
  font-size:12px;
  color:#656871;
  line-height:1.45;
}

.journey-scroll{
  overflow-x:auto;
  padding-bottom:7px;
  scrollbar-color:#9ecf68 #edf3e7;
}
.journey-grid{
  min-width:820px;
  display:grid;
  grid-template-columns:92px repeat(5,minmax(145px,1fr));
  border:1px solid #dfe6db;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}
.journey-grid>div{
  min-height:55px;
  padding:9px 10px;
  border-right:1px solid #e4e8e1;
  border-bottom:1px solid #e4e8e1;
  color:#5f6269;
  font-size:12px;
  line-height:1.45;
}
.journey-grid>div:nth-child(6n){border-right:0}
.journey-grid>div:nth-last-child(-n+6){border-bottom:0}
.journey-corner{
  background:#242b31!important;
  color:#fff!important;
  font-weight:800;
  font-size:12px!important;
  letter-spacing:.08em;
}
.journey-head{
  background:#f4f8f0;
  color:#394238!important;
  font-weight:800;
  font-size:12px!important;
}
.journey-head span{
  display:block;
  color:var(--kulula-green-dark);
  font-size:12px;
  margin-bottom:3px;
}
.journey-label{
  background:#fbfcfa;
  color:#3f4540!important;
  font-weight:800;
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.journey-label.opportunity{color:var(--kulula-green-dark)!important}
.emotion{
  font-weight:800;
  border-left:3px solid #a7d95e;
}
.emotion.caution{
  border-left-color:#e8bd54;
  background:#fffaf0;
}
.emotion.neutral{
  border-left-color:#9eb2c1;
}
.journey-insight{
  margin-top:12px;
  padding:14px 16px;
  border-left:4px solid var(--kulula-green);
  background:#f3f9ed;
  border-radius:0 8px 8px 0;
}
.journey-insight span{
  display:block;
  color:var(--kulula-green-dark);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
}
.journey-insight p{
  margin:5px 0 0;
  color:#454a43;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}

.design-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:17px;
}
.design-panel{
  border:1px solid #e0e3df;
  border-radius:10px;
  overflow:hidden;
  background:#fafbfa;
}
.design-panel.new{
  border-color:#b8d98f;
  box-shadow:0 8px 24px rgba(92,145,40,.09);
}
.design-panel-header{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e2e5e1;
  background:#fff;
}
.design-panel-header span{
  display:block;
  font-size:12px;
  color:#8b8d91;
  font-weight:900;
  letter-spacing:.12em;
}
.design-panel.new .design-panel-header span{color:var(--kulula-green-dark)}
.design-panel-header h3{font-size:14px;font-weight:700;
  color:#30343a;
}
.design-panel-header i{
  font-size:12px;
  font-style:normal;
  color:#85898d;
}
.design-frame{
  height:380px;
  overflow-y:auto;
  overflow-x:hidden;
  background:#eee;
  scrollbar-color:#a8cf76 #e4e8e1;
}
.design-frame img{
  display:block;
  width:100%;
  height:auto;
}
.design-caption{
  padding:10px 13px 12px;
  color:#666a70;
  font-size:12px;
  line-height:1.45;
  background:#fff;
  border-top:1px solid #e3e6e2;
}
.comparison-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.comparison-points>div{
  padding:11px 12px;
  background:#f7faf5;
  border-radius:8px;
  border:1px solid #e2e9dc;
}
.comparison-points b{
  display:block;
  color:var(--kulula-green-dark);
  font-size:12px;
  margin-bottom:4px;
}
.comparison-points span{
  display:block;
  font-size:12px;
  line-height:1.4;
  color:#62666b;
}

.research-reference{
  margin:15px 0 0;
  border:1px solid #e1e4e1;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}
.research-reference img{
  display:block;
  width:100%;
  height:auto;
}
.outcome-section{margin-bottom:8px}

@media(max-width:760px){
  .kulula-hero-art img{min-height:210px;object-fit:cover;object-position:center}
  .kulula-title-block{padding:25px 20px}
  .detail-content{padding-left:20px;padding-right:20px}
  .kulula-process-banner{margin-left:-20px;margin-right:-20px;padding-left:20px}
  .process-orbit{right:-45px;opacity:.7}
  .objective-grid,.research-insights,.comparison-points{grid-template-columns:1fr}
  .research-card{grid-template-columns:1fr;gap:14px;text-align:left}
  .research-portrait{justify-self:start}
  .design-comparison{grid-template-columns:1fr}
  .design-frame{height:420px}
  .kulula-logo-wrap{width:190px}
}


/* BMW Account / Dealer Connect case study */
.bmw-case-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#06244d;
}
.bmw-case-hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:cover;
  object-position:center;
}
.bmw-intro{
  padding:2px 0 18px;
}
.bmw-intro h1{font-size:14px;font-weight:700;
  letter-spacing:-.04em;
  color:#343445;
}
.bmw-intro p{
  margin:0;
  max-width:720px;
  color:#666572;
  font-size:12px;
  line-height:1.55;
}
.bmw-logo-row{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:3px 0 20px;
}
.bmw-logo-row img{
  width:74px;
  height:74px;
  object-fit:contain;
}
.process-banner.bmw-process{
  min-height:92px;
  height:auto;
  margin:0 -28px 26px;
  padding:16px 28px;
  background:linear-gradient(105deg,#061f46 0%,#0b3f7a 55%,#0866b4 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
  justify-content:space-between;
}
.process-banner.bmw-process h2{
  font-size:12px;
  letter-spacing:.01em;
  margin:2px 0 3px;
}
.process-banner.bmw-process p{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.78);
}
.process-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  color:#76b9ff;
}
.bmw-process-graphic{
  width:245px;
  height:78px;
  position:relative;
  flex:0 0 245px;
}
.bmw-process-graphic .hex{
  position:absolute;
  width:54px;height:54px;
  border:1px solid rgba(83,177,255,.48);
  transform:rotate(30deg);
  border-radius:8px;
  background:rgba(10,107,181,.16);
}
.bmw-process-graphic .h1{right:145px;top:8px}.bmw-process-graphic .h2{right:78px;top:20px}.bmw-process-graphic .h3{right:10px;top:3px}
.bmw-process-graphic .node{
  position:absolute;
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:#0b4f91;
  font-size:12px;font-weight:800;
  z-index:2;
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
.bmw-process-graphic .n1{right:160px;top:23px}.bmw-process-graphic .n2{right:93px;top:35px}.bmw-process-graphic .n3{right:25px;top:18px}.bmw-process-graphic .n4{right:98px;top:67px}
.bmw-process-graphic .connector{
  position:absolute;height:1px;background:rgba(255,255,255,.45);transform-origin:left center;
}
.bmw-process-graphic .c1{width:55px;right:118px;top:35px;transform:rotate(10deg)}
.bmw-process-graphic .c2{width:58px;right:50px;top:33px;transform:rotate(-15deg)}
.bmw-process-graphic .c3{width:45px;right:103px;top:57px;transform:rotate(90deg)}

.bmw-section{
  margin-top:26px;
}
.section-kicker{
  font-size:12px;
  font-weight:800;
  color:#2f78c4;
  letter-spacing:.13em;
  margin-bottom:5px;
}
.problem-flow{
  display:grid;
  grid-template-columns:1.15fr 22px 1.1fr 22px 1.25fr 22px 1.15fr 22px .75fr;
  align-items:stretch;
  gap:7px;
  margin:16px 0 25px;
}
.problem-card{
  border-radius:8px;
  padding:10px 9px;
  border:1px solid #e2e3e8;
  background:#fff;
  min-height:92px;
  box-shadow:0 3px 10px rgba(16,35,60,.04);
}
.problem-card span{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  padding:4px 6px;
  border-radius:3px;
  margin-bottom:7px;
}
.problem-card p{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:#555563;
}
.problem-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8b8d98;
  font-size:12px;
  font-weight:700;
}
.p-blue span{background:#1788d4}.p-cyan span{background:#27b4d2}.p-purple span{background:#8658dc}.p-orange span{background:#f08a32}.p-red span{background:#ef626d}
.p-red{background:#fff4f5;border-color:#f4d5d8}

.reference-frame{
  margin:15px 0 26px;
  border:1px solid #e1e2e6;
  border-radius:8px;
  background:#fafbfc;
  padding:12px;
}
.reference-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
}
.reference-frame figcaption{
  margin:8px 2px 0;
  font-size:12px;
  color:#898893;
}

.card-breakdown{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:16px 0;
}
.breakdown-card{
  position:relative;
  border:1px solid #e0e2e7;
  border-radius:8px;
  padding:14px 14px 13px 42px;
  background:#fff;
}
.breakdown-card:nth-child(5){
  grid-column:1 / -1;
}
.breakdown-icon{
  position:absolute;
  left:12px;top:13px;
  width:22px;height:22px;border-radius:6px;
  background:#edf5fc;color:#1774b8;
  display:grid;place-items:center;
  font-size:12px;font-weight:800;
}
.breakdown-card h3{font-size:14px;font-weight:700;
  color:#3f3e50;
}
.breakdown-card p,.breakdown-card li{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#666572;
}
.breakdown-card ul{
  margin:0;
  padding-left:14px;
}
.status-red{color:#d64a53}.status-yellow{color:#c4931e}.status-green{color:#359c68}

.cta-insight{
  margin:18px 0;
  border-left:3px solid #0b67ad;
  background:#f1f7fc;
  padding:12px 14px;
  border-radius:0 7px 7px 0;
}
.cta-insight span{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  color:#0b67ad;
  margin-bottom:5px;
}
.cta-insight p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#555563;
}

.status-card-showcase{
  display:flex;
  justify-content:center;
  padding:10px 0 22px;
}
.status-card{
  width:min(620px,100%);
  border:1px solid #d6d8de;
  border-radius:8px;
  background:#fff;
  box-shadow:0 7px 22px rgba(16,35,60,.07);
  overflow:hidden;
}
.status-card-main{
  padding:14px;
}
.status-card-title{
  font-size:12px;
  font-weight:800;
  color:#3f3e50;
  margin-bottom:12px;
}
.status-card-content{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:18px;
  align-items:center;
}
.car-placeholder{
  height:86px;
  background:#ededee;
  border:1px solid #d9dadd;
  position:relative;
  display:grid;
  place-items:center;
}
.car-shape{
  width:70px;height:30px;
  background:#c7c8cb;
  border-radius:20px 25px 8px 8px;
  position:relative;
}
.car-shape:before,.car-shape:after{
  content:"";position:absolute;bottom:-7px;width:13px;height:13px;border-radius:50%;background:#9ea0a4;
}
.car-shape:before{left:10px}.car-shape:after{right:10px}
.system-copy .line{
  height:6px;background:#d6d7da;border-radius:3px;margin-bottom:8px;width:92%;
}
.system-copy .line.strong{width:55%;background:#b8bac0}
.system-copy .line.short{width:70%}
.mini-labels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px;
}
.mini-labels span{
  font-size:12px;color:#767781;border-top:1px solid #dfe0e3;padding-top:5px;
}
.status-signal{
  display:flex;
  height:13px;
  border-top:1px solid #dfe0e3;
  border-bottom:1px solid #dfe0e3;
}
.signal{flex:1;opacity:.25}
.signal.red{background:#df5c63}.signal.yellow{background:#e6b54c}.signal.green{background:#5bb783}
.signal.active{opacity:1}
.status-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:#fafbfc;
  font-size:12px;color:#777884;
}
.status-card-footer button{
  border:0;border-radius:4px;padding:6px 13px;
  background:#126bb0;color:#fff;font-size:12px;font-weight:800;
  cursor:default;
}
.reference-thumbs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:4px 0 25px;
}
.reference-thumbs>div{
  border:1px solid #e1e2e6;border-radius:8px;padding:9px;background:#fafafa;
}
.reference-thumbs span{
  display:block;font-size:12px;font-weight:800;color:#777783;margin-bottom:7px;
}
.reference-thumbs img{
  display:block;width:100%;height:auto;border-radius:4px;background:#fff;
}

@media(max-width:900px){
  .problem-flow{grid-template-columns:1fr 22px 1fr;}.problem-arrow:nth-child(6n){display:none}
}
@media(max-width:700px){
  .bmw-case-hero img{min-height:260px;object-fit:cover}
  .bmw-process-graphic{display:none}
  .card-breakdown{grid-template-columns:1fr}
  .breakdown-card:nth-child(5){grid-column:auto}
  .reference-thumbs{grid-template-columns:1fr}
  .status-card-content{grid-template-columns:1fr}
}

/* BMW logo alignment: directly beneath Methods / Skills */
.methods-column{
  display:flex;
  flex-direction:column;
}
.methods-column .bmw-logo-row{
  justify-content:flex-start;
  align-items:flex-start;
  padding:14px 0 0;
  margin:0;
}
.methods-column .bmw-logo-row img{
  width:68px;
  height:68px;
  object-fit:contain;
}

/* BMW-POS problem statement */
.pos-problem-flow{display:grid;grid-template-columns:1fr 22px 1.08fr 22px 1fr 22px 1fr;align-items:stretch;gap:7px;margin:16px 0 25px}
.pos-problem-card{border-radius:8px;padding:10px 10px 13px;min-height:100px;border:1px solid rgba(0,0,0,.05);box-shadow:0 3px 10px rgba(16,35,60,.04)}
.pos-problem-card span{display:inline-block;color:#fff;font-size:12px;font-weight:800;padding:5px 8px;border-radius:3px;margin:-1px 0 10px -1px}
.pos-problem-card p{margin:0;color:#27303a;font-size:12px;line-height:1.5}
.pos-problem-card.green{background:#b1f0c9}.pos-problem-card.green span{background:#12a95a}
.pos-problem-card.blue{background:#b9dcf7}.pos-problem-card.blue span{background:#138fe0}
.pos-problem-card.purple{background:#dec7fb}.pos-problem-card.purple span{background:#8941eb}
.pos-problem-card.orange{background:#ffd39c}.pos-problem-card.orange span{background:#ff772b}
.pos-flow-arrow{display:flex;align-items:center;justify-content:center;color:#858995;font-size:12px;font-weight:700}
.pos-insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 28px}
.pos-insight-grid article{border:1px solid #e0e2e7;border-radius:8px;padding:15px;background:#fff}
.pos-insight-grid span{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#edf5fc;color:#176fb0;font-size:12px;font-weight:800;margin-bottom:9px}
.pos-insight-grid h3{font-size:14px;font-weight:700;color:#3f3e50}
.pos-insight-grid p{margin:0;font-size:12px;line-height:1.5;color:#666572}
@media(max-width:850px){.pos-problem-flow{grid-template-columns:1fr 20px 1fr}.pos-insight-grid{grid-template-columns:1fr}}
@media(max-width:600px){.pos-problem-flow{grid-template-columns:1fr}.pos-flow-arrow{display:none}}

/* BMW-POS refinement — aligned logo, UI-style problem blocks and solution flow */
.bmw-logo-row{
  justify-content:flex-start;
  align-items:center;
  padding:8px 0 18px;
}
.bmw-logo-row img{
  width:54px;
  height:54px;
  object-fit:contain;
}
.pos-problem-flow{
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:stretch;
  gap:6px;
  margin:18px 0 28px;
}
.pos-problem-card{
  position:relative;
  min-height:116px;
  padding:13px 12px 14px;
  border:1px solid #e2e4e8;
  border-radius:10px;
  background:#fff;
  box-shadow:0 5px 16px rgba(31,47,68,.055);
  overflow:hidden;
}
.pos-problem-card:before{
  content:"";
  display:block;
  width:100%;
  height:3px;
  position:absolute;
  top:0;
  left:0;
  background:#2e7cc7;
}
.pos-problem-card span{
  display:block;
  color:#2f6ea8;
  background:#edf5fc;
  width:max-content;
  max-width:100%;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  padding:5px 7px;
  border-radius:5px;
  margin:1px 0 10px;
}
.pos-problem-card p{
  margin:0;
  color:#454856;
  font-size:12px;
  line-height:1.5;
}
.pos-problem-card.green:before{background:#4e9d83}
.pos-problem-card.blue:before{background:#2f80c7}
.pos-problem-card.purple:before{background:#7d62c5}
.pos-problem-card.orange:before{background:#d88b2f}
.pos-problem-card.red:before{background:#d95c63}
.pos-flow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8c93a0;
  font-size:12px;
  font-weight:700;
}
.pos-screens-section{margin-top:4px}
.pos-step-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0 24px;
}
.pos-step{
  border:1px solid #e1e3e7;
  border-radius:10px;
  background:#fff;
  padding:12px;
  box-shadow:0 5px 16px rgba(31,47,68,.045);
}
.step-number{font-size:12px;font-weight:800;color:#2f7bc2;letter-spacing:.08em;margin-bottom:8px}
.screen-frame{
  height:118px;
  border:1px solid #e3e5e9;
  border-radius:7px;
  background:#f7f8fa;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.screen-frame img{width:100%;height:100%;object-fit:contain;display:block}
.screen-frame.dark-screen{background:#eef1f4}
.pos-step h3{font-size:14px;font-weight:700;font-weight:700;margin:10px 0 5px;color:#383a47}
.pos-step p{font-size:12px;line-height:1.45;color:#6c6c78;margin:0}
.crm-simplified{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:18px;
  align-items:center;
  border:1px solid #dfe6ee;
  border-radius:11px;
  background:linear-gradient(135deg,#f6f9fc,#fff);
  padding:18px;
  margin:8px 0 30px;
}
.crm-copy>span{font-size:12px;font-weight:800;letter-spacing:.12em;color:#2f7bc2}
.crm-copy h3{font-size:14px;font-weight:700;font-weight:700;margin:6px 0;color:#343744}
.crm-copy p{font-size:12px;line-height:1.55;color:#666a76;margin:0}
.crm-flow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.crm-flow div{padding:9px 10px;border:1px solid #dce2e8;border-radius:7px;background:#fff;font-size:12px;font-weight:800;color:#4b4d58;text-align:center}
.crm-flow b{color:#2f7bc2;font-size:12px}
@media(max-width:900px){
  .pos-problem-flow{grid-template-columns:1fr 18px 1fr 18px 1fr}
  .pos-problem-flow .pos-problem-card:nth-of-type(7),.pos-problem-flow .pos-problem-card:nth-of-type(9),.pos-problem-flow .pos-flow-arrow:nth-of-type(8){display:none}
  .pos-step-strip{grid-template-columns:1fr}
  .crm-simplified{grid-template-columns:1fr}
}
@media(max-width:600px){
  .pos-problem-flow{grid-template-columns:1fr}
  .pos-flow-arrow{display:none}
}
.pos-problem-recreated{margin:16px 0 28px;border-radius:10px;overflow:hidden;background:#fff}
.pos-problem-recreated img{display:block;width:100%;height:auto}

/* BMW POS — consolidated final result */
.pos-final-result { margin: 42px 0 28px; padding: 32px; border: 1px solid rgba(0,0,0,.10); border-radius: 24px; background: #fff; }
.pos-final-result h3 { margin: 8px 0 10px; font-size: clamp(22px, 2.4vw, 34px); }
.pos-final-image { margin-top: 24px; display:flex; justify-content:center; overflow:hidden; border-radius:18px; background:#f6f6f6; }
.pos-final-image img { display:block; width:100%; max-width:960px; height:auto; }


/* BMW POS — final refinement pass */
.bmw-problem-section .section-title{margin-bottom:14px}
.problem-ui-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0 30px}
.problem-ui-card{position:relative;min-height:126px;padding:15px 13px 14px;border:1px solid #e1e3e8;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(31,47,68,.05);overflow:hidden}
.problem-ui-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:#4e9d83}
.problem-ui-card span{display:inline-block;padding:6px 8px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.01em;margin-bottom:13px;color:#fff;background:#4e9d83}
.problem-ui-card p{margin:0;font-size:12px;line-height:1.55;color:#454856}
.problem-ui-card.green:before,.problem-ui-card.green span{background:#4e9d83}
.problem-ui-card.blue:before,.problem-ui-card.blue span{background:#2f80c7}
.problem-ui-card.purple:before,.problem-ui-card.purple span{background:#7d62c5}
.problem-ui-card.orange:before,.problem-ui-card.orange span{background:#d88b2f}
.problem-ui-card.red:before,.problem-ui-card.red span{background:#d95c63}
 .process-flow-wrap{margin:18px 0 30px;border:1px solid #e1e4e8;border-radius:14px;background:#fafbfc;padding:24px 18px 18px;overflow-x:auto}
.process-flow-main{display:flex;align-items:center;gap:8px;min-width:1380px}
.flow-node{flex:0 0 auto;display:grid;place-items:center;text-align:center;color:#343844;font-size:12px;font-weight:800;line-height:1.25;position:relative}
.flow-action{width:100px;height:56px;padding:8px;border:1px solid #cfd6df;border-radius:8px;background:#fff;box-shadow:0 4px 10px rgba(31,47,68,.05)}
.flow-start,.flow-end{width:62px;height:42px;border-radius:21px;background:#eef5fb;border:1px solid #bcd1e5;color:#2f6ea8}
.flow-decision{width:68px;height:68px;padding:10px;transform:rotate(45deg);border:1px solid #b9a6df;background:#f2eafd}
.flow-decision span{transform:rotate(-45deg)}
.flow-arrow{flex:0 0 auto;color:#7d8793;font-size:12px;font-weight:700}
.flow-with-info{padding-right:20px}
.flow-info-pin{position:absolute;right:6px;top:6px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:#2f7bc2;color:#fff;font-size:12px;font-weight:800}
.flow-screen-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px auto 0;max-width:760px}
.flow-screen-link{position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px 12px;border:1px solid #dfe4ea;border-radius:9px;background:#fff}
.flow-link-line{position:absolute;top:-26px;left:50%;height:26px;border-left:1px dashed #9ca7b4}
.flow-link-icon{grid-row:1 / span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef5fb;color:#2f7bc2;font-size:12px;font-weight:800}
.flow-screen-link strong{font-size:12px;letter-spacing:.08em;color:#353945}
.flow-screen-link small{font-size:12px;color:#858b96}
.pos-step-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 24px}
.pos-step{border:1px solid #e1e3e7;border-radius:10px;background:#fff;padding:12px;box-shadow:0 5px 16px rgba(31,47,68,.045)}
.step-number{font-size:12px;font-weight:800;color:#2f7bc2;letter-spacing:.08em;margin-bottom:8px}
.screen-frame{height:118px;border:1px solid #e3e5e9;border-radius:7px;background:#f7f8fa;display:flex;align-items:center;justify-content:center;overflow:hidden}
.screen-frame img{width:100%;height:100%;object-fit:contain;display:block}
.pos-step h3{font-size:14px;font-weight:700;font-weight:700;margin:10px 0 5px;color:#383a47}
.pos-step p{font-size:12px;line-height:1.45;color:#6c6c78;margin:0}
.pos-final-image img{width:auto;max-width:300px;max-height:360px;object-fit:contain}
.pos-final-image{padding:10px}
.pos-final-result{padding:22px;border-radius:18px}
.problem-ui-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0 30px}
.problem-ui-card{position:relative;min-height:150px;padding:18px 16px 16px;border:1px solid #e1e3e8;border-radius:10px;background:#fff;box-shadow:0 5px 16px rgba(31,47,68,.045);overflow:hidden}
.problem-ui-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:#4e9d83}
.problem-ui-card span{display:inline-block;padding:7px 9px;border-radius:5px;font-size:12px;font-weight:800;letter-spacing:.01em;margin-bottom:16px;color:#fff;background:#4e9d83}
.problem-ui-card p{margin:0;font-size:12px;line-height:1.6;color:#454856}
.problem-ui-card.green:before,.problem-ui-card.green span{background:#4e9d83}
.problem-ui-card.blue:before,.problem-ui-card.blue span{background:#2f80c7}
.problem-ui-card.purple:before,.problem-ui-card.purple span{background:#7d62c5}
.problem-ui-card.orange:before,.problem-ui-card.orange span{background:#d88b2f}
.problem-ui-card.red:before,.problem-ui-card.red span{background:#d95c63}
@media(max-width:900px){.problem-ui-grid{grid-template-columns:1fr 1fr}.pos-step-strip{grid-template-columns:1fr}.crm-simplified{grid-template-columns:1fr}}
@media(max-width:600px){.problem-ui-grid{grid-template-columns:1fr}.flow-screen-links{grid-template-columns:1fr}.pos-final-image img{max-width:260px}}


/* =========================================================
   SELECTED CASE STUDIES — final card treatment
   Images replace the old white inner blocks. Bottom UI
   follows the supplied compact label + title treatment.
   ========================================================= */
.case-grid{
  gap:22px;
}

.case-card{
  background:transparent;
  border:1px solid #e1e1e4;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(30,30,30,.07);
}



.case-card-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.case-card:hover .case-card-visual img{
  transform:scale(1.025);
}

/* Remove the previous white image-frame treatment completely. */
.case-image-frame{
  display:none;
}

.case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}

.case-card-label{
  display:inline-block;
  max-width:100%;
  padding:6px 9px;
  border-radius:5px;
  font-size:12px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.07em;
  color:#fff;
  margin-bottom:9px;
}

.case-card-body h3{margin:0 0 6px;font-size:14px;font-weight:700;color:#1d1d1f}

.case-card .case-meta{
  margin-top:13px;
}

.case-card .case-meta > span:first-child{
  font-size:12px;
  font-weight:700;
  color:#72727c;
}

.case-card .case-meta .open{
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  font-weight:800;
}

/* Kulula — green */
.case-card-kulula .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-kulula .case-card-label,
.case-card-kulula .case-meta .open{
  background:#82c341;
}

/* BMW Dealer Connect — dark BMW blue */
.case-card-dealer .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-dealer .case-card-label,
.case-card-dealer .case-meta .open{
  background:#06244d;
}

/* BMW POS — BMW red */
.case-card-pos .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-pos .case-card-label,
.case-card-pos .case-meta .open{
  background:#c8102e;
}

/* BMW iOS — black */
.case-card-ios .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-ios .case-card-label,
.case-card-ios .case-meta .open{
  background:#111111;
}

@media(max-width:760px){
  
}


/* Selected case cards — screenshot-matched bottom UI */
.case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}

.case-card-label{
  margin-bottom:9px;
}

.case-card-body h3{margin:0 0 6px;font-size:14px;font-weight:700;color:#1d1d1f}

.case-card-kulula .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-dealer .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-pos .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}
.case-card-ios .case-card-body{padding:16px;background:#fff;border-top:1px solid rgba(0,0,0,0.06)}