/* /features pages — hero, alternating screenshot blocks, fact card.
   Everything else (header, cards, grids, footer) comes from styles.css. */

.feat-hero { padding: 84px 0 56px; }
.feat-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em; margin: 14px 0 18px; }
.feat-hero .lead { max-width: 760px; margin-bottom: 30px; }
.feat-hero .hero-note { margin-top: 16px; }

.feat-block { padding: 56px 0; }
.feat-block .grid-2 { gap: 56px; }
.feat-block h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; margin-bottom: 14px; }
.feat-block p { color: var(--text-2); font-size: 1.02rem; }
/* Odd blocks put the screenshot first, so the page alternates down the column.
   RTL inherits this for free — `order` follows the writing direction. */
.feat-block.flip .feat-copy { order: 2; }
.feat-block.flip .feat-shot { order: 1; }

.feat-shot { display: flex; justify-content: center; }
.feat-shot img {
  width: 100%; max-width: 264px; height: auto;
  border-radius: 26px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.feat-facts h2 { font-size: 1.3rem; margin-bottom: 16px; }
.feat-facts ul { list-style: none; display: grid; gap: 12px; }
.feat-facts li {
  color: var(--text-2); font-size: 0.98rem;
  padding-inline-start: 26px; position: relative;
}
.feat-facts li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-text);
}

.feat-link { display: block; color: inherit; }
.feat-link:hover { text-decoration: none; }
.feat-link h3 { color: var(--text); }
.feat-link p { color: var(--text-2); }

.feat-cta { text-align: center; padding: 40px 28px; }
.feat-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
.feat-cta p { color: var(--text-2); max-width: 640px; margin: 0 auto 26px; }
.feat-cta .store-row { justify-content: center; }

@media (max-width: 860px) {
  .feat-hero { padding: 60px 0 40px; }
  .feat-block { padding: 40px 0; }
  .feat-block .grid-2 { gap: 32px; }
  /* Stacked, the screenshot always reads better after the words it illustrates. */
  .feat-block.flip .feat-copy { order: 1; }
  .feat-block.flip .feat-shot { order: 2; }
}