/* ------------------------------------------------------------------
   Services: homepage catalog, services.html and "Services that fit"
   (loaded after site.css and industries.css)
   ------------------------------------------------------------------ */
.svc-catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-col { display: grid; gap: 10px; align-content: start; }
.svc-col__title { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--evergreen); }
.svc-col__title small { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.2px; text-transform: none; color: var(--heading); }

/* Capture → Convert → Retain on industry pages */
.ccr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--cream); }
.ccr-col { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-inline-start: 1px solid var(--line); }
.ccr-col:first-child { border-inline-start: 0; }
.ccr-col:nth-child(2) { background: color-mix(in srgb, var(--lettuce) 22%, var(--cream)); }
.ccr-n { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--evergreen); }
.ccr-col p { font-size: 14px; line-height: 1.5; color: var(--body); }
.ccr-svcs { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ccr-svcs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 100px; background: var(--panel); font-size: 12.5px; font-weight: 500; color: var(--heading); transition: background-color .2s ease; }
.ccr-svcs a:hover { background: var(--lettuce); }
.ccr-svcs svg { width: 14px; height: 14px; color: var(--evergreen); }
.svc-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: var(--r-md); background: var(--cream); border: 1px solid transparent; transition: border-color .2s ease, transform .2s ease; }
.svc-item:hover { border-color: var(--evergreen); transform: translateY(-2px); }
.svc-item b { display: block; font-size: 15px; font-weight: 600; color: var(--heading); }
.svc-item small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.soft .svc-item .ind-ico { background: var(--panel-deep); }

.fit-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fit-svcs .svc-item { background: var(--panel); }
.fit-svcs .svc-item .ind-ico { background: var(--cream); }
.fit-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-list a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100px; background: var(--panel); font-size: 14px; font-weight: 500; color: var(--heading); transition: background-color .2s ease; }
.fit-list a:hover { background: var(--lettuce); }
.fit-list svg { width: 16px; height: 16px; color: var(--evergreen); }

.feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.feat li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--heading); }
.feat li svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--lettuce); color: var(--coach); margin-top: 1px; }
.reg-note b { font-weight: 600; }
.segs--4 { grid-template-columns: repeat(4, 1fr); }

.svc-demo { position: relative; min-height: 460px; border-radius: var(--r-xl); background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--lettuce) 45%, transparent), transparent 55%), linear-gradient(160deg, var(--evergreen), var(--coach) 70%); display: grid; place-items: center; overflow: hidden; padding: 40px 24px; }
.svc-demo__ico { position: absolute; top: 24px; inset-inline-start: 24px; width: 54px; height: 54px; border-radius: 16px; background: var(--lettuce); color: var(--coach); display: grid; place-items: center; }
.svc-demo__ico svg { width: 26px; height: 26px; }
.phone { width: min(300px, 100%); border-radius: 28px; padding: 12px; background: var(--midnight); box-shadow: 0 30px 60px rgb(0 0 0 / .35); }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; color: var(--on-dark); }
.phone__bar i { width: 30px; height: 30px; border-radius: 50%; background: #000; display: grid; place-items: center; }
.phone__bar i .wa-icon { color: #fff; width: 16px; height: 16px; }
.phone__bar b { display: block; font-size: 13px; font-weight: 500; }
.phone__bar small { font-size: 11px; color: var(--on-dark-soft); }
.phone__body { display: grid; gap: 10px; padding: 16px 12px; min-height: 230px; align-content: end; border-radius: 18px; background: var(--cream); }
.phone__body .bubble { font-family: var(--font); }
.phone__note { margin: 10px 0 2px; text-align: center; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--on-dark-soft); }

@media (max-width: 1100px) {
  .ccr { grid-template-columns: 1fr; }
  .ccr-col { border-inline-start: 0; border-top: 1px solid var(--line); }
  .ccr-col:first-child { border-top: 0; }
  .svc-catalog { grid-template-columns: 1fr 1fr; }
  .fit-svcs { grid-template-columns: 1fr 1fr; }
  .segs--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .after-cards .btn { white-space: normal; height: auto; min-height: 47px; padding-block: 10px; text-align: center; }
  .svc-catalog, .fit-svcs, .segs--4, .feat { grid-template-columns: 1fr; }
  .svc-demo { min-height: 400px; }
}