/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 23 2025 | 13:57:47 */
/* ===== Case Study Cards Layout (STACKED - one per row) ===== */
.cs-grid{
  display: grid;
  grid-template-columns: 1fr;  /* keep stacked */
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card */
.cs-card{
  display: grid;
  grid-template-columns: 1.25fr 1fr; /* image left / content right */
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  position: relative;

  /* premium feel */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cs-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 55px rgba(0,0,0,.12);
}

/* Image block */
.cs-image{
  position: relative;
  background: #f4f4f4;
  overflow: hidden;
  min-height: 260px;
}

/* Gradient overlay so screenshots look intentional */
.cs-image::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.14) 100%);
  pointer-events:none;
}

/* Make screenshots look less "raw": slight zoom + smooth hover */
.cs-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .25s ease;
  will-change: transform;
}

.cs-card:hover .cs-image img{
  transform: scale(1.06);
}

/* Content */
.cs-content{
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* Tag */
.cs-tag{
  display: inline-block;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ff7a1a;
  color: #ff7a1a;
  background: rgba(255, 122, 26, 0.08);
  width: fit-content;
  margin-bottom: 6px; /* tighter */
}

/* Title */
.cs-content h3{
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Sub text (cleaner hierarchy) */
.cs-sub{
  color: #666;
  font-size: 15px;
  line-height: 1.5;
  margin: 6px 0 10px;
}

/* Link */
.cs-link{
  font-weight: 650;
  font-size: 16px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .86;
  transition: opacity .2s ease, transform .2s ease;
}

.cs-card:hover .cs-link{
  opacity: 1;
  transform: translateX(2px);
}

/* Mobile: stack image above content */
@media (max-width: 720px){
  .cs-card{
    grid-template-columns: 1fr;
  }
  .cs-image{
    min-height: 220px;
  }
  .cs-content{
    padding: 22px 22px;
  }
}
/* =========================================================
   CASE STUDY CARDS — MailerProfit-like spacing + hierarchy
   Paste at the BOTTOM of your existing CSS
========================================================= */

/* Keep cards stacked */
.cs-grid{
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

/* Make TEXT slightly wider than image */
.cs-card{
  grid-template-columns: 0.95fr 1.15fr !important; /* image | text */
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;
}

/* Better image presentation (feels designed, not raw screenshot) */
.cs-image{
  background: #f3f3f3 !important;
}

.cs-image img{
  filter: saturate(1.02) contrast(1.02);
}

/* Stronger hierarchy */
.cs-content{
  padding: 34px !important;
}

.cs-content h3{
  font-size: 30px !important;
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
}

.cs-sub{
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: rgba(0,0,0,.62) !important;
  margin-bottom: 18px !important;
}

.cs-link{
  font-size: 16px !important;
}

/* Nice hover without being “too much” */
.cs-card:hover{
  transform: translateY(-5px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.14) !important;
}

/* Mobile: stack image on top of text */
@media (max-width: 820px){
  .cs-card{
    grid-template-columns: 1fr !important;
  }
  .cs-image{
    min-height: 220px;
  }
}
/* =========================================================
   CASE STUDY MODALS — MailerProfit-style wide center modal
========================================================= */

/* Overlay (your JS toggles overlay.hidden) */
[data-cs-overlay]{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

/* Modal base */
.cs-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 28px;
}

/* The actual modal panel */
.cs-modal__panel{
  width: min(1100px, 94vw);         /* similar to MailerProfit wide */
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);
}

/* Header / Hero */
.cs-modal__hero{
  padding: 34px 34px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.cs-modal__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cs-pill{
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ff7a1a;
  color: #ff7a1a;
  background: rgba(255, 122, 26, 0.08);
  width: fit-content;
}

.cs-modal__title{
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.cs-modal__subtitle{
  margin: 0;
  color: rgba(0,0,0,.62);
  font-size: 16px;
  line-height: 1.55;
}

/* Main body grid */
.cs-modal__body{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* content | stats */
  gap: 22px;
  padding: 26px 34px 34px;
}

.cs-modal__section-title{
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
  margin: 0 0 10px;
}

.cs-steps{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.78);
}

.cs-steps li{
  margin: 8px 0;
  line-height: 1.6;
}

/* Stats panel */
.cs-stats{
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
}

.cs-stats ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-stats li{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
  font-size: 15px;
}

.cs-stats li:last-child{
  border-bottom: none;
}

.cs-stats b{
  color: rgba(0,0,0,.78);
  font-weight: 600;
}

.cs-stats span{
  color: rgba(0,0,0,.70);
  font-weight: 600;
}

/* Screenshots */
.cs-shots{
  padding: 0 34px 34px;
}

.cs-shots__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cs-shot{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f4f4f4;
}

.cs-shot img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Close button */
.cs-modal__close{
  position: sticky;
  top: 14px;
  margin-left: auto;
  margin-right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  z-index: 3;
}

.cs-modal__close:hover{
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 900px){
  .cs-modal__panel{
    width: min(980px, 94vw);
  }
  .cs-modal__title{
    font-size: 28px;
  }
  .cs-modal__body{
    grid-template-columns: 1fr;
  }
  .cs-shots__grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   FULL CASE STUDY MODAL SECTIONS (Option 1: white / light-grey)
   Paste at the very bottom of your existing CSS
========================================================= */

.cs-close{
  position: sticky;
  top: 14px;
  margin-left: auto;
  margin-right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  z-index: 3;
}

/* Modal content typography */
.cs-modal__panel h2{
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 10px 0 10px;
}

.cs-modal__panel h3{
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.cs-msub{
  margin: 0;
  color: rgba(0,0,0,.62);
  font-size: 16px;
  line-height: 1.6;
}

/* Full case study section blocks */
.cs-msec{
  padding: 26px 34px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.cs-msec--light{ background: #ffffff; }
.cs-msec--alt{ background: #f7f7f8; }

.cs-kicker{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin: 0 0 10px;
}

/* Lists inside sections */
.cs-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.78);
}

.cs-list li{
  margin: 8px 0;
  line-height: 1.6;
}

/* “Quick stats” box inside sections */
.cs-qstats{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}

.cs-qstats .cs-modal__section-title{
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
  margin: 0 0 10px;
}

/* Screenshot grid inside full case study */
.cs-shots__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.cs-shots__grid img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f4f4f4;
}

@media (max-width: 900px){
  .cs-msec{ padding: 22px; }
  .cs-modal__panel h2{ font-size: 28px; }
  .cs-shots__grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   FULL CASE STUDY (exact DOC text): consistent headings
   Option 1: white / light-grey alternating blocks
   Paste at the VERY BOTTOM of your existing CSS
========================================================= */

.cs-msec{
  padding: 26px 34px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.cs-msec--light{ background:#fff; }
.cs-msec--alt{ background:#f7f7f8; }

.cs-doc-title{
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}

.cs-doc-h3{
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.cs-doc-p{
  margin: 0 0 12px;
  color: rgba(0,0,0,.72);
  font-size: 16px;
  line-height: 1.65;
}

.cs-msec .cs-pill{
  margin-bottom: 10px;
}

@media (max-width: 900px){
  .cs-msec{ padding: 22px; }
  .cs-doc-title{ font-size: 28px; }
}
.cs-card{
  text-decoration: none;
  color: inherit;
}