/* Home page only: the Why section */
.hero h1 { max-width: 15em; }
.why-t { width: 100%; margin-top: var(--s6); border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--wr); overflow: hidden; }
.why-t th, .why-t td { width: 50%; padding: 20px 24px; text-align: left; vertical-align: top; }
.why-t th { font: 600 13px/18px var(--font); color: var(--text2); border-bottom: 1px solid var(--line); }
.why-t td { border-top: 1px solid var(--line); }
.why-t tbody tr:first-child td { border-top: 0; }
.why-t th:first-child, .why-t td:first-child { background: var(--side); color: var(--text2); border-right: 1px solid var(--line); }
.why-t td b { display: block; margin-bottom: 4px; font-weight: 600; }
@media (max-width: 640px) {
  .why-t, .why-t tbody, .why-t tr, .why-t td { display: block; width: auto; }
  .why-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .why-t td { padding: 16px; }
  .why-t td:first-child { border-right: 0; }
  .why-t td:first-child::before { content: "Without"; display: block; margin-bottom: 4px; font: 600 13px/18px var(--font); }
  .why-t tbody tr:first-child td + td { border-top: 1px solid var(--line); }
}