/* ============================================================
   ERPLY Content Styles — aligned to ERPLY Design Stylebook
   Font: Manrope (primary) + ui-monospace (labels/kickers)
   Accent: #096DF2 | Background: #F6F6F4 | Text: #111 / #666
   ============================================================ */

html, body {
  overflow-x: hidden;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #F6F6F4;
  color: #111;
}

/* ------------------------------------------------------------
   CONTENT CONTAINER
   Mirrors erphero-shell / erps1-shell: max-width 1800px,
   horizontal padding 38px (→ 22px on mobile)
   ------------------------------------------------------------ */
.contentContainer {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 38px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------
   BODY COPY
   16px / 400 / lh 1.45 — matches card description tier
   ------------------------------------------------------------ */
.contentBox {
  color: #5A5A5A;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------
   LINKS & MARKS
   Accent #096DF2, underline — same hover colour as btn-secondary
   ------------------------------------------------------------ */
mark,
.contentBox > a,
.contentBox > li > a,
.contentBox > ul > li > a {
  color: #096DF2;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

mark,
.contentBox > a:hover,
.contentBox > li > a:hover,
.contentBox > ul > li > a:hover {
  opacity: 0.78;
}

/* ------------------------------------------------------------
   CASE / SECTION TITLE
   Matches erps1-head h2: 32px / 700 / tight tracking
   ------------------------------------------------------------ */
.caseTitle {
  margin-top: 38px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #BDBDB8;
  color: #111;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  text-transform: none;
}

/* ------------------------------------------------------------
   CTA BUTTON
   Primary button pattern: #096DF2, 42px, square corners,
   uppercase 11px mono-scale, "+" pseudo prefix
   ------------------------------------------------------------ */
.moreBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0 18px;
  background: #096DF2;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.moreBtn::before {
  content: "+";
  font-size: 16px;
  line-height: 1;
}

.moreBtn:hover {
  opacity: 0.82;
}

/* ------------------------------------------------------------
   TABLE
   Clean borders using stylebook border tokens
   ------------------------------------------------------------ */
th,
td {
  border: 1px solid #BDBDB8;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #5A5A5A;
  line-height: 1.5;
}

th {
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
  border-bottom: 2px solid #222;
  background: transparent;
}

/* ------------------------------------------------------------
   LISTS
   ------------------------------------------------------------ */
.contentBox > ul {
  list-style-position: inside;
  list-style-type: disc;
}

.contentBox > ul > li {
  margin-left: 1.5rem;
  color: #5A5A5A;
  font-size: 16px;
  line-height: 1.65;
}

/* ------------------------------------------------------------
   CONTENT IMAGE
   ------------------------------------------------------------ */
.contentImage {
  max-width: 650px;
  width: 100%;
  display: block;
  border-radius: 2px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.10));
}

/* ------------------------------------------------------------
   HERO — base
   background-blend + cover pattern preserved; padding updated
   ------------------------------------------------------------ */
.hero {
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 72px;
  padding: 120px 38px 56px;
}

.hero .title:first-child {
  color: #111;
  font-size: clamp(42px, 6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.95;
  margin: 0;
}

/* ------------------------------------------------------------
   HERO BACKGROUNDS
   Dark solid (brand pages) → #0A253C
   Photo overlays → rgba(0,0,0,.3) blend
   ------------------------------------------------------------ */

/* Brand / integration pages — solid dark */
.bg-xero-integration,
.bg-zapier-integration,
.bg-books-integration,
.bg-docura-integration,
.bg-erply-api {
  background-color: #0A253C;
}

/* Photo-backed hero backgrounds */
.bg-apparel-pos,
.bg-beauty-and-cosmetics {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/clothesShop-min.png?format=webp") no-repeat center / cover;
}

.bg-coffee-shop {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/caffeeImage.jpg?format=webp") no-repeat center / cover;
}

.bg-garden {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/gardeningShop.webp") no-repeat center / cover;
}

.bg-grocery {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/soManyVegetables.webp") no-repeat center / cover;
}

.bg-pet-supplies {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/dogSitting.webp") no-repeat center / cover;
}

.bg-retail {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/manyClothes.webp") no-repeat center / cover;
}

.bg-toy-store {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/manyToys.webp") no-repeat center / cover;
}

.bg-vape-store {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/smokeShop.webp") no-repeat center / cover;
}

.bg-wholesale {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/peopleWalking.jpg?format=webp") no-repeat center / cover;
}

.bg-retail-franchise {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/franchiseShop.webp") no-repeat center / cover;
}

.bg-netsuite-integration {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/netsuiteLogo-2.webp") no-repeat center / cover;
}

.bg-quickbooks-integration {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/manOnComputer.webp") no-repeat center / cover;
}

.bg-locally-integration {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/peopleOnComputer.jpg?format=webp") no-repeat center / cover;
}

.bg-shopify-integration {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/shopifyIntegration.webp") no-repeat 100% 35% / cover;
}

.bg-woocommerce-integration {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/ecommerceCard.webp") no-repeat 100% 45% / cover;
}

.bg-magento-integration {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/magentoIntegration.webp") no-repeat center / cover;
}

.bg-what-is-retail {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/manyShoes.webp") no-repeat center / cover;
}

.bg-enterprise-implementation {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/manWomanComputer.webp") no-repeat center / cover;
}

.bg-pos-hardware {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/productPoshardware-2-1.webp") no-repeat 100% 45% / cover;
}

.bg-switch-from-cloud-pos {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/happyFemaleTablet.webp") no-repeat 100% 25% / cover;
}

.bg-switch-from-server-pos {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/happyFemaleTablet2.webp") no-repeat 100% 15% / cover;
}

.bg-card-payments {
  background: rgba(0, 0, 0, .3) url("https://cdn.erply.com/images/533252/manHoldingCard.jpg?format=webp") no-repeat 100% 35% / cover;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .contentContainer {
    padding: 0 38px;
  }
}

@media (max-width: 768px) {
  .contentContainer {
    padding: 0 22px;
  }

  .hero {
    padding: 100px 22px 48px;
    margin-bottom: 56px;
  }

  .hero .title:first-child {
    font-size: 42px;
  }

  .caseTitle {
    font-size: 28px;
    margin-top: 28px;
  }

  .contentBox {
    font-size: 15px;
  }

  .moreBtn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .hero .title:first-child {
    font-size: 36px;
  }
}