/* Feature mockups (section "Funkcje").
   They used to scale their type with container units inside a fixed 4:3 frame, which made the
   phone text ~7px and let it overflow the frame whenever the browser enforces a minimum font
   size or larger text. Now the type has fixed, readable sizes and the frame grows with its
   content (min-height only). */
.mockup { min-height: 22rem; }
@media (min-width: 640px) { .mockup { min-height: 26rem; } }

.mockup-card { font-size: 15px; }

.phone {
  width: 15rem;
  max-width: 100%;
  border-width: 6px;
  border-radius: 2rem;
  padding: 0.875rem;
  font-size: 13px;
  line-height: 1.35;
}
.phone__bar { display: flex; justify-content: space-between; margin-bottom: 0.875rem; padding: 0 0.375rem; font-size: 11px; font-weight: 600; }
.phone__title { padding: 0 0.25rem; font-size: 17px; line-height: 1.25; }
.phone__list { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.phone__item { border-radius: 0.875rem; padding: 0.625rem 0.75rem; }
.phone__item-title { font-weight: 500; }
.phone__tag { display: block; font-size: 12px; font-weight: 600; }
.phone__meta { font-size: 12px; }
.phone__cta { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 0.75rem; border-radius: 9999px; padding: 0.5rem; font-size: 12px; font-weight: 600; }
.phone__cta svg { width: 13px; height: 13px; }