/* Real, operator-provided examples. Keep the complete artwork visible. */
.style-showcase { min-width: 0; margin: 0; border: 1px solid #3d4644; border-radius: 22px; overflow: hidden; background: #181e22; }
.style-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #3d4644; }
.style-showcase-item { min-width: 0; margin: 0; background: #14191d; }
.style-showcase-item a { display: block; }
.style-showcase .style-showcase-item img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 2 / 3; object-fit: contain; object-position: center; border-radius: 0; background: #111619; }
.style-showcase .style-showcase-item:first-child img { background: #fafafa; }
.style-showcase .style-showcase-item figcaption { display: grid; gap: 7px; min-height: 0; padding: 14px 12px; margin: 0; background: #181e22; color: #e9efed; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.style-showcase-item figcaption small { color: #b6c3c4; font-size: 11px; line-height: 1.6; }
.style-showcase-caption { display: grid; gap: 8px; padding: 20px; border-top: 1px solid #3d4644; }
.style-showcase-caption strong { color: #e9efed; font-size: 16px; line-height: 1.5; }
.style-showcase-caption p { margin: 0; color: #b6c3c4; font-size: 12px; line-height: 1.7; }
.style-showcase a:focus-visible { outline: 3px solid #c9f98b; outline-offset: -3px; }
.services-grid .style-showcase { border-width: 0 0 1px; border-radius: 0; }
.login-view .style-showcase { width: 100%; }
@media (max-width: 480px) {
  .style-showcase .style-showcase-item figcaption { font-size: 12px; padding: 11px 8px; }
  .style-showcase-item figcaption small { font-size: 10px; }
  .style-showcase-caption { padding: 16px; }
}

.style-showcase .style-showcase-start { display: inline-block; margin-top: 4px; padding-block: 9px; color: #c9f98b; font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }