/* Zoho benefits editorial field guide. */
.reset-article {
  counter-reset: zoho-app-group;
}

.reset-article__app-group {
  counter-increment: zoho-app-group;
  margin-top: clamp(54px, 9vw, 88px);
  padding-top: 24px;
  border-top: 3px solid var(--v-accent);
  scroll-margin-top: 104px;
}

.reset-article__app-group > h2 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  margin-top: 0;
}

.reset-article__app-group > h2::before {
  content: counter(zoho-app-group, decimal-leading-zero);
  color: var(--v-accent);
  font: 500 0.72rem/1 var(--reset-font-mono);
  letter-spacing: 0.08em;
}

.reset-article__app-group > p {
  margin-left: 48px;
  color: var(--reset-muted);
  font-family: var(--reset-font-serif);
  font-size: 1.08rem;
  line-height: 1.6;
}

.reset-article__app-group .reset-article__decision-table tbody tr {
  transition: background-color var(--reset-duration-fast) var(--reset-ease-standard);
}

.reset-article__app-group .reset-article__decision-table tbody tr:hover {
  background: color-mix(in srgb, var(--v-tint) 48%, transparent);
}

.reset-article__app-group .reset-article__decision-table tbody th {
  width: 31%;
  color: var(--v-accent-text, var(--v-accent));
}

@media (max-width: 640px) {
  .reset-article__app-group {
    margin-top: 58px;
    padding-top: 18px;
  }

  .reset-article__app-group > h2 {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .reset-article__app-group > p {
    margin-left: 38px;
    font-size: 1rem;
  }

  .reset-article__app-group .reset-article__decision-table-wrap {
    overflow: visible;
  }

  .reset-article__app-group .reset-article__decision-table,
  .reset-article__app-group .reset-article__decision-table tbody,
  .reset-article__app-group .reset-article__decision-table tr,
  .reset-article__app-group .reset-article__decision-table th,
  .reset-article__app-group .reset-article__decision-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .reset-article__app-group .reset-article__decision-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .reset-article__app-group .reset-article__decision-table tbody {
    display: grid;
    gap: 12px;
  }

  .reset-article__app-group .reset-article__decision-table tbody tr {
    border: 1px solid var(--reset-line);
    background: color-mix(in srgb, var(--reset-white) 34%, transparent);
  }

  .reset-article__app-group .reset-article__decision-table tbody th,
  .reset-article__app-group .reset-article__decision-table tbody td {
    border: 0;
  }

  .reset-article__app-group .reset-article__decision-table tbody th {
    padding: 14px 16px 11px;
    border-bottom: 1px solid var(--reset-line);
    background: var(--v-tint);
    font: 650 0.96rem/1.35 var(--reset-font-sans);
  }

  .reset-article__app-group .reset-article__decision-table tbody td {
    padding: 13px 16px 16px;
    color: #35413c;
    font-family: var(--reset-font-serif);
    font-size: 1rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reset-article__app-group .reset-article__decision-table tbody tr {
    transition: none;
  }
}