/* Layout primitives */
.card {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1400px, calc(100% - 2rem));
  overflow: hidden;
  margin: 2rem auto;
}

.copy { padding: 2.8rem 3rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.visual { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9) 0%, transparent 60%); padding: 1.75rem; }
.visual img { display: block; margin: 0 auto; max-width: 440px; width: 90%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15)); }
.mobile-img { display: none; }

@media (max-width: 800px) { .card { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .mobile-img { display: block; width: 70vw; max-width: 280px; margin: 3vh auto 1.8vh; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15)); }
  .visual { display: none; }
  .card { border-radius: 18px; width: auto; max-width: calc(100% - 2rem); margin: 2rem; }
  .visual { order: 3; padding: 4vh 0 2vh; }
  .visual img { width: 70vw; max-width: 280px; }
  .copy { padding: 1.8rem 1.3rem; gap: 0.6rem; }
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.3rem !important; }
  .copy p { font-size: 1rem; }
  .benefit-list li { font-size: 0.85rem; padding: 0.7rem 1.1rem; }
  .btn { width: 100%; text-align: center; }
}
@media (min-width: 801px) and (max-width: 1024px) {
  /* Tablet: two columns with text slightly wider than image */
  .card { grid-template-columns: 1fr 1fr; width: auto; max-width: min(900px, calc(100% - 2rem)); margin: 2rem auto; }
  .visual { padding: 1vh; justify-content: center !important; align-items: center !important; }
  .visual img { max-width: 500px; width: 90%; }
  .copy { padding: 1rem 1.2rem; }
  h1 { font-size: 2.1rem !important; }
  h2 { font-size: 1.15rem !important; }
  /* Keep benefit pills on one line on tablet */
  .benefit-list { flex-wrap: nowrap; justify-content: center; }
}

/* Global small-screen tweaks */
@media (max-width: 450px) {
  .copy { padding: 1.2rem 0.9rem; gap: 0.5rem; }
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.8rem !important; }
  p { font-size: 0.95rem; }
  .benefit-list { gap: 0.3rem 0.4rem; width: 100%; margin: 0.5rem auto 0.7rem; }
  .benefit-list li { font-size: 0.9rem; padding: 0.7rem 1.05rem; gap: 0.25rem; }
  .benefit-list li svg { width: 18px; height: 18px; }
  .logo { width: 160px !important; }
}