/* ---------- Variables (inherit if you already set these in landing.css) ---------- */
:root{
  --ink:#1d1d1f;
  --muted:#3f7f3fff;
  --brand:#3f7f3fff;         
  --brand-strong:#114f11ff;
  --line:#e9e9ec;
  --card-radius:16px;
}

/* ---------- Section container ---------- */
.solution{
  position: relative;
  padding: 72px 0 60px;
  overflow: hidden;
  background: #fff;
}

/* Subtle grid background like the mock */
.solution::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 80px 80px;
  opacity:.45;
  pointer-events:none;
}

.solution-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative; /* sit above the grid */
  z-index: 1;
}

/* ---------- Headings ---------- */
.solution-eyebrow{
  text-align:center;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .9rem;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.solution-title{
  text-align: center;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  max-width: 980px;
  margin: 0 auto 34px;
}

/* ---------- Cards layout ---------- */
.solution-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Card base */
.solution-card{
  background: #fff;
  border: 1px solid #3f7f3fff;                 /* soft warm border */
  border-radius: var(--card-radius);
  padding: 18px 18px 16px;
  box-shadow: 0 8px 0 0 #114f11ff;              /* darker bottom bar like mock */
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}

.solution-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 0 0 #114f11ff, 0 18px 30px rgba(62,26,14,.12);
  border-color: #114f11ff;
}

/* Media on top */
.solution-card-media{
  margin: -6px -6px 12px;
}
.solution-card-media img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 6px);
  display: block;
}

/* Header (Step label) */
.solution-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.solution-card-step{
  font-weight: 800;
  color: var(--ink);
  font-size: 1.1rem;
  display:flex; align-items:center; gap:8px;
}

/* Body copy */
.solution-card-copy{
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
  min-height: 64px; /* keep heights similar across cards */
}

/* CTA */
.solution-card-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  background: #f0e6e1;
  color: var(--brand);
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 14px;
  transition: background .2s ease, color .2s ease;
  border: 1px solid #e8d6cf;
}
.solution-card-cta:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .solution-cards{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .solution-card-media img{
    height: 180px;
  }
}

/* row for badges */
.badge-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;            
}

.store-badge{
  height:48px;
  width:auto;
  display:block;
}

/* center badges on small screens */
@media (max-width: 720px){
  .badge-row{ justify-content:center; }
}

.store-cta__inner{
  justify-items: center;   /* grid child centering */
  text-align: center;      /* center the heading */
}