.sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-48);
  padding: var(--sp-96) var(--container-pad) var(--sp-48);
}

.sync__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  max-width: 63.6rem; /* 1018px */
}

.sync__card {
  display: flex;
  gap: var(--sp-24);
  align-items: stretch;
  /* Same content column as every other section: full width inside the section
     padding, capped at --container-width — aligns with the info block below. */
  width: 100%;
  max-width: var(--container-width);
  padding: 0.25rem 0.25rem 0.25rem var(--sp-32);
  border-radius: var(--radius-12);
  background: var(--surface-light-blue-01);
}

.sync__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-32) 0;
  font-size: var(--fs-body-18);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--text-primary);
}

.sync__text strong {
  font-weight: 600;
  line-height: 1.4;
}

.sync__text p {
  margin: 0 0 var(--sp-16);
}

.sync__table {
  display: flex;
  align-items: stretch;
  width: 40.5rem; /* 648px, 3 × 216px cols */
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface-white);
  padding: var(--sp-8);
  gap: 0;
}

.sync__col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-12);
}

.sync__col--orange { background: var(--surface-orange); border-radius: 0.5rem 0 0 0.5rem; }
.sync__col--blue { background: var(--surface-light-blue-02); }
.sync__col--purple { background: var(--surface-purple-01); border-radius: 0 0.5rem 0.5rem 0; }

.sync__col-title {
  font-size: var(--fs-body-18);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.4;
  color: var(--text-primary);
  text-align: center;
}

.sync__col-rows {
  flex: 1 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sync__divider {
  width: 9.5rem; /* 153px */
  height: 1px;
  background: var(--ui-disable);
}

.sync__row-label {
  font-size: var(--fs-body-16);
  line-height: 1.4;
  color: var(--text-primary);
  text-align: center;
}

.sync__check {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-white);
  border-radius: 50%;
}

.sync__check::after {
  content: "";
  width: 0.625rem;
  height: 0.375rem;
  border: solid var(--text-primary);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translateY(-1px);
}