/* ==========================================================================
   simple-landing.css: the one-screen-message landing (index.html).

   Loaded AFTER static-landing.css, which still supplies the tokens, nav,
   buttons, hero type, download grid and footer. This file only adds what the
   simpler page needs: the "works with" strip, a six-up feature grid, and a short
   closing line. Class names are prefixed `sl-` so nothing collides with the
   static landing's own sections.
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
/* The screenshot slider (simple-carousel.css) is wider than the text
   column; clip sideways so its peeking side screens never scroll the page. */
.sl-hero { padding-bottom: 0; overflow-x: clip; }
.sl-hero h1 { max-width: 820px; }
.sl-hero .hero-sub { max-width: 640px; }
.sl-avail { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); }
.sl-avail a { color: var(--ink-2); }

/* --- Works with -------------------------------------------------------- */
.sl-with { padding: 56px 0 8px; text-align: center; }
.sl-with p { font-size: 15px; color: var(--ink-3); }
.sl-with ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 14px 36px; font-size: 15px; color: var(--ink-2); }
.sl-with li { display: inline-flex; align-items: center; gap: 10px; }
.sl-with img { width: 32px; height: 32px; }

/* --- Meet Sciwand: six features --------------------------------------- */
.sl-meet { padding: 96px 0 104px; }
.sl-meet > .wrap > h2 { text-align: center; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; }
.sl-grid { list-style: none; padding: 0; margin: 64px auto 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
.sl-grid svg { width: 26px; height: 26px; color: var(--violet); }
.sl-grid h3 { font-size: 24px; line-height: 1.2; margin: 16px 0 10px; }
.sl-grid p { font-size: 16px; color: var(--ink-2); }

/* --- Closing line + CTA ------------------------------------------------ */
.sl-more { text-align: center; padding: 0 0 96px; font-size: 17px; color: var(--ink-2); }
.sl-more a { color: var(--ink); }

/* --- Narrow screens ---------------------------------------------------- */
@media (max-width: 900px) {
  .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
}
@media (max-width: 560px) {
  .sl-meet { padding: 72px 0 80px; }
  .sl-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .sl-grid h3 { font-size: 22px; }
}