.home-features-preview .home-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
.home-features-preview .home-feature {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    min-height: 320px;
    overflow: hidden;
    border-radius: 40px;
    background: #eff3f5;
    color: #272727;
    text-decoration: none;
}
.home-features-preview .home-feature:focus-visible { outline: 3px solid #314eff; outline-offset: 4px; }
.home-features-preview .home-feature:hover h3 { color: #314eff; }
.home-features-preview .home-feature-copy {
    position: relative;
    z-index: 1;
    padding: 32px 28px 0 76px;
}
.home-features-preview .home-feature-icon { position: absolute; left: 32px; top: 34px; object-fit: contain; }
.home-features-preview h3 { margin: 0 0 8px; font-size: 24px; line-height: 28px; font-weight: 500; }
.home-features-preview p { margin: 0; color: rgba(39, 39, 39, .64); font-size: 16px; line-height: 24px; }
.home-features-preview .home-feature-image { display: block; width: 100%; height: auto; margin-top: auto; }
.home-features-preview .home-feature--billing .home-feature-image { padding: 24px; }
.home-features-preview .home-feature--receipt { min-height: 480px; }
.home-features-preview .home-feature--receipt .home-feature-image { width: 110%; align-self: center; margin-top: 8px; }
.home-features-preview .home-feature--accounting { min-height: 220px; }
.home-features-preview .home-feature--accounting .home-feature-image {
    max-height: 110px;
    object-fit: cover;
    object-position: top;
    /* The export contains a white arc above the document's straight top edge. */
    clip-path: inset(23% 0 0);
}
.home-features-preview .home-feature--mobile { min-height: 250px; }
.home-features-preview .home-feature--mobile p { max-width: 100px; line-height: 22px; }
.home-features-preview .home-feature--mobile .home-feature-image {
    position: absolute;
    width: 144px;
    right: -20px;
    bottom: -20px;
    /* The Figma export already contains the phone's rotation. */
    filter: drop-shadow(-6px -6px 12px rgba(0, 0, 0, .2));
}
.home-features-preview .home-feature--pay .home-feature-image { width: 135%; max-width: none; margin-left: -10%; }
.home-features-preview .home-feature--api { min-height: 220px; }
.home-features-preview .home-feature-partners { display: grid; gap: 12px; margin-top: auto; padding: 20px 0 24px; }
.home-features-preview .home-feature-partners img { display: block; width: 100%; height: auto; }
.home-features-preview .home-feature--bank { min-height: 220px; }
.home-features-preview .home-feature--bank .home-feature-image { width: 100%; height: 70px; object-fit: cover; object-position: top; }
.home-features-preview .home-feature--suara {
    min-height: 440px;
    background: #0a121b url('/images/home/suara-background-preview.webp') center / cover no-repeat;
}
.home-features-preview .home-feature-suara-head { display: flex; align-items: flex-start; gap: 16px; padding: 32px; z-index: 1; }
.home-features-preview .home-feature-suara-head img { flex: 0 0 91px; width: 91px; height: 41px; object-fit: contain; }
.home-features-preview .home-feature-suara-head p { color: #fff; }
.home-features-preview .home-feature--suara .home-feature-image { width: 80%; align-self: center; }
@media (max-width: 767.98px) {
    .home-features-preview .home-feature--billing { order: 1; }
    .home-features-preview .home-feature--suara { order: 2; }
    .home-features-preview .home-feature--accounting { order: 3; }
    .home-features-preview .home-feature--mobile { order: 4; }
    .home-features-preview .home-feature--pay { order: 5; }
    .home-features-preview .home-feature--api { order: 6; }
    .home-features-preview .home-feature--bank { order: 7; }
    .home-features-preview .home-feature--receipt { order: 8; }
}
@media (min-width: 768px) {
    .home-features-preview .home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .home-features-preview .home-feature--billing,
    .home-features-preview .home-feature--suara { grid-column: span 2; }
    .home-features-preview .home-feature--billing .home-feature-image { margin-top: 20px; }
}
@media (min-width: 1400px) {
    .home-features-preview .home-feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, 220px);
        grid-template-areas: 'billing billing receipt accounting' 'billing billing receipt mobile' 'pay api suara suara' 'pay bank suara suara';
        gap: 40px;
    }
    .home-features-preview .home-feature { min-height: 0; border-radius: 56px; }
    .home-features-preview .home-feature--billing { grid-area: billing; }
    .home-features-preview .home-feature--receipt { grid-area: receipt; }
    .home-features-preview .home-feature--accounting { grid-area: accounting; }
    .home-features-preview .home-feature--mobile { grid-area: mobile; }
    .home-features-preview .home-feature--pay { grid-area: pay; }
    .home-features-preview .home-feature--api { grid-area: api; }
    .home-features-preview .home-feature--bank { grid-area: bank; }
    .home-features-preview .home-feature--suara { grid-area: suara; }
    .home-features-preview .home-feature--billing .home-feature-image { margin-top: auto; }
    .home-features-preview .home-feature--receipt .home-feature-image { position: absolute; bottom: -40px; width: 100%; }
    .home-features-preview .home-feature--accounting .home-feature-image { position: absolute; bottom: -16px; }
    .home-features-preview .home-feature--bank .home-feature-image { position: absolute; bottom: 0; }
    .home-features-preview .home-feature--suara .home-feature-image { position: absolute; width: 74.2%; bottom: -1px; left: 12.9%; }
}