/* Ops Cards — Exact 3-Card UI */
.ops-cards{
  --gap: 64px;
  --radius: 18px;
  --card-bg:#fff;
  --text:#616161;
  --grad: linear-gradient(217.63deg, #456F46 0%, #FFFFFF 50.45%, #D7DE27 99.93%);

  /* margin: 0 auto;
  padding: 28px 20px 56px; */
  color: var(--text);
  font-family:"Host Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ops-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
}

/* Card with rounded gradient border */
.op-card{
  position:relative;
  background:var(--card-bg);
  border-radius:var(--radius);
  border:1px solid transparent;
  background-clip:padding-box;
  padding:22px 26px 22px 26px;
  min-height:172px;
}
.op-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--grad);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* Title */
.op-title{
  margin:0 0 8px 0;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-style:normal;
  font-size:17px;
  line-height:30px;
  letter-spacing:0;
  color:#616161;
}

/* Body lines */
.op-text{
  margin:0;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:17px;
  line-height:30px;
  letter-spacing:0;
  color:#616161;
}
.op-text + .op-text{ margin-top:2px; }

/* Bulleted list */
.op-list{
  padding-left:18px;
  list-style:disc;
  display:inline-block;
  text-align:left;
}

.op-list li{
  margin:0;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:30px;
  letter-spacing:0;
  color:#616161;
}
.op-list li + li{ margin-top:2px; }

/* Wide screens */
@media (min-width:1025px){
  .ops-grid{ align-items:stretch; }
}

/* Tablet: 2-up */
@media (max-width:1024px){
  .ops-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px; }
}

/* Mobile: horizontal swipe with a small peek of the next card */
@media (max-width:640px){
  .ops-grid{
    grid-template-columns:none;     /* override tablet grid */
    grid-auto-flow:column;
    grid-auto-columns:92%;          /* 90–95% = more/less peek */
    gap:16px;

    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    touch-action:pan-x pinch-zoom;

    padding:0 16px 12px;            /* gutters while preserving peek */
    scroll-padding-left:16px;       /* align snap to left gutter */
    margin:0;
  }
  .ops-grid::-webkit-scrollbar{ display:none; }
  .ops-grid{ scrollbar-width:none; }

  .op-card{
    scroll-snap-align:start;
    scroll-snap-stop:always;
    min-height:auto;
  }
}