/* Section */
.platform{ padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }

.platform__inner{ max-width: var(--container-wide); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.platform__inner--full{ width: 100%; }

/* Grid overlay */
.platform-grid{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.platform-grid path{
  stroke: rgba(148,163,184,.35);            /* default; can be overridden */
}
.platform-grid rect{
  fill: rgba(255,255,255,.12);              /* subtle tile fill */
}

/* Header */
.platform__title{
margin: 0 0 1rem; text-align: center; color:#111827;
  position: relative; z-index: 2;
}
.platform__lead{
  max-width: 900px; margin: 0 auto 2.25rem; text-align: center;
  color:#4b5563; font-size: 1.0625rem; line-height: 1.7;
  position: relative; z-index: 2;
}


/* Two columns */
.platform__cols{
  position: relative; z-index: 2;
  display: grid; gap: 2rem;
}
@media(min-width: 768px){
  .platform__cols{ grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.platform__h3{
  font-size: 1.5rem; font-weight: 800; margin: 0 0 .5rem; color:#111827;
}
.platform__p{
  color:#4b5563; line-height: 1.7; margin: 0 0 1rem;
}

.platform__list{ list-style: none; padding: 1rem 0 0; margin: 0; border-top: 1px solid #e5e7eb; }
.platform__li{
  display:flex; gap:.5rem; align-items:flex-start; margin:.5rem 0;
  color:#111827; font-size: .95rem; line-height: 1.5;
}
.platform__check{
  font-size: 1.1rem; color: #1C64F2; flex-shrink: 0; margin-top: .1rem;
}

/* CTA */
.platform__cta{ text-align: center; margin-top: 2rem; position: relative; z-index: 2; }
.btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.9rem 1.5rem; border-radius:.6rem; text-decoration:none; }
.btn--primary{ background:#1C64F2; color:#fff; }

/* Allow color overrides from fields */
{% if module.show_grid %}
  .platform-grid path{ stroke: ; }
  .platform-grid rect{ fill: ; }
{% endif %}

/* let shadows show */
.platform { overflow: visible; }  /* was hidden */


.screenshot-single {
  max-width: 2200px; /* or whatever looks good */
  margin: 2rem auto;
}
.screenshot-single img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* keep it consistent with hero image style */
  display: block;
}

/* === Platform typography reset to Inter === */
.platform,
.platform * {
  font-family: 'Inter', sans-serif;  /* force Inter inside the section */
}

/* Section heading + lead */
.platform__title{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(2.25rem, 5vw, 3.25rem); /* 36–52px (slightly tighter than hero) */
  letter-spacing: 0;                       /* ensure no odd tracking */
}

.platform__lead{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;     /* 18px */
  line-height: 1.7;
  color: #4b5563;
}

/* Column headings & body copy */
.platform__h3{
  font-family: 'Inter', sans-serif;
  font-weight: 700;        /* section subheads */
  line-height: 1.3;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20–24px */
  margin: 0 0 .5rem;
}

.platform__p,
.platform__col p{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;         /* 16px */
  line-height: 1.7;
  color:#4b5563;
}

/* Lists in columns */
.platform__list{ font-family: 'Inter', sans-serif; }
.platform__li{
  font-weight: 400;
  font-size: 0.95rem;      /* ~15px for secondary body */
  line-height: 1.55;
  color:#111827;
}

/* Buttons keep Inter weight */
.btn{ font-family: 'Inter', sans-serif; font-weight: 600; }

/* === Spacing polish: Platform === */

/* More space after lead before screenshots */
.platform__lead { margin-bottom: 2.75rem; }

/* Give the stacked screenshots comfortable top/bottom margins */
.screenshot-single { margin: 3rem auto 3rem; }

/* Extra space before the two-column details and the CTA */
.platform__cols { margin-top: 1.25rem; margin-bottom: 1.75rem; }
.platform__cta  { margin-top: 2.25rem; }

/* Tighten internal text rhythm a bit */
.platform__h3 { margin-bottom: 0.75rem; }
.platform__p  { margin-bottom: 1.25rem; }

/* Mobile: add vertical breathing room when things stack */
@media (max-width: 768px){
  .platform__lead { margin-bottom: 2rem; }
  .shot-stack     { margin: 2.25rem auto; }
  .platform__cols { gap: 1.75rem; margin-bottom: 1.5rem; }
}

.platform__shot img { box-shadow: 0 8px 24px rgba(17,24,39,.06); }

/* Offset poster look */
.screenshot--offset {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 24px rgba(17,24,39,.10);
}
.screenshot--offset::after {
  content: "";
  position: absolute; inset: 0;
  transform: translate(10px, 10px);
  border-radius: 16px;
  background: rgba(17,24,39,.06);
  filter: blur(8px);
  z-index: -1;
}
.screenshot--offset img { border-radius: 10px; }