/* --- section-auto-renew-benefits ------------------------------
   Diptych 50/50, teks kiri media kanan. Disalin dari sections.css
   clvn-desk apa adanya. Yang berubah hanya nama blok dan nama
   elemennya. Semua angka hasil ukur, jangan dirapikan. */
.section-auto-renew-benefits {
  display: flex;
  flex-direction: row;
  min-height: calc(100svh - var(--header-height-fixed));
}
/* Terukur: kolom kiri flex COLUMN dengan justify-content center, bukan
   row dengan align-items center. Bedanya nyata: di row,
   .section-auto-renew-benefits__content menyusut ke lebar konten dan
   bisa lebih sempit dari 50rem, jadi teks memutus baris di tempat yang
   salah. Di column dia melar penuh sampai batas max-width-nya. */
.section-auto-renew-benefits__left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem var(--margin);
}
/* max-width 50rem = 444.16px @1280. rem tetap, bukan kolom. */
.section-auto-renew-benefits__content { max-width: 50rem; display: flex; flex-direction: column; gap: 4rem; }
.section-auto-renew-benefits__titles { display: flex; flex-direction: column; gap: 2.4rem; }
.section-auto-renew-benefits__eyebrow { color: var(--blue); }
.section-auto-renew-benefits__heading { margin: 0; }

.section-auto-renew-benefits__list { list-style: none; margin: 2.4rem 0; padding: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 2.4rem; }
.section-auto-renew-benefits__item {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--grey-disabled);
}
.section-auto-renew-benefits__item:last-child { border-bottom: 0; padding-bottom: 0; }
/* Terukur 13.32px = 1.5rem, flex-shrink 0, TANPA margin-top. Ikonnya
   memang duduk rata atas terhadap baris pertama teks. */
.section-auto-renew-benefits__check { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--blue); }

.section-auto-renew-benefits__ctas { display: flex; flex-direction: row; gap: 1.2rem; justify-content: flex-start; }
.section-auto-renew-benefits__cta { flex: 1; padding: 1.8rem 3.2rem; white-space: nowrap; }

.section-auto-renew-benefits__right { width: 50%; }
.section-auto-renew-benefits__right img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1023.98px) {
  /* column-reverse, jadi gambar naik ke ATAS. Terukur.
     min-height-nya SENGAJA menyimpang dari hasil ukur. Aslinya 720px
     angka mati, dan itu lebih tinggi daripada layar di setiap ponsel
     kecil: iPhone SE cuma 667px, jadi section ini memaksa 53px lebih
     panjang daripada viewport padahal gambar 47rem plus teksnya sudah
     menentukan tingginya sendiri dan sudah lebih dari cukup. 100svh
     memberi maksud yang sama, "setidaknya setinggi layar", tanpa
     mengarang tinggi yang tidak ada isinya. */
  .section-auto-renew-benefits { flex-direction: column-reverse; min-height: 100svh; }
  .section-auto-renew-benefits__left, .section-auto-renew-benefits__right { width: 100%; }
  .section-auto-renew-benefits__left { padding: 4rem var(--margin); }
  .section-auto-renew-benefits__right { height: 47rem; }
  .section-auto-renew-benefits__ctas { justify-content: center; gap: 1rem; }
}