/* ===================================================================
   Our Solutions pages (Banking, BPO, Document Management) - shared layout.
   Loaded ONLY by those three pages, after solutions-pages.css.
   One topic pattern: heading left, text + icon list right.
   No horizontal lines anywhere: spacing separates sections and points.
   =================================================================== */

.sp-page .sp-section.tight-top { padding-top: 40px; }
.sp-page .sp-topic-section { padding: 0; }

/* Sections are separated by spacing only (no horizontal lines) */
.sp-topic-section > .container { padding-top: 40px; padding-bottom: 40px; }

/* Intro: text + one photo */
.sp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.sp-intro-text { align-self: center; }
.sp-figure {
  margin: 0; position: relative; min-height: 340px; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.sp-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Topic: heading left (not sticky), content right */
.sp-topic { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.sp-topic-head .section-title { margin-bottom: 0; }
.sp-topic-body > * + * { margin-top: 22px; }
.sp-topic-body .section-body { margin-bottom: 0; }
.sp-sub { font-size: var(--text-lg); font-weight: 600; color: var(--red); margin: 0; line-height: 1.2; }
.sp-topic-body .sp-sub { margin-top: 30px; }
/* lead-in sentence (ends with a colon) -> icon points: a little more air */
.sp-topic-body .section-body + .sp-points { margin-top: 34px; }
.sp-topic-body .sp-sub + .sp-points { margin-top: 20px; }

/* Icon list: no boxes, no dividers */
.sp-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px 40px; }
.sp-points.cols-2 { grid-template-columns: 1fr 1fr; }
.sp-points li {
  display: flex; align-items: center; gap: 16px; padding: 10px 0;
  font-size: var(--text-base); font-weight: 500; color: var(--black); line-height: 1.4;
}
.sp-points li.detail { align-items: flex-start; }
.sp-points li h3 { font-size: var(--text-base); font-weight: 600; color: var(--black); margin: 0 0 4px; line-height: 1.25; }
.sp-points li p { margin: 0; font-size: var(--text-base); font-weight: 400; color: var(--gray); line-height: 1.5; }
.sp-points .sp-icon.sm { width: 44px; height: 44px; border-radius: 13px; }
.sp-points .sp-icon.sm svg { width: 21px; height: 21px; }

/* Closing paragraph: plain text with a quiet red rule */
.sp-closing { padding-left: 20px; border-left: 3px solid var(--red); }
.sp-closing .section-body { color: var(--black); }
.sp-closing .section-body + .section-body { margin-top: 12px; }

/* Dark band (one per page) */
.sp-dark-inner .sp-topic-body .section-body { color: rgba(255, 255, 255, 0.88); }
.sp-dark-inner .sp-sub { color: #fff; }
.sp-dark-inner .sp-points li { color: #fff; }
.sp-dark-inner .sp-points li h3 { color: #fff; }
.sp-dark-inner .sp-points li p { color: rgba(255, 255, 255, 0.78); }
.sp-dark-inner .sp-points .sp-icon.sm { background: #fff; color: #171717; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.sp-dark-inner .sp-closing .section-body { color: #fff; }

@media (max-width: 960px) {
  .sp-topic, .sp-intro { grid-template-columns: 1fr; gap: 22px; }
  .sp-figure { min-height: 0; aspect-ratio: 16 / 10; }
  .sp-topic-section > .container { padding-top: 30px; padding-bottom: 30px; }
}
@media (max-width: 640px) {
  .sp-points.cols-2 { grid-template-columns: 1fr; }
  .sp-points li { gap: 14px; }
  .sp-figure { aspect-ratio: 4 / 3; }
  .sp-topic-section > .container { padding-top: 24px; padding-bottom: 24px; }
  .sp-topic-body .section-body + .sp-points { margin-top: 26px; }
  .sp-closing { padding-left: 16px; }
}

/* Demo heading on one line (desktop/tablet); wraps naturally on phones */
@media (min-width: 769px) {
  .sp-cta-inner { max-width: 1100px; }
  .sp-cta-inner .section-title { white-space: nowrap; }
}

/* Less space above the demo section */
.sp-page .sp-cta-plain { padding-top: 34px; }
@media (max-width: 640px) {
  .sp-page .sp-cta-plain { padding-top: 22px; }
}

/* Book a Demo: normal-size button on mobile */
@media (max-width: 640px) {
  .sp-page .sp-cta-inner .btn { width: auto; }
}